@mastra/playground-ui 6.5.1 → 6.6.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @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
+
+- Threads are not refreshing correctly after generate / stream / network ([#9015](https://github.com/mastra-ai/mastra/pull/9015))
+
+- fix template background image overflow ([#9011](https://github.com/mastra-ai/mastra/pull/9011))
+
+- Updated dependencies [[`c67ca32`](https://github.com/mastra-ai/mastra/commit/c67ca32e3c2cf69bfc146580770c720220ca44ac), [`dbc9e12`](https://github.com/mastra-ai/mastra/commit/dbc9e1216ba575ba59ead4afb727a01215f7de4f), [`99e41b9`](https://github.com/mastra-ai/mastra/commit/99e41b94957cdd25137d3ac12e94e8b21aa01b68), [`c28833c`](https://github.com/mastra-ai/mastra/commit/c28833c5b6d8e10eeffd7f7d39129d53b8bca240), [`f053e89`](https://github.com/mastra-ai/mastra/commit/f053e89160dbd0bd3333fc3492f68231b5c7c349), [`9a1a485`](https://github.com/mastra-ai/mastra/commit/9a1a4859b855e37239f652bf14b1ecd1029b8c4e), [`9257233`](https://github.com/mastra-ai/mastra/commit/9257233c4ffce09b2bedc2a9adbd70d7a83fa8e2), [`0f1a4c9`](https://github.com/mastra-ai/mastra/commit/0f1a4c984fb4b104b2f0b63ba18c9fa77f567700), [`2db6160`](https://github.com/mastra-ai/mastra/commit/2db6160e2022ff8827c15d30157e684683b934b5), [`8aeea37`](https://github.com/mastra-ai/mastra/commit/8aeea37efdde347c635a67fed56794943b7f74ec), [`02fe153`](https://github.com/mastra-ai/mastra/commit/02fe15351d6021d214da48ec982a0e9e4150bcee), [`74567b3`](https://github.com/mastra-ai/mastra/commit/74567b3d237ae3915cd0bca3cf55fa0a64e4e4a4), [`15a1733`](https://github.com/mastra-ai/mastra/commit/15a1733074cee8bd37370e1af34cd818e89fa7ac), [`fc2a774`](https://github.com/mastra-ai/mastra/commit/fc2a77468981aaddc3e77f83f0c4ad4a4af140da), [`4e08933`](https://github.com/mastra-ai/mastra/commit/4e08933625464dfde178347af5b6278fcf34188e)]:
+  - @mastra/core@0.21.2-alpha.0
+  - @mastra/client-js@0.16.2-alpha.0
+  - @mastra/react@0.0.8-alpha.0
+
 ## 6.5.1
 
 ### 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
@@ -9143,7 +9190,7 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
   ] });
 };
 const ThreadWrapper = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", "data-testid": "thread-wrapper", children });
 };
 const ThreadWelcome = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
@@ -9678,6 +9725,9 @@ function MastraRuntimeProvider({
               if (chunk.type === "tool-execution-end" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
                 refreshWorkingMemory?.();
               }
+              if (chunk.type === "network-execution-event-step-finish") {
+                refreshThreadList?.();
+              }
             }
           });
         } else {
@@ -9691,6 +9741,7 @@ function MastraRuntimeProvider({
               modelSettings: modelSettingsArgs,
               signal: controller.signal
             });
+            await refreshThreadList?.();
             return;
           } else {
             await sendMessage({
@@ -9701,6 +9752,9 @@ function MastraRuntimeProvider({
               threadId,
               modelSettings: modelSettingsArgs,
               onChunk: async (chunk) => {
+                if (chunk.type === "finish") {
+                  await refreshThreadList?.();
+                }
                 if (chunk.type === "tool-result" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
                   refreshWorkingMemory?.();
                 }
@@ -10096,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,
     {
@@ -10112,8 +10187,8 @@ const AgentChat = ({
       agentName,
       modelVersion,
       threadId,
-      initialMessages,
-      initialLegacyMessages,
+      initialMessages: messages?.uiMessages || [],
+      initialLegacyMessages: messages?.legacyMessages || [],
       memory,
       refreshThreadList,
       settings,
@@ -14051,7 +14126,7 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
   );
 };
 const ThreadList = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-testid": "thread-list", children });
 };
 const ThreadItem = ({ children, isActive, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14448,7 +14523,7 @@ function TemplatesList({ templates, linkComponent, className, isLoading }) {
                 "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
               }),
               children: [
-                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: "w-full h-full bg-cover thumb transition-scale duration-150",
@@ -17347,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 });