npm - @mastra/playground-ui - Versions diffs - 60.0.0-alpha.8 → 60.0.0 - Mend

@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

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

Files changed (1883) hide show

package/dist/domains/traces/components/span-payload/span-processor-attributes.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-processor-attributes.cjs.js","sources":["../../../../../src/domains/traces/components/span-payload/span-processor-attributes.tsx"],"sourcesContent":["import { describeProcessorPipeline } from '@mastra/core/observability';\nimport type { ProcessorPipelineDescription } from '@mastra/core/observability';\nimport type { SpanRecord } from '../../types';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadMessages } from './span-payload-messages';\nimport { SpanPayloadCollapsible, SpanPayloadField } from './span-payload-primitives';\nimport { asCoreSpan } from './span-payload-registry';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { formatDuration } from '@/utils/duration';\n\n/** Mutation kinds as actions a reader recognises. /\nconst MUTATION_LABELS: Record<string, string> = {\n add: 'Added messages',\n addSystem: 'Added system message',\n removeByIds: 'Removed messages',\n clear: 'Cleared messages',\n};\n\nfunction Mutations({ mutations }: { mutations: NonNullable<ProcessorPipelineDescription['messageListMutations']> }) {\n return (\n <ul data-slot=\"span-processor-mutations\" className=\"flex flex-col gap-1.5\">\n {mutations.map((mutation, index) => {\n if (typeof mutation !== 'object' \|\| mutation === null) {\n return (\n <li key={index}>\n <SpanPayloadJson value={mutation} />\n </li>\n );\n }\n const detail = [\n mutation.source,\n mutation.tag,\n mutation.count !== undefined ? `${mutation.count} message${mutation.count === 1 ? '' : 's'}` : undefined,\n ]\n .filter(Boolean)\n .join(' · ');\n\n return (\n <li key={index} className=\"flex flex-col gap-2\">\n <div className=\"flex flex-wrap items-center gap-2 text-body text-foreground\">\n <span>{MUTATION_LABELS[mutation.type] ?? mutation.type}</span>\n {detail && <span className=\"text-meta text-placeholder\">{detail}</span>}\n </div>\n {mutation.message !== undefined && <SpanPayloadMessages value={[mutation.message]} />}\n {mutation.ids && mutation.ids.length > 0 && (\n <SpanPayloadCollapsible label={`Removed ids (${mutation.ids.length})`}>\n <SpanPayloadJson value={mutation.ids} />\n </SpanPayloadCollapsible>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport interface SpanProcessorAttributesProps {\n span: SpanRecord;\n}\n\n/\n The runner-owned attributes of a processor span, as labelled values.\n * `describeProcessorPipeline` decides which keys are known, so \"Other attributes\"\n * holds only what this view does not show.\n */\nexport function SpanProcessorAttributes({ span }: SpanProcessorAttributesProps) {\n const pipeline = describeProcessorPipeline(asCoreSpan(span));\n if (!pipeline) return null;\n\n const { phaseLabel, executor, processorIndex, hookDurationMs, messageListMutations, tripwireAbort, rest } = pipeline;\n const processorName = span.entityName ?? span.entityId;\n const hookDuration = hookDurationMs === undefined ? undefined : formatDuration(hookDurationMs);\n\n return (\n <Card data-slot=\"span-processor-attributes-card\" className=\"min-w-0\">\n <CardContent>\n <div data-slot=\"span-processor-attributes\" className=\"flex flex-col gap-3\">\n <DataKeysAndValues>\n {processorName && (\n <>\n <DataKeysAndValues.Key>Processor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorName}</DataKeysAndValues.Value>\n </>\n )}\n <>\n <DataKeysAndValues.Key>Phase</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{phaseLabel}</DataKeysAndValues.Value>\n </>\n {executor && (\n <>\n <DataKeysAndValues.Key>Executor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{executor === 'workflow' ? 'Workflow' : 'Legacy'}</DataKeysAndValues.Value>\n </>\n )}\n {processorIndex !== undefined && (\n <>\n <DataKeysAndValues.Key>Pipeline position</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorIndex + 1}</DataKeysAndValues.Value>\n </>\n )}\n {hookDuration && (\n <>\n <DataKeysAndValues.Key>Hook duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>\n <Txt as=\"span\" variant=\"body-sm\" font=\"mono\">\n {hookDuration}\n </Txt>\n </DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n {tripwireAbort && (\n <Notice variant=\"destructive\" title=\"Tripwire\">\n {tripwireAbort.reason && <Notice.Message>{tripwireAbort.reason}</Notice.Message>}\n {tripwireAbort.retry !== undefined && (\n <DataKeysAndValues>\n <DataKeysAndValues.Key>Retry</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{tripwireAbort.retry ? 'Yes' : 'No'}</DataKeysAndValues.Value>\n </DataKeysAndValues>\n )}\n {tripwireAbort.metadata !== undefined && (\n <SpanPayloadCollapsible label=\"Metadata\">\n <SpanPayloadJson value={tripwireAbort.metadata} />\n </SpanPayloadCollapsible>\n )}\n </Notice>\n )}\n\n {messageListMutations && messageListMutations.length > 0 && (\n <SpanPayloadField label=\"Message list changes\">\n <Mutations mutations={messageListMutations} />\n </SpanPayloadField>\n )}\n\n {rest && (\n <SpanPayloadCollapsible label=\"Other attributes\">\n <SpanPayloadJson value={rest} />\n </SpanPayloadCollapsible>\n )}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","SpanPayloadMessages","SpanPayloadCollapsible","describeProcessorPipeline","asCoreSpan","formatDuration","Card","CardContent","DataKeysAndValues","Fragment","Txt","Notice","SpanPayloadField"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,eAAA,GAA0C;AAAA,EAC9C,GAAA,EAAK,gBAAA;AAAA,EACL,SAAA,EAAW,sBAAA;AAAA,EACX,WAAA,EAAa,kBAAA;AAAA,EACb,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,SAAA,CAAU,EAAE,SAAA,EAAU,EAAqF;AAClH,EAAA,uBACEA,cAAA,CAAC,IAAA,EAAA,EAAG,WAAA,EAAU,0BAAA,EAA2B,SAAA,EAAU,yBAChD,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,QAAA,EAAU,KAAA,KAAU;AAClC,IAAA,IAAI,OAAO,QAAA,KAAa,QAAA,IAAY,QAAA,KAAa,IAAA,EAAM;AACrD,MAAA,sCACG,IAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,yEAAgB,KAAA,EAAO,QAAA,EAAU,KAD3B,KAET,CAAA;AAAA,IAEJ;AACA,IAAA,MAAM,MAAA,GAAS;AAAA,MACb,QAAA,CAAS,MAAA;AAAA,MACT,QAAA,CAAS,GAAA;AAAA,MACT,QAAA,CAAS,KAAA,KAAU,MAAA,GAAY,CAAA,EAAG,QAAA,CAAS,KAAK,CAAA,QAAA,EAAW,QAAA,CAAS,KAAA,KAAU,CAAA,GAAI,EAAA,GAAK,GAAG,CAAA,CAAA,GAAK;AAAA,KACjG,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,KAAK,CAAA;AAEb,IAAA,uBACEC,eAAA,CAAC,IAAA,EAAA,EAAe,SAAA,EAAU,qBAAA,EACxB,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6DAAA,EACb,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,UAAM,QAAA,EAAA,eAAA,CAAgB,QAAA,CAAS,IAAI,CAAA,IAAK,SAAS,IAAA,EAAK,CAAA;AAAA,QACtD,MAAA,oBAAUA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAA8B,QAAA,EAAA,MAAA,EAAO;AAAA,OAAA,EAClE,CAAA;AAAA,MACC,QAAA,CAAS,YAAY,MAAA,oBAAaA,cAAA,CAACG,iFAAoB,KAAA,EAAO,CAAC,QAAA,CAAS,OAAO,CAAA,EAAG,CAAA;AAAA,MAClF,SAAS,GAAA,IAAO,QAAA,CAAS,IAAI,MAAA,GAAS,CAAA,mCACpCC,4EAAA,EAAA,EAAuB,KAAA,EAAO,gBAAgB,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,CAAA,CAAA,EAChE,QAAA,kBAAAJ,cAAA,CAACC,yEAAgB,KAAA,EAAO,QAAA,CAAS,KAAK,CAAA,EACxC;AAAA,KAAA,EAAA,EATK,KAWT,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;AAWO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAK,EAAiC;AAC9E,EAAA,MAAM,QAAA,GAAWI,uCAAA,CAA0BC,oEAAA,CAAW,IAAI,CAAC,CAAA;AAC3D,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAEtB,EAAA,MAAM,EAAE,YAAY,QAAA,EAAU,cAAA,EAAgB,gBAAgB,oBAAA,EAAsB,aAAA,EAAe,MAAK,GAAI,QAAA;AAC5G,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,IAAc,IAAA,CAAK,QAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAYC,8BAAe,cAAc,CAAA;AAE7F,EAAA,uBACEP,cAAA,CAACQ,SAAA,EAAA,EAAK,WAAA,EAAU,gCAAA,EAAiC,SAAA,EAAU,SAAA,EACzD,QAAA,kBAAAR,cAAA,CAACS,gBAAA,EAAA,EACC,QAAA,kBAAAP,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,2BAAA,EAA4B,WAAU,qBAAA,EACnD,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAACQ,mCAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,aAAA,oBACCR,eAAA,CAAAS,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,wBAChCV,cAAA,CAACU,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,aAAA,EAAc;AAAA,OAAA,EAC1C,CAAA;AAAA,sBAEFR,eAAA,CAAAS,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBAC5BV,cAAA,CAACU,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,UAAA,EAAW;AAAA,OAAA,EACvC,CAAA;AAAA,MACC,4BACCR,eAAA,CAAAS,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,uCAC9BA,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,QAAA,KAAa,UAAA,GAAa,aAAa,QAAA,EAAS;AAAA,OAAA,EAC5E,CAAA;AAAA,MAED,cAAA,KAAmB,0BAClBR,eAAA,CAAAS,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAAA,wBACxCV,cAAA,CAACU,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,2BAAiB,CAAA,EAAE;AAAA,OAAA,EAC/C,CAAA;AAAA,MAED,gCACCR,eAAA,CAAAS,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpCV,cAAA,CAACU,mCAAA,CAAkB,KAAA,EAAlB,EACC,QAAA,kBAAAV,cAAA,CAACY,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,MAAA,EACnC,wBACH,CAAA,EACF;AAAA,OAAA,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,IAEC,iCACCV,eAAA,CAACW,aAAA,EAAA,EAAO,OAAA,EAAQ,aAAA,EAAc,OAAM,UAAA,EACjC,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,0BAAUb,cAAA,CAACa,aAAA,CAAO,OAAA,EAAP,EAAgB,wBAAc,MAAA,EAAO,CAAA;AAAA,MAC9D,aAAA,CAAc,KAAA,KAAU,MAAA,oBACvBX,eAAA,CAACQ,mCAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAV,cAAA,CAACU,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,uCAC3BA,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,aAAA,CAAc,KAAA,GAAQ,QAAQ,IAAA,EAAK;AAAA,OAAA,EAC/D,CAAA;AAAA,MAED,aAAA,CAAc,QAAA,KAAa,MAAA,oBAC1BV,cAAA,CAACI,4EAAA,EAAA,EAAuB,KAAA,EAAM,UAAA,EAC5B,QAAA,kBAAAJ,cAAA,CAACC,qEAAA,EAAA,EAAgB,KAAA,EAAO,aAAA,CAAc,QAAA,EAAU,CAAA,EAClD;AAAA,KAAA,EAEJ,CAAA;AAAA,IAGD,oBAAA,IAAwB,oBAAA,CAAqB,MAAA,GAAS,CAAA,oBACrDD,cAAA,CAACc,sEAAA,EAAA,EAAiB,KAAA,EAAM,sBAAA,EACtB,QAAA,kBAAAd,cAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,oBAAA,EAAsB,CAAA,EAC9C,CAAA;AAAA,IAGD,IAAA,mCACEI,4EAAA,EAAA,EAAuB,KAAA,EAAM,oBAC5B,QAAA,kBAAAJ,cAAA,CAACC,qEAAA,EAAA,EAAgB,KAAA,EAAO,IAAA,EAAM,CAAA,EAChC;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"span-processor-attributes.cjs.js","sources":["../../../../../src/domains/traces/components/span-payload/span-processor-attributes.tsx"],"sourcesContent":["import { describeProcessorPipeline } from '@mastra/core/observability';\nimport type { ProcessorPipelineDescription } from '@mastra/core/observability';\nimport type { SpanRecord } from '../../types';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadMessages } from './span-payload-messages';\nimport { SpanPayloadCollapsible, SpanPayloadField } from './span-payload-primitives';\nimport { asCoreSpan } from './span-payload-registry';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { formatDuration } from '@/utils/duration';\n\n/** Mutation kinds as actions a reader recognises. /\nconst MUTATION_LABELS: Record<string, string> = {\n add: 'Added messages',\n addSystem: 'Added system message',\n removeByIds: 'Removed messages',\n clear: 'Cleared messages',\n};\n\nfunction Mutations({ mutations }: { mutations: NonNullable<ProcessorPipelineDescription['messageListMutations']> }) {\n return (\n <ul data-slot=\"span-processor-mutations\" className=\"flex flex-col gap-1.5\">\n {mutations.map((mutation, index) => {\n if (typeof mutation !== 'object' \|\| mutation === null) {\n return (\n <li key={index}>\n <SpanPayloadJson value={mutation} />\n </li>\n );\n }\n const detail = [\n mutation.source,\n mutation.tag,\n mutation.count !== undefined ? `${mutation.count} message${mutation.count === 1 ? '' : 's'}` : undefined,\n ]\n .filter(Boolean)\n .join(' · ');\n\n return (\n <li key={index} className=\"flex flex-col gap-2\">\n <div className=\"flex flex-wrap items-center gap-2 text-body text-foreground\">\n <span>{MUTATION_LABELS[mutation.type] ?? mutation.type}</span>\n {detail && (\n <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n {detail}\n </Txt>\n )}\n </div>\n {mutation.message !== undefined && <SpanPayloadMessages value={[mutation.message]} />}\n {mutation.ids && mutation.ids.length > 0 && (\n <SpanPayloadCollapsible label={`Removed ids (${mutation.ids.length})`}>\n <SpanPayloadJson value={mutation.ids} />\n </SpanPayloadCollapsible>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport interface SpanProcessorAttributesProps {\n span: SpanRecord;\n}\n\n/\n The runner-owned attributes of a processor span, as labelled values.\n * `describeProcessorPipeline` decides which keys are known, so \"Other attributes\"\n * holds only what this view does not show.\n */\nexport function SpanProcessorAttributes({ span }: SpanProcessorAttributesProps) {\n const pipeline = describeProcessorPipeline(asCoreSpan(span));\n if (!pipeline) return null;\n\n const { phaseLabel, executor, processorIndex, hookDurationMs, messageListMutations, tripwireAbort, rest } = pipeline;\n const processorName = span.entityName ?? span.entityId;\n const hookDuration = hookDurationMs === undefined ? undefined : formatDuration(hookDurationMs);\n\n return (\n <Card data-slot=\"span-processor-attributes-card\" className=\"min-w-0\">\n <CardContent>\n <div data-slot=\"span-processor-attributes\" className=\"flex flex-col gap-3\">\n <DataKeysAndValues>\n {processorName && (\n <>\n <DataKeysAndValues.Key>Processor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorName}</DataKeysAndValues.Value>\n </>\n )}\n <>\n <DataKeysAndValues.Key>Phase</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{phaseLabel}</DataKeysAndValues.Value>\n </>\n {executor && (\n <>\n <DataKeysAndValues.Key>Executor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{executor === 'workflow' ? 'Workflow' : 'Legacy'}</DataKeysAndValues.Value>\n </>\n )}\n {processorIndex !== undefined && (\n <>\n <DataKeysAndValues.Key>Pipeline position</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorIndex + 1}</DataKeysAndValues.Value>\n </>\n )}\n {hookDuration && (\n <>\n <DataKeysAndValues.Key>Hook duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>\n <Txt as=\"span\" variant=\"body-sm\" font=\"mono\">\n {hookDuration}\n </Txt>\n </DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n {tripwireAbort && (\n <Notice variant=\"destructive\" title=\"Tripwire\">\n {tripwireAbort.reason && <Notice.Message>{tripwireAbort.reason}</Notice.Message>}\n {tripwireAbort.retry !== undefined && (\n <DataKeysAndValues>\n <DataKeysAndValues.Key>Retry</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{tripwireAbort.retry ? 'Yes' : 'No'}</DataKeysAndValues.Value>\n </DataKeysAndValues>\n )}\n {tripwireAbort.metadata !== undefined && (\n <SpanPayloadCollapsible label=\"Metadata\">\n <SpanPayloadJson value={tripwireAbort.metadata} />\n </SpanPayloadCollapsible>\n )}\n </Notice>\n )}\n\n {messageListMutations && messageListMutations.length > 0 && (\n <SpanPayloadField label=\"Message list changes\">\n <Mutations mutations={messageListMutations} />\n </SpanPayloadField>\n )}\n\n {rest && (\n <SpanPayloadCollapsible label=\"Other attributes\">\n <SpanPayloadJson value={rest} />\n </SpanPayloadCollapsible>\n )}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","Txt","SpanPayloadMessages","SpanPayloadCollapsible","describeProcessorPipeline","asCoreSpan","formatDuration","Card","CardContent","DataKeysAndValues","Fragment","Notice","SpanPayloadField"],"mappings":"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"}

package/dist/domains/traces/components/span-payload/span-processor-attributes.es.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeProcessorPipeline } from '@mastra/core/observability';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-CDE-brSn.js';
+import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-CEflnpwW.js';
 import { asCoreSpan } from './span-payload-registry.es.js';
-import { C as Card, a as CardContent } from '../../../../Card-DmT57Pve.js';
-import { D as DataKeysAndValues } from '../../../../data-keys-and-values-uWBaTX6Y.js';
-import { N as Notice } from '../../../../Notice-BmoN4qOw.js';
+import { C as Card, a as CardContent } from '../../../../Card-DVy0QS4m.js';
+import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';
+import { N as Notice } from '../../../../Notice-Ce3r5x-7.js';
 import { T as Txt } from '../../../../Txt-BP1SRHmL.js';
 import { formatDuration } from '../../../../utils/duration.es.js';
@@ -29,7 +29,7 @@ function Mutations({ mutations }) {
     return /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-body text-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: MUTATION_LABELS[mutation.type] ?? mutation.type }),
-        detail && /* @__PURE__ */ jsx("span", { className: "text-meta text-placeholder", children: detail })
+        detail && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", children: detail })
       ] }),
       mutation.message !== void 0 && /* @__PURE__ */ jsx(SpanPayloadMessages, { value: [mutation.message] }),
       mutation.ids && mutation.ids.length > 0 && /* @__PURE__ */ jsx(SpanPayloadCollapsible, { label: `Removed ids (${mutation.ids.length})`, children: /* @__PURE__ */ jsx(SpanPayloadJson, { value: mutation.ids }) })

package/dist/domains/traces/components/span-payload/span-processor-attributes.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-processor-attributes.es.js","sources":["../../../../../src/domains/traces/components/span-payload/span-processor-attributes.tsx"],"sourcesContent":["import { describeProcessorPipeline } from '@mastra/core/observability';\nimport type { ProcessorPipelineDescription } from '@mastra/core/observability';\nimport type { SpanRecord } from '../../types';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadMessages } from './span-payload-messages';\nimport { SpanPayloadCollapsible, SpanPayloadField } from './span-payload-primitives';\nimport { asCoreSpan } from './span-payload-registry';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { formatDuration } from '@/utils/duration';\n\n/** Mutation kinds as actions a reader recognises. /\nconst MUTATION_LABELS: Record<string, string> = {\n add: 'Added messages',\n addSystem: 'Added system message',\n removeByIds: 'Removed messages',\n clear: 'Cleared messages',\n};\n\nfunction Mutations({ mutations }: { mutations: NonNullable<ProcessorPipelineDescription['messageListMutations']> }) {\n return (\n <ul data-slot=\"span-processor-mutations\" className=\"flex flex-col gap-1.5\">\n {mutations.map((mutation, index) => {\n if (typeof mutation !== 'object' \|\| mutation === null) {\n return (\n <li key={index}>\n <SpanPayloadJson value={mutation} />\n </li>\n );\n }\n const detail = [\n mutation.source,\n mutation.tag,\n mutation.count !== undefined ? `${mutation.count} message${mutation.count === 1 ? '' : 's'}` : undefined,\n ]\n .filter(Boolean)\n .join(' · ');\n\n return (\n <li key={index} className=\"flex flex-col gap-2\">\n <div className=\"flex flex-wrap items-center gap-2 text-body text-foreground\">\n <span>{MUTATION_LABELS[mutation.type] ?? mutation.type}</span>\n {detail && <span className=\"text-meta text-placeholder\">{detail}</span>}\n </div>\n {mutation.message !== undefined && <SpanPayloadMessages value={[mutation.message]} />}\n {mutation.ids && mutation.ids.length > 0 && (\n <SpanPayloadCollapsible label={`Removed ids (${mutation.ids.length})`}>\n <SpanPayloadJson value={mutation.ids} />\n </SpanPayloadCollapsible>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport interface SpanProcessorAttributesProps {\n span: SpanRecord;\n}\n\n/\n The runner-owned attributes of a processor span, as labelled values.\n * `describeProcessorPipeline` decides which keys are known, so \"Other attributes\"\n * holds only what this view does not show.\n */\nexport function SpanProcessorAttributes({ span }: SpanProcessorAttributesProps) {\n const pipeline = describeProcessorPipeline(asCoreSpan(span));\n if (!pipeline) return null;\n\n const { phaseLabel, executor, processorIndex, hookDurationMs, messageListMutations, tripwireAbort, rest } = pipeline;\n const processorName = span.entityName ?? span.entityId;\n const hookDuration = hookDurationMs === undefined ? undefined : formatDuration(hookDurationMs);\n\n return (\n <Card data-slot=\"span-processor-attributes-card\" className=\"min-w-0\">\n <CardContent>\n <div data-slot=\"span-processor-attributes\" className=\"flex flex-col gap-3\">\n <DataKeysAndValues>\n {processorName && (\n <>\n <DataKeysAndValues.Key>Processor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorName}</DataKeysAndValues.Value>\n </>\n )}\n <>\n <DataKeysAndValues.Key>Phase</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{phaseLabel}</DataKeysAndValues.Value>\n </>\n {executor && (\n <>\n <DataKeysAndValues.Key>Executor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{executor === 'workflow' ? 'Workflow' : 'Legacy'}</DataKeysAndValues.Value>\n </>\n )}\n {processorIndex !== undefined && (\n <>\n <DataKeysAndValues.Key>Pipeline position</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorIndex + 1}</DataKeysAndValues.Value>\n </>\n )}\n {hookDuration && (\n <>\n <DataKeysAndValues.Key>Hook duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>\n <Txt as=\"span\" variant=\"body-sm\" font=\"mono\">\n {hookDuration}\n </Txt>\n </DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n {tripwireAbort && (\n <Notice variant=\"destructive\" title=\"Tripwire\">\n {tripwireAbort.reason && <Notice.Message>{tripwireAbort.reason}</Notice.Message>}\n {tripwireAbort.retry !== undefined && (\n <DataKeysAndValues>\n <DataKeysAndValues.Key>Retry</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{tripwireAbort.retry ? 'Yes' : 'No'}</DataKeysAndValues.Value>\n </DataKeysAndValues>\n )}\n {tripwireAbort.metadata !== undefined && (\n <SpanPayloadCollapsible label=\"Metadata\">\n <SpanPayloadJson value={tripwireAbort.metadata} />\n </SpanPayloadCollapsible>\n )}\n </Notice>\n )}\n\n {messageListMutations && messageListMutations.length > 0 && (\n <SpanPayloadField label=\"Message list changes\">\n <Mutations mutations={messageListMutations} />\n </SpanPayloadField>\n )}\n\n {rest && (\n <SpanPayloadCollapsible label=\"Other attributes\">\n <SpanPayloadJson value={rest} />\n </SpanPayloadCollapsible>\n )}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"span-processor-attributes.es.js","sources":["../../../../../src/domains/traces/components/span-payload/span-processor-attributes.tsx"],"sourcesContent":["import { describeProcessorPipeline } from '@mastra/core/observability';\nimport type { ProcessorPipelineDescription } from '@mastra/core/observability';\nimport type { SpanRecord } from '../../types';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadMessages } from './span-payload-messages';\nimport { SpanPayloadCollapsible, SpanPayloadField } from './span-payload-primitives';\nimport { asCoreSpan } from './span-payload-registry';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { formatDuration } from '@/utils/duration';\n\n/** Mutation kinds as actions a reader recognises. /\nconst MUTATION_LABELS: Record<string, string> = {\n add: 'Added messages',\n addSystem: 'Added system message',\n removeByIds: 'Removed messages',\n clear: 'Cleared messages',\n};\n\nfunction Mutations({ mutations }: { mutations: NonNullable<ProcessorPipelineDescription['messageListMutations']> }) {\n return (\n <ul data-slot=\"span-processor-mutations\" className=\"flex flex-col gap-1.5\">\n {mutations.map((mutation, index) => {\n if (typeof mutation !== 'object' \|\| mutation === null) {\n return (\n <li key={index}>\n <SpanPayloadJson value={mutation} />\n </li>\n );\n }\n const detail = [\n mutation.source,\n mutation.tag,\n mutation.count !== undefined ? `${mutation.count} message${mutation.count === 1 ? '' : 's'}` : undefined,\n ]\n .filter(Boolean)\n .join(' · ');\n\n return (\n <li key={index} className=\"flex flex-col gap-2\">\n <div className=\"flex flex-wrap items-center gap-2 text-body text-foreground\">\n <span>{MUTATION_LABELS[mutation.type] ?? mutation.type}</span>\n {detail && (\n <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n {detail}\n </Txt>\n )}\n </div>\n {mutation.message !== undefined && <SpanPayloadMessages value={[mutation.message]} />}\n {mutation.ids && mutation.ids.length > 0 && (\n <SpanPayloadCollapsible label={`Removed ids (${mutation.ids.length})`}>\n <SpanPayloadJson value={mutation.ids} />\n </SpanPayloadCollapsible>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport interface SpanProcessorAttributesProps {\n span: SpanRecord;\n}\n\n/\n The runner-owned attributes of a processor span, as labelled values.\n * `describeProcessorPipeline` decides which keys are known, so \"Other attributes\"\n * holds only what this view does not show.\n */\nexport function SpanProcessorAttributes({ span }: SpanProcessorAttributesProps) {\n const pipeline = describeProcessorPipeline(asCoreSpan(span));\n if (!pipeline) return null;\n\n const { phaseLabel, executor, processorIndex, hookDurationMs, messageListMutations, tripwireAbort, rest } = pipeline;\n const processorName = span.entityName ?? span.entityId;\n const hookDuration = hookDurationMs === undefined ? undefined : formatDuration(hookDurationMs);\n\n return (\n <Card data-slot=\"span-processor-attributes-card\" className=\"min-w-0\">\n <CardContent>\n <div data-slot=\"span-processor-attributes\" className=\"flex flex-col gap-3\">\n <DataKeysAndValues>\n {processorName && (\n <>\n <DataKeysAndValues.Key>Processor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorName}</DataKeysAndValues.Value>\n </>\n )}\n <>\n <DataKeysAndValues.Key>Phase</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{phaseLabel}</DataKeysAndValues.Value>\n </>\n {executor && (\n <>\n <DataKeysAndValues.Key>Executor</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{executor === 'workflow' ? 'Workflow' : 'Legacy'}</DataKeysAndValues.Value>\n </>\n )}\n {processorIndex !== undefined && (\n <>\n <DataKeysAndValues.Key>Pipeline position</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{processorIndex + 1}</DataKeysAndValues.Value>\n </>\n )}\n {hookDuration && (\n <>\n <DataKeysAndValues.Key>Hook duration</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>\n <Txt as=\"span\" variant=\"body-sm\" font=\"mono\">\n {hookDuration}\n </Txt>\n </DataKeysAndValues.Value>\n </>\n )}\n </DataKeysAndValues>\n\n {tripwireAbort && (\n <Notice variant=\"destructive\" title=\"Tripwire\">\n {tripwireAbort.reason && <Notice.Message>{tripwireAbort.reason}</Notice.Message>}\n {tripwireAbort.retry !== undefined && (\n <DataKeysAndValues>\n <DataKeysAndValues.Key>Retry</DataKeysAndValues.Key>\n <DataKeysAndValues.Value>{tripwireAbort.retry ? 'Yes' : 'No'}</DataKeysAndValues.Value>\n </DataKeysAndValues>\n )}\n {tripwireAbort.metadata !== undefined && (\n <SpanPayloadCollapsible label=\"Metadata\">\n <SpanPayloadJson value={tripwireAbort.metadata} />\n </SpanPayloadCollapsible>\n )}\n </Notice>\n )}\n\n {messageListMutations && messageListMutations.length > 0 && (\n <SpanPayloadField label=\"Message list changes\">\n <Mutations mutations={messageListMutations} />\n </SpanPayloadField>\n )}\n\n {rest && (\n <SpanPayloadCollapsible label=\"Other attributes\">\n <SpanPayloadJson value={rest} />\n </SpanPayloadCollapsible>\n )}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/span-summary-description.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataPanel = require('../../../data-panel-D2kZv9vY.cjs');
+const dataPanel = require('../../../data-panel-CjvoI_lx.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');

package/dist/domains/traces/components/span-summary-description.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, HashIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataPanel } from '../../../data-panel-DzzwYYxO.js';
+import { D as DataPanel } from '../../../data-panel-42fdcagQ.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 import { formatDate, formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';

package/dist/domains/traces/components/span-timeline-row.cjs.js CHANGED Viewed

@@ -10,6 +10,7 @@ const domains_traces_components_spanTimingHoverCard = require('./span-timing-hov
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
@@ -60,7 +61,7 @@ function SpanTimelineRow({ ctx }) {
               type: "button",
               className: utils_cn.cn(
                 "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground",
-                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
+                primitives_transitions.focusRingInset
               ),
               children: [
                 spanUI?.color && /* @__PURE__ */ jsxRuntime.jsx(
@@ -98,7 +99,7 @@ function SpanTimelineRow({ ctx }) {
               className: utils_cn.cn(
                 "flex size-5 cursor-pointer items-center justify-center rounded-md",
                 "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
-                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
+                primitives_transitions.focusRing
               ),
               children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
             }

package/dist/domains/traces/components/span-timeline-row.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n type=\"button\"\n className={cn(\n 'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n ~~'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset'~~,\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n <span\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </span>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n ~~'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1'~~,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","Txt","formatDurationPrecise","SpanTimingHoverCard"],"mappings":"~~;;;;;;;;;;;;;;;AAoBO~~,SAAS,eAAA,CAAgB,EAAE,GAAA,EAAI,EAAyB;AAC7D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,GAAA;AACJ,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAG3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,oBAAA,EAAsB;AAC3B,IAAA,MAAA,CAAO,SAAS,cAAA,CAAe,EAAE,OAAO,SAAA,EAAW,QAAA,EAAU,UAAU,CAAA;AAAA,EACzE,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBC,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAC9G,EAAA,MAAM,WAAA,GAAc,aAChB,CAAA,mBAAA,EAAsB,SAAA,CAAU,aAAa,CAAA,CAAA,CAAA,GAC7C,CAAA,iBAAA,EAAoB,UAAU,aAAa,CAAA,CAAA,CAAA;AAE/C,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAWC,WAAA;AAAA,QACT,+GAAA;AAAA,QACA;AAAA,UACE,2EAAA,EAA6E,OAAA;AAAA,UAC7E,eAAA,EAAiB;AAAA;AACnB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EAA6B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EAC7E,QAAA,EAAA;AAAA,UAAA,CAAC,UAAA,oBAAcE,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,0BAEjEH,eAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAWC,WAAA;AAAA,gBACT,gHAAA;AAAA,~~gBACA~~;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,MAAA,EAAQ,KAAA,~~oBACPC~~,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAW,IAAA;AAAA,oBACX,OAAO,MAAA,CAAO,KAAA;AAAA,oBACd,SAAA,EAAU,2CAAA;AAAA,oBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,iBACzC;AAAA,gCAEFA,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,oBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,oBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,oBAClF,SAAA,EAAU,kBAAA;AAAA,oBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA,WACF;AAAA,0BAGAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,oBAAU,WAAA,oBACTA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAS,CAAA,CAAA,KAAK;AACZ,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,SAAA,CAAU,cAAA,EAAe;AAAA,cAC3B,CAAA;AAAA,cACA,YAAA,EAAY,WAAA;AAAA,cACZ,eAAA,EAAe,UAAA;AAAA,cACf,SAAA,EAAWD,WAAA;AAAA,gBACT,mEAAA;AAAA,gBACA,2EAAA;AAAA,~~gBACA~~;AAAA,eACF;AAAA,cAEC,QAAA,EAAA,UAAA,~~mBAAaC~~,cAAA,~~CAACE~~,2BAAA,EAAA,EAAgB,CAAA,kCAAMC,4BAAA,EAAA,EAAiB;AAAA;AAAA,WACxD,EAEJ;AAAA,SAAA,EACF,CAAA;AAAA,wCAECC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,~~0BAAAN~~,eAAA;AAAA,~~YAACO~~,0BAAA;AAAA,YAAA;AAAA,cACC,MAAA,iCAAS,KAAA,EAAA,EAAI,CAAA;AAAA,cACb,SAAA,EAAU,iFAAA;AAAA,cAEV,QAAA,EAAA;AAAA,~~gCAAAL~~,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+CAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,mBAAA;AAAA,oBACZ,SAAA,EAAU,+BAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,sBACpB,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,sBAC3C,iBAAiB,MAAA,EAAQ;AAAA;AAC3B;AAAA,iBACF,EACF,CAAA;AAAA,gCACAA,cAAA,~~CAACM~~,OAAA,EAAA,EAAI,EAAA,EAAG,KAAA,EAAM,SAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAK,QAAO,SAAA,EAAU,iBAAA,EAC7D,QAAA,EAAAC,oCAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,WACF;AAAA,~~0BACAP~~,cAAA,~~CAACQ~~,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,SAAA,EAC/D;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n type=\"button\"\n className={cn(\n 'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n focusRingInset,\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n <span\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </span>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","focusRing","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","Txt","formatDurationPrecise","SpanTimingHoverCard"],"mappings":"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"}

package/dist/domains/traces/components/span-timeline-row.es.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
 import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';
@@ -56,7 +57,7 @@ function SpanTimelineRow({ ctx }) {
               type: "button",
               className: cn(
                 "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground",
-                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
+                focusRingInset
               ),
               children: [
                 spanUI?.color && /* @__PURE__ */ jsx(
@@ -94,7 +95,7 @@ function SpanTimelineRow({ ctx }) {
               className: cn(
                 "flex size-5 cursor-pointer items-center justify-center rounded-md",
                 "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
-                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
+                focusRing
               ),
               children: isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
             }

package/dist/domains/traces/components/span-timeline-row.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n type=\"button\"\n className={cn(\n 'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n ~~'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset'~~,\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n <span\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </span>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n ~~'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1'~~,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;AAoBO~~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"}
1	+ {"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n type=\"button\"\n className={cn(\n 'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n focusRingInset,\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n <span\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </span>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/span-timing-hover-card.cjs.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
-const dataKeysAndValues = require('../../../data-keys-and-values-OR8KkBEc.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-DnpdW8zx.cjs');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');

package/dist/domains/traces/components/span-timing-hover-card.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-uWBaTX6Y.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DiRlIt-N.js';
 import { a as HoverCardContent } from '../../../hover-card-B1-n3amu.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatTimestampPrecise } from '../../../utils/date-format.es.js';

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

@@ -5,7 +5,8 @@ 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-OR8KkBEc.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-DnpdW8zx.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const detailRows = [
@@ -22,8 +23,8 @@ function getDetailValue(details, key) {
   if (key === "reasoning") return "reasoning" in details ? details.reasoning : void 0;
   return details[key];
 }
-const INPUT_COLOR = "var(--chart-soft-3)";
-const OUTPUT_COLOR = "var(--chart-soft-1)";
+const INPUT_COLOR = "var(--chart-sequential-3)";
+const OUTPUT_COLOR = "var(--chart-sequential-1)";
 function SpanTokenUsage({ usage, className }) {
   const view = domains_traces_components_spanTokenUsage_utils.getTokenUsageView(usage);
   if (!view) return null;
@@ -31,9 +32,9 @@ function SpanTokenUsage({ usage, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("mt-2 mb-8 grid grid-cols-1 border-b border-border 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-placeholder", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body", children: "Tokens Used" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-subheading text-muted-foreground", children: total.toLocaleString() }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-caption", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", children: "Tokens Used" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "muted", children: total.toLocaleString() }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "caption", className: "ml-auto", children: [
           Math.round(inputPct),
           "% Input vs ",
           Math.round(outputPct),
@@ -71,9 +72,9 @@ function UsageColumn({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-placeholder", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", children: label }),
       value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-subheading text-muted-foreground", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "muted", 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 CHANGED Viewed

	@@ -1 +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 detailRows = [\n ['text', 'Text'],\n ['cacheRead', 'Cache read'],\n ['cacheWrite', 'Cache write'],\n ['audio', 'Audio'],\n ['image', 'Image'],\n ['reasoning', 'Reasoning'],\n] as const;\n\ntype DetailKey = (typeof detailRows)[number][0];\n\nfunction getDetailValue(details: TokenDetailsObject, key: DetailKey): number \| undefined {\n if (key === 'cacheRead') return 'cacheRead' in details ? details.cacheRead : undefined;\n if (key === 'cacheWrite') return 'cacheWrite' in details ? details.cacheWrite : undefined;\n if (key === 'reasoning') return 'reasoning' in details ? details.reasoning : undefined;\n return details[key];\n}\n\ntype SpanTokenUsageProps = {\n usage: UsageStats;\n className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-~~soft~~-3)';\nconst OUTPUT_COLOR = 'var(--chart-~~soft~~-1)';\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 className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n {showSplit && (\n <div className=\"mb-2\">\n <div className=\"flex items-baseline gap-3 text-placeholder\">\n <~~span~~ ~~className~~=\"~~text-body~~\">Tokens Used</~~span~~>\n <span ~~className~~=\"~~text-~~subheading ~~text-~~muted~~-foreground~~\">{total.toLocaleString()}</~~span~~>\n <span className=\"ml-auto ~~text-caption~~\">\n {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n </~~span~~>\n </div>\n <div className=\"mt-2 rounded-md bg-muted 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-placeholder\">\n <~~span~~ ~~className~~=\"~~text-body~~\">{label}</~~span~~>\n {value !== undefined && (\n <span className=\"flex items-baseline gap-1.5\">\n <span ~~className~~=\"~~text-~~subheading ~~text-~~muted~~-foreground~~\">{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 {detailRows.map(([detailKey, label]) => {\n const detailValue = getDetailValue(details, detailKey);\n if (detailValue === undefined) return null;\n return (\n <Fragment key={detailKey}>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n </Fragment>\n );\n })}\n </DataKeysAndValues>\n );\n}\n"],"names":["getTokenUsageView","cn","jsxs","jsx","DataKeysAndValues","Fragment"],"mappings":"~~;;;;;;;;;;AAUA~~,MAAM,UAAA,GAAa;AAAA,EACjB,CAAC,QAAQ,MAAM,CAAA;AAAA,EACf,CAAC,aAAa,YAAY,CAAA;AAAA,EAC1B,CAAC,cAAc,aAAa,CAAA;AAAA,EAC5B,CAAC,SAAS,OAAO,CAAA;AAAA,EACjB,CAAC,SAAS,OAAO,CAAA;AAAA,EACjB,CAAC,aAAa,WAAW;AAC3B,CAAA;AAIA,SAAS,cAAA,CAAe,SAA6B,GAAA,EAAoC;AACvF,EAAA,IAAI,QAAQ,WAAA,EAAa,OAAO,WAAA,IAAe,OAAA,GAAU,QAAQ,SAAA,GAAY,MAAA;AAC7E,EAAA,IAAI,QAAQ,YAAA,EAAc,OAAO,YAAA,IAAgB,OAAA,GAAU,QAAQ,UAAA,GAAa,MAAA;AAChF,EAAA,IAAI,QAAQ,WAAA,EAAa,OAAO,WAAA,IAAe,OAAA,GAAU,QAAQ,SAAA,GAAY,MAAA;AAC7E,EAAA,OAAO,QAAQ,GAAG,CAAA;AACpB;AAOA,MAAM,WAAA,GAAc,~~qBAAA~~;AACpB,MAAM,YAAA,GAAe,~~qBAAA~~;AAEd,SAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAU,EAAwB;AACxE,EAAA,MAAM,IAAA,GAAOA,iEAAkB,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,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,mFAAA,EAAqF,SAAS,CAAA,EAC9G,QAAA,EAAA;AAAA,IAAA,SAAA,oBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4CAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,~~CAAC~~,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~WAAA~~,~~EAAY~~,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,~~uCACtC~~,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~uCAAA~~,~~EAAyC~~,QAAA,EAAA,KAAA,CAAM,~~gBAAe~~,~~EAAE~~,CAAA;AAAA,~~wBAChFD~~,~~eAAA~~,~~CAAC~~,~~MAAA~~,EAAA,~~EAAK~~,SAAA,EAAU,~~sBAAA~~,~~EACb~~,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,QAAQ,CAAA;AAAA,UAAE,aAAA;AAAA,UAAY,IAAA,CAAK,MAAM,SAAS,CAAA;AAAA,UAAE;AAAA,SAAA,EAC1D;AAAA,OAAA,EACF,CAAA;AAAA,qCACC,KAAA,EAAA,EAAI,SAAA,EAAU,kCACb,QAAA,~~kBAAAA~~,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,6BAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAO,GAAG,QAAQ,CAAA,CAAA,CAAA,EAAK,iBAAiB,WAAA;AAAY;AAAA,SAC/D;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,sBAAA;AAAA,YACV,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,OAAA,EACF,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,oBAGFD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,WAAA,EAAA,EAAY,OAAM,OAAA,EAAQ,KAAA,EAAO,aAAa,KAAA,EAAO,UAAA,EAAY,SAAS,YAAA,EAAc,CAAA;AAAA,sBACzFA,cAAA,CAAC,eAAY,KAAA,EAAM,QAAA,EAAS,OAAO,YAAA,EAAc,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,aAAA,EAAe;AAAA,KAAA,EAC/F;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uCACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iDAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,~~CAAC~~,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~WAAA~~,~~EAAa~~,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,~~MAClC~~,KAAA,KAAU,MAAA,~~oBACTD~~,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6BAAA,EACd,QAAA,EAAA;AAAA,wBAAAC,cAAA,~~CAAC~~,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~uCAAA~~,~~EAAyC~~,QAAA,EAAA,KAAA,CAAM,~~gBAAe~~,~~EAAE~~,CAAA;AAAA,~~wBAChFA~~,cAAA,CAAC,UAAK,SAAA,EAAU,iCAAA,EAAkC,OAAO,EAAE,eAAA,EAAiB,OAAM,EAAG;AAAA,OAAA,EACvF;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC,OAAA,oBAAWA,cAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAkB;AAAA,GAAA,EAC7C,CAAA;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,OAAA,EAAQ,EAAoC;AACjE,EAAA,uBACEA,cAAA,~~CAACC~~,mCAAA,EAAA,EAAkB,OAAA,EAAQ,OAAA,EACxB,QAAA,EAAA,UAAA,CAAW,IAAI,CAAC,CAAC,SAAA,EAAW,KAAK,CAAA,KAAM;AACtC,IAAA,MAAM,WAAA,GAAc,cAAA,CAAe,OAAA,EAAS,SAAS,CAAA;AACrD,IAAA,IAAI,WAAA,KAAgB,QAAW,OAAO,IAAA;AACtC,IAAA,uCACGC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,~~sBAAAF~~,cAAA,~~CAACC~~,mCAAA,CAAkB,GAAA,EAAlB,EAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,~~sBAC9BD~~,cAAA,~~CAACC~~,oCAAkB,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;;;;"}
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 { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails \| OutputTokenDetails;\n\nconst detailRows = [\n ['text', 'Text'],\n ['cacheRead', 'Cache read'],\n ['cacheWrite', 'Cache write'],\n ['audio', 'Audio'],\n ['image', 'Image'],\n ['reasoning', 'Reasoning'],\n] as const;\n\ntype DetailKey = (typeof detailRows)[number][0];\n\nfunction getDetailValue(details: TokenDetailsObject, key: DetailKey): number \| undefined {\n if (key === 'cacheRead') return 'cacheRead' in details ? details.cacheRead : undefined;\n if (key === 'cacheWrite') return 'cacheWrite' in details ? details.cacheWrite : undefined;\n if (key === 'reasoning') return 'reasoning' in details ? details.reasoning : undefined;\n return details[key];\n}\n\ntype SpanTokenUsageProps = {\n usage: UsageStats;\n className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-sequential-3)';\nconst OUTPUT_COLOR = 'var(--chart-sequential-1)';\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 className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n {showSplit && (\n <div className=\"mb-2\">\n <div className=\"flex items-baseline gap-3 text-placeholder\">\n <Txt as=\"span\">Tokens Used</Txt>\n <Txt as=\"span\" variant=\"subheading\" tone=\"muted\">\n {total.toLocaleString()}\n </Txt>\n <Txt as=\"span\" variant=\"caption\" className=\"ml-auto\">\n {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n </Txt>\n </div>\n <div className=\"mt-2 rounded-md bg-muted 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-placeholder\">\n <Txt as=\"span\">{label}</Txt>\n {value !== undefined && (\n <span className=\"flex items-baseline gap-1.5\">\n <Txt as=\"span\" variant=\"subheading\" tone=\"muted\">\n {value.toLocaleString()}\n </Txt>\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 {detailRows.map(([detailKey, label]) => {\n const detailValue = getDetailValue(details, detailKey);\n if (detailValue === undefined) return null;\n return (\n <Fragment key={detailKey}>\n <DataKeysAndValues.Key>{label}</DataKeysAndValues.Key>\n <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n </Fragment>\n );\n })}\n </DataKeysAndValues>\n );\n}\n"],"names":["getTokenUsageView","cn","jsxs","jsx","Txt","DataKeysAndValues","Fragment"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
 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-uWBaTX6Y.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DiRlIt-N.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 const detailRows = [
@@ -18,8 +19,8 @@ function getDetailValue(details, key) {
   if (key === "reasoning") return "reasoning" in details ? details.reasoning : void 0;
   return details[key];
 }
-const INPUT_COLOR = "var(--chart-soft-3)";
-const OUTPUT_COLOR = "var(--chart-soft-1)";
+const INPUT_COLOR = "var(--chart-sequential-3)";
+const OUTPUT_COLOR = "var(--chart-sequential-1)";
 function SpanTokenUsage({ usage, className }) {
   const view = getTokenUsageView(usage);
   if (!view) return null;
@@ -27,9 +28,9 @@ function SpanTokenUsage({ usage, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 mb-8 grid grid-cols-1 border-b border-border 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-placeholder", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-body", children: "Tokens Used" }),
-        /* @__PURE__ */ jsx("span", { className: "text-subheading text-muted-foreground", children: total.toLocaleString() }),
-        /* @__PURE__ */ jsxs("span", { className: "ml-auto text-caption", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", children: "Tokens Used" }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "muted", children: total.toLocaleString() }),
+        /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "caption", className: "ml-auto", children: [
           Math.round(inputPct),
           "% Input vs ",
           Math.round(outputPct),
@@ -67,9 +68,9 @@ function UsageColumn({
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-placeholder", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-body", children: label }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", children: label }),
       value !== void 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-subheading text-muted-foreground", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "muted", 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 CHANGED Viewed

	@@ -1 +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 detailRows = [\n ['text', 'Text'],\n ['cacheRead', 'Cache read'],\n ['cacheWrite', 'Cache write'],\n ['audio', 'Audio'],\n ['image', 'Image'],\n ['reasoning', 'Reasoning'],\n] as const;\n\ntype DetailKey = (typeof detailRows)[number][0];\n\nfunction getDetailValue(details: TokenDetailsObject, key: DetailKey): number \| undefined {\n if (key === 'cacheRead') return 'cacheRead' in details ? details.cacheRead : undefined;\n if (key === 'cacheWrite') return 'cacheWrite' in details ? details.cacheWrite : undefined;\n if (key === 'reasoning') return 'reasoning' in details ? details.reasoning : undefined;\n return details[key];\n}\n\ntype SpanTokenUsageProps = {\n usage: UsageStats;\n className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-~~soft~~-3)';\nconst OUTPUT_COLOR = 'var(--chart-~~soft~~-1)';\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 className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n {showSplit && (\n <div className=\"mb-2\">\n <div className=\"flex items-baseline gap-3 text-placeholder\">\n <~~span~~ ~~className~~=\"~~text-body~~\">Tokens Used</~~span~~>\n <span ~~className~~=\"~~text-~~subheading ~~text-~~muted~~-foreground~~\">{total.toLocaleString()}</~~span~~>\n <span className=\"ml-auto ~~text-caption~~\">\n {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n </~~span~~>\n </div>\n <div className=\"mt-2 rounded-md bg-muted 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-placeholder\">\n <~~span~~ ~~className~~=\"~~text-body~~\">{label}</~~span~~>\n {value !== undefined && (\n <span className=\"flex items-baseline gap-1.5\">\n <span ~~className~~=\"~~text-~~subheading ~~text-~~muted~~-foreground~~\">{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 {detailRows.map(([detailKey, label]) => {\n const detailValue = getDetailValue(details, detailKey);\n if (detailValue === undefined) return null;\n return (\n <Fragment key={detailKey}>\n <DataKeysAndValues.Key>{label}</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,UAAA,GAAa;AAAA,EACjB,CAAC,QAAQ,MAAM,CAAA;AAAA,EACf,CAAC,aAAa,YAAY,CAAA;AAAA,EAC1B,CAAC,cAAc,aAAa,CAAA;AAAA,EAC5B,CAAC,SAAS,OAAO,CAAA;AAAA,EACjB,CAAC,SAAS,OAAO,CAAA;AAAA,EACjB,CAAC,aAAa,WAAW;AAC3B,CAAA;AAIA,SAAS,cAAA,CAAe,SAA6B,GAAA,EAAoC;AACvF,EAAA,IAAI,QAAQ,WAAA,EAAa,OAAO,WAAA,IAAe,OAAA,GAAU,QAAQ,SAAA,GAAY,MAAA;AAC7E,EAAA,IAAI,QAAQ,YAAA,EAAc,OAAO,YAAA,IAAgB,OAAA,GAAU,QAAQ,UAAA,GAAa,MAAA;AAChF,EAAA,IAAI,QAAQ,WAAA,EAAa,OAAO,WAAA,IAAe,OAAA,GAAU,QAAQ,SAAA,GAAY,MAAA;AAC7E,EAAA,OAAO,QAAQ,GAAG,CAAA;AACpB;AAOA,MAAM,WAAA,GAAc,~~qBAAA~~;AACpB,MAAM,YAAA,GAAe,~~qBAAA~~;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,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mFAAA,EAAqF,SAAS,CAAA,EAC9G,QAAA,EAAA;AAAA,IAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4CAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~WAAA~~,~~EAAY~~,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,~~4BACtC~~,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~uCAAA~~,~~EAAyC~~,QAAA,EAAA,KAAA,CAAM,~~gBAAe~~,~~EAAE~~,CAAA;AAAA,~~wBAChF~~,~~IAAA~~,~~CAAC~~,~~MAAA~~,EAAA,~~EAAK~~,SAAA,EAAU,~~sBAAA~~,~~EACb~~,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,QAAQ,CAAA;AAAA,UAAE,aAAA;AAAA,UAAY,IAAA,CAAK,MAAM,SAAS,CAAA;AAAA,UAAE;AAAA,SAAA,EAC1D;AAAA,OAAA,EACF,CAAA;AAAA,0BACC,KAAA,EAAA,EAAI,SAAA,EAAU,kCACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,6BAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAO,GAAG,QAAQ,CAAA,CAAA,CAAA,EAAK,iBAAiB,WAAA;AAAY;AAAA,SAC/D;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,sBAAA;AAAA,YACV,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,OAAA,EACF,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,oBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAM,OAAA,EAAQ,KAAA,EAAO,aAAa,KAAA,EAAO,UAAA,EAAY,SAAS,YAAA,EAAc,CAAA;AAAA,sBACzF,GAAA,CAAC,eAAY,KAAA,EAAM,QAAA,EAAS,OAAO,YAAA,EAAc,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,aAAA,EAAe;AAAA,KAAA,EAC/F;AAAA,GAAA,EACF,CAAA;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,iDAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~WAAA~~,~~EAAa~~,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,~~MAClC~~,KAAA,KAAU,MAAA,oBACT,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6BAAA,EACd,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,~~MAAA~~,EAAA,~~EAAK~~,~~SAAA~~,~~EAAU~~,~~uCAAA~~,~~EAAyC~~,QAAA,EAAA,KAAA,CAAM,~~gBAAe~~,~~EAAE~~,CAAA;AAAA,~~wBAChF~~,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,UAAA,CAAW,IAAI,CAAC,CAAC,SAAA,EAAW,KAAK,CAAA,KAAM;AACtC,IAAA,MAAM,WAAA,GAAc,cAAA,CAAe,OAAA,EAAS,SAAS,CAAA;AACrD,IAAA,IAAI,WAAA,KAAgB,QAAW,OAAO,IAAA;AACtC,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAC9B,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;;;;"}
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 { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails \| OutputTokenDetails;\n\nconst detailRows = [\n ['text', 'Text'],\n ['cacheRead', 'Cache read'],\n ['cacheWrite', 'Cache write'],\n ['audio', 'Audio'],\n ['image', 'Image'],\n ['reasoning', 'Reasoning'],\n] as const;\n\ntype DetailKey = (typeof detailRows)[number][0];\n\nfunction getDetailValue(details: TokenDetailsObject, key: DetailKey): number \| undefined {\n if (key === 'cacheRead') return 'cacheRead' in details ? details.cacheRead : undefined;\n if (key === 'cacheWrite') return 'cacheWrite' in details ? details.cacheWrite : undefined;\n if (key === 'reasoning') return 'reasoning' in details ? details.reasoning : undefined;\n return details[key];\n}\n\ntype SpanTokenUsageProps = {\n usage: UsageStats;\n className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-sequential-3)';\nconst OUTPUT_COLOR = 'var(--chart-sequential-1)';\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 className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n {showSplit && (\n <div className=\"mb-2\">\n <div className=\"flex items-baseline gap-3 text-placeholder\">\n <Txt as=\"span\">Tokens Used</Txt>\n <Txt as=\"span\" variant=\"subheading\" tone=\"muted\">\n {total.toLocaleString()}\n </Txt>\n <Txt as=\"span\" variant=\"caption\" className=\"ml-auto\">\n {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n </Txt>\n </div>\n <div className=\"mt-2 rounded-md bg-muted 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-placeholder\">\n <Txt as=\"span\">{label}</Txt>\n {value !== undefined && (\n <span className=\"flex items-baseline gap-1.5\">\n <Txt as=\"span\" variant=\"subheading\" tone=\"muted\">\n {value.toLocaleString()}\n </Txt>\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 {detailRows.map(([detailKey, label]) => {\n const detailValue = getDetailValue(details, detailKey);\n if (detailValue === undefined) return null;\n return (\n <Fragment key={detailKey}>\n <DataKeysAndValues.Key>{label}</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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"}

package/dist/domains/traces/components/span-type-legend.cjs.js CHANGED Viewed

@@ -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_shared = require('./shared.cjs.js');
-const Badge = require('../../../Badge-DFNxcz-r.cjs');
+const Badge = require('../../../Badge-H8K5WrXg.cjs');
 function useUsedSpanTypes(spans) {
   return React.useMemo(() => {
@@ -36,7 +36,7 @@ function SpanTypeLegend({ spans }) {
       Badge.Badge,
       {
         size: "sm",
-        emphasis: "muted",
+        emphasis: "subtle",
         icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block size-1.5 rounded-full", style: { backgroundColor: spanUI?.color } }),
         children: spanUI?.label || type
       },

package/dist/domains/traces/components/span-type-legend.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-type-legend.cjs.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n return useMemo(() => {\n const collectTypes = (list: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of list) {\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(spans);\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 }, [spans]);\n}\n\n/*\n Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n const usedSpanTypes = useUsedSpanTypes(spans);\n if (usedSpanTypes.length === 0) return null;\n\n // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n return (\n <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <Badge\n key={type}\n size=\"sm\"\n emphasis=\"~~muted~~\"\n icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n >\n {spanUI?.label \|\| type}\n </Badge>\n );\n })}\n </div>\n );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsx","getSpanTypeUi","Badge"],"mappings":";;;;;;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,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,KAAK,CAAA;AAChC,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,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACEC,cAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAASC,+CAAc,IAAI,CAAA;AACjC,IAAA,uBACED,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,~~OAAA~~;AAAA,QACT,IAAA,kBAAMF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"span-type-legend.cjs.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n return useMemo(() => {\n const collectTypes = (list: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of list) {\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(spans);\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 }, [spans]);\n}\n\n/*\n Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n const usedSpanTypes = useUsedSpanTypes(spans);\n if (usedSpanTypes.length === 0) return null;\n\n // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n return (\n <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <Badge\n key={type}\n size=\"sm\"\n emphasis=\"subtle\"\n icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n >\n {spanUI?.label \|\| type}\n </Badge>\n );\n })}\n </div>\n );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsx","getSpanTypeUi","Badge"],"mappings":";;;;;;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,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,KAAK,CAAA;AAChC,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,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACEC,cAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAASC,+CAAc,IAAI,CAAA;AACjC,IAAA,uBACED,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,QAAA;AAAA,QACT,IAAA,kBAAMF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/span-type-legend.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { getSpanTypeUi, spanTypePrefixes } from './shared.es.js';
-import { B as Badge } from '../../../Badge-Bzn8Z-_I.js';
+import { B as Badge } from '../../../Badge-Q_pCeeGW.js';
 function useUsedSpanTypes(spans) {
   return useMemo(() => {
@@ -32,7 +32,7 @@ function SpanTypeLegend({ spans }) {
       Badge,
       {
         size: "sm",
-        emphasis: "muted",
+        emphasis: "subtle",
         icon: /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full", style: { backgroundColor: spanUI?.color } }),
         children: spanUI?.label || type
       },