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

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

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
+const dataKeysAndValues = require('../../../data-keys-and-values-B-K23j9Y.cjs');
+const utils_cn = require('../../../cn-vA5sWo9W.cjs');
+
+const detailKeyLabels = {
+  text: "Text",
+  cacheRead: "Cache read",
+  cacheWrite: "Cache write",
+  audio: "Audio",
+  image: "Image",
+  reasoning: "Reasoning"
+};
+const INPUT_COLOR = "oklch(0.78 0.16 320)";
+const OUTPUT_COLOR = "oklch(0.55 0.18 320)";
+function SpanTokenUsage({ usage, className }) {
+  const view = domains_traces_components_spanTokenUsage_utils.getTokenUsageView(usage);
+  if (!view) return null;
+  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn("border-b border-border1 mt-2 mb-8 pb-3 grid grid-cols-1 4xl:grid-cols-2 4xl:gap-12", className),
+      children: [
+        showSplit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline text-neutral2 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md", children: "Tokens Used" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4 text-ui-md font-semibold", children: total.toLocaleString() }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-ui-sm", children: [
+              Math.round(inputPct),
+              "% Input vs ",
+              Math.round(outputPct),
+              "% Output"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1.5 rounded-md bg-surface4 mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-1.5 rounded-sm overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute h-1.5 top-0 left-0",
+                style: { width: `${inputPct}%`, backgroundColor: INPUT_COLOR }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute h-1.5 top-0",
+                style: { left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UsageColumn, { label: "Input", color: INPUT_COLOR, value: inputValue, details: inputDetails }),
+          /* @__PURE__ */ jsxRuntime.jsx(UsageColumn, { label: "Output", color: OUTPUT_COLOR, value: outputValue, details: outputDetails })
+        ] })
+      ]
+    }
+  );
+}
+function UsageColumn({
+  label,
+  color,
+  value,
+  details
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline text-neutral2 gap-3 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md", children: label }),
+      typeof value === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4 text-ui-md font-semibold", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full self-center", style: { backgroundColor: color } })
+      ] })
+    ] }),
+    details && /* @__PURE__ */ jsxRuntime.jsx(DetailsList, { details })
+  ] });
+}
+function DetailsList({ details }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues, { density: "dense", children: Object.entries(details).map(([detailKey, detailValue]) => {
+    if (typeof detailValue !== "number") return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: detailKeyLabels[detailKey] || detailKey }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { className: "text-right", children: detailValue.toLocaleString() })
+    ] }, detailKey);
+  }) });
+}
+
+exports.SpanTokenUsage = SpanTokenUsage;
+//# sourceMappingURL=span-token-usage.cjs.js.map

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

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

package/dist/domains/traces/components/span-token-usage.d.ts

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

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

