@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { S as SpanPayloadField, b as SpanPayloadToolCalls, a as SpanPayloadMarkdown, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-XWZOfAi-.js';
+import { S as SpanPayloadField, b as SpanPayloadToolCalls, a as SpanPayloadMarkdown, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-Cniig-k4.js';
 import { hasItems } from './span-payload-registry.es.js';
 import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';
 

package/dist/domains/traces/components/span-payload/span-payload-tool.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('react/jsx-runtime');
 require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-0b_ow5Rt.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DIyQNNw0.cjs');
 require('../../../chat/components/badge-wrapper.cjs.js');
-require('../../../../activity-ClKZR5_o.cjs');
+require('../../../../activity-C3F5Z6U2.cjs');
 require('../../../../tool-presentation-WLS6d1ws.cjs');
 
 

package/dist/domains/traces/components/span-payload/span-payload-tool.es.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import './span-payload-json.es.js';
-export { e as SpanPayloadTool } from '../../../../span-payload-primitives-XWZOfAi-.js';
+export { e as SpanPayloadTool } from '../../../../span-payload-primitives-Cniig-k4.js';
 import '../../../chat/components/badge-wrapper.es.js';
-import '../../../../activity-D0SefV4r.js';
+import '../../../../activity-CREOMVXI.js';
 import '../../../../tool-presentation-BXAo24Ir.js';
 //# sourceMappingURL=span-payload-tool.es.js.map

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

@@ -6,12 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const observability = require('@mastra/core/observability');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadMessages = require('./span-payload-messages.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-0b_ow5Rt.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DIyQNNw0.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
 const Card = require('../../../../Card-BQsKHkyB.cjs');
 const dataKeysAndValues = require('../../../../data-keys-and-values-DnpdW8zx.cjs');
-const Notice = require('../../../../Notice-D4zc_oTj.cjs');
-const Txt = require('../../../../Txt-DNnvlrBo.cjs');
+const Notice = require('../../../../Notice-CjQQjfK7.cjs');
+const Txt = require('../../../../Txt-DFPibRb3.cjs');
 const utils_duration = require('../../../../utils/duration.cjs.js');
 
 const MUTATION_LABELS = {
@@ -31,8 +31,8 @@ function Mutations({ mutations }) {
       mutation.count !== void 0 ? `${mutation.count} message${mutation.count === 1 ? "" : "s"}` : void 0
     ].filter(Boolean).join(" · ");
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-body text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: MUTATION_LABELS[mutation.type] ?? mutation.type }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "ink", as: "span", variant: "body", children: MUTATION_LABELS[mutation.type] ?? mutation.type }),
         detail && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", children: detail })
       ] }),
       mutation.message !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanPayloadMessages.SpanPayloadMessages, { value: [mutation.message] }),

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

@@ -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 && (\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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"}
+{"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\">\n              <Txt tone=\"ink\" as=\"span\" variant=\"body\">\n                {MUTATION_LABELS[mutation.type] ?? mutation.type}\n              </Txt>\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

@@ -2,12 +2,12 @@ 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-XWZOfAi-.js';
+import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-Cniig-k4.js';
 import { asCoreSpan } from './span-payload-registry.es.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-D4gMAkVI.js';
-import { T as Txt } from '../../../../Txt-C3cYJgKU.js';
+import { N as Notice } from '../../../../Notice-CmFkTliT.js';
+import { T as Txt } from '../../../../Txt-CuuPO9Ho.js';
 import { formatDuration } from '../../../../utils/duration.es.js';
 
 const MUTATION_LABELS = {
@@ -27,8 +27,8 @@ function Mutations({ mutations }) {
       mutation.count !== void 0 ? `${mutation.count} message${mutation.count === 1 ? "" : "s"}` : void 0
     ].filter(Boolean).join(" · ");
     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 }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Txt, { tone: "ink", as: "span", variant: "body", children: MUTATION_LABELS[mutation.type] ?? mutation.type }),
         detail && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", children: detail })
       ] }),
       mutation.message !== void 0 && /* @__PURE__ */ jsx(SpanPayloadMessages, { value: [mutation.message] }),

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

