@mastra/playground-ui 6.2.0-alpha.4 → 6.2.0-alpha.5

package/dist/index.es.js

@@ -17114,8 +17114,16 @@ const allowedAiSpanAttributes = [
   "ai.response.text",
   "ai.response.timestamp",
   "componentName",
+  // new format
+  "ai.usage.inputTokens",
+  "ai.usage.outputTokens",
+  // Legacy format
   "ai.usage.promptTokens",
-  "ai.usage.completionTokens"
+  "ai.usage.completionTokens",
+  // Common fields
+  "ai.usage.totalTokens",
+  "ai.usage.reasoningTokens",
+  "ai.usage.cachedInputTokens"
 ];
 
 function SpanDetail() {
@@ -17661,6 +17669,9 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     return null;
   }
   const generationSpans = traceSpans.filter((span) => span.spanType === "llm_generation");
+  const hasV5Format = generationSpans.some(
+    (span) => span.attributes?.usage?.inputTokens !== void 0 || span.attributes?.usage?.outputTokens !== void 0
+  );
   const tokensByProvider = generationSpans.reduce(
     (acc, span) => {
       const spanUsage2 = span.attributes?.usage || {};
@@ -17668,33 +17679,65 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       const provider = span?.attributes?.provider || "";
       const spanModelProvider = `${provider}${provider && model ? " / " : ""}${model}`;
       if (!acc?.[spanModelProvider]) {
-        acc[spanModelProvider] = { promptTokens: 0, completionTokens: 0, totalTokens: 0 };
+        if (hasV5Format) {
+          acc[spanModelProvider] = {
+            inputTokens: 0,
+            outputTokens: 0,
+            totalTokens: 0,
+            reasoningTokens: 0,
+            cachedInputTokens: 0
+          };
+        } else {
+          acc[spanModelProvider] = { promptTokens: 0, completionTokens: 0, totalTokens: 0 };
+        }
+      }
+      if ("inputTokens" in acc[spanModelProvider] && hasV5Format) {
+        const inputTokens = spanUsage2.inputTokens ?? 0;
+        const outputTokens = spanUsage2.outputTokens ?? 0;
+        const reasoningTokens = spanUsage2.reasoningTokens ?? 0;
+        const cachedInputTokens = spanUsage2.cachedInputTokens ?? 0;
+        const v5Acc = acc[spanModelProvider];
+        v5Acc.inputTokens += inputTokens;
+        v5Acc.outputTokens += outputTokens;
+        v5Acc.reasoningTokens += reasoningTokens;
+        v5Acc.cachedInputTokens += cachedInputTokens;
+        v5Acc.totalTokens += spanUsage2.totalTokens || inputTokens + outputTokens;
+      } else if ("promptTokens" in acc[spanModelProvider] && !hasV5Format) {
+        const promptTokens = spanUsage2.promptTokens ?? 0;
+        const completionTokens = spanUsage2.completionTokens ?? 0;
+        const legacyAcc = acc[spanModelProvider];
+        legacyAcc.promptTokens += promptTokens;
+        legacyAcc.completionTokens += completionTokens;
+        legacyAcc.totalTokens += spanUsage2.totalTokens || promptTokens + completionTokens;
       }
-      acc[spanModelProvider].promptTokens += spanUsage2.promptTokens || 0;
-      acc[spanModelProvider].completionTokens += spanUsage2.completionTokens || 0;
-      acc[spanModelProvider].totalTokens += (spanUsage2.promptTokens || 0) + (spanUsage2.completionTokens || 0);
       return acc;
     },
     {}
   );
-  const traceTokensBasedOnSpans = Object.keys(
-    tokensByProvider
-  ).reduce(
+  const traceTokensBasedOnSpans = Object.keys(tokensByProvider).reduce(
     (acc, provider) => {
-      const { promptTokens, completionTokens, totalTokens } = tokensByProvider[provider];
-      acc.promptTokens += promptTokens;
-      acc.completionTokens += completionTokens;
-      acc.totalTokens += totalTokens;
+      const providerUsage = tokensByProvider[provider];
+      if (hasV5Format) {
+        const v5Usage = providerUsage;
+        const v5Acc = acc;
+        v5Acc.inputTokens = (v5Acc.inputTokens || 0) + v5Usage.inputTokens;
+        v5Acc.outputTokens = (v5Acc.outputTokens || 0) + v5Usage.outputTokens;
+        v5Acc.reasoningTokens = (v5Acc.reasoningTokens || 0) + (v5Usage?.reasoningTokens ?? 0);
+        v5Acc.cachedInputTokens = (v5Acc.cachedInputTokens || 0) + (v5Usage?.cachedInputTokens ?? 0);
+        v5Acc.totalTokens = (v5Acc.totalTokens || 0) + v5Usage.totalTokens;
+      } else {
+        const legacyUsage = providerUsage;
+        const legacyAcc = acc;
+        legacyAcc.promptTokens = (legacyAcc.promptTokens || 0) + legacyUsage.promptTokens;
+        legacyAcc.completionTokens = (legacyAcc.completionTokens || 0) + legacyUsage.completionTokens;
+        legacyAcc.totalTokens = (legacyAcc.totalTokens || 0) + legacyUsage.totalTokens;
+      }
       return acc;
     },
-    { promptTokens: 0, completionTokens: 0, totalTokens: 0 }
+    hasV5Format ? { inputTokens: 0, outputTokens: 0, totalTokens: 0, reasoningTokens: 0, cachedInputTokens: 0 } : { promptTokens: 0, completionTokens: 0, totalTokens: 0 }
   );
   const tokensByProviderValid = JSON.stringify(traceUsage) === JSON.stringify(traceTokensBasedOnSpans);
-  const tokenPresentations = {
-    totalTokens: {
-      label: "Total LLM Tokens",
-      icon: /* @__PURE__ */ jsx(CoinsIcon, {})
-    },
+  const legacyTokenPresentations = {
     promptTokens: {
       label: "Prompt Tokens",
       icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
@@ -17704,7 +17747,42 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
     }
   };
-  const usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  const v5TokenPresentations = {
+    inputTokens: {
+      label: "Input Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+    },
+    outputTokens: {
+      label: "Output Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    },
+    reasoningTokens: {
+      label: "Reasoning Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    },
+    cachedInputTokens: {
+      label: "Cached Input Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    }
+  };
+  const commonTokenPresentations = {
+    totalTokens: {
+      label: "Total LLM Tokens",
+      icon: /* @__PURE__ */ jsx(CoinsIcon, {})
+    }
+  };
+  let tokenPresentations = {};
+  if (hasV5Format) {
+    tokenPresentations = { ...commonTokenPresentations, ...v5TokenPresentations };
+  } else {
+    tokenPresentations = { ...commonTokenPresentations, ...legacyTokenPresentations };
+  }
+  let usageKeyOrder = [];
+  if (hasV5Format) {
+    usageKeyOrder = ["totalTokens", "inputTokens", "outputTokens", "reasoningTokens", "cachedInputTokens"];
+  } else {
+    usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  }
   const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
   return /* @__PURE__ */ jsx(
     "div",