@@ -0,0 +1,90 @@
+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-Dly5DG8l.js';
+import { c as cn } from '../../../cn-BakJzhuv.js';
+
+const detailKeyLabels = {
+  text: "Text",
+  cacheRead: "Cache read",
+  cacheWrite: "Cache write",
+  audio: "Audio",
+  image: "Image",
+  reasoning: "Reasoning"
+};
+const INPUT_COLOR = "oklch(0.78 0.16 320)";
+const OUTPUT_COLOR = "oklch(0.55 0.18 320)";
+function SpanTokenUsage({ usage, className }) {
+  const view = getTokenUsageView(usage);
+  if (!view) return null;
+  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("border-b border-border1 mt-2 mb-8 pb-3 grid grid-cols-1 4xl:grid-cols-2 4xl:gap-12", className),
+      children: [
+        showSplit && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline text-neutral2 gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-ui-md", children: "Tokens Used" }),
+            /* @__PURE__ */ jsx("span", { className: "text-neutral4 text-ui-md font-semibold", children: total.toLocaleString() }),
+            /* @__PURE__ */ jsxs("span", { className: "ml-auto text-ui-sm", children: [
+              Math.round(inputPct),
+              "% Input vs ",
+              Math.round(outputPct),
+              "% Output"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-1.5 rounded-md bg-surface4 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-1.5 rounded-sm overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute h-1.5 top-0 left-0",
+                style: { width: `${inputPct}%`, backgroundColor: INPUT_COLOR }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute h-1.5 top-0",
+                style: { left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-6 grid-cols-2", children: [
+          /* @__PURE__ */ jsx(UsageColumn, { label: "Input", color: INPUT_COLOR, value: inputValue, details: inputDetails }),
+          /* @__PURE__ */ jsx(UsageColumn, { label: "Output", color: OUTPUT_COLOR, value: outputValue, details: outputDetails })
+        ] })
+      ]
+    }
+  );
+}
+function UsageColumn({
+  label,
+  color,
+  value,
+  details
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline text-neutral2 gap-3 mb-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-ui-md", children: label }),
+      typeof value === "number" && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-neutral4 text-ui-md font-semibold", children: value.toLocaleString() }),
+        /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full self-center", style: { backgroundColor: color } })
+      ] })
+    ] }),
+    details && /* @__PURE__ */ jsx(DetailsList, { details })
+  ] });
+}
+function DetailsList({ details }) {
+  return /* @__PURE__ */ jsx(DataKeysAndValues, { density: "dense", children: Object.entries(details).map(([detailKey, detailValue]) => {
+    if (typeof detailValue !== "number") return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: detailKeyLabels[detailKey] || detailKey }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { className: "text-right", children: detailValue.toLocaleString() })
+    ] }, detailKey);
+  }) });
+}
+
+export { SpanTokenUsage };
+//# sourceMappingURL=span-token-usage.es.js.map

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function hasNumericDetails(details) {
+  return !!details && Object.values(details).some((v) => typeof v === "number");
+}
+function getTokenUsageView(usage) {
+  if (!usage) return null;
+  const hasInput = typeof usage.inputTokens === "number";
+  const hasOutput = typeof usage.outputTokens === "number";
+  if (!hasInput && !hasOutput) return null;
+  const inputValue = usage.inputTokens ?? 0;
+  const outputValue = usage.outputTokens ?? 0;
+  const total = inputValue + outputValue;
+  const showSplit = total > 0;
+  return {
+    inputValue,
+    outputValue,
+    total,
+    showSplit,
+    inputPct: showSplit ? inputValue / total * 100 : 0,
+    outputPct: showSplit ? outputValue / total * 100 : 0,
+    inputDetails: hasInput && hasNumericDetails(usage.inputDetails) ? usage.inputDetails : void 0,
+    outputDetails: hasOutput && hasNumericDetails(usage.outputDetails) ? usage.outputDetails : void 0
+  };
+}
+
+exports.getTokenUsageView = getTokenUsageView;
+//# sourceMappingURL=span-token-usage.utils.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-token-usage.utils.cjs.js","sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nexport type TokenUsageView = {\n  inputValue: number;\n  outputValue: number;\n  total: number;\n  showSplit: boolean;\n  inputPct: number;\n  outputPct: number;\n  inputDetails: TokenDetailsObject | undefined;\n  outputDetails: TokenDetailsObject | undefined;\n};\n\nfunction hasNumericDetails(details: TokenDetailsObject | undefined): details is TokenDetailsObject {\n  return !!details && Object.values(details).some(v => typeof v === 'number');\n}\n\nexport function getTokenUsageView(usage: UsageStats | undefined | null): TokenUsageView | null {\n  if (!usage) return null;\n\n  const hasInput = typeof usage.inputTokens === 'number';\n  const hasOutput = typeof usage.outputTokens === 'number';\n\n  if (!hasInput && !hasOutput) return null;\n\n  const inputValue = usage.inputTokens ?? 0;\n  const outputValue = usage.outputTokens ?? 0;\n  const total = inputValue + outputValue;\n  const showSplit = total > 0;\n\n  return {\n    inputValue,\n    outputValue,\n    total,\n    showSplit,\n    inputPct: showSplit ? (inputValue / total) * 100 : 0,\n    outputPct: showSplit ? (outputValue / total) * 100 : 0,\n    inputDetails: hasInput && hasNumericDetails(usage.inputDetails) ? usage.inputDetails : undefined,\n    outputDetails: hasOutput && hasNumericDetails(usage.outputDetails) ? usage.outputDetails : undefined,\n  };\n}\n"],"names":[],"mappings":";;;;AAeA,SAAS,kBAAkB,OAAA,EAAwE;AACjG,EAAA,OAAO,CAAC,CAAC,OAAA,IAAW,MAAA,CAAO,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,OAAO,CAAA,KAAM,QAAQ,CAAA;AAC5E;AAEO,SAAS,kBAAkB,KAAA,EAA6D;AAC7F,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,CAAM,WAAA,KAAgB,QAAA;AAC9C,EAAA,MAAM,SAAA,GAAY,OAAO,KAAA,CAAM,YAAA,KAAiB,QAAA;AAEhD,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,SAAA,EAAW,OAAO,IAAA;AAEpC,EAAA,MAAM,UAAA,GAAa,MAAM,WAAA,IAAe,CAAA;AACxC,EAAA,MAAM,WAAA,GAAc,MAAM,YAAA,IAAgB,CAAA;AAC1C,EAAA,MAAM,QAAQ,UAAA,GAAa,WAAA;AAC3B,EAAA,MAAM,YAAY,KAAA,GAAQ,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,EAAU,SAAA,GAAa,UAAA,GAAa,KAAA,GAAS,GAAA,GAAM,CAAA;AAAA,IACnD,SAAA,EAAW,SAAA,GAAa,WAAA,GAAc,KAAA,GAAS,GAAA,GAAM,CAAA;AAAA,IACrD,cAAc,QAAA,IAAY,iBAAA,CAAkB,MAAM,YAAY,CAAA,GAAI,MAAM,YAAA,GAAe,MAAA;AAAA,IACvF,eAAe,SAAA,IAAa,iBAAA,CAAkB,MAAM,aAAa,CAAA,GAAI,MAAM,aAAA,GAAgB;AAAA,GAC7F;AACF;;;;"}