@@ -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 && (\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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"}
+{"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\">\n              <Txt tone=\"ink\" as=\"span\" variant=\"body\">\n                {MUTATION_LABELS[mutation.type] ?? mutation.type}\n              </Txt>\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":";;;;;;;;;;;;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,uBACE,GAAA,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,2BACG,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,mBAAgB,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,uBACE,IAAA,CAAC,IAAA,EAAA,EAAe,SAAA,EAAU,qBAAA,EACxB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAK,KAAA,EAAM,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAC/B,QAAA,EAAA,eAAA,CAAgB,QAAA,CAAS,IAAI,CAAA,IAAK,QAAA,CAAS,IAAA,EAC9C,CAAA;AAAA,QACC,MAAA,wBACE,GAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAChC,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ,CAAA;AAAA,MACC,QAAA,CAAS,YAAY,MAAA,oBAAa,GAAA,CAAC,uBAAoB,KAAA,EAAO,CAAC,QAAA,CAAS,OAAO,CAAA,EAAG,CAAA;AAAA,MAClF,SAAS,GAAA,IAAO,QAAA,CAAS,IAAI,MAAA,GAAS,CAAA,wBACpC,sBAAA,EAAA,EAAuB,KAAA,EAAO,gBAAgB,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,CAAA,CAAA,EAChE,QAAA,kBAAA,GAAA,CAAC,mBAAgB,KAAA,EAAO,QAAA,CAAS,KAAK,CAAA,EACxC;AAAA,KAAA,EAAA,EAfK,KAiBT,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;AAWO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAK,EAAiC;AAC9E,EAAA,MAAM,QAAA,GAAW,yBAAA,CAA0B,UAAA,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,GAAY,eAAe,cAAc,CAAA;AAE7F,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,WAAA,EAAU,gCAAA,EAAiC,SAAA,EAAU,SAAA,EACzD,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,2BAAA,EAA4B,WAAU,qBAAA,EACnD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,iBAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,aAAA,oBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,wBAChC,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,aAAA,EAAc;AAAA,OAAA,EAC1C,CAAA;AAAA,sBAEF,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBAC5B,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,UAAA,EAAW;AAAA,OAAA,EACvC,CAAA;AAAA,MACC,4BACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,4BAC9B,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,QAAA,KAAa,UAAA,GAAa,aAAa,QAAA,EAAS;AAAA,OAAA,EAC5E,CAAA;AAAA,MAED,cAAA,KAAmB,0BAClB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAAA,wBACxC,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,2BAAiB,CAAA,EAAE;AAAA,OAAA,EAC/C,CAAA;AAAA,MAED,gCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpC,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EACC,QAAA,kBAAA,GAAA,CAAC,GAAA,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,iCACC,IAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,aAAA,EAAc,OAAM,UAAA,EACjC,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,0BAAU,GAAA,CAAC,MAAA,CAAO,OAAA,EAAP,EAAgB,wBAAc,MAAA,EAAO,CAAA;AAAA,MAC9D,aAAA,CAAc,KAAA,KAAU,MAAA,oBACvB,IAAA,CAAC,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,4BAC3B,iBAAA,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,oBAC1B,GAAA,CAAC,sBAAA,EAAA,EAAuB,KAAA,EAAM,UAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,aAAA,CAAc,QAAA,EAAU,CAAA,EAClD;AAAA,KAAA,EAEJ,CAAA;AAAA,IAGD,oBAAA,IAAwB,oBAAA,CAAqB,MAAA,GAAS,CAAA,oBACrD,GAAA,CAAC,gBAAA,EAAA,EAAiB,KAAA,EAAM,sBAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,oBAAA,EAAsB,CAAA,EAC9C,CAAA;AAAA,IAGD,IAAA,wBACE,sBAAA,EAAA,EAAuB,KAAA,EAAM,oBAC5B,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,IAAA,EAAM,CAAA,EAChC;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -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-Ckjs7Kwo.cjs');
+const dataPanel = require('../../../data-panel-b48tWgzs.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

@@ -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-B5flRCQM.js';
+import { D as DataPanel } from '../../../data-panel-Bzed2B75.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

@@ -9,7 +9,7 @@ const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
@@ -34,8 +34,8 @@ function SpanTimelineRow({ ctx }) {
   const shouldScrollIntoView = isSelected || isRevealed;
   React.useEffect(() => {
     if (!shouldScrollIntoView) return;
-    rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [shouldScrollIntoView]);
+    rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView, isRevealed]);
   const { startShiftMs, leftPercent, widthPercent } = domains_traces_utils_spanTiming.getSpanTimingLayout(span, overallLatency, overallStartTime);
   const toggleLabel = isExpanded ? `Collapse children (${expansion.numOfChildren})` : `Expand children (${expansion.numOfChildren})`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -60,7 +60,8 @@ 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",
+                "text-foreground",
+                "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left",
                 primitives_transitions.focusRingInset
               ),
               children: [
@@ -69,13 +70,15 @@ function SpanTimelineRow({ ctx }) {
                   {
                     "aria-hidden": true,
                     title: spanUI.label,
-                    className: "inline-block size-2 shrink-0 rounded-full",
-                    style: { backgroundColor: spanUI.color }
+                    style: { backgroundColor: spanUI.color },
+                    className: "inline-block size-2 shrink-0 rounded-full"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
+                  Txt.Txt,
                   {
+                    as: "span",
+                    variant: "caption",
                     "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
                     "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
                     title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
@@ -124,7 +127,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "div", variant: "meta", tone: "muted", font: "mono", className: "w-12 text-right", children: utils_duration.formatDurationPrecise(span.latency) })
+                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "meta", font: "mono", tone: "muted", className: "w-12 text-right", children: utils_duration.formatDurationPrecise(span.latency) })
               ]
             }
           ),

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

@@ -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 { 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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"}
+{"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    // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n    rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\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            'text-foreground',\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left',\n            focusRingInset,\n          )}\n        >\n          {spanUI?.color && (\n            <span\n              aria-hidden\n              title={spanUI.label}\n              style={{ backgroundColor: spanUI.color }}\n              className=\"inline-block size-2 shrink-0 rounded-full\"\n            />\n          )}\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\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          </Txt>\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=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" 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","Txt","focusRing","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","formatDurationPrecise","SpanTimingHoverCard"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 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-C3cYJgKU.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';
@@ -30,8 +30,8 @@ function SpanTimelineRow({ ctx }) {
   const shouldScrollIntoView = isSelected || isRevealed;
   useEffect(() => {
     if (!shouldScrollIntoView) return;
-    rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [shouldScrollIntoView]);
+    rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView, isRevealed]);
   const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);
   const toggleLabel = isExpanded ? `Collapse children (${expansion.numOfChildren})` : `Expand children (${expansion.numOfChildren})`;
   return /* @__PURE__ */ jsxs(
@@ -56,7 +56,8 @@ 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",
+                "text-foreground",
+                "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left",
                 focusRingInset
               ),
               children: [
@@ -65,13 +66,15 @@ function SpanTimelineRow({ ctx }) {
                   {
                     "aria-hidden": true,
                     title: spanUI.label,
-                    className: "inline-block size-2 shrink-0 rounded-full",
-                    style: { backgroundColor: spanUI.color }
+                    style: { backgroundColor: spanUI.color },
+                    className: "inline-block size-2 shrink-0 rounded-full"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "span",
+                  Txt,
                   {
+                    as: "span",
+                    variant: "caption",
                     "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
                     "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
                     title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
@@ -120,7 +123,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx(Txt, { as: "div", variant: "meta", tone: "muted", font: "mono", className: "w-12 text-right", children: formatDurationPrecise(span.latency) })
+                /* @__PURE__ */ jsx(Txt, { as: "p", variant: "meta", font: "mono", tone: "muted", className: "w-12 text-right", children: formatDurationPrecise(span.latency) })
               ]
             }
           ),

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

@@ -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 { 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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"}
+{"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    // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n    rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\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            'text-foreground',\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left',\n            focusRingInset,\n          )}\n        >\n          {spanUI?.color && (\n            <span\n              aria-hidden\n              title={spanUI.label}\n              style={{ backgroundColor: spanUI.color }}\n              className=\"inline-block size-2 shrink-0 rounded-full\"\n            />\n          )}\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\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          </Txt>\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=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" 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

@@ -5,13 +5,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const dataKeysAndValues = require('../../../data-keys-and-values-DnpdW8zx.cjs');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(hoverCard.HoverCardContent, { className: "pr-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mt-1 mb-2 flex items-center gap-2 text-caption"), children: "Span Timing" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mt-1 mb-2 flex items-center gap-2"), children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", className: "block", children: "Span Timing" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Latency" }),
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: utils_duration.formatDurationPrecise(span.latency) ?? "-" }),

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

@@ -1 +1 @@
-{"version":3,"file":"span-timing-hover-card.cjs.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":["jsxs","HoverCardContent","jsx","cn","DataKeysAndValues","formatDurationPrecise"],"mappings":";;;;;;;;;;;AAYO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACEA,eAAA,CAACC,0BAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,oCAChFC,mCAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9BF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,+CAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjCF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/BF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,qCACjCA,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAAC,oCAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-timing-hover-card.cjs.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2')}>\n        <Txt as=\"span\" variant=\"caption\" className=\"block\">\n          Span Timing\n        </Txt>\n      </div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":["jsxs","HoverCardContent","jsx","cn","Txt","DataKeysAndValues","formatDurationPrecise"],"mappings":";;;;;;;;;;;;AAaO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACEA,eAAA,CAACC,0BAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,mCAAmC,GACpD,QAAA,kBAAAD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,OAAA,EAAQ,yBAEnD,CAAA,EACF,CAAA;AAAA,oCACCC,mCAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACG,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9BH,cAAA,CAACG,oCAAkB,KAAA,EAAlB,EAAyB,+CAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrEH,cAAA,CAACG,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjCH,cAAA,CAACG,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxEH,cAAA,CAACG,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/BH,cAAA,CAACG,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtEH,cAAA,CAACG,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,qCACjCA,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAAC,oCAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-DiRlIt-N.js';
 import { a as HoverCardContent } from '../../../hover-card-B1-n3amu.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxs(HoverCardContent, { className: "pr-6", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("mt-1 mb-2 flex items-center gap-2 text-caption"), children: "Span Timing" }),
+    /* @__PURE__ */ jsx("div", { className: cn("mt-1 mb-2 flex items-center gap-2"), children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", className: "block", children: "Span Timing" }) }),
     /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
       /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Latency" }),
       /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: formatDurationPrecise(span.latency) ?? "-" }),

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

@@ -1 +1 @@
-{"version":3,"file":"span-timing-hover-card.es.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACE,IAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,yBAChF,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,gCAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjC,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BACjC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,qBAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-timing-hover-card.es.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2')}>\n        <Txt as=\"span\" variant=\"caption\" className=\"block\">\n          Span Timing\n        </Txt>\n      </div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAaO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACE,IAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mCAAmC,GACpD,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,OAAA,EAAQ,yBAEnD,CAAA,EACF,CAAA;AAAA,yBACC,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,gCAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjC,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BACjC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,qBAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -6,7 +6,7 @@ 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-DnpdW8zx.cjs');
-const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../../Txt-DFPibRb3.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const detailRows = [

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-DiRlIt-N.js';
-import { T as Txt } from '../../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../../Txt-CuuPO9Ho.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const detailRows = [

package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
 const Card = require('../../../../Card-BQsKHkyB.cjs');
-const dataPanel = require('../../../../data-panel-Ckjs7Kwo.cjs');
+const dataPanel = require('../../../../data-panel-b48tWgzs.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {

package/dist/domains/traces/components/thread-trace/thread-trace-details.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
 import { C as Card } from '../../../../Card-DVy0QS4m.js';
-import { D as DataPanel } from '../../../../data-panel-B5flRCQM.js';
+import { D as DataPanel } from '../../../../data-panel-Bzed2B75.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {

package/dist/domains/traces/components/thread-trace/thread-trace-messages.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const tabsList = require('../../../../tabs-list-Tqj36HIL.cjs');
-const tabsTab = require('../../../../tabs-tab-C-C2vX-D.cjs');
+const tabsList = require('../../../../tabs-list-BeWntzEw.cjs');
+const tabsTab = require('../../../../tabs-tab-DhLs9bO0.cjs');
 const tabsContent = require('../../../../tabs-content-DfH1hhpU.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 

package/dist/domains/traces/components/thread-trace/thread-trace-messages.es.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { T as TabList } from '../../../../tabs-list-tLx5fgP0.js';
-import { T as Tab } from '../../../../tabs-tab-ClLIOGiC.js';
+import { T as TabList } from '../../../../tabs-list-DoSX2xLL.js';
+import { T as Tab } from '../../../../tabs-tab-BI3hb-HP.js';
 import { T as TabContent } from '../../../../tabs-content-OWF8un_n.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';