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

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');
@@ -4431,6 +4432,9 @@ const BadgeWrapper = ({
   "data-testid": dataTestId
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed);
+  React.useEffect(() => {
+    setIsCollapsed(initialCollapsed);
+  }, [initialCollapsed]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4547,17 +4551,114 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
+const sizeClasses = {
+  md: "h-button-md gap-md",
+  lg: "h-button-lg gap-lg"
+};
+const variantClasses$1 = {
+  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6 disabled:opacity-50",
+  light: "bg-surface3 hover:bg-surface5 text-icon6 disabled:opacity-50"
+};
+const Button$1 = ({ className, as, size = "md", variant = "default", ...props }) => {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: clsx(
+        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
+        variantClasses$1[variant],
+        sizeClasses[size],
+        className,
+        {
+          "cursor-not-allowed": props.disabled
+        }
+      ),
+      ...props
+    }
+  );
+};
+
+const ToolCallContext = React.createContext(void 0);
+function ToolCallProvider({
+  children,
+  approveToolcall,
+  declineToolcall,
+  isRunning,
+  toolCallApprovals
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolCallContext.Provider, { value: { approveToolcall, declineToolcall, isRunning, toolCallApprovals }, children });
+}
+function useToolCall() {
+  const context = React.useContext(ToolCallContext);
+  if (!context) {
+    throw new Error("useToolCall must be used within a ToolCallProvider");
+  }
+  return context;
+}
+
+const ToolApprovalButtons = ({ toolCalled, toolCallId, toolApprovalMetadata }) => {
+  const { approveToolcall, declineToolcall, isRunning, toolCallApprovals } = useToolCall();
+  const handleApprove = () => {
+    approveToolcall(toolCallId);
+  };
+  const handleDecline = () => {
+    declineToolcall(toolCallId);
+  };
+  const toolCallApprovalStatus = toolCallApprovals?.[toolCallId]?.status;
+  if (toolApprovalMetadata && !toolCalled) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Approval required" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button$1,
+          {
+            onClick: handleApprove,
+            disabled: isRunning || !!toolCallApprovalStatus,
+            className: toolCallApprovalStatus === "approved" ? "!text-accent1" : "",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }),
+              "Approve"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button$1,
+          {
+            onClick: handleDecline,
+            disabled: isRunning || !!toolCallApprovalStatus,
+            className: toolCallApprovalStatus === "declined" ? "!text-accent2" : "",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }),
+              "Decline"
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  return null;
+};
+
+const ToolBadge = ({
+  toolName,
+  args,
+  result,
+  metadata,
+  toolOutput,
+  toolCallId,
+  toolApprovalMetadata
+}) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
     argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: formattedArgs, "data-testid": "tool-args" });
   } catch {
-    argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: args });
+    argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", 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, "data-testid": "tool-result" });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", 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;
+  const toolCalled = result || toolOutput.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
@@ -4571,19 +4672,28 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
           input: agentNetworkInput
         }
       ),
+      initialCollapsed: !!!toolApprovalMetadata,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
-        resultSlot !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        resultSlot !== void 0 && result && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
         ] }),
         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, "data-testid": "tool-output" }) })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolApprovalButtons,
+          {
+            toolCalled,
+            toolCallId,
+            toolApprovalMetadata
+          }
+        )
       ] })
     }
   );
@@ -5170,33 +5280,6 @@ const useCurrentRun = () => {
   return { steps, runId: context.runId };
 };
 
-const sizeClasses = {
-  md: "h-button-md gap-md",
-  lg: "h-button-lg gap-lg"
-};
-const variantClasses$1 = {
-  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
-  light: "bg-surface3 hover:bg-surface5 text-icon6"
-};
-const Button$1 = ({ className, as, size = "md", variant = "default", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: clsx(
-        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses$1[variant],
-        sizeClasses[size],
-        className,
-        {
-          "cursor-not-allowed": props.disabled
-        }
-      ),
-      ...props
-    }
-  );
-};
-
 const useCodemirrorTheme$1 = () => {
   return React.useMemo(
     () => codemirrorThemeDracula.draculaInit({
@@ -7797,6 +7880,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,
@@ -7835,7 +8246,15 @@ const useWorkflow = (workflowId) => {
   });
 };
 
-const WorkflowBadge = ({ runId, workflowId, isStreaming, metadata }) => {
+const WorkflowBadge = ({
+  result,
+  workflowId,
+  isStreaming,
+  metadata,
+  toolCallId,
+  toolApprovalMetadata
+}) => {
+  const { runId, status } = result || {};
   const { data: workflow, isLoading: isWorkflowLoading } = useWorkflow(workflowId);
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
@@ -7862,7 +8281,8 @@ const WorkflowBadge = ({ runId, workflowId, isStreaming, metadata }) => {
       ),
       children: [
         !isStreaming && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
-        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId })
+        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToolApprovalButtons, { toolCalled: !!status, toolCallId, toolApprovalMetadata })
       ]
     }
   );
@@ -7885,10 +8305,10 @@ const useWorkflowStream = (workflowFullState) => {
   }, [workflowFullState]);
 };
 
-const AgentBadge = ({ agentId, messages = [], metadata }) => {
+const AgentBadge = ({ agentId, messages = [], metadata, toolCallId, toolApprovalMetadata }) => {
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     BadgeWrapper,
     {
       "data-testid": "agent-badge",
@@ -7902,29 +8322,39 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
           input: agentNetworkInput
         }
       ),
-      children: messages.map((message, index) => {
-        if (message.type === "text") {
-          return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: message.content }, index);
-        }
-        const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
-        return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          ToolFallback,
-          {
-            toolName: message.toolName,
-            argsText: typeof message.args === "string" ? message.args : JSON.stringify(message.args),
-            result,
-            args: message.args,
-            status: { type: "complete" },
-            type: "tool-call",
-            toolCallId: message.toolCallId,
-            addResult: () => {
-            },
-            metadata: {
-              mode: "stream"
+      children: [
+        messages.map((message, index) => {
+          if (message.type === "text") {
+            return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: message.content }, index);
+          }
+          const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
+          return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ToolFallback,
+            {
+              toolName: message.toolName,
+              argsText: typeof message.args === "string" ? message.args : JSON.stringify(message.args),
+              result,
+              args: message.args,
+              status: { type: "complete" },
+              type: "tool-call",
+              toolCallId: message.toolCallId,
+              addResult: () => {
+              },
+              metadata: {
+                mode: "stream"
+              }
             }
+          ) }, index);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolApprovalButtons,
+          {
+            toolCalled: messages?.length > 0,
+            toolCallId,
+            toolApprovalMetadata
           }
-        ) }, index);
-      })
+        )
+      ]
     }
   );
 };
@@ -7946,27 +8376,53 @@ const useAgentMessages = ({
   });
 };
 
-const AgentBadgeWrapper = ({ agentId, result, metadata }) => {
+const AgentBadgeWrapper = ({
+  agentId,
+  result,
+  metadata,
+  toolCallId,
+  toolApprovalMetadata
+}) => {
   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 });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AgentBadge,
+    {
+      agentId,
+      messages: childMessages,
+      metadata,
+      toolCallId,
+      toolApprovalMetadata
+    }
+  );
 };
 
 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 ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...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;
+  const requireApprovalMetadata = metadata?.mode === "stream" && metadata?.requireApprovalMetadata;
+  const toolApprovalMetadata = requireApprovalMetadata ? requireApprovalMetadata?.[toolCallId] : void 0;
   useWorkflowStream(result);
   if (isAgent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AgentBadgeWrapper, { agentId: agentToolName, result, metadata });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AgentBadgeWrapper,
+      {
+        agentId: agentToolName,
+        result,
+        metadata,
+        toolCallId,
+        toolApprovalMetadata
+      }
+    );
   }
   if (isWorkflow) {
     const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
@@ -7975,8 +8431,10 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       {
         workflowId: workflowToolName,
         isStreaming,
-        runId: result?.runId,
-        metadata
+        result,
+        metadata,
+        toolCallId,
+        toolApprovalMetadata
       }
     );
   }
@@ -7987,7 +8445,9 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       args,
       result,
       toolOutput: result?.toolOutput || [],
-      metadata
+      metadata,
+      toolCallId,
+      toolApprovalMetadata
     }
   );
 };
@@ -9655,7 +10115,10 @@ function MastraRuntimeProvider({
     sendMessage,
     cancelRun,
     isRunning: isRunningStream,
-    setMessages
+    setMessages,
+    approveToolCall,
+    declineToolCall,
+    toolCallApprovals
   } = react$3.useChat({
     agentId,
     initializeMessages: () => initialMessages || []
@@ -9675,7 +10138,8 @@ function MastraRuntimeProvider({
     chatWithGenerateLegacy,
     chatWithGenerate,
     chatWithNetwork,
-    providerOptions
+    providerOptions,
+    requireToolApproval
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = React.useRef({});
   const runtimeContextInstance = new di.RuntimeContext();
@@ -9692,7 +10156,8 @@ function MastraRuntimeProvider({
     maxTokens,
     instructions,
     providerOptions,
-    maxSteps
+    maxSteps,
+    requireToolApproval
   };
   const baseClient = react$3.useMastraClient();
   const isVNext = modelVersion === "v2";
@@ -10080,10 +10545,23 @@ function MastraRuntimeProvider({
     convertMessage: (x) => x,
     onNew,
     onCancel,
-    adapters: isReady ? adapters : void 0
+    adapters: isReady ? adapters : void 0,
+    extras: {
+      approveToolCall,
+      declineToolCall
+    }
   });
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.AssistantRuntimeProvider, { runtime, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AssistantRuntimeProvider, { runtime, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ToolCallProvider,
+    {
+      approveToolcall: approveToolCall,
+      declineToolcall: declineToolCall,
+      isRunning: isRunningStream,
+      toolCallApprovals,
+      children
+    }
+  ) });
 }
 
 const defaultSettings = {
@@ -10904,6 +11382,16 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
           ]
         }
       ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Require Tool Approval", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          checked: settings?.modelSettings?.requireToolApproval,
+          onCheckedChange: (value) => setSettings({
+            ...settings,
+            modelSettings: { ...settings?.modelSettings, requireToolApproval: value }
+          })
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14304,6 +14792,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 +15001,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,
@@ -16152,7 +16752,7 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     console.warn("Only one of traceUsage or spanUsage should be provided");
     return null;
   }
-  const generationSpans = traceSpans.filter((span) => span.spanType === "llm_generation");
+  const generationSpans = traceSpans.filter((span) => span.spanType === "model_generation");
   const hasV5Format = generationSpans.some(
     (span) => span.attributes?.usage?.inputTokens !== void 0 || span.attributes?.usage?.outputTokens !== void 0
   );
@@ -17427,6 +18027,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 +18578,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 +18793,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, {