package/dist/domains/traces/components/span-token-usage.utils.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/span-token-usage.utils'
+export {}

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

@@ -0,0 +1,26 @@
+function hasNumericDetails(details) {
+  return !!details && Object.values(details).some((v) => typeof v === "number");
+}
+function getTokenUsageView(usage) {
+  if (!usage) return null;
+  const hasInput = typeof usage.inputTokens === "number";
+  const hasOutput = typeof usage.outputTokens === "number";
+  if (!hasInput && !hasOutput) return null;
+  const inputValue = usage.inputTokens ?? 0;
+  const outputValue = usage.outputTokens ?? 0;
+  const total = inputValue + outputValue;
+  const showSplit = total > 0;
+  return {
+    inputValue,
+    outputValue,
+    total,
+    showSplit,
+    inputPct: showSplit ? inputValue / total * 100 : 0,
+    outputPct: showSplit ? outputValue / total * 100 : 0,
+    inputDetails: hasInput && hasNumericDetails(usage.inputDetails) ? usage.inputDetails : void 0,
+    outputDetails: hasOutput && hasNumericDetails(usage.outputDetails) ? usage.outputDetails : void 0
+  };
+}
+
+export { getTokenUsageView };
+//# sourceMappingURL=span-token-usage.utils.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-token-usage.utils.es.js","sources":["../../../../src/domains/traces/components/span-token-usage.utils.ts"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nexport type TokenUsageView = {\n  inputValue: number;\n  outputValue: number;\n  total: number;\n  showSplit: boolean;\n  inputPct: number;\n  outputPct: number;\n  inputDetails: TokenDetailsObject | undefined;\n  outputDetails: TokenDetailsObject | undefined;\n};\n\nfunction hasNumericDetails(details: TokenDetailsObject | undefined): details is TokenDetailsObject {\n  return !!details && Object.values(details).some(v => typeof v === 'number');\n}\n\nexport function getTokenUsageView(usage: UsageStats | undefined | null): TokenUsageView | null {\n  if (!usage) return null;\n\n  const hasInput = typeof usage.inputTokens === 'number';\n  const hasOutput = typeof usage.outputTokens === 'number';\n\n  if (!hasInput && !hasOutput) return null;\n\n  const inputValue = usage.inputTokens ?? 0;\n  const outputValue = usage.outputTokens ?? 0;\n  const total = inputValue + outputValue;\n  const showSplit = total > 0;\n\n  return {\n    inputValue,\n    outputValue,\n    total,\n    showSplit,\n    inputPct: showSplit ? (inputValue / total) * 100 : 0,\n    outputPct: showSplit ? (outputValue / total) * 100 : 0,\n    inputDetails: hasInput && hasNumericDetails(usage.inputDetails) ? usage.inputDetails : undefined,\n    outputDetails: hasOutput && hasNumericDetails(usage.outputDetails) ? usage.outputDetails : undefined,\n  };\n}\n"],"names":[],"mappings":"AAeA,SAAS,kBAAkB,OAAA,EAAwE;AACjG,EAAA,OAAO,CAAC,CAAC,OAAA,IAAW,MAAA,CAAO,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,OAAO,CAAA,KAAM,QAAQ,CAAA;AAC5E;AAEO,SAAS,kBAAkB,KAAA,EAA6D;AAC7F,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,CAAM,WAAA,KAAgB,QAAA;AAC9C,EAAA,MAAM,SAAA,GAAY,OAAO,KAAA,CAAM,YAAA,KAAiB,QAAA;AAEhD,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,SAAA,EAAW,OAAO,IAAA;AAEpC,EAAA,MAAM,UAAA,GAAa,MAAM,WAAA,IAAe,CAAA;AACxC,EAAA,MAAM,WAAA,GAAc,MAAM,YAAA,IAAgB,CAAA;AAC1C,EAAA,MAAM,QAAQ,UAAA,GAAa,WAAA;AAC3B,EAAA,MAAM,YAAY,KAAA,GAAQ,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,EAAU,SAAA,GAAa,UAAA,GAAa,KAAA,GAAS,GAAA,GAAM,CAAA;AAAA,IACnD,SAAA,EAAW,SAAA,GAAa,WAAA,GAAc,KAAA,GAAS,GAAA,GAAM,CAAA;AAAA,IACrD,cAAc,QAAA,IAAY,iBAAA,CAAkB,MAAM,YAAY,CAAA,GAAI,MAAM,YAAA,GAAe,MAAA;AAAA,IACvF,eAAe,SAAA,IAAa,iBAAA,CAAkB,MAAM,aAAa,CAAA,GAAI,MAAM,aAAA,GAAgB;AAAA,GAC7F;AACF;;;;"}

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const tooltip = require('../../../tooltip-fTKN3FCp.cjs');
+const utils_cn = require('../../../cn-vA5sWo9W.cjs');
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  isRootSpan,
+  toggleChildren,
+  expandAllDescendants,
+  collapseAllDescendants,
+  collapseAll,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren = 0,
+  toggleSiblings,
+  siblingsAllExpanded,
+  siblingsWithChildrenCount = 0
+}) {
+  const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
+  const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;
+  const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;
+  const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn("flex items-center justify-end h-full px-1.5", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": isSelected
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: showToggleChildren && /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { onClick: () => toggleChildren?.(), tooltip: toggleTooltip, children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: showDescendantsButton && /* @__PURE__ */ jsxRuntime.jsx(
+          ExpandButton,
+          {
+            onClick: () => allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.(),
+            tooltip: allDescendantsExpanded ? `Collapse all descendants (${totalDescendants})` : `Expand all descendants (${totalDescendants})`,
+            children: allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          showToggleSiblings && /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandButton,
+            {
+              onClick: () => toggleSiblings?.(),
+              tooltip: siblingsAllExpanded ? "Collapse at this level" : "Expand at this level",
+              children: siblingsAllExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FoldVerticalIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UnfoldVerticalIcon, {})
+            }
+          ),
+          showRootToggleAll && /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandButton,
+            {
+              onClick: () => fullyExpanded ? collapseAll?.() : expandAllDescendants?.(),
+              tooltip: fullyExpanded ? "Collapse all" : "Expand all",
+              children: fullyExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {})
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ExpandButton({ onClick, children, className, tooltip: tooltip$1 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: utils_cn.cn("h-full shrink-0 cursor-pointer", className), "aria-label": tooltip$1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils_cn.cn(
+          "flex items-center gap-[0.1rem] rounded-md transition-all p-1",
+          "hover:bg-surface5",
+          "[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all"
+        ),
+        children
+      }
+    ) }) }),
+    tooltip$1 && /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] });
+}
+
+exports.TimelineExpandCol = TimelineExpandCol;
+//# sourceMappingURL=timeline-expand-col.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-expand-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-expand-col.tsx"],"sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronsDownIcon,\n  ChevronsDownUpIcon,\n  ChevronsUpDownIcon,\n  ChevronsUpIcon,\n  ChevronUpIcon,\n  FoldVerticalIcon,\n  UnfoldVerticalIcon,\n} from 'lucide-react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TimelineExpandColProps = {\n  isSelected?: boolean;\n  isFaded?: boolean;\n  isExpanded?: boolean;\n  isRootSpan?: boolean;\n  toggleChildren?: () => void;\n  expandAllDescendants?: () => void;\n  collapseAllDescendants?: () => void;\n  collapseAll?: () => void;\n  totalDescendants?: number;\n  allDescendantsExpanded?: boolean;\n  numOfChildren?: number;\n  toggleSiblings?: () => void;\n  siblingsAllExpanded?: boolean;\n  siblingsWithChildrenCount?: number;\n};\n\nexport function TimelineExpandCol({\n  isSelected,\n  isFaded,\n  isExpanded,\n  isRootSpan,\n  toggleChildren,\n  expandAllDescendants,\n  collapseAllDescendants,\n  collapseAll,\n  totalDescendants = 0,\n  allDescendantsExpanded,\n  numOfChildren = 0,\n  toggleSiblings,\n  siblingsAllExpanded,\n  siblingsWithChildrenCount = 0,\n}: TimelineExpandColProps) {\n  const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;\n  const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;\n  const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;\n  const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;\n  const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;\n\n  return (\n    <div\n      className={cn('flex items-center justify-end h-full px-1.5', {\n        'opacity-30 [&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n    >\n      <div className=\"grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1\">\n        <div>\n          {showToggleChildren && (\n            <ExpandButton onClick={() => toggleChildren?.()} tooltip={toggleTooltip}>\n              {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n\n        <div>\n          {showDescendantsButton && (\n            <ExpandButton\n              onClick={() => (allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.())}\n              tooltip={\n                allDescendantsExpanded\n                  ? `Collapse all descendants (${totalDescendants})`\n                  : `Expand all descendants (${totalDescendants})`\n              }\n            >\n              {allDescendantsExpanded ? <ChevronsUpIcon /> : <ChevronsDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n\n        <div>\n          {showToggleSiblings && (\n            <ExpandButton\n              onClick={() => toggleSiblings?.()}\n              tooltip={siblingsAllExpanded ? 'Collapse at this level' : 'Expand at this level'}\n            >\n              {siblingsAllExpanded ? <FoldVerticalIcon /> : <UnfoldVerticalIcon />}\n            </ExpandButton>\n          )}\n\n          {showRootToggleAll && (\n            <ExpandButton\n              onClick={() => (fullyExpanded ? collapseAll?.() : expandAllDescendants?.())}\n              tooltip={fullyExpanded ? 'Collapse all' : 'Expand all'}\n            >\n              {fullyExpanded ? <ChevronsDownUpIcon /> : <ChevronsUpDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype ExpandButtonProps = {\n  onClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n  tooltip?: string;\n};\n\nfunction ExpandButton({ onClick, children, className, tooltip }: ExpandButtonProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button onClick={onClick} className={cn('h-full shrink-0 cursor-pointer', className)} aria-label={tooltip}>\n          <div\n            className={cn(\n              'flex items-center gap-[0.1rem] rounded-md transition-all p-1',\n              'hover:bg-surface5',\n              '[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all',\n            )}\n          >\n            {children}\n          </div>\n        </button>\n      </TooltipTrigger>\n      {tooltip && <TooltipContent>{tooltip}</TooltipContent>}\n    </Tooltip>\n  );\n}\n"],"names":["jsx","cn","jsxs","ChevronUpIcon","ChevronDownIcon","ChevronsUpIcon","ChevronsDownIcon","FoldVerticalIcon","UnfoldVerticalIcon","ChevronsDownUpIcon","ChevronsUpDownIcon","tooltip","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}

