@mastra/playground-ui 6.5.2-alpha.0 → 6.6.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @mastra/playground-ui
 
+## 6.6.0-alpha.1
+
+### Minor Changes
+
+- Update peer dependencies to match core package version bump (0.21.2) ([#9021](https://github.com/mastra-ai/mastra/pull/9021))
+
+### Patch Changes
+
+- Handle nested optional objects in dynamic form ([#9059](https://github.com/mastra-ai/mastra/pull/9059))
+
+- Move "Playground" to "Studio" in UI only ([#9052](https://github.com/mastra-ai/mastra/pull/9052))
+
+- Show agent tool output better in playground ([#9021](https://github.com/mastra-ai/mastra/pull/9021))
+
+- Update peerdeps to 0.23.0-0 ([#9043](https://github.com/mastra-ai/mastra/pull/9043))
+
+- Updated dependencies [[`efb5ed9`](https://github.com/mastra-ai/mastra/commit/efb5ed946ae7f410bc68c9430beb4b010afd25ec), [`8ea07b4`](https://github.com/mastra-ai/mastra/commit/8ea07b4bdc73e4218437dbb6dcb0f4b23e745a44), [`ba201b8`](https://github.com/mastra-ai/mastra/commit/ba201b8f8feac4c72350f2dbd52c13c7297ba7b0), [`1f058c6`](https://github.com/mastra-ai/mastra/commit/1f058c63ccb88d718b9876490d17e112cc026467), [`4fc4136`](https://github.com/mastra-ai/mastra/commit/4fc413652866a8d2240694fddb2562e9edbb70df), [`b78e04d`](https://github.com/mastra-ai/mastra/commit/b78e04d935a16ecb1e59c5c96e564903527edddd), [`d10baf5`](https://github.com/mastra-ai/mastra/commit/d10baf5a3c924f2a6654e23a3e318ed03f189b76), [`038c55a`](https://github.com/mastra-ai/mastra/commit/038c55a7090fc1b1513a966386d3072617f836ac), [`5ea29c6`](https://github.com/mastra-ai/mastra/commit/5ea29c6a72dc3a6c837076fd37ee54ebae77a02a), [`182f045`](https://github.com/mastra-ai/mastra/commit/182f0458f25bd70aa774e64fd923c8a483eddbf1), [`7620d2b`](https://github.com/mastra-ai/mastra/commit/7620d2bddeb4fae4c3c0a0b4e672969795fca11a), [`b2365f0`](https://github.com/mastra-ai/mastra/commit/b2365f038dd4c5f06400428b224af963f399ad50), [`9029ba3`](https://github.com/mastra-ai/mastra/commit/9029ba34459c8859fed4c6b73efd8e2d0021e7ba), [`426cc56`](https://github.com/mastra-ai/mastra/commit/426cc561c85ae76a112ded2385532a91f9f9f074), [`00931fb`](https://github.com/mastra-ai/mastra/commit/00931fb1a21aa42c4fbc20c2c40dd62466b8fc8f), [`e473bfe`](https://github.com/mastra-ai/mastra/commit/e473bfe416c0b8e876973c2b6a6f13c394b7a93f), [`b78e04d`](https://github.com/mastra-ai/mastra/commit/b78e04d935a16ecb1e59c5c96e564903527edddd), [`648e2ca`](https://github.com/mastra-ai/mastra/commit/648e2ca42da54838c6ccbdaadc6fadd808fa6b86), [`b65c5e0`](https://github.com/mastra-ai/mastra/commit/b65c5e0fe6f3c390a9a8bbcf69304d972c3a4afb)]:
+  - @mastra/core@0.22.0-alpha.1
+  - @mastra/react@0.0.8-alpha.1
+  - @mastra/client-js@0.16.2-alpha.1
+
 ## 6.5.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -4385,11 +4385,12 @@ const useCodemirrorTheme$2 = () => {
 };
 const SyntaxHighlighter$2 = ({
   data,
-  className
+  className,
+  ...props
 }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
@@ -4550,11 +4551,11 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
-    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: formattedArgs });
+    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: formattedArgs, "data-testid": "tool-args" });
   } catch {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result, "data-testid": "tool-result" });
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4581,7 +4582,7 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
         ] }),
         toolOutput.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: toolOutput }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: toolOutput, "data-testid": "tool-output" }) })
         ] })
       ] })
     }
@@ -6641,12 +6642,16 @@ const SelectField$1 = ({ field, inputProps, error, id, value }) => {
 
 const ObjectWrapper = ({ label, children }) => {
   const hasLabel = label !== "​" && label !== "";
+  const [isOpen, setIsOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "", children: [
-    hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, {}) }),
-      label
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, {}) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: () => setIsOpen(!isOpen), type: "button", className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("transition-all", isOpen ? "rotate-180" : "rotate-0") }) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: hasLabel ? "flex flex-col gap-1 [&>*]:border-dashed [&>*]:border-l [&>*]:border-l-border1 [&>*]:pl-4" : "",
@@ -7792,7 +7797,46 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classN
   }
 ) });
 
-const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) => {
+const LoadingBadge = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: colors.IconColors.icon3 }),
+      title: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
+      collapsible: false
+    }
+  );
+};
+
+const useInView = () => {
+  const [inView, setInView] = React.useState(false);
+  const setRef = React.useCallback((node) => {
+    if (node) {
+      const observer = new IntersectionObserver(([entry]) => {
+        setInView(entry.isIntersecting);
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+  }, []);
+  return { inView, setRef };
+};
+
+const useWorkflow = (workflowId) => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["workflow", workflowId],
+    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
+    enabled: Boolean(workflowId),
+    retry: false,
+    refetchOnWindowFocus: false,
+    throwOnError: false
+  });
+};
+
+const WorkflowBadge = ({ runId, workflowId, isStreaming, metadata }) => {
+  const { data: workflow, isLoading: isWorkflowLoading } = useWorkflow(workflowId);
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
   });
@@ -7801,6 +7845,7 @@ const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) =
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
+  if (isWorkflowLoading || !workflow) return /* @__PURE__ */ jsxRuntime.jsx(LoadingBadge, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(
     BadgeWrapper,
     {
@@ -7827,7 +7872,7 @@ const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
+      runId && /* @__PURE__ */ jsxRuntime.jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraph, { workflowId, workflow }) })
   ] });
@@ -7840,30 +7885,6 @@ const useWorkflowStream = (workflowFullState) => {
   }, [workflowFullState]);
 };
 
-const useWorkflow = (workflowId) => {
-  const client = react$3.useMastraClient();
-  const { runtimeContext } = usePlaygroundStore();
-  return reactQuery.useQuery({
-    queryKey: ["workflow", workflowId],
-    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
-    enabled: Boolean(workflowId),
-    retry: false,
-    refetchOnWindowFocus: false,
-    throwOnError: false
-  });
-};
-
-const LoadingBadge = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    BadgeWrapper,
-    {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: colors.IconColors.icon3 }),
-      title: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
-      collapsible: false
-    }
-  );
-};
-
 const AgentBadge = ({ agentId, messages = [], metadata }) => {
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
@@ -7908,25 +7929,51 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
   );
 };
 
+const useAgentMessages = ({
+  threadId,
+  agentId,
+  memory
+}) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", "messages", threadId, agentId],
+    queryFn: () => client.getThreadMessages(threadId, { agentId }),
+    enabled: memory && Boolean(threadId),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+
+const AgentBadgeWrapper = ({ agentId, result, metadata }) => {
+  const { data: memoryMessages } = useAgentMessages({
+    threadId: result?.subAgentThreadId ?? "",
+    agentId,
+    memory: true
+  });
+  const childMessages = result?.childMessages ?? react$3.resolveToChildMessages(memoryMessages?.uiMessages ?? []);
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentBadge, { agentId, messages: childMessages, metadata });
+};
+
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
 const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
+  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT" || toolName.startsWith("agent-");
+  const isWorkflow = metadata?.mode === "network" && metadata.from === "WORKFLOW" || toolName.startsWith("workflow-");
+  const agentToolName = toolName.startsWith("agent-") ? toolName.substring("agent-".length) : toolName;
+  const workflowToolName = toolName.startsWith("workflow-") ? toolName.substring("workflow-".length) : toolName;
   useWorkflowStream(result);
-  const { data: workflow, isLoading } = useWorkflow(toolName);
-  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT";
   if (isAgent) {
-    const messages = result?.childMessages ?? [];
-    return /* @__PURE__ */ jsxRuntime.jsx(AgentBadge, { agentId: toolName, messages, metadata });
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentBadgeWrapper, { agentId: agentToolName, result, metadata });
   }
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(LoadingBadge, {});
-  if (workflow) {
+  if (isWorkflow) {
     const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
     return /* @__PURE__ */ jsxRuntime.jsx(
       WorkflowBadge,
       {
-        workflowId: toolName,
-        workflow,
+        workflowId: workflowToolName,
         isStreaming,
         runId: result?.runId,
         metadata
@@ -10103,15 +10150,36 @@ const AgentChat = ({
   agentId,
   agentName,
   threadId,
-  initialMessages,
-  initialLegacyMessages,
   memory,
   refreshThreadList,
   modelVersion,
-  modelList
+  modelList,
+  messageId
 }) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
+  const { data: messages, isLoading: isMessagesLoading } = useAgentMessages({
+    agentId,
+    threadId: threadId ?? "",
+    memory: memory ?? false
+  });
+  React.useEffect(() => {
+    if (messageId && messages && !isMessagesLoading) {
+      setTimeout(() => {
+        const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (messageElement) {
+          messageElement.scrollIntoView({ behavior: "smooth", block: "center" });
+          messageElement.classList.add("bg-surface4");
+          setTimeout(() => {
+            messageElement.classList.remove("bg-surface4");
+          }, 2e3);
+        }
+      }, 100);
+    }
+  }, [messageId, messages, isMessagesLoading]);
+  if (isMessagesLoading) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     MastraRuntimeProvider,
     {
@@ -10119,8 +10187,8 @@ const AgentChat = ({
       agentName,
       modelVersion,
       threadId,
-      initialMessages,
-      initialLegacyMessages,
+      initialMessages: messages?.uiMessages || [],
+      initialLegacyMessages: messages?.legacyMessages || [],
       memory,
       refreshThreadList,
       settings,
@@ -17354,20 +17422,6 @@ function usePolling({
   };
 }
 
-const useInView = () => {
-  const [inView, setInView] = React.useState(false);
-  const setRef = React.useCallback((node) => {
-    if (node) {
-      const observer = new IntersectionObserver(([entry]) => {
-        setInView(entry.isIntersecting);
-      });
-      observer.observe(node);
-      return () => observer.disconnect();
-    }
-  }, []);
-  return { inView, setRef };
-};
-
 const PlaygroundQueryClient = ({ children }) => {
   const queryClient = new reactQuery.QueryClient();
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });