@mastra/playground-ui 65.0.0-alpha.3 → 65.0.0-alpha.5

package/dist/domains/traces/components/trace-error-cell.cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_traces_components_traceErrorDetails = require('./trace-error-details.cjs.js');
+const dataList = require('../../../data-list-DlXU1PLQ.cjs');
+require('react');
+require('../../../keyboard/keyboard-shortcuts-context.cjs.js');
+const hoverCard = require('../../../hover-card-DVBz-iu-.cjs');
+
+function TraceErrorCell({ traceId, spanId, errorPreview }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(hoverCard.HoverCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      hoverCard.HoverCardTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TextCell, { font: "mono", className: "text-destructive-foreground", children: errorPreview })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      hoverCard.HoverCardContent,
+      {
+        side: "bottom",
+        align: "start",
+        showArrow: false,
+        className: "w-100 p-0",
+        onClick: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceErrorDetails.TraceErrorDetails, { traceId, spanId, errorPreview })
+      }
+    )
+  ] });
+}
+
+exports.TraceErrorCell = TraceErrorCell;
+//# sourceMappingURL=trace-error-cell.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-cell.cjs.js","sources":["../../../../src/domains/traces/components/trace-error-cell.tsx"],"sourcesContent":["import { TraceErrorDetails } from './trace-error-details';\nimport { DataList } from '@/ds/components/DataList';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '@/ds/components/HoverCard';\n\nexport interface TraceErrorCellProps {\n  traceId: string;\n  spanId: string;\n  /** The stored preview, shown in the cell and in the card until the full error loads. */\n  errorPreview: string;\n}\n\n/** Output cell of a failed row: the error preview, and the full error in a hover card. */\nexport function TraceErrorCell({ traceId, spanId, errorPreview }: TraceErrorCellProps) {\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        render={\n          <DataList.TextCell font=\"mono\" className=\"text-destructive-foreground\">\n            {errorPreview}\n          </DataList.TextCell>\n        }\n      />\n      <HoverCardContent\n        side=\"bottom\"\n        align=\"start\"\n        showArrow={false}\n        className=\"w-100 p-0\"\n        // The card is portaled, but React still bubbles its clicks to the row button.\n        onClick={event => event.stopPropagation()}\n      >\n        <TraceErrorDetails traceId={traceId} spanId={spanId} errorPreview={errorPreview} />\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"],"names":["HoverCard","jsx","HoverCardTrigger","DataList","HoverCardContent","TraceErrorDetails"],"mappings":";;;;;;;;;;;AAYO,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAa,EAAwB;AACrF,EAAA,uCACGA,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,MAAA,iCACGC,iBAAA,CAAS,QAAA,EAAT,EAAkB,IAAA,EAAK,MAAA,EAAO,SAAA,EAAU,6BAAA,EACtC,QAAA,EAAA,YAAA,EACH;AAAA;AAAA,KAEJ;AAAA,oBACAF,cAAA;AAAA,MAACG,0BAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAM,OAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,SAAA,EAAU,WAAA;AAAA,QAEV,OAAA,EAAS,CAAA,KAAA,KAAS,KAAA,CAAM,eAAA,EAAgB;AAAA,QAExC,QAAA,kBAAAH,cAAA,CAACI,6DAAA,EAAA,EAAkB,OAAA,EAAkB,MAAA,EAAgB,YAAA,EAA4B;AAAA;AAAA;AACnF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-error-cell.d.ts

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

