@mastra/playground-ui 16.1.2 → 16.2.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @mastra/playground-ui
 
+## 16.2.0-alpha.1
+
+### Minor Changes
+
+- Added dedicated session page for agents at `/agents/<agentId>/session`. This minimal view shows only the chat interface without the sidebar or information pane, making it ideal for quick internal testing or sharing with non-technical team members. If request context presets are configured, a preset dropdown appears in the header. ([#13754](https://github.com/mastra-ai/mastra/pull/13754))
+
+  Added `hideModelSwitcher` prop to `AgentChat` and `Thread` components to allow hiding the model picker in the composer.
+
+### Patch Changes
+
+- Updated dependencies [[`b77aa19`](https://github.com/mastra-ai/mastra/commit/b77aa1981361c021f2c881bee8f0c703687f00da), [`dd6ca1c`](https://github.com/mastra-ai/mastra/commit/dd6ca1cdea3b8b6182f4cf61df41070ba0cc0deb), [`4cb4edf`](https://github.com/mastra-ai/mastra/commit/4cb4edf3c909d197ec356c1790d13270514ffef6)]:
+  - @mastra/core@1.13.3-alpha.1
+  - @mastra/client-js@1.8.5-alpha.1
+  - @mastra/react@0.2.15-alpha.1
+
+## 16.1.3-alpha.0
+
+### Patch Changes
+
+- Fixed crash during template installation by ensuring error values from stream events are converted to strings before being passed to the UI. This prevents the 'e?.includes is not a function' TypeError when the server returns non-string error payloads. ([#14267](https://github.com/mastra-ai/mastra/pull/14267))
+
+- Fixed crash when template installation errors are non-string values (e.g. objects). The error is now safely converted to a string before calling .includes(), preventing the 'e?.includes is not a function' TypeError in the studio. ([#14267](https://github.com/mastra-ai/mastra/pull/14267))
+
+- Updated dependencies [[`51970b3`](https://github.com/mastra-ai/mastra/commit/51970b3828494d59a8dd4df143b194d37d31e3f5), [`4a7ce05`](https://github.com/mastra-ai/mastra/commit/4a7ce05125b8d3d260f68f1fc4a6c6866d22ba24), [`7a167db`](https://github.com/mastra-ai/mastra/commit/7a167db025e63a616123dee5855ff572c91264c5), [`085e371`](https://github.com/mastra-ai/mastra/commit/085e3718a7d0fe9a210fe7dd1c867b9bdfe8d16b), [`ce26fe2`](https://github.com/mastra-ai/mastra/commit/ce26fe2166dd90254f8bee5776e55977143e97de), [`b26307f`](https://github.com/mastra-ai/mastra/commit/b26307f050df39629511b0e831b8fc26973ce8b1)]:
+  - @mastra/core@1.13.3-alpha.0
+  - @mastra/schema-compat@1.2.5-alpha.0
+  - @mastra/ai-sdk@1.1.4-alpha.0
+  - @mastra/client-js@1.8.5-alpha.0
+  - @mastra/react@0.2.15-alpha.0
+
 ## 16.1.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -15471,7 +15471,7 @@ function getStateColor(state) {
   }
 }
 
-const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
+const Thread = ({ agentName, agentId, hasMemory, hasModelList, hideModelSwitcher }) => {
   const areaRef = React.useRef(null);
   const messagesContainerRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
@@ -15499,7 +15499,15 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
         /* @__PURE__ */ jsxRuntime.jsx("div", {})
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory, agentId, hasModelList })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Composer,
+      {
+        hasMemory,
+        agentId,
+        hasModelList,
+        hideModelSwitcher
+      }
+    )
   ] });
 };
 const ThreadWrapper = ({ children }) => {
@@ -15511,7 +15519,7 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = ({ hasMemory, agentId, hasModelList }) => {
+const Composer = ({ hasMemory, agentId, hasModelList, hideModelSwitcher }) => {
   const { setThreadInput } = useThreadInput();
   const textareaRef = React.useRef(null);
   const { canExecute } = usePermissions();
@@ -15523,7 +15531,7 @@ const Composer = ({ hasMemory, agentId, hasModelList }) => {
         "textarea",
         {
           ref: textareaRef,
-          autoFocus: document.activeElement === document.body,
+          autoFocus: false,
           className: "text-ui-lg leading-ui-lg placeholder:text-neutral3 text-neutral6 bg-transparent focus:outline-none resize-none outline-none disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: canExecuteAgent ? "Enter your message..." : "You don't have permission to execute agents",
           name: "",
@@ -15533,7 +15541,7 @@ const Composer = ({ hasMemory, agentId, hasModelList }) => {
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        agentId && !hasModelList && /* @__PURE__ */ jsxRuntime.jsx(ComposerModelSwitcher, { agentId }),
+        agentId && !hasModelList && !hideModelSwitcher && /* @__PURE__ */ jsxRuntime.jsx(ComposerModelSwitcher, { agentId }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
           canExecuteAgent && /* @__PURE__ */ jsxRuntime.jsx(SpeechInput, { agentId }),
           /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, { canExecute: canExecuteAgent })
@@ -17138,7 +17146,8 @@ const AgentChat = ({
   modelVersion,
   modelList,
   messageId,
-  isNewThread
+  isNewThread,
+  hideModelSwitcher
 }) => {
   const { settings } = useAgentSettings();
   const requestContext = useMergedRequestContext();
@@ -17179,7 +17188,16 @@ const AgentChat = ({
       refreshThreadList,
       settings,
       requestContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId, hasModelList: Boolean(modelList) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Thread,
+        {
+          agentName: agentName ?? "",
+          hasMemory: memory,
+          agentId,
+          hasModelList: Boolean(modelList),
+          hideModelSwitcher
+        }
+      )
     }
   );
 };
@@ -21985,6 +22003,11 @@ function AuthRequired({ children, loginUrl = "/login", signupUrl = "/signup" })
 const AgentEntityHeader = ({ agentId }) => {
   const { data: agent, isLoading } = useAgent(agentId);
   const { handleCopy } = useCopyToClipboard({ text: agentId });
+  const sessionUrl = `${window.location.origin}/agents/${agentId}/session`;
+  const { handleCopy: handleShareLink, isCopied: isShareCopied } = useCopyToClipboard({
+    text: sessionUrl,
+    copyMessage: "Session URL copied to clipboard!"
+  });
   const { isCmsAvailable } = useIsCmsAvailable();
   const { navigate } = useLinkComponent();
   const { cloneAgent, isCloning } = useCloneAgent();
@@ -21999,22 +22022,30 @@ const AgentEntityHeader = ({ agentId }) => {
       navigate(`/agents/${clonedAgent.id}/chat`);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     EntityHeader,
     {
       icon: isCmsAvailable ? /* @__PURE__ */ jsxRuntime.jsx(AgentSourceIcon, { source: agent?.source }) : /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
       title: agentName,
       isLoading,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), variant: "default", children: showStoredAgentBadge ? /* @__PURE__ */ jsxRuntime.jsx(Truncate, { untilChar: "-", withTooltip: false, children: agentId }) : agentId }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
         ] }),
         canWriteAgents && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClone, disabled: isCloning, className: "h-badge-default shrink-0 ml-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyPlus, {}), variant: "default", children: isCloning ? "Cloning..." : "Clone" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => navigate(`/cms/agents/${agentId}/edit`), className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}), variant: "default", children: "Edit" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: isStoredAgent ? "Edit agent configuration" : "Edit agent overrides" })
+        ] }),
+        canWriteAgents && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClone, disabled: isCloning, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyPlus, {}), variant: "default", children: isCloning ? "Cloning..." : "Clone" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Clone agent to a new stored agent" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleShareLink, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: isShareCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}), variant: "default", children: "Share" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy session URL to share with your team" })
         ] })