package/dist/domains/traces/components/timeline-expand-col.d.ts

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

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

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon } from 'lucide-react';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-CjjqIvhJ.js';
+import { c as cn } from '../../../cn-BakJzhuv.js';
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  isRootSpan,
+  toggleChildren,
+  expandAllDescendants,
+  collapseAllDescendants,
+  collapseAll,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren = 0,
+  toggleSiblings,
+  siblingsAllExpanded,
+  siblingsWithChildrenCount = 0
+}) {
+  const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
+  const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;
+  const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;
+  const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end h-full px-1.5", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": isSelected
+      }),
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1", children: [
+        /* @__PURE__ */ jsx("div", { children: showToggleChildren && /* @__PURE__ */ jsx(ExpandButton, { onClick: () => toggleChildren?.(), tooltip: toggleTooltip, children: isExpanded ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) }),
+        /* @__PURE__ */ jsx("div", { children: showDescendantsButton && /* @__PURE__ */ jsx(
+          ExpandButton,
+          {
+            onClick: () => allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.(),
+            tooltip: allDescendantsExpanded ? `Collapse all descendants (${totalDescendants})` : `Expand all descendants (${totalDescendants})`,
+            children: allDescendantsExpanded ? /* @__PURE__ */ jsx(ChevronsUpIcon, {}) : /* @__PURE__ */ jsx(ChevronsDownIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          showToggleSiblings && /* @__PURE__ */ jsx(
+            ExpandButton,
+            {
+              onClick: () => toggleSiblings?.(),
+              tooltip: siblingsAllExpanded ? "Collapse at this level" : "Expand at this level",
+              children: siblingsAllExpanded ? /* @__PURE__ */ jsx(FoldVerticalIcon, {}) : /* @__PURE__ */ jsx(UnfoldVerticalIcon, {})
+            }
+          ),
+          showRootToggleAll && /* @__PURE__ */ jsx(
+            ExpandButton,
+            {
+              onClick: () => fullyExpanded ? collapseAll?.() : expandAllDescendants?.(),
+              tooltip: fullyExpanded ? "Collapse all" : "Expand all",
+              children: fullyExpanded ? /* @__PURE__ */ jsx(ChevronsDownUpIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ExpandButton({ onClick, children, className, tooltip }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick, className: cn("h-full shrink-0 cursor-pointer", className), "aria-label": tooltip, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-[0.1rem] rounded-md transition-all p-1",
+          "hover:bg-surface5",
+          "[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all"
+        ),
+        children
+      }
+    ) }) }),
+    tooltip && /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+}
+
+export { TimelineExpandCol };
+//# sourceMappingURL=timeline-expand-col.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-expand-col.es.js","sources":["../../../../src/domains/traces/components/timeline-expand-col.tsx"],"sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronsDownIcon,\n  ChevronsDownUpIcon,\n  ChevronsUpDownIcon,\n  ChevronsUpIcon,\n  ChevronUpIcon,\n  FoldVerticalIcon,\n  UnfoldVerticalIcon,\n} from 'lucide-react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TimelineExpandColProps = {\n  isSelected?: boolean;\n  isFaded?: boolean;\n  isExpanded?: boolean;\n  isRootSpan?: boolean;\n  toggleChildren?: () => void;\n  expandAllDescendants?: () => void;\n  collapseAllDescendants?: () => void;\n  collapseAll?: () => void;\n  totalDescendants?: number;\n  allDescendantsExpanded?: boolean;\n  numOfChildren?: number;\n  toggleSiblings?: () => void;\n  siblingsAllExpanded?: boolean;\n  siblingsWithChildrenCount?: number;\n};\n\nexport function TimelineExpandCol({\n  isSelected,\n  isFaded,\n  isExpanded,\n  isRootSpan,\n  toggleChildren,\n  expandAllDescendants,\n  collapseAllDescendants,\n  collapseAll,\n  totalDescendants = 0,\n  allDescendantsExpanded,\n  numOfChildren = 0,\n  toggleSiblings,\n  siblingsAllExpanded,\n  siblingsWithChildrenCount = 0,\n}: TimelineExpandColProps) {\n  const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;\n  const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;\n  const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;\n  const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;\n  const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;\n\n  return (\n    <div\n      className={cn('flex items-center justify-end h-full px-1.5', {\n        'opacity-30 [&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n    >\n      <div className=\"grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1\">\n        <div>\n          {showToggleChildren && (\n            <ExpandButton onClick={() => toggleChildren?.()} tooltip={toggleTooltip}>\n              {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n\n        <div>\n          {showDescendantsButton && (\n            <ExpandButton\n              onClick={() => (allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.())}\n              tooltip={\n                allDescendantsExpanded\n                  ? `Collapse all descendants (${totalDescendants})`\n                  : `Expand all descendants (${totalDescendants})`\n              }\n            >\n              {allDescendantsExpanded ? <ChevronsUpIcon /> : <ChevronsDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n\n        <div>\n          {showToggleSiblings && (\n            <ExpandButton\n              onClick={() => toggleSiblings?.()}\n              tooltip={siblingsAllExpanded ? 'Collapse at this level' : 'Expand at this level'}\n            >\n              {siblingsAllExpanded ? <FoldVerticalIcon /> : <UnfoldVerticalIcon />}\n            </ExpandButton>\n          )}\n\n          {showRootToggleAll && (\n            <ExpandButton\n              onClick={() => (fullyExpanded ? collapseAll?.() : expandAllDescendants?.())}\n              tooltip={fullyExpanded ? 'Collapse all' : 'Expand all'}\n            >\n              {fullyExpanded ? <ChevronsDownUpIcon /> : <ChevronsUpDownIcon />}\n            </ExpandButton>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype ExpandButtonProps = {\n  onClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n  tooltip?: string;\n};\n\nfunction ExpandButton({ onClick, children, className, tooltip }: ExpandButtonProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button onClick={onClick} className={cn('h-full shrink-0 cursor-pointer', className)} aria-label={tooltip}>\n          <div\n            className={cn(\n              'flex items-center gap-[0.1rem] rounded-md transition-all p-1',\n              'hover:bg-surface5',\n              '[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all',\n            )}\n          >\n            {children}\n          </div>\n        </button>\n      </TooltipTrigger>\n      {tooltip && <TooltipContent>{tooltip}</TooltipContent>}\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
+const utils_cn = require('../../../cn-vA5sWo9W.cjs');
+
+function TimelineNameCol({
+  span,
+  spanUI,
+  isFaded,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  hasChildren: _hasChildren,
+  isRootSpan,
+  isExpanded: _isExpanded
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-span-id": span.id,
+      "aria-label": `View details for span ${span.name}`,
+      className: utils_cn.cn("rounded-md flex opacity-80 min-h-8 items-center rounded-l-lg", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": selectedSpanId === span.id
+      }),
+      style: { paddingLeft: `${depth * 1}rem` },
+      children: [
+        !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_timelineStructureSign.TimelineStructureSign, { isLastChild }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => onSpanClick?.(span.id),
+            className: utils_cn.cn(
+              "text-ui-smd flex items-center text-left gap-1.5 text-neutral6 w-full min-w-0 rounded-md h-full px-2 py-1 transition-colors",
+              "[&>svg]:transition-all [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:ml-auto",
+              "hover:bg-surface4 [&:hover>svg]:opacity-60",
+              "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"
+            ),
+            children: [
+              spanUI?.color && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  title: spanUI.label,
+                  className: "inline-block w-2 h-2 shrink-0 rounded-full",
+                  style: { backgroundColor: spanUI.color }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: span.name })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TimelineNameCol = TimelineNameCol;
+//# sourceMappingURL=timeline-name-col.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  return (\n    <div\n      data-span-id={span.id}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('rounded-md flex opacity-80 min-h-8 items-center rounded-l-lg', {\n        'opacity-30 [&:hover]:opacity-60': isFaded,\n        'bg-surface4': selectedSpanId === span.id,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'text-ui-smd flex items-center text-left gap-1.5 text-neutral6 w-full min-w-0 rounded-md h-full px-2 py-1 transition-colors',\n          '[&>svg]:transition-all [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:ml-auto',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block w-2 h-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        <span className=\"min-w-0 truncate\">{span.name}</span>\n      </button>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;AAiBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,gBAAc,IAAA,CAAK,EAAA;AAAA,MACnB,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,iCAAA,EAAmC,OAAA;AAAA,QACnC,aAAA,EAAe,mBAAmB,IAAA,CAAK;AAAA,OACxC,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,4HAAA;AAAA,cACA,2GAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,4CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,eAAK,IAAA,EAAK;AAAA;AAAA;AAAA;AAChD;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-name-col.d.ts

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