@mastra/playground-ui 7.0.0-beta.6 → 7.0.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @mastra/playground-ui
 
+## 7.0.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`0d41fe2`](https://github.com/mastra-ai/mastra/commit/0d41fe245355dfc66d61a0d9c85d9400aac351ff), [`6b3ba91`](https://github.com/mastra-ai/mastra/commit/6b3ba91494cc10394df96782f349a4f7b1e152cc), [`3d3c9e7`](https://github.com/mastra-ai/mastra/commit/3d3c9e7dc0b7b291abe6a11cf3807dd130034961), [`7907fd1`](https://github.com/mastra-ai/mastra/commit/7907fd1c5059813b7b870b81ca71041dc807331b)]:
+  - @mastra/core@1.0.0-beta.8
+  - @mastra/ai-sdk@1.0.0-beta.6
+  - @mastra/client-js@1.0.0-beta.8
+  - @mastra/react@0.1.0-beta.8
+
+## 7.0.0-beta.7
+
+### Patch Changes
+
+- Add StudioConfig and associated context to manage the headers and base URL of a given Mastra instance. ([#10804](https://github.com/mastra-ai/mastra/pull/10804))
+
+  This also introduces a header form available from the side bar to edit those headers.
+
+- Fix select options overflow when list is long by adding maximum height ([#10813](https://github.com/mastra-ai/mastra/pull/10813))
+
+- Removed uneeded calls to the message endpoint when the user is on a new thread ([#10872](https://github.com/mastra-ai/mastra/pull/10872))
+
+- Add prominent warning banner in observability UI when token limits are exceeded (finishReason: 'length'). ([#10835](https://github.com/mastra-ai/mastra/pull/10835))
+
+  When a model stops generating due to token limits, the span details now display:
+  - Clear warning with alert icon
+  - Detailed token usage breakdown (input + output = total)
+  - Explanation that the response was truncated
+
+  This helps developers quickly identify and debug token limit issues in the observation page.
+
+  Fixes #8828
+
+- Add a specific page for the studio settings and moved the headers configuration form here instead of in a dialog ([#10812](https://github.com/mastra-ai/mastra/pull/10812))
+
+- Updated dependencies [[`3076c67`](https://github.com/mastra-ai/mastra/commit/3076c6778b18988ae7d5c4c5c466366974b2d63f), [`85d7ee1`](https://github.com/mastra-ai/mastra/commit/85d7ee18ff4e14d625a8a30ec6656bb49804989b), [`c6c1092`](https://github.com/mastra-ai/mastra/commit/c6c1092f8fbf76109303f69e000e96fd1960c4ce), [`81dc110`](https://github.com/mastra-ai/mastra/commit/81dc11008d147cf5bdc8996ead1aa61dbdebb6fc), [`7aedb74`](https://github.com/mastra-ai/mastra/commit/7aedb74883adf66af38e270e4068fd42e7a37036), [`8f02d80`](https://github.com/mastra-ai/mastra/commit/8f02d800777397e4b45d7f1ad041988a8b0c6630), [`d7aad50`](https://github.com/mastra-ai/mastra/commit/d7aad501ce61646b76b4b511e558ac4eea9884d0), [`ce0a73a`](https://github.com/mastra-ai/mastra/commit/ce0a73abeaa75b10ca38f9e40a255a645d50ebfb), [`a02e542`](https://github.com/mastra-ai/mastra/commit/a02e542d23179bad250b044b17ff023caa61739f), [`a372c64`](https://github.com/mastra-ai/mastra/commit/a372c640ad1fd12e8f0613cebdc682fc156b4d95), [`5fe71bc`](https://github.com/mastra-ai/mastra/commit/5fe71bc925dfce597df69c89241f33b378028c63), [`8846867`](https://github.com/mastra-ai/mastra/commit/8846867ffa9a3746767618e314bebac08eb77d87), [`42a42cf`](https://github.com/mastra-ai/mastra/commit/42a42cf3132b9786feecbb8c13c583dce5b0e198), [`ae08bf0`](https://github.com/mastra-ai/mastra/commit/ae08bf0ebc6a4e4da992b711c4a389c32ba84cf4), [`21735a7`](https://github.com/mastra-ai/mastra/commit/21735a7ef306963554a69a89b44f06c3bcd85141), [`1d877b8`](https://github.com/mastra-ai/mastra/commit/1d877b8d7b536a251c1a7a18db7ddcf4f68d6f8b)]:
+  - @mastra/core@1.0.0-beta.7
+  - @mastra/client-js@1.0.0-beta.7
+  - @mastra/react@0.1.0-beta.7
+
 ## 7.0.0-beta.6
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -6660,7 +6660,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 min-w-[8rem] max-h-dropdown-max-height overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -9627,7 +9627,7 @@ function Combobox({
               ref: listRef,
               id: "combobox-options",
               role: "listbox",
-              className: "max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
+              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
               children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
                 const isSelected = value === option.value;
                 const isHighlighted = index === highlightedIndex;
@@ -9836,16 +9836,12 @@ const AgentBadge = ({ agentId, messages = [], metadata, toolCallId, toolApproval
   );
 };
 
-const useAgentMessages = ({
-  threadId,
-  agentId,
-  memory
-}) => {
+const useAgentMessages = ({ threadId, agentId, memory }) => {
   const client = react$1.useMastraClient();
   const { requestContext } = usePlaygroundStore();
   return reactQuery.useQuery({
     queryKey: ["memory", "messages", threadId, agentId, "requestContext"],
-    queryFn: () => client.listThreadMessages(threadId, { agentId, requestContext }),
+    queryFn: () => threadId ? client.listThreadMessages(threadId, { agentId, requestContext }) : null,
     enabled: memory && Boolean(threadId),
     staleTime: 0,
     gcTime: 0,
@@ -9862,7 +9858,7 @@ const AgentBadgeWrapper = ({
   toolApprovalMetadata
 }) => {
   const { data } = useAgentMessages({
-    threadId: result?.subAgentThreadId ?? "",
+    threadId: result?.subAgentThreadId,
     agentId,
     memory: true
   });
@@ -12062,13 +12058,15 @@ const AgentChat = ({
   refreshThreadList,
   modelVersion,
   modelList,
-  messageId
+  messageId,
+  isNewThread
 }) => {
   const { settings } = useAgentSettings();
   const { requestContext } = usePlaygroundStore();
   const { data, isLoading: isMessagesLoading } = useAgentMessages({
     agentId,
-    threadId: threadId ?? "",
+    threadId: isNewThread ? void 0 : threadId,
+    // Prevent fetching when thread is new
     memory: memory ?? false
   });
   React.useEffect(() => {
@@ -12848,7 +12846,7 @@ function InputField({
             className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"),
             children: [
               label,
-              required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2", children: "(required)" })
+              required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2 text-xs", children: "(required)" })
             ]
           }
         ) }),
@@ -18280,6 +18278,13 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
       value: span?.endedAt ? dateFns.format(new Date(span.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
     }
   ];
+  if (span?.attributes?.finishReason) {
+    baseInfo.push({
+      key: "finishReason",
+      label: "Finish Reason",
+      value: span.attributes.finishReason
+    });
+  }
   if (withSpanId) {
     baseInfo.unshift({
       key: "spanId",
@@ -18366,11 +18371,38 @@ const Tabs = Object.assign(TabsRoot, {
   Content: TabContent
 });
 
+function isTokenLimitExceeded(span) {
+  return span?.attributes?.finishReason === "length";
+}
+function getTokenLimitMessage(span) {
+  const usage = span?.attributes?.usage;
+  if (!usage) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.`;
+  }
+  const inputTokens = usage.inputTokens ?? 0;
+  const outputTokens = usage.outputTokens ?? 0;
+  const totalTokens = usage.totalTokens ?? inputTokens + outputTokens;
+  if (inputTokens > 0 || outputTokens > 0) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.
+
+Token usage: ${inputTokens} input + ${outputTokens} output = ${totalTokens} total`;
+  }
+  return `The model stopped generating because it reached the maximum token limit (${totalTokens} tokens). The response was truncated and may be incomplete.`;
+}
+
 function SpanDetails({ span }) {
   if (!span) {
     return null;
   }
+  const tokenLimitExceeded = isTokenLimitExceeded(span);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tokenLimitExceeded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-yellow-900/20 border border-yellow-200 rounded-md p-2 mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "text-yellow-200 mt-0.5 flex-shrink-0", size: 20 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-yellow-200 mb-1 text-sm", children: "Token Limit Exceeded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-mastra-el-3 whitespace-pre-line", children: getTokenLimitMessage(span) })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SideDialog.CodeSection,
       {
@@ -19697,6 +19729,138 @@ function MCPServerCombobox({
   );
 }
 
+const StudioConfigContext = React.createContext({
+  baseUrl: "",
+  headers: {},
+  isLoading: false,
+  setConfig: () => {
+  }
+});
+const useStudioConfig = () => {
+  return React.useContext(StudioConfigContext);
+};
+const LOCAL_STORAGE_KEY = "mastra-studio-config";
+const StudioConfigProvider = ({ children }) => {
+  const [config, setConfig] = React.useState({
+    baseUrl: "",
+    headers: {},
+    isLoading: true
+  });
+  React.useLayoutEffect(() => {
+    const storedConfig = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (storedConfig) {
+      const parsedConfig = JSON.parse(storedConfig);
+      if (typeof parsedConfig === "object" && parsedConfig !== null) {
+        return setConfig({ ...parsedConfig, isLoading: false });
+      }
+    }
+    return setConfig({ baseUrl: "", headers: {}, isLoading: false });
+  }, []);
+  const doSetConfig = (partialNewConfig) => {
+    setConfig((prev) => {
+      const nextConfig = { ...prev, ...partialNewConfig };
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(nextConfig));
+      return nextConfig;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(StudioConfigContext.Provider, { value: { ...config, setConfig: doSetConfig }, children });
+};
+
+const HeaderListForm = ({ headers, onAddHeader, onRemoveHeader }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h2", variant: "header-md", className: "text-icon6", children: "Headers" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface4 rounded-lg p-4 border-sm border-border2 space-y-4", children: [
+      headers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: headers.map((header, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderListFormItem, { index, header, onRemove: () => onRemoveHeader(index) }) }, index)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button$1,
+        {
+          type: "button",
+          variant: "light",
+          className: "w-full border-dashed !bg-surface4 !border-border2 hover:!bg-surface5",
+          size: "lg",
+          onClick: () => onAddHeader({ name: "", value: "" }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+            "Add Header"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const HeaderListFormItem = ({ index, header, onRemove }) => {
+  const nameId = React.useId();
+  const valueId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-4 items-end", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        id: nameId,
+        name: `headers.${index}.name`,
+        label: "Name",
+        placeholder: "e.g. Authorization",
+        required: true,
+        defaultValue: header.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        id: valueId,
+        name: `headers.${index}.value`,
+        label: "Value",
+        placeholder: "e.g. Bearer <token>",
+        required: true,
+        defaultValue: header.value
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button$1,
+      {
+        type: "button",
+        variant: "light",
+        className: "w-full !bg-surface4 !border-border2 hover:!bg-surface5",
+        size: "lg",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash, { "aria-label": "Remove header" }) })
+      }
+    )
+  ] });
+};
+
+const StudioConfigForm = ({ initialConfig }) => {
+  const { setConfig } = useStudioConfig();
+  const [headers, setHeaders] = React.useState(() => {
+    if (!initialConfig) return [];
+    return Object.entries(initialConfig.headers).map(([name, value]) => ({ name, value }));
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const formHeaders = {};
+    for (let i = 0; i < headers.length; i++) {
+      const headerName = formData.get(`headers.${i}.name`);
+      const headerValue = formData.get(`headers.${i}.value`);
+      formHeaders[headerName] = headerValue;
+    }
+    setConfig({ headers: formHeaders });
+    sonner.toast.success("Configuration saved");
+  };
+  const handleAddHeader = (header) => {
+    setHeaders((prev) => [...prev, header]);
+  };
+  const handleRemoveHeader = (index) => {
+    setHeaders((prev) => prev.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HeaderListForm, { headers, onAddHeader: handleAddHeader, onRemoveHeader: handleRemoveHeader }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { type: "submit", variant: "light", className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}) }),
+      "Set Configuration"
+    ] })
+  ] });
+};
+
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
   get: () => sonner.Toaster
@@ -19833,6 +19997,9 @@ exports.SlashIcon = SlashIcon;
 exports.SpanScoreList = SpanScoreList;
 exports.SpanScoring = SpanScoring;
 exports.SpanTabs = SpanTabs;
+exports.StudioConfigContext = StudioConfigContext;
+exports.StudioConfigForm = StudioConfigForm;
+exports.StudioConfigProvider = StudioConfigProvider;
 exports.Tab = Tab$1;
 exports.TabContent = TabContent$1;
 exports.TabList = TabList$1;
@@ -19937,6 +20104,7 @@ exports.useScorers = useScorers;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStreamWorkflow = useStreamWorkflow;
+exports.useStudioConfig = useStudioConfig;
 exports.useThreadInput = useThreadInput;
 exports.useThreads = useThreads;
 exports.useTool = useTool;