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

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @mastra/playground-ui
 
+## 6.2.0
+
+### Minor Changes
+
+- Remove original AgentNetwork ([#7919](https://github.com/mastra-ai/mastra/pull/7919))
+
+### Patch Changes
+
+- dependencies updates: ([#7802](https://github.com/mastra-ai/mastra/pull/7802))
+  - Updated dependency [`react-syntax-highlighter@^15.6.6` ↗︎](https://www.npmjs.com/package/react-syntax-highlighter/v/15.6.6) (from `^15.6.1`, in `dependencies`)
+
+- dependencies updates: ([#7868](https://github.com/mastra-ai/mastra/pull/7868))
+  - Updated dependency [`swr@^2.3.6` ↗︎](https://www.npmjs.com/package/swr/v/2.3.6) (from `^2.3.4`, in `dependencies`)
+
+- dependencies updates: ([#7908](https://github.com/mastra-ai/mastra/pull/7908))
+  - Updated dependency [`use-debounce@^10.0.6` ↗︎](https://www.npmjs.com/package/use-debounce/v/10.0.6) (from `^10.0.5`, in `dependencies`)
+
+- dependencies updates: ([#7912](https://github.com/mastra-ai/mastra/pull/7912))
+  - Updated dependency [`zustand@^5.0.8` ↗︎](https://www.npmjs.com/package/zustand/v/5.0.8) (from `^5.0.7`, in `dependencies`)
+
+- Update peerdep of @mastra/core ([#7619](https://github.com/mastra-ai/mastra/pull/7619))
+
+- Update data printed in AI span dialogs ([#7847](https://github.com/mastra-ai/mastra/pull/7847))
+
+- avoid refetching on error when resolving a workflow in cloud ([#7842](https://github.com/mastra-ai/mastra/pull/7842))
+
+- fix scorers table link full row ([#7915](https://github.com/mastra-ai/mastra/pull/7915))
+
+- adjust the way we display scorers in agent metadata ([#7910](https://github.com/mastra-ai/mastra/pull/7910))
+
+- Add default width to AI span timeline presentation ([#7853](https://github.com/mastra-ai/mastra/pull/7853))
+
+- fix minor playground stuff for observability ([#7765](https://github.com/mastra-ai/mastra/pull/7765))
+
+- Handle zod intersections in dynamic form ([#7768](https://github.com/mastra-ai/mastra/pull/7768))
+
+- Fix VNext generate/stream usage tokens. They used to be undefined, now we are receiving the proper values. ([#7901](https://github.com/mastra-ai/mastra/pull/7901))
+
+- Playground ui -pass runtimeContext to client SDK get methods ([#7767](https://github.com/mastra-ai/mastra/pull/7767))
+
+- fix markdown rendering in agent in agent text-delta ([#7851](https://github.com/mastra-ai/mastra/pull/7851))
+
+- Fixed createRun change in agent builder that was missed ([#7966](https://github.com/mastra-ai/mastra/pull/7966))
+
+- fix error message when fetching observability things ([#7956](https://github.com/mastra-ai/mastra/pull/7956))
+
+- Set null as empty value for score prompts ([#7875](https://github.com/mastra-ai/mastra/pull/7875))
+
+- fix workflows runs fetching and displaying ([#7852](https://github.com/mastra-ai/mastra/pull/7852))
+
+- fix empty state for scorers on agent page ([#7846](https://github.com/mastra-ai/mastra/pull/7846))
+
+- Updated dependencies [[`197cbb2`](https://github.com/mastra-ai/mastra/commit/197cbb248fc8cb4bbf61bf70b770f1388b445df2), [`a1bb887`](https://github.com/mastra-ai/mastra/commit/a1bb887e8bfae44230f487648da72e96ef824561), [`6590763`](https://github.com/mastra-ai/mastra/commit/65907630ef4bf4127067cecd1cb21b56f55d5f1b), [`fb84c21`](https://github.com/mastra-ai/mastra/commit/fb84c21859d09bdc8f158bd5412bdc4b5835a61c), [`5802bf5`](https://github.com/mastra-ai/mastra/commit/5802bf57f6182e4b67c28d7d91abed349a8d14f3), [`5bda53a`](https://github.com/mastra-ai/mastra/commit/5bda53a9747bfa7d876d754fc92c83a06e503f62), [`c2eade3`](https://github.com/mastra-ai/mastra/commit/c2eade3508ef309662f065e5f340d7840295dd53), [`f26a8fd`](https://github.com/mastra-ai/mastra/commit/f26a8fd99fcb0497a5d86c28324430d7f6a5fb83), [`8a3f5e4`](https://github.com/mastra-ai/mastra/commit/8a3f5e4212ec36b302957deb4bd47005ab598382), [`222965a`](https://github.com/mastra-ai/mastra/commit/222965a98ce8197b86673ec594244650b5960257), [`6047778`](https://github.com/mastra-ai/mastra/commit/6047778e501df460648f31decddf8e443f36e373), [`a0f5f1c`](https://github.com/mastra-ai/mastra/commit/a0f5f1ca39c3c5c6d26202e9fcab986b4fe14568), [`9d4fc09`](https://github.com/mastra-ai/mastra/commit/9d4fc09b2ad55caa7738c7ceb3a905e454f74cdd), [`05c7abf`](https://github.com/mastra-ai/mastra/commit/05c7abfe105a015b7760c9bf33ff4419727502a0), [`0324ceb`](https://github.com/mastra-ai/mastra/commit/0324ceb8af9d16c12a531f90e575f6aab797ac81), [`d75ccf0`](https://github.com/mastra-ai/mastra/commit/d75ccf06dfd2582b916aa12624e3cd61b279edf1), [`0f9d227`](https://github.com/mastra-ai/mastra/commit/0f9d227890a98db33865abbea39daf407cd55ef7), [`b356f5f`](https://github.com/mastra-ai/mastra/commit/b356f5f7566cb3edb755d91f00b72fc1420b2a37), [`de056a0`](https://github.com/mastra-ai/mastra/commit/de056a02cbb43f6aa0380ab2150ea404af9ec0dd), [`f5ce05f`](https://github.com/mastra-ai/mastra/commit/f5ce05f831d42c69559bf4c0fdb46ccb920fc3a3), [`60c9cec`](https://github.com/mastra-ai/mastra/commit/60c9cec7048a79a87440f7840c383875bd710d93), [`c93532a`](https://github.com/mastra-ai/mastra/commit/c93532a340b80e4dd946d4c138d9381de5f70399), [`6cb1fcb`](https://github.com/mastra-ai/mastra/commit/6cb1fcbc8d0378ffed0d17784c96e68f30cb0272), [`aee4f00`](https://github.com/mastra-ai/mastra/commit/aee4f00e61e1a42e81a6d74ff149dbe69e32695a), [`f0ab020`](https://github.com/mastra-ai/mastra/commit/f0ab02034532a4afb71a1ef4fe243f9a8dffde84), [`cdc63c0`](https://github.com/mastra-ai/mastra/commit/cdc63c0d2725ee0191aa7f5287ccf83629019748), [`9f6f30f`](https://github.com/mastra-ai/mastra/commit/9f6f30f04ec6648bbca798ea8aad59317c40d8db), [`e6e37a0`](https://github.com/mastra-ai/mastra/commit/e6e37a05ec2b6de4f34ee77bb2dd08edfae4ae4a), [`547c621`](https://github.com/mastra-ai/mastra/commit/547c62104af3f7a551b3754e9cbdf0a3fbba15e4), [`897995e`](https://github.com/mastra-ai/mastra/commit/897995e630d572fe2891e7ede817938cabb43251), [`0fed8f2`](https://github.com/mastra-ai/mastra/commit/0fed8f2aa84b167b3415ea6f8f70755775132c8d), [`4f9ea8c`](https://github.com/mastra-ai/mastra/commit/4f9ea8c95ea74ba9abbf3b2ab6106c7d7bc45689), [`c4dbd12`](https://github.com/mastra-ai/mastra/commit/c4dbd12a05e75db124c5d8abff3d893ea1b88c30), [`1a1fbe6`](https://github.com/mastra-ai/mastra/commit/1a1fbe66efb7d94abc373ed0dd9676adb8122454), [`d706fad`](https://github.com/mastra-ai/mastra/commit/d706fad6e6e4b72357b18d229ba38e6c913c0e70), [`87fd07f`](https://github.com/mastra-ai/mastra/commit/87fd07ff35387a38728967163460231b5d33ae3b), [`5c3768f`](https://github.com/mastra-ai/mastra/commit/5c3768fa959454232ad76715c381f4aac00c6881), [`2685a78`](https://github.com/mastra-ai/mastra/commit/2685a78f224b8b04e20d4fab5ac1adb638190071), [`36f39c0`](https://github.com/mastra-ai/mastra/commit/36f39c00dc794952dc3c11aab91c2fa8bca74b11), [`239b5a4`](https://github.com/mastra-ai/mastra/commit/239b5a497aeae2e8b4d764f46217cfff2284788e), [`8a3f5e4`](https://github.com/mastra-ai/mastra/commit/8a3f5e4212ec36b302957deb4bd47005ab598382)]:
+  - @mastra/core@0.17.0
+  - @mastra/client-js@0.13.0
+
+## 6.2.0-alpha.5
+
+### Patch Changes
+
+- Fix VNext generate/stream usage tokens. They used to be undefined, now we are receiving the proper values. ([#7901](https://github.com/mastra-ai/mastra/pull/7901))
+
+- Updated dependencies [[`05c7abf`](https://github.com/mastra-ai/mastra/commit/05c7abfe105a015b7760c9bf33ff4419727502a0), [`aee4f00`](https://github.com/mastra-ai/mastra/commit/aee4f00e61e1a42e81a6d74ff149dbe69e32695a)]:
+  - @mastra/core@0.17.0-alpha.8
+  - @mastra/client-js@0.13.0-alpha.8
+
 ## 6.2.0-alpha.4
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -17148,8 +17148,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() {
@@ -17695,6 +17703,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 || {};
@@ -17702,33 +17713,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__ */ jsxRuntime.jsx(lucideReact.CoinsIcon, {})
-    },
+  const legacyTokenPresentations = {
     promptTokens: {
       label: "Prompt Tokens",
       icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
@@ -17738,7 +17781,42 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {})
     }
   };
-  const usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  const v5TokenPresentations = {
+    inputTokens: {
+      label: "Input Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+    },
+    outputTokens: {
+      label: "Output Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {})
+    },
+    reasoningTokens: {
+      label: "Reasoning Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {})
+    },
+    cachedInputTokens: {
+      label: "Cached Input Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightToLineIcon, {})
+    }
+  };
+  const commonTokenPresentations = {
+    totalTokens: {
+      label: "Total LLM Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(
     "div",