@mastra/playground-ui 6.6.2-alpha.0 → 6.6.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 6.6.2
+
+### Patch Changes
+
+- Move all the fetching hooks that should be shared with cloud into playground-ui ([#9133](https://github.com/mastra-ai/mastra/pull/9133))
+
+- Updated dependencies [[`2b031e2`](https://github.com/mastra-ai/mastra/commit/2b031e25ca10cd3e4d63e6a27f909cba26d91405)]:
+  - @mastra/core@0.22.2
+  - @mastra/client-js@0.16.4
+  - @mastra/react@0.0.10
+
 ## 6.6.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -52,6 +52,7 @@ const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 const react$3 = require('@mastra/react');
 const reactQuery = require('@tanstack/react-query');
 const reactTable = require('@tanstack/react-table');
+const runtimeContext = require('@mastra/core/runtime-context');
 const Markdown = require('react-markdown');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
@@ -7797,6 +7798,334 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classN
   }
 ) });
 
+const useWorkflows = () => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["workflows", JSON.stringify(runtimeContext)],
+    queryFn: () => client.getWorkflows(runtimeContext)
+  });
+};
+
+const useExecuteWorkflow = () => {
+  const client = react$3.useMastraClient();
+  const createWorkflowRun = reactQuery.useMutation({
+    mutationFn: async ({ workflowId, prevRunId }) => {
+      try {
+        const workflow = client.getWorkflow(workflowId);
+        const { runId: newRunId } = await workflow.createRunAsync({ runId: prevRunId });
+        return { runId: newRunId };
+      } catch (error) {
+        console.error("Error creating workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  const startWorkflowRun = reactQuery.useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      try {
+        const runtimeContext$1 = new runtimeContext.RuntimeContext();
+        Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+          runtimeContext$1.set(key, value);
+        });
+        const workflow = client.getWorkflow(workflowId);
+        await workflow.start({ runId, inputData: input || {}, runtimeContext: runtimeContext$1 });
+      } catch (error) {
+        console.error("Error starting workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  const startAsyncWorkflowRun = reactQuery.useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      try {
+        const runtimeContext$1 = new runtimeContext.RuntimeContext();
+        Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+          runtimeContext$1.set(key, value);
+        });
+        const workflow = client.getWorkflow(workflowId);
+        const result = await workflow.startAsync({ runId, inputData: input || {}, runtimeContext: runtimeContext$1 });
+        return result;
+      } catch (error) {
+        console.error("Error starting workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  return {
+    startWorkflowRun,
+    createWorkflowRun,
+    startAsyncWorkflowRun
+  };
+};
+const useStreamWorkflow = () => {
+  const client = react$3.useMastraClient();
+  const [streamResult, setStreamResult] = React.useState({});
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const readerRef = React.useRef(null);
+  const observerRef = React.useRef(null);
+  const resumeStreamRef = React.useRef(null);
+  const isMountedRef = React.useRef(true);
+  React.useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (readerRef.current) {
+        try {
+          readerRef.current.releaseLock();
+        } catch (error) {
+        }
+        readerRef.current = null;
+      }
+      if (observerRef.current) {
+        try {
+          observerRef.current.releaseLock();
+        } catch (error) {
+        }
+        observerRef.current = null;
+      }
+      if (resumeStreamRef.current) {
+        try {
+          resumeStreamRef.current.releaseLock();
+        } catch (error) {
+        }
+        resumeStreamRef.current = null;
+      }
+    };
+  }, []);
+  const streamWorkflow = reactQuery.useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      inputData,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      if (readerRef.current) {
+        readerRef.current.releaseLock();
+      }
+      if (!isMountedRef.current) return;
+      setIsStreaming(true);
+      setStreamResult({ input: inputData });
+      const runtimeContext$1 = new runtimeContext.RuntimeContext();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext$1.set(key, value);
+      });
+      const workflow = client.getWorkflow(workflowId);
+      const stream = await workflow.streamVNext({ runId, inputData, runtimeContext: runtimeContext$1, closeOnSuspend: true });
+      if (!stream) throw new Error("No stream returned");
+      const reader = stream.getReader();
+      readerRef.current = reader;
+      try {
+        while (true) {
+          if (!isMountedRef.current) break;
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (isMountedRef.current) {
+            setStreamResult((prev) => {
+              const newResult = react$3.mapWorkflowStreamChunkToWatchResult(prev, value);
+              return newResult;
+            });
+            if (value.type === "workflow-step-start") {
+              setIsStreaming(true);
+            }
+            if (value.type === "workflow-step-suspended") {
+              setIsStreaming(false);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error streaming workflow:", error);
+      } finally {
+        if (isMountedRef.current) {
+          setIsStreaming(false);
+        }
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    }
+  });
+  const observeWorkflowStream = reactQuery.useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      storeRunResult
+    }) => {
+      if (observerRef.current) {
+        observerRef.current.releaseLock();
+      }
+      if (!isMountedRef.current) return;
+      setIsStreaming(true);
+      setStreamResult(storeRunResult || {});
+      if (storeRunResult?.status === "suspended") {
+        setIsStreaming(false);
+        return;
+      }
+      const workflow = client.getWorkflow(workflowId);
+      const stream = await workflow.observeStreamVNext({ runId });
+      if (!stream) throw new Error("No stream returned");
+      const reader = stream.getReader();
+      observerRef.current = reader;
+      try {
+        while (true) {
+          if (!isMountedRef.current) break;
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (isMountedRef.current) {
+            setStreamResult((prev) => {
+              const newResult = react$3.mapWorkflowStreamChunkToWatchResult(prev, value);
+              return newResult;
+            });
+            if (value.type === "workflow-step-start") {
+              setIsStreaming(true);
+            }
+            if (value.type === "workflow-step-suspended") {
+              setIsStreaming(false);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error streaming workflow:", error);
+      } finally {
+        if (isMountedRef.current) {
+          setIsStreaming(false);
+        }
+        if (observerRef.current) {
+          observerRef.current.releaseLock();
+          observerRef.current = null;
+        }
+      }
+    }
+  });
+  const resumeWorkflowStream = reactQuery.useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      step,
+      resumeData,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      if (resumeStreamRef.current) {
+        resumeStreamRef.current.releaseLock();
+      }
+      if (!isMountedRef.current) return;
+      setIsStreaming(true);
+      const workflow = client.getWorkflow(workflowId);
+      const runtimeContext$1 = new runtimeContext.RuntimeContext();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext$1.set(key, value);
+      });
+      const stream = await workflow.resumeStreamVNext({ runId, step, resumeData, runtimeContext: runtimeContext$1 });
+      if (!stream) throw new Error("No stream returned");
+      const reader = stream.getReader();
+      resumeStreamRef.current = reader;
+      try {
+        while (true) {
+          if (!isMountedRef.current) break;
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (isMountedRef.current) {
+            setStreamResult((prev) => {
+              const newResult = react$3.mapWorkflowStreamChunkToWatchResult(prev, value);
+              return newResult;
+            });
+            if (value.type === "workflow-step-start") {
+              setIsStreaming(true);
+            }
+            if (value.type === "workflow-step-suspended") {
+              setIsStreaming(false);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error resuming workflow stream:", error);
+      } finally {
+        if (isMountedRef.current) {
+          setIsStreaming(false);
+        }
+        if (resumeStreamRef.current) {
+          resumeStreamRef.current.releaseLock();
+          resumeStreamRef.current = null;
+        }
+      }
+    }
+  });
+  const closeStreamsAndReset = () => {
+    setIsStreaming(false);
+    setStreamResult({});
+    if (readerRef.current) {
+      try {
+        readerRef.current.releaseLock();
+      } catch (error) {
+      }
+      readerRef.current = null;
+    }
+    if (observerRef.current) {
+      try {
+        observerRef.current.releaseLock();
+      } catch (error) {
+      }
+      observerRef.current = null;
+    }
+    if (resumeStreamRef.current) {
+      try {
+        resumeStreamRef.current.releaseLock();
+      } catch (error) {
+      }
+      resumeStreamRef.current = null;
+    }
+  };
+  return {
+    streamWorkflow,
+    streamResult,
+    isStreaming,
+    observeWorkflowStream,
+    closeStreamsAndReset,
+    resumeWorkflowStream
+  };
+};
+const useCancelWorkflowRun = () => {
+  const client = react$3.useMastraClient();
+  const cancelWorkflowRun = reactQuery.useMutation({
+    mutationFn: async ({ workflowId, runId }) => {
+      try {
+        const response = await client.getWorkflow(workflowId).cancelRun(runId);
+        return response;
+      } catch (error) {
+        console.error("Error canceling workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  return cancelWorkflowRun;
+};
+const useSendWorkflowRunEvent = (workflowId) => {
+  const client = react$3.useMastraClient();
+  const sendWorkflowRunEvent = reactQuery.useMutation({
+    mutationFn: async ({ runId, event, data }) => {
+      try {
+        const response = await client.getWorkflow(workflowId).sendRunEvent({ runId, event, data });
+        return response;
+      } catch (error) {
+        console.error("Error sending workflow run event:", error);
+        throw error;
+      }
+    }
+  });
+  return sendWorkflowRunEvent;
+};
+
 const LoadingBadge = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
@@ -14304,6 +14633,93 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
+const useAgents = () => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["agents", JSON.stringify(runtimeContext)],
+    queryFn: () => client.getAgents(runtimeContext)
+  });
+};
+const useModelProviders = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["model-providers"],
+    queryFn: () => client.getModelProviders()
+  });
+};
+const useUpdateAgentModel = (agentId) => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).updateModel(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error updating model", err);
+    }
+  });
+};
+const useReorderModelList = (agentId) => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).reorderModelList(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error reordering model list", err);
+    }
+  });
+};
+const useUpdateModelInModelList = (agentId) => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).updateModelInModelList(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error updating model in model list", err);
+    }
+  });
+};
+
+const useAgent = (agentId) => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["agent", agentId, JSON.stringify(runtimeContext)],
+    queryFn: () => agentId ? client.getAgent(agentId).details(runtimeContext) : null,
+    retry: false,
+    enabled: Boolean(agentId)
+  });
+};
+
+const useExecuteAgentTool = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({ agentId, toolId, input, playgroundRuntimeContext }) => {
+      const runtimeContext = new di.RuntimeContext();
+      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      try {
+        const agent = client.getAgent(agentId);
+        const response = await agent.executeTool(toolId, { data: input, runtimeContext });
+        return response;
+      } catch (error) {
+        sonner.toast.error("Error executing agent tool");
+        console.error("Error executing tool:", error);
+        throw error;
+      }
+    }
+  });
+};
+
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const tool = row.original;
@@ -14426,6 +14842,31 @@ const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className:
   }
 ) });
 
+const useExecuteTool = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({
+      toolId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      const runtimeContext = new di.RuntimeContext();
+      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      try {
+        const tool = client.getTool(toolId);
+        const response = await tool.execute({ data: input, runtimeContext });
+        return response;
+      } catch (error) {
+        sonner.toast.error("Error executing dev tool");
+        console.error("Error executing dev tool:", error);
+        throw error;
+      }
+    }
+  });
+};
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -17427,6 +17868,106 @@ const PlaygroundQueryClient = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
 };
 
+const useMemory = (agentId) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", agentId],
+    queryFn: () => agentId ? client.getMemoryStatus(agentId) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false
+  });
+};
+const useMemoryConfig = (agentId) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", "config", agentId],
+    queryFn: () => agentId ? client.getMemoryConfig({ agentId }) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useThreads = ({
+  resourceId,
+  agentId,
+  isMemoryEnabled
+}) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", "threads", resourceId, agentId],
+    queryFn: () => isMemoryEnabled ? client.getMemoryThreads({ resourceId, agentId }) : null,
+    enabled: Boolean(isMemoryEnabled),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useDeleteThread = () => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ threadId, agentId, networkId }) => client.deleteThread(threadId, { agentId, networkId }),
+    onSuccess: (_, variables) => {
+      const { agentId, networkId } = variables;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
+      }
+      if (networkId) {
+        queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
+      }
+      sonner.toast.success("Chat deleted successfully");
+    },
+    onError: () => {
+      sonner.toast.error("Failed to delete chat");
+    }
+  });
+};
+const useMemorySearch = ({
+  agentId,
+  resourceId,
+  threadId
+}) => {
+  const searchMemory = async (searchQuery, memoryConfig) => {
+    if (!searchQuery.trim()) {
+      return { results: [], count: 0, query: searchQuery };
+    }
+    const params = new URLSearchParams({
+      searchQuery,
+      resourceId,
+      agentId
+    });
+    if (threadId) {
+      params.append("threadId", threadId);
+    }
+    if (memoryConfig) {
+      params.append("memoryConfig", JSON.stringify(memoryConfig));
+    }
+    const response = await fetch(`/api/memory/search?${params}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "x-mastra-dev-playground": "true"
+      }
+    });
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: "Unknown error" }));
+      console.error("Search memory error:", errorData);
+      throw new Error(errorData.message || errorData.error || "Failed to search memory");
+    }
+    return response.json();
+  };
+  return { searchMemory };
+};
+
 const formatRelativeTime = (date) => {
   const now = /* @__PURE__ */ new Date();
   const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
@@ -17878,6 +18419,17 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
   }
 ) });
 
+const useEvalsByAgentId = (agentId, type) => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    staleTime: 0,
+    gcTime: 0,
+    queryKey: ["evals", agentId, type, JSON.stringify(runtimeContext)],
+    queryFn: () => type === "live" ? client.getAgent(agentId).liveEvals(runtimeContext) : client.getAgent(agentId).evals(runtimeContext)
+  });
+};
+
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEntityHeader = AgentEntityHeader;
@@ -18082,24 +18634,43 @@ exports.spanTypePrefixes = spanTypePrefixes;
 exports.traceScoresListColumns = traceScoresListColumns;
 exports.tracesListColumns = tracesListColumns;
 exports.transformKey = transformKey;
+exports.useAgent = useAgent;
 exports.useAgentSettings = useAgentSettings;
+exports.useAgents = useAgents;
+exports.useCancelWorkflowRun = useCancelWorkflowRun;
 exports.useCurrentRun = useCurrentRun;
+exports.useDeleteThread = useDeleteThread;
+exports.useEvalsByAgentId = useEvalsByAgentId;
+exports.useExecuteAgentTool = useExecuteAgentTool;
+exports.useExecuteTool = useExecuteTool;
+exports.useExecuteWorkflow = useExecuteWorkflow;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
 exports.useMCPServerTools = useMCPServerTools;
 exports.useMainSidebar = useMainSidebar;
+exports.useMemory = useMemory;
+exports.useMemoryConfig = useMemoryConfig;
+exports.useMemorySearch = useMemorySearch;
+exports.useModelProviders = useModelProviders;
 exports.useModelReset = useModelReset;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
+exports.useReorderModelList = useReorderModelList;
 exports.useScorer = useScorer;
 exports.useScorers = useScorers;
 exports.useScoresByEntityId = useScoresByEntityId;
 exports.useScoresByScorerId = useScoresByScorerId;
+exports.useSendWorkflowRunEvent = useSendWorkflowRunEvent;
 exports.useSpeechRecognition = useSpeechRecognition;
+exports.useStreamWorkflow = useStreamWorkflow;
 exports.useThreadInput = useThreadInput;
+exports.useThreads = useThreads;
 exports.useTraceSpanScores = useTraceSpanScores;
+exports.useUpdateAgentModel = useUpdateAgentModel;
+exports.useUpdateModelInModelList = useUpdateModelInModelList;
 exports.useWorkflow = useWorkflow;
 exports.useWorkflowRuns = useWorkflowRuns;
+exports.useWorkflows = useWorkflows;
 exports.useWorkingMemory = useWorkingMemory;
 Object.keys(reactQuery).forEach(k => {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {