@mastra/playground-ui 16.1.3-alpha.0 → 16.2.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

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" })
         ] })
-      ]
+      ] })
     }
   ) });
 };