-      ]
+      ] })
     }
   ) });
 };
@@ -36332,8 +36363,9 @@ function TemplateSuccess({ name, installedEntities, linkComponent }) {
 }
 
 function TemplateFailure({ errorMsg, validationErrors }) {
-  const isSchemaError = errorMsg?.includes("Invalid schema for function");
-  const isValidationError = errorMsg?.includes("validation issue") || validationErrors && validationErrors.length > 0;
+  const errorString = typeof errorMsg === "string" ? errorMsg : errorMsg != null ? String(errorMsg) : void 0;
+  const isSchemaError = errorString?.includes("Invalid schema for function");
+  const isValidationError = errorString?.includes("validation issue") || validationErrors && validationErrors.length > 0;
   const getUserFriendlyMessage = () => {
     if (isValidationError) {
       return "Template installation completed but some validation issues remain. The template may still be functional, but you should review and fix these issues.";
@@ -36375,9 +36407,9 @@ function TemplateFailure({ errorMsg, validationErrors }) {
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-mono text-gray-700 dark:text-gray-300 mt-1 whitespace-pre-wrap break-words", children: error.message })
       ] }, index)) })
     ] }),
-    errorMsg && !isValidationError && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
+    errorString && !isValidationError && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-neutral3 hover:text-neutral4 select-none text-center", children: "Show Details" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: errorString }) })
     ] })
   ] });
 }