package/dist/domains/traces/components/trace-error-cell.es.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TraceErrorDetails } from './trace-error-details.es.js';
+import { e as DataList } from '../../../data-list-Tor18oy5.js';
+import 'react';
+import '../../../keyboard/keyboard-shortcuts-context.es.js';
+import { H as HoverCard, b as HoverCardTrigger, a as HoverCardContent } from '../../../hover-card-CJ1fcJvo.js';
+
+function TraceErrorCell({ traceId, spanId, errorPreview }) {
+  return /* @__PURE__ */ jsxs(HoverCard, { children: [
+    /* @__PURE__ */ jsx(
+      HoverCardTrigger,
+      {
+        render: /* @__PURE__ */ jsx(DataList.TextCell, { font: "mono", className: "text-destructive-foreground", children: errorPreview })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HoverCardContent,
+      {
+        side: "bottom",
+        align: "start",
+        showArrow: false,
+        className: "w-100 p-0",
+        onClick: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsx(TraceErrorDetails, { traceId, spanId, errorPreview })
+      }
+    )
+  ] });
+}
+
+export { TraceErrorCell };
+//# sourceMappingURL=trace-error-cell.es.js.map

package/dist/domains/traces/components/trace-error-cell.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-cell.es.js","sources":["../../../../src/domains/traces/components/trace-error-cell.tsx"],"sourcesContent":["import { TraceErrorDetails } from './trace-error-details';\nimport { DataList } from '@/ds/components/DataList';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '@/ds/components/HoverCard';\n\nexport interface TraceErrorCellProps {\n  traceId: string;\n  spanId: string;\n  /** The stored preview, shown in the cell and in the card until the full error loads. */\n  errorPreview: string;\n}\n\n/** Output cell of a failed row: the error preview, and the full error in a hover card. */\nexport function TraceErrorCell({ traceId, spanId, errorPreview }: TraceErrorCellProps) {\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        render={\n          <DataList.TextCell font=\"mono\" className=\"text-destructive-foreground\">\n            {errorPreview}\n          </DataList.TextCell>\n        }\n      />\n      <HoverCardContent\n        side=\"bottom\"\n        align=\"start\"\n        showArrow={false}\n        className=\"w-100 p-0\"\n        // The card is portaled, but React still bubbles its clicks to the row button.\n        onClick={event => event.stopPropagation()}\n      >\n        <TraceErrorDetails traceId={traceId} spanId={spanId} errorPreview={errorPreview} />\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAa,EAAwB;AACrF,EAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,MAAA,sBACG,QAAA,CAAS,QAAA,EAAT,EAAkB,IAAA,EAAK,MAAA,EAAO,SAAA,EAAU,6BAAA,EACtC,QAAA,EAAA,YAAA,EACH;AAAA;AAAA,KAEJ;AAAA,oBACA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAM,OAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,SAAA,EAAU,WAAA;AAAA,QAEV,OAAA,EAAS,CAAA,KAAA,KAAS,KAAA,CAAM,eAAA,EAAgB;AAAA,QAExC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAAkB,MAAA,EAAgB,YAAA,EAA4B;AAAA;AAAA;AACnF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const observability = require('@mastra/core/observability');
+const traces = require('@mastra/react/hooks/traces');
+const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload/span-payload-registry.cjs.js');
+const domains_traces_components_traceErrorSummary = require('./trace-error-summary.cjs.js');
+
+function TraceErrorDetails({ traceId, spanId, errorPreview }) {
+  const { data, isError } = traces.useSpanDetail({ traceId, spanId });
+  const error = data && observability.describeSpanError(domains_traces_components_spanPayload_spanPayloadRegistry.asCoreSpan(data.span));
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceErrorSummary.TraceErrorSummary, { name: error.name ?? "Error", message: error.message });
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceErrorSummary.TraceErrorSummary, { name: "Error", message: errorPreview, notice: "Couldn't load the full error." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceErrorSummary.TraceErrorSummary, { name: "Error", message: errorPreview });
+}
+
+exports.TraceErrorDetails = TraceErrorDetails;
+//# sourceMappingURL=trace-error-details.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-details.cjs.js","sources":["../../../../src/domains/traces/components/trace-error-details.tsx"],"sourcesContent":["import { describeSpanError } from '@mastra/core/observability';\nimport { useSpanDetail } from '@mastra/react/hooks/traces';\nimport { asCoreSpan } from './span-payload/span-payload-registry';\nimport { TraceErrorSummary } from './trace-error-summary';\n\nexport interface TraceErrorDetailsProps {\n  traceId: string;\n  spanId: string;\n  errorPreview: string;\n}\n\n/**\n * The full error of a failed span. Mounted only while the hover card is open, so the span is\n * fetched on first hover (and cached for the trace drawer); the stored preview shows until then.\n */\nexport function TraceErrorDetails({ traceId, spanId, errorPreview }: TraceErrorDetailsProps) {\n  const { data, isError } = useSpanDetail({ traceId, spanId });\n  const error = data && describeSpanError(asCoreSpan(data.span));\n\n  if (error) return <TraceErrorSummary name={error.name ?? 'Error'} message={error.message} />;\n\n  if (isError) {\n    return <TraceErrorSummary name=\"Error\" message={errorPreview} notice=\"Couldn't load the full error.\" />;\n  }\n\n  return <TraceErrorSummary name=\"Error\" message={errorPreview} />;\n}\n"],"names":["useSpanDetail","describeSpanError","asCoreSpan","jsx","TraceErrorSummary"],"mappings":";;;;;;;;;;AAeO,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAa,EAA2B;AAC3F,EAAA,MAAM,EAAE,MAAM,OAAA,EAAQ,GAAIA,qBAAc,EAAE,OAAA,EAAS,QAAQ,CAAA;AAC3D,EAAA,MAAM,QAAQ,IAAA,IAAQC,+BAAA,CAAkBC,oEAAA,CAAW,IAAA,CAAK,IAAI,CAAC,CAAA;AAE7D,EAAA,IAAI,KAAA,EAAO,uBAAOC,cAAA,CAACC,6DAAA,EAAA,EAAkB,IAAA,EAAM,MAAM,IAAA,IAAQ,OAAA,EAAS,OAAA,EAAS,KAAA,CAAM,OAAA,EAAS,CAAA;AAE1F,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCAAQA,6DAAA,EAAA,EAAkB,IAAA,EAAK,SAAQ,OAAA,EAAS,YAAA,EAAc,QAAO,+BAAA,EAAgC,CAAA;AAAA,EACvG;AAEA,EAAA,uBAAOD,cAAA,CAACC,6DAAA,EAAA,EAAkB,IAAA,EAAK,OAAA,EAAQ,SAAS,YAAA,EAAc,CAAA;AAChE;;;;"}

package/dist/domains/traces/components/trace-error-details.d.ts

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

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { describeSpanError } from '@mastra/core/observability';
+import { useSpanDetail } from '@mastra/react/hooks/traces';
+import { asCoreSpan } from './span-payload/span-payload-registry.es.js';
+import { TraceErrorSummary } from './trace-error-summary.es.js';
+
+function TraceErrorDetails({ traceId, spanId, errorPreview }) {
+  const { data, isError } = useSpanDetail({ traceId, spanId });
+  const error = data && describeSpanError(asCoreSpan(data.span));
+  if (error) return /* @__PURE__ */ jsx(TraceErrorSummary, { name: error.name ?? "Error", message: error.message });
+  if (isError) {
+    return /* @__PURE__ */ jsx(TraceErrorSummary, { name: "Error", message: errorPreview, notice: "Couldn't load the full error." });
+  }
+  return /* @__PURE__ */ jsx(TraceErrorSummary, { name: "Error", message: errorPreview });
+}
+
+export { TraceErrorDetails };
+//# sourceMappingURL=trace-error-details.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-details.es.js","sources":["../../../../src/domains/traces/components/trace-error-details.tsx"],"sourcesContent":["import { describeSpanError } from '@mastra/core/observability';\nimport { useSpanDetail } from '@mastra/react/hooks/traces';\nimport { asCoreSpan } from './span-payload/span-payload-registry';\nimport { TraceErrorSummary } from './trace-error-summary';\n\nexport interface TraceErrorDetailsProps {\n  traceId: string;\n  spanId: string;\n  errorPreview: string;\n}\n\n/**\n * The full error of a failed span. Mounted only while the hover card is open, so the span is\n * fetched on first hover (and cached for the trace drawer); the stored preview shows until then.\n */\nexport function TraceErrorDetails({ traceId, spanId, errorPreview }: TraceErrorDetailsProps) {\n  const { data, isError } = useSpanDetail({ traceId, spanId });\n  const error = data && describeSpanError(asCoreSpan(data.span));\n\n  if (error) return <TraceErrorSummary name={error.name ?? 'Error'} message={error.message} />;\n\n  if (isError) {\n    return <TraceErrorSummary name=\"Error\" message={errorPreview} notice=\"Couldn't load the full error.\" />;\n  }\n\n  return <TraceErrorSummary name=\"Error\" message={errorPreview} />;\n}\n"],"names":[],"mappings":";;;;;;AAeO,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAa,EAA2B;AAC3F,EAAA,MAAM,EAAE,MAAM,OAAA,EAAQ,GAAI,cAAc,EAAE,OAAA,EAAS,QAAQ,CAAA;AAC3D,EAAA,MAAM,QAAQ,IAAA,IAAQ,iBAAA,CAAkB,UAAA,CAAW,IAAA,CAAK,IAAI,CAAC,CAAA;AAE7D,EAAA,IAAI,KAAA,EAAO,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,MAAM,IAAA,IAAQ,OAAA,EAAS,OAAA,EAAS,KAAA,CAAM,OAAA,EAAS,CAAA;AAE1F,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BAAQ,iBAAA,EAAA,EAAkB,IAAA,EAAK,SAAQ,OAAA,EAAS,YAAA,EAAc,QAAO,+BAAA,EAAgC,CAAA;AAAA,EACvG;AAEA,EAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAK,OAAA,EAAQ,SAAS,YAAA,EAAc,CAAA;AAChE;;;;"}

package/dist/domains/traces/components/trace-error-summary.cjs.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const copyButton = require('../../../copy-button-BC02oZJo.cjs');
+const Txt = require('../../../Txt-CIS2G5Jx.cjs');
+
+function TraceErrorSummary({ name, message, notice }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", className: "truncate font-medium text-destructive-foreground", children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: message, tooltip: "Copy error" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Txt.Txt,
+      {
+        as: "p",
+        variant: "body-sm",
+        font: "mono",
+        tone: "ink",
+        className: "max-h-64 overflow-y-auto px-3 py-2.5 wrap-break-word whitespace-pre-wrap",
+        children: message
+      }
+    ),
+    notice && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "muted", className: "px-3 pb-2.5", children: notice })
+  ] });
+}
+
+exports.TraceErrorSummary = TraceErrorSummary;
+//# sourceMappingURL=trace-error-summary.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-summary.cjs.js","sources":["../../../../src/domains/traces/components/trace-error-summary.tsx"],"sourcesContent":["import { CopyButton } from '@/ds/components/CopyButton';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface TraceErrorSummaryProps {\n  name: string;\n  message: string;\n  /** Shown under the message, e.g. when only the preview could be loaded. */\n  notice?: string;\n}\n\n/** An error's name and copy button over its full message, wrapped and scrollable. */\nexport function TraceErrorSummary({ name, message, notice }: TraceErrorSummaryProps) {\n  return (\n    <>\n      <div className=\"flex items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-3\">\n        <Txt as=\"span\" variant=\"caption\" className=\"truncate font-medium text-destructive-foreground\">\n          {name}\n        </Txt>\n        <CopyButton content={message} tooltip=\"Copy error\" />\n      </div>\n      <Txt\n        as=\"p\"\n        variant=\"body-sm\"\n        font=\"mono\"\n        tone=\"ink\"\n        className=\"max-h-64 overflow-y-auto px-3 py-2.5 wrap-break-word whitespace-pre-wrap\"\n      >\n        {message}\n      </Txt>\n      {notice && (\n        <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className=\"px-3 pb-2.5\">\n          {notice}\n        </Txt>\n      )}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","Txt","CopyButton"],"mappings":";;;;;;;;AAWO,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,OAAA,EAAS,QAAO,EAA2B;AACnF,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EACb,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAACC,WAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,SAAA,EAAU,SAAA,EAAU,oDACxC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,sBACAD,cAAA,CAACE,qBAAA,EAAA,EAAW,OAAA,EAAS,OAAA,EAAS,SAAQ,YAAA,EAAa;AAAA,KAAA,EACrD,CAAA;AAAA,oBACAF,cAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,GAAA;AAAA,QACH,OAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAK,MAAA;AAAA,QACL,IAAA,EAAK,KAAA;AAAA,QACL,SAAA,EAAU,0EAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,MAAA,oBACCD,cAAA,CAACC,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,aAAA,EAClD,QAAA,EAAA,MAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-error-summary.d.ts

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

package/dist/domains/traces/components/trace-error-summary.es.js

@@ -0,0 +1,27 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { C as CopyButton } from '../../../copy-button-B_i9lwFJ.js';
+import { T as Txt } from '../../../Txt-BtIGLRk1.js';
+
+function TraceErrorSummary({ name, message, notice }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-3", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", className: "truncate font-medium text-destructive-foreground", children: name }),
+      /* @__PURE__ */ jsx(CopyButton, { content: message, tooltip: "Copy error" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Txt,
+      {
+        as: "p",
+        variant: "body-sm",
+        font: "mono",
+        tone: "ink",
+        className: "max-h-64 overflow-y-auto px-3 py-2.5 wrap-break-word whitespace-pre-wrap",
+        children: message
+      }
+    ),
+    notice && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "muted", className: "px-3 pb-2.5", children: notice })
+  ] });
+}
+
+export { TraceErrorSummary };
+//# sourceMappingURL=trace-error-summary.es.js.map

package/dist/domains/traces/components/trace-error-summary.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace-error-summary.es.js","sources":["../../../../src/domains/traces/components/trace-error-summary.tsx"],"sourcesContent":["import { CopyButton } from '@/ds/components/CopyButton';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface TraceErrorSummaryProps {\n  name: string;\n  message: string;\n  /** Shown under the message, e.g. when only the preview could be loaded. */\n  notice?: string;\n}\n\n/** An error's name and copy button over its full message, wrapped and scrollable. */\nexport function TraceErrorSummary({ name, message, notice }: TraceErrorSummaryProps) {\n  return (\n    <>\n      <div className=\"flex items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-3\">\n        <Txt as=\"span\" variant=\"caption\" className=\"truncate font-medium text-destructive-foreground\">\n          {name}\n        </Txt>\n        <CopyButton content={message} tooltip=\"Copy error\" />\n      </div>\n      <Txt\n        as=\"p\"\n        variant=\"body-sm\"\n        font=\"mono\"\n        tone=\"ink\"\n        className=\"max-h-64 overflow-y-auto px-3 py-2.5 wrap-break-word whitespace-pre-wrap\"\n      >\n        {message}\n      </Txt>\n      {notice && (\n        <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className=\"px-3 pb-2.5\">\n          {notice}\n        </Txt>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,OAAA,EAAS,QAAO,EAA2B;AACnF,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,SAAA,EAAU,SAAA,EAAU,oDACxC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,OAAA,EAAS,SAAQ,YAAA,EAAa;AAAA,KAAA,EACrD,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,GAAA;AAAA,QACH,OAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAK,MAAA;AAAA,QACL,IAAA,EAAK,KAAA;AAAA,QACL,SAAA,EAAU,0EAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,MAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,aAAA,EAClD,QAAA,EAAA,MAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-id-button.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const dataPanel = require('../../../data-panel-BkfjzriB.cjs');
+const dataPanel = require('../../../data-panel-DGNV14pm.cjs');
 
 function TraceIdButton({ id }) {
   return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CopyId, { id });

package/dist/domains/traces/components/trace-id-button.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { D as DataPanel } from '../../../data-panel-CMkR6Avv.js';
+import { D as DataPanel } from '../../../data-panel-DjtnX70w.js';
 
 function TraceIdButton({ id }) {
   return /* @__PURE__ */ jsx(DataPanel.CopyId, { id });

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

@@ -11,7 +11,7 @@ const domains_traces_components_traceMessagesPanel = require('./trace-messages-p
 const domains_traces_components_traceThreadContext = require('./trace-thread-context.cjs.js');
 const domains_traces_components_traceThreadPanel = require('./trace-thread-panel.cjs.js');
 const domains_traces_hooks_useTraceSpanNavigation = require('../hooks/use-trace-span-navigation.cjs.js');
-const Button = require('../../../Button-DH1aTzbs.cjs');
+const Button = require('../../../Button-C4I05uT4.cjs');
 const lib_framework = require('../../../lib/framework.cjs.js');
 
 function getEntityHref(paths, entityType, entityId) {

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

@@ -7,7 +7,7 @@ import { TraceMessagesPanel } from './trace-messages-panel.es.js';
 import { getTraceThreadId } from './trace-thread-context.es.js';
 import { TraceThreadPanel } from './trace-thread-panel.es.js';
 import { useTraceSpanNavigation } from '../hooks/use-trace-span-navigation.es.js';
-import { B as Button } from '../../../Button-EGoajBQY.js';
+import { B as Button } from '../../../Button-D8a5EWJ5.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
 
 function getEntityHref(paths, entityType, entityId) {

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const domains_traces_components_spanTreeRail = require('./span-tree-rail.cjs.js');
 const skeleton = require('../../../skeleton-lkFwOzqL.cjs');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');
 
@@ -19,13 +20,12 @@ const ROWS = [
 const LEGEND_WIDTHS = ["w-14", "w-12", "w-16"];
 function TraceSpanTreeSkeleton({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", "aria-label": "Loading spans", className: utils_cn.cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 py-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("h-5 rounded-full", width) }, width)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-8 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
-      depth > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "mt-[5px] size-2 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[18px] items-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3", style: { width } }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 pb-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("h-5 rounded-full", width) }, width)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex pl-1", style: { paddingBlock: domains_traces_components_spanTreeRail.SPAN_TREE_PAD_Y }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1", style: { paddingLeft: depth * domains_traces_components_spanTreeRail.SPAN_TREE_INDENT }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-6 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-5 rounded-md" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col pl-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3", style: { width } }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-4 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-2.5 w-10" }) })
         ] })
       ] }),

package/dist/domains/traces/components/trace-span-tree-skeleton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (structure sign for children, top-aligned dot, caption name stacked over the meta duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n            {depth > 0 && <div className=\"w-2 shrink-0\" />}\n            <div className=\"flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1\">\n              <Skeleton className=\"mt-[5px] size-2 shrink-0 rounded-full\" />\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                {/* Line boxes of the caption name (18px) and meta duration (16px). */}\n                <div className=\"flex h-[18px] items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;;;AAIA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjBA,cAAA,CAACC,iBAAA,EAAA,EAAqB,WAAWF,WAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACAC,cAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzBF,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,4BAAA,EAA6B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,MAAA,KAAA,GAAQ,CAAA,oBAAKE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,sBAC5CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,uCAAA,EAAwC,CAAA;AAAA,wBAC5DH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAEb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACAD,cAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAdtB,GAeV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { SPAN_TREE_INDENT, SPAN_TREE_PAD_Y } from './span-tree-rail';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (24px per level, badge centred on the name line, name stacked over the duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 pb-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex pl-1\" style={{ paddingBlock: SPAN_TREE_PAD_Y }}>\n            <div className=\"flex min-w-0 flex-1\" style={{ paddingLeft: depth * SPAN_TREE_INDENT }}>\n              <div className=\"flex h-5 w-6 shrink-0 items-center justify-center\">\n                <Skeleton className=\"size-5 rounded-md\" />\n              </div>\n              <div className=\"flex min-w-0 flex-1 flex-col pl-2\">\n                {/* Line boxes of the body-sm name (20px) and caption duration (16px). */}\n                <div className=\"flex h-5 items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Skeleton","SPAN_TREE_PAD_Y","SPAN_TREE_INDENT"],"mappings":";;;;;;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjBA,cAAA,CAACC,iBAAA,EAAA,EAAqB,WAAWF,WAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACAC,cAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,GAAG,GAAA,qBACzBF,eAAA,CAAC,SAAc,SAAA,EAAU,WAAA,EAAY,OAAO,EAAE,YAAA,EAAcI,wDAAgB,EAC1E,QAAA,EAAA;AAAA,sBAAAJ,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EAAsB,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA,GAAQK,yDAAiB,EAClF,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,SAAI,SAAA,EAAU,mDAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,qBAAoB,CAAA,EAC1C,CAAA;AAAA,wBACAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EAEb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACb,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACAD,cAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAftB,GAgBV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { SPAN_TREE_PAD_Y, SPAN_TREE_INDENT } from './span-tree-rail.es.js';
 import { S as Skeleton } from '../../../skeleton-Q4fDAXcz.js';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';
 
@@ -15,13 +16,12 @@ const ROWS = [
 const LEGEND_WIDTHS = ["w-14", "w-12", "w-16"];
 function TraceSpanTreeSkeleton({ className }) {
   return /* @__PURE__ */ jsxs("div", { role: "status", "aria-label": "Loading spans", className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 py-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-5 rounded-full", width) }, width)) }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
-      depth > 0 && /* @__PURE__ */ jsx("div", { className: "w-2 shrink-0" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "mt-[5px] size-2 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-[18px] items-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width } }) }),
+    /* @__PURE__ */ jsx("div", { "data-slot": "span-type-legend-skeleton", className: "flex flex-wrap items-center gap-1.5 pb-3", children: LEGEND_WIDTHS.map((width) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-5 rounded-full", width) }, width)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-y-px pb-1", children: ROWS.map(([depth, width], idx) => /* @__PURE__ */ jsxs("div", { className: "flex pl-1", style: { paddingBlock: SPAN_TREE_PAD_Y }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1", style: { paddingLeft: depth * SPAN_TREE_INDENT }, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-5 w-6 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "size-5 rounded-md" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col pl-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3", style: { width } }) }),
           /* @__PURE__ */ jsx("div", { className: "flex h-4 items-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-10" }) })
         ] })
       ] }),

package/dist/domains/traces/components/trace-span-tree-skeleton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree-skeleton.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (structure sign for children, top-aligned dot, caption name stacked over the meta duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex min-h-8 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n            {depth > 0 && <div className=\"w-2 shrink-0\" />}\n            <div className=\"flex min-w-0 flex-1 items-start gap-1.5 px-2 py-1\">\n              <Skeleton className=\"mt-[5px] size-2 shrink-0 rounded-full\" />\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                {/* Line boxes of the caption name (18px) and meta duration (16px). */}\n                <div className=\"flex h-[18px] items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjB,GAAA,CAAC,QAAA,EAAA,EAAqB,WAAW,EAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAG,wBACzB,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,4BAAA,EAA6B,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EACvF,QAAA,EAAA;AAAA,MAAA,KAAA,GAAQ,CAAA,oBAAK,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,sBAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,uCAAA,EAAwC,CAAA;AAAA,wBAC5D,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACA,GAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAdtB,GAeV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree-skeleton.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree-skeleton.tsx"],"sourcesContent":["import { SPAN_TREE_INDENT, SPAN_TREE_PAD_Y } from './span-tree-rail';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** `[depth, name width]` per row: a root span, then a couple of nested levels, like a typical agent run. */\nconst ROWS: Array<[number, string]> = [\n  [0, '55%'],\n  [1, '40%'],\n  [1, '60%'],\n  [2, '35%'],\n  [2, '50%'],\n  [1, '45%'],\n  [2, '30%'],\n  [1, '65%'],\n];\n\nconst LEGEND_WIDTHS = ['w-14', 'w-12', 'w-16'];\n\nexport interface TraceSpanTreeSkeletonProps {\n  className?: string;\n}\n\n/**\n * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span\n * (24px per level, badge centred on the name line, name stacked over the duration, `w-8` toggle slot) —\n * so nothing jumps when the spans land.\n */\nexport function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps) {\n  return (\n    <div role=\"status\" aria-label=\"Loading spans\" className={cn('flex flex-col', className)}>\n      <div data-slot=\"span-type-legend-skeleton\" className=\"flex flex-wrap items-center gap-1.5 pb-3\">\n        {LEGEND_WIDTHS.map(width => (\n          <Skeleton key={width} className={cn('h-5 rounded-full', width)} />\n        ))}\n      </div>\n      <div className=\"grid gap-y-px pb-1\">\n        {ROWS.map(([depth, width], idx) => (\n          <div key={idx} className=\"flex pl-1\" style={{ paddingBlock: SPAN_TREE_PAD_Y }}>\n            <div className=\"flex min-w-0 flex-1\" style={{ paddingLeft: depth * SPAN_TREE_INDENT }}>\n              <div className=\"flex h-5 w-6 shrink-0 items-center justify-center\">\n                <Skeleton className=\"size-5 rounded-md\" />\n              </div>\n              <div className=\"flex min-w-0 flex-1 flex-col pl-2\">\n                {/* Line boxes of the body-sm name (20px) and caption duration (16px). */}\n                <div className=\"flex h-5 items-center\">\n                  <Skeleton className=\"h-3\" style={{ width }} />\n                </div>\n                <div className=\"flex h-4 items-center\">\n                  <Skeleton className=\"h-2.5 w-10\" />\n                </div>\n              </div>\n            </div>\n            <div className=\"w-8 shrink-0\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,IAAA,GAAgC;AAAA,EACpC,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK,CAAA;AAAA,EACT,CAAC,GAAG,KAAK;AACX,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAWtC,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAU,EAA+B;AAC/E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,WAAA,EAAU,2BAAA,EAA4B,SAAA,EAAU,0CAAA,EAClD,wBAAc,GAAA,CAAI,CAAA,KAAA,qBACjB,GAAA,CAAC,QAAA,EAAA,EAAqB,WAAW,EAAA,CAAG,kBAAA,EAAoB,KAAK,CAAA,EAAA,EAA9C,KAAiD,CACjE,CAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EACZ,eAAK,GAAA,CAAI,CAAC,CAAC,KAAA,EAAO,KAAK,GAAG,GAAA,qBACzB,IAAA,CAAC,SAAc,SAAA,EAAU,WAAA,EAAY,OAAO,EAAE,YAAA,EAAc,iBAAgB,EAC1E,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EAAsB,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA,GAAQ,kBAAiB,EAClF,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,mDAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,qBAAoB,CAAA,EAC1C,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACb,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,KAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,CAAA,EAC9C,CAAA;AAAA,0BACA,GAAA,CAAC,SAAI,SAAA,EAAU,uBAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,cAAa,CAAA,EACnC;AAAA,SAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe;AAAA,KAAA,EAAA,EAftB,GAgBV,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree.cjs.js

@@ -7,14 +7,13 @@ const domains_traces_components_spanRows = require('./span-rows.cjs.js');
 const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTreeSkeleton = require('./trace-span-tree-skeleton.cjs.js');
-const Txt = require('../../../Txt-CIS2G5Jx.cjs');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTreeSkeleton.TraceSpanTreeSkeleton, {});
 }
-const durationMeta = (ctx) => /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", font: "mono", children: utils_duration.formatDurationPrecise(ctx.span.latency) });
+const durationMeta = (ctx) => utils_duration.formatDuration(ctx.span.latency);
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => (\n  <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n    {formatDurationPrecise(ctx.span.latency)}\n  </Txt>\n);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["TraceSpanTreeSkeleton","jsx","Txt","formatDurationPrecise","jsxs","Fragment","SpanTypeLegend","cn","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;;;AA4BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,sCAAQA,qEAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBACpBC,cAAA,CAACC,WAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,MAAK,MAAA,EAChC,QAAA,EAAAC,oCAAA,CAAsB,GAAA,CAAI,IAAA,CAAK,OAAO,CAAA,EACzC,CAAA;AAIK,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOF,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEG,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDJ,cAAA,CAACK,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CL,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWM,YAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAAN,cAAA;AAAA,UAACO,2CAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAOP,cAAA,CAACQ,iDAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { cn } from '@/lib/utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => formatDuration(ctx.span.latency);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["TraceSpanTreeSkeleton","formatDuration","jsx","jsxs","Fragment","SpanTypeLegend","cn","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;;AA2BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,sCAAQA,qEAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,eAAe,CAAC,GAAA,KAAwBC,6BAAA,CAAe,GAAA,CAAI,KAAK,OAAO,CAAA;AAGtE,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOC,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDF,cAAA,CAACG,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CH,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWI,YAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAAJ,cAAA;AAAA,UAACK,2CAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAOL,cAAA,CAACM,iDAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}

package/dist/domains/traces/components/trace-span-tree.es.js

@@ -3,14 +3,13 @@ import { SpanRows } from './span-rows.es.js';
 import { SpanTreeRow } from './span-tree-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton.es.js';
-import { T as Txt } from '../../../Txt-BtIGLRk1.js';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';
-import { formatDurationPrecise } from '../../../utils/duration.es.js';
+import { formatDuration } from '../../../utils/duration.es.js';
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsx(TraceSpanTreeSkeleton, {});
 }
-const durationMeta = (ctx) => /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", font: "mono", children: formatDurationPrecise(ctx.span.latency) });
+const durationMeta = (ctx) => formatDuration(ctx.span.latency);
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,

package/dist/domains/traces/components/trace-span-tree.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => (\n  <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n    {formatDurationPrecise(ctx.span.latency)}\n  </Txt>\n);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA4BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBACpB,GAAA,CAAC,OAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,MAAK,MAAA,EAChC,QAAA,EAAA,qBAAA,CAAsB,GAAA,CAAI,IAAA,CAAK,OAAO,CAAA,EACzC,CAAA;AAIK,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { cn } from '@/lib/utils';\nimport { formatDuration } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => formatDuration(ctx.span.latency);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,eAAe,CAAC,GAAA,KAAwB,cAAA,CAAe,GAAA,CAAI,KAAK,OAAO,CAAA;AAGtE,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -6,10 +6,11 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
-const dataPanel = require('../../../data-panel-BkfjzriB.cjs');
+const dataPanel = require('../../../data-panel-DGNV14pm.cjs');
 const Txt = require('../../../Txt-CIS2G5Jx.cjs');
 const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');
+require('react');
 const utils_cost = require('../../../utils/cost.cjs.js');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');

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

@@ -1 +1 @@
-{"version":3,"file":"trace-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/trace-summary-description.tsx"],"sourcesContent":["import {\n  ArrowDownToLineIcon,\n  ArrowUpFromLineIcon,\n  CalendarClockIcon,\n  CircleDollarSignIcon,\n  TimerIcon,\n} from 'lucide-react';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { TraceStatusValue } from './trace-status-value';\nimport type { TraceStatusValueStatus } from './trace-status-value';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { AgentIcon, WorkflowIcon } from '@/ds/icons';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\nimport { formatDate, formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\nfunction formatEntityType(entityType: string): string {\n  return entityType\n    .split('_')\n    .map(word => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)\n    .join(' ');\n}\n\nfunction computeTraceStatus(span: { error?: unknown; endedAt?: Date | string | null }): TraceStatusValueStatus {\n  if (span.error != null) return 'error';\n  if (span.endedAt == null) return 'running';\n  return 'success';\n}\n\n/** Lightweight root-span fields available from `useTraceLightSpans`. */\ntype RootSpanSummary = {\n  entityId?: string | null;\n  entityName?: string | null;\n  entityType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  error?: unknown;\n};\n\nexport interface TraceSummaryDescriptionProps {\n  rootSpan: RootSpanSummary;\n  usage?: TraceUsageSummary;\n  /** When provided (with `LinkComponent`), the entity name links to the entity's page. */\n  entityHref?: string;\n  LinkComponent?: LinkComponent;\n}\n\n/** Compact trace metadata shown under the trace side-panel heading. */\nexport function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }: TraceSummaryDescriptionProps) {\n  const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;\n  const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;\n  const duration = formatDuration(getSpanDurationMs(startedAt, endedAt));\n  const exactDuration = formatDurationPrecise(getSpanDurationMs(startedAt, endedAt));\n  const startedAtTimestamp = formatDate(startedAt, 'time');\n  const exactStartedAtTimestamp = formatTimestampPrecise(startedAt);\n\n  const entityName = rootSpan.entityName || rootSpan.entityId;\n  const entityType = rootSpan.entityType;\n  const formattedEntityType = entityType ? formatEntityType(entityType) : 'Entity';\n  const EntityIcon = entityType?.includes('workflow') ? WorkflowIcon : AgentIcon;\n\n  return (\n    <DataPanel.Metadata>\n      {entityName &&\n        (entityHref ? (\n          <DataPanel.Meta\n            as={LinkComponent ?? 'a'}\n            href={entityHref}\n            icon={<EntityIcon />}\n            tooltip={`See ${formattedEntityType.toLowerCase()}`}\n          >\n            {entityName}\n          </DataPanel.Meta>\n        ) : (\n          <DataPanel.Meta icon={<EntityIcon />} tooltip={formattedEntityType}>\n            {entityName}\n          </DataPanel.Meta>\n        ))}\n      <DataPanel.Meta tooltip=\"Trace status\">\n        <TraceStatusValue status={computeTraceStatus(rootSpan)} />\n      </DataPanel.Meta>\n      {startedAtTimestamp && exactStartedAtTimestamp && (\n        <DataPanel.Meta icon={<CalendarClockIcon />} tooltip={`Started at ${exactStartedAtTimestamp}`}>\n          {startedAtTimestamp}\n        </DataPanel.Meta>\n      )}\n      {duration && exactDuration && (\n        <DataPanel.Meta icon={<TimerIcon />} tooltip={`Duration ${exactDuration}`}>\n          <Txt as=\"span\" variant=\"label\" font=\"mono\">\n            {duration}\n          </Txt>\n        </DataPanel.Meta>\n      )}\n      {usage && (\n        <>\n          <DataPanel.Meta icon={<ArrowDownToLineIcon />} tooltip=\"Input tokens\">\n            {usage.inputTokens === undefined ? '—' : formatCompactNumber(usage.inputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<ArrowUpFromLineIcon />} tooltip=\"Output tokens\">\n            {usage.outputTokens === undefined ? '—' : formatCompactNumber(usage.outputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<CircleDollarSignIcon />} tooltip=\"Estimated cost\">\n            {usage.estimatedCost === undefined ? '—' : formatCost(usage.estimatedCost, usage.costUnit)}\n          </DataPanel.Meta>\n        </>\n      )}\n    </DataPanel.Metadata>\n  );\n}\n"],"names":["formatDuration","getSpanDurationMs","formatDurationPrecise","formatDate","formatTimestampPrecise","WorkflowIcon","AgentIcon","jsxs","DataPanel","jsx","TraceStatusValue","CalendarClockIcon","TimerIcon","Txt","Fragment","ArrowDownToLineIcon","formatCompactNumber","ArrowUpFromLineIcon","CircleDollarSignIcon","formatCost"],"mappings":"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"}
+{"version":3,"file":"trace-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/trace-summary-description.tsx"],"sourcesContent":["import {\n  ArrowDownToLineIcon,\n  ArrowUpFromLineIcon,\n  CalendarClockIcon,\n  CircleDollarSignIcon,\n  TimerIcon,\n} from 'lucide-react';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport { getSpanDurationMs } from '../utils/span-utils';\nimport { TraceStatusValue } from './trace-status-value';\nimport type { TraceStatusValueStatus } from './trace-status-value';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { AgentIcon, WorkflowIcon } from '@/ds/icons';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\nimport { formatDate, formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDuration, formatDurationPrecise } from '@/utils/duration';\n\nfunction formatEntityType(entityType: string): string {\n  return entityType\n    .split('_')\n    .map(word => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)\n    .join(' ');\n}\n\nfunction computeTraceStatus(span: { error?: unknown; endedAt?: Date | string | null }): TraceStatusValueStatus {\n  if (span.error != null) return 'error';\n  if (span.endedAt == null) return 'running';\n  return 'success';\n}\n\n/** Lightweight root-span fields available from `useTraceLightSpans`. */\ntype RootSpanSummary = {\n  entityId?: string | null;\n  entityName?: string | null;\n  entityType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n  error?: unknown;\n};\n\nexport interface TraceSummaryDescriptionProps {\n  rootSpan: RootSpanSummary;\n  usage?: TraceUsageSummary;\n  /** When provided (with `LinkComponent`), the entity name links to the entity's page. */\n  entityHref?: string;\n  LinkComponent?: LinkComponent;\n}\n\n/** Compact trace metadata shown under the trace side-panel heading. */\nexport function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }: TraceSummaryDescriptionProps) {\n  const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;\n  const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;\n  const duration = formatDuration(getSpanDurationMs(startedAt, endedAt));\n  const exactDuration = formatDurationPrecise(getSpanDurationMs(startedAt, endedAt));\n  const startedAtTimestamp = formatDate(startedAt, 'time');\n  const exactStartedAtTimestamp = formatTimestampPrecise(startedAt);\n\n  const entityName = rootSpan.entityName || rootSpan.entityId;\n  const entityType = rootSpan.entityType;\n  const formattedEntityType = entityType ? formatEntityType(entityType) : 'Entity';\n  const EntityIcon = entityType?.includes('workflow') ? WorkflowIcon : AgentIcon;\n\n  return (\n    <DataPanel.Metadata>\n      {entityName &&\n        (entityHref ? (\n          <DataPanel.Meta\n            as={LinkComponent ?? 'a'}\n            href={entityHref}\n            icon={<EntityIcon />}\n            tooltip={`See ${formattedEntityType.toLowerCase()}`}\n          >\n            {entityName}\n          </DataPanel.Meta>\n        ) : (\n          <DataPanel.Meta icon={<EntityIcon />} tooltip={formattedEntityType}>\n            {entityName}\n          </DataPanel.Meta>\n        ))}\n      <DataPanel.Meta tooltip=\"Trace status\">\n        <TraceStatusValue status={computeTraceStatus(rootSpan)} />\n      </DataPanel.Meta>\n      {startedAtTimestamp && exactStartedAtTimestamp && (\n        <DataPanel.Meta icon={<CalendarClockIcon />} tooltip={`Started at ${exactStartedAtTimestamp}`}>\n          {startedAtTimestamp}\n        </DataPanel.Meta>\n      )}\n      {duration && exactDuration && (\n        <DataPanel.Meta icon={<TimerIcon />} tooltip={`Duration ${exactDuration}`}>\n          <Txt as=\"span\" variant=\"label\" font=\"mono\">\n            {duration}\n          </Txt>\n        </DataPanel.Meta>\n      )}\n      {usage && (\n        <>\n          <DataPanel.Meta icon={<ArrowDownToLineIcon />} tooltip=\"Input tokens\">\n            {usage.inputTokens === undefined ? '—' : formatCompactNumber(usage.inputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<ArrowUpFromLineIcon />} tooltip=\"Output tokens\">\n            {usage.outputTokens === undefined ? '—' : formatCompactNumber(usage.outputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<CircleDollarSignIcon />} tooltip=\"Estimated cost\">\n            {usage.estimatedCost === undefined ? '—' : formatCost(usage.estimatedCost, usage.costUnit)}\n          </DataPanel.Meta>\n        </>\n      )}\n    </DataPanel.Metadata>\n  );\n}\n"],"names":["formatDuration","getSpanDurationMs","formatDurationPrecise","formatDate","formatTimestampPrecise","WorkflowIcon","AgentIcon","jsxs","DataPanel","jsx","TraceStatusValue","CalendarClockIcon","TimerIcon","Txt","Fragment","ArrowDownToLineIcon","formatCompactNumber","ArrowUpFromLineIcon","CircleDollarSignIcon","formatCost"],"mappings":"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"}

package/dist/domains/traces/components/trace-summary-description.es.js

@@ -2,10 +2,11 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, ArrowDownToLineIcon, ArrowUpFromLineIcon, CircleDollarSignIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
 import { TraceStatusValue } from './trace-status-value.es.js';
-import { D as DataPanel } from '../../../data-panel-CMkR6Avv.js';
+import { D as DataPanel } from '../../../data-panel-DjtnX70w.js';
 import { T as Txt } from '../../../Txt-BtIGLRk1.js';
 import { AgentIcon } from '../../../icons/AgentIcon.es.js';
 import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';
+import 'react';
 import { formatCompactNumber, formatCost } from '../../../utils/cost.es.js';
 import { formatDate, formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDuration, formatDurationPrecise } from '../../../utils/duration.es.js';