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

package/dist/index.es.js

@@ -47,13 +47,14 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { useMastraClient, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
-import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useMastraClient, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
+import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/runtime-context';
 import Markdown from 'react-markdown';
 import { useShallow } from 'zustand/shallow';
-import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/di';
+import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/di';
 import { MastraClient } from '@mastra/client-js';
 import { AnimatePresence } from 'motion/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -4396,6 +4397,9 @@ const BadgeWrapper = ({
   "data-testid": dataTestId
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+  useEffect(() => {
+    setIsCollapsed(initialCollapsed);
+  }, [initialCollapsed]);
   return /* @__PURE__ */ jsxs("div", { className: "mb-4", "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs(
@@ -4512,17 +4516,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__ */ 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 = createContext(void 0);
+function ToolCallProvider({
+  children,
+  approveToolcall,
+  declineToolcall,
+  isRunning,
+  toolCallApprovals
+}) {
+  return /* @__PURE__ */ jsx(ToolCallContext.Provider, { value: { approveToolcall, declineToolcall, isRunning, toolCallApprovals }, children });
+}
+function useToolCall() {
+  const context = 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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Approval required" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxs(
+          Button$1,
+          {
+            onClick: handleApprove,
+            disabled: isRunning || !!toolCallApprovalStatus,
+            className: toolCallApprovalStatus === "approved" ? "!text-accent1" : "",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Check, {}) }),
+              "Approve"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button$1,
+          {
+            onClick: handleDecline,
+            disabled: isRunning || !!toolCallApprovalStatus,
+            className: toolCallApprovalStatus === "declined" ? "!text-accent2" : "",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(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__ */ jsx(SyntaxHighlighter$2, { data: formattedArgs, "data-testid": "tool-args" });
   } catch {
-    argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: args });
+    argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, "data-testid": "tool-result" });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: result }) : /* @__PURE__ */ 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__ */ jsx(
     BadgeWrapper,
     {
@@ -4536,19 +4637,28 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
           input: agentNetworkInput
         }
       ),
+      initialCollapsed: !!!toolApprovalMetadata,
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
-        resultSlot !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        resultSlot !== void 0 && result && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
         ] }),
         toolOutput.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
           /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput, "data-testid": "tool-output" }) })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToolApprovalButtons,
+          {
+            toolCalled,
+            toolCallId,
+            toolApprovalMetadata
+          }
+        )
       ] })
     }
   );
@@ -5135,33 +5245,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__ */ 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 useMemo(
     () => draculaInit({
@@ -7762,6 +7845,334 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex
   }
 ) });
 
+const useWorkflows = () => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["workflows", JSON.stringify(runtimeContext)],
+    queryFn: () => client.getWorkflows(runtimeContext)
+  });
+};
+
+const useExecuteWorkflow = () => {
+  const client = useMastraClient();
+  const createWorkflowRun = 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 = useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      try {
+        const runtimeContext = new RuntimeContext$1();
+        Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+          runtimeContext.set(key, value);
+        });
+        const workflow = client.getWorkflow(workflowId);
+        await workflow.start({ runId, inputData: input || {}, runtimeContext });
+      } catch (error) {
+        console.error("Error starting workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  const startAsyncWorkflowRun = useMutation({
+    mutationFn: async ({
+      workflowId,
+      runId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      try {
+        const runtimeContext = new RuntimeContext$1();
+        Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+          runtimeContext.set(key, value);
+        });
+        const workflow = client.getWorkflow(workflowId);
+        const result = await workflow.startAsync({ runId, inputData: input || {}, runtimeContext });
+        return result;
+      } catch (error) {
+        console.error("Error starting workflow run:", error);
+        throw error;
+      }
+    }
+  });
+  return {
+    startWorkflowRun,
+    createWorkflowRun,
+    startAsyncWorkflowRun
+  };
+};
+const useStreamWorkflow = () => {
+  const client = useMastraClient();
+  const [streamResult, setStreamResult] = useState({});
+  const [isStreaming, setIsStreaming] = useState(false);
+  const readerRef = useRef(null);
+  const observerRef = useRef(null);
+  const resumeStreamRef = useRef(null);
+  const isMountedRef = useRef(true);
+  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 = 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 = new RuntimeContext$1();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      const workflow = client.getWorkflow(workflowId);
+      const stream = await workflow.streamVNext({ runId, inputData, runtimeContext, 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 = 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 = 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 = 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 = 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 = new RuntimeContext$1();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      const stream = await workflow.resumeStreamVNext({ runId, step, resumeData, runtimeContext });
+      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 = 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 = useMastraClient();
+  const cancelWorkflowRun = 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 = useMastraClient();
+  const sendWorkflowRunEvent = 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__ */ jsx(
     BadgeWrapper,
@@ -7800,7 +8211,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
@@ -7827,7 +8246,8 @@ const WorkflowBadge = ({ runId, workflowId, isStreaming, metadata }) => {
       ),
       children: [
         !isStreaming && !isLoading && /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
-        isStreaming && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId })
+        isStreaming && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }),
+        /* @__PURE__ */ jsx(ToolApprovalButtons, { toolCalled: !!status, toolCallId, toolApprovalMetadata })
       ]
     }
   );
@@ -7850,10 +8270,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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     BadgeWrapper,
     {
       "data-testid": "agent-badge",
@@ -7867,29 +8287,39 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
           input: agentNetworkInput
         }
       ),
-      children: messages.map((message, index) => {
-        if (message.type === "text") {
-          return /* @__PURE__ */ jsx(Markdown, { children: message.content }, index);
-        }
-        const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
-        return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ 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__ */ jsx(Markdown, { children: message.content }, index);
+          }
+          const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
+          return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ 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__ */ jsx(
+          ToolApprovalButtons,
+          {
+            toolCalled: messages?.length > 0,
+            toolCallId,
+            toolApprovalMetadata
           }
-        ) }, index);
-      })
+        )
+      ]
     }
   );
 };
@@ -7911,27 +8341,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 ?? resolveToChildMessages(memoryMessages?.uiMessages ?? []);
-  return /* @__PURE__ */ jsx(AgentBadge, { agentId, messages: childMessages, metadata });
+  return /* @__PURE__ */ jsx(
+    AgentBadge,
+    {
+      agentId,
+      messages: childMessages,
+      metadata,
+      toolCallId,
+      toolApprovalMetadata
+    }
+  );
 };
 
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ 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__ */ jsx(AgentBadgeWrapper, { agentId: agentToolName, result, metadata });
+    return /* @__PURE__ */ jsx(
+      AgentBadgeWrapper,
+      {
+        agentId: agentToolName,
+        result,
+        metadata,
+        toolCallId,
+        toolApprovalMetadata
+      }
+    );
   }
   if (isWorkflow) {
     const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
@@ -7940,8 +8396,10 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       {
         workflowId: workflowToolName,
         isStreaming,
-        runId: result?.runId,
-        metadata
+        result,
+        metadata,
+        toolCallId,
+        toolApprovalMetadata
       }
     );
   }
@@ -7952,7 +8410,9 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       args,
       result,
       toolOutput: result?.toolOutput || [],
-      metadata
+      metadata,
+      toolCallId,
+      toolApprovalMetadata
     }
   );
 };
@@ -9620,7 +10080,10 @@ function MastraRuntimeProvider({
     sendMessage,
     cancelRun,
     isRunning: isRunningStream,
-    setMessages
+    setMessages,
+    approveToolCall,
+    declineToolCall,
+    toolCallApprovals
   } = useChat({
     agentId,
     initializeMessages: () => initialMessages || []
@@ -9640,10 +10103,11 @@ function MastraRuntimeProvider({
     chatWithGenerateLegacy,
     chatWithGenerate,
     chatWithNetwork,
-    providerOptions
+    providerOptions,
+    requireToolApproval
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = useRef({});
-  const runtimeContextInstance = new RuntimeContext$1();
+  const runtimeContextInstance = new RuntimeContext$2();
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
@@ -9657,7 +10121,8 @@ function MastraRuntimeProvider({
     maxTokens,
     instructions,
     providerOptions,
-    maxSteps
+    maxSteps,
+    requireToolApproval
   };
   const baseClient = useMastraClient();
   const isVNext = modelVersion === "v2";
@@ -10045,10 +10510,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__ */ jsx(AssistantRuntimeProvider, { runtime, children });
+  return /* @__PURE__ */ jsx(AssistantRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx(
+    ToolCallProvider,
+    {
+      approveToolcall: approveToolCall,
+      declineToolcall: declineToolCall,
+      isRunning: isRunningStream,
+      toolCallApprovals,
+      children
+    }
+  ) });
 }
 
 const defaultSettings = {
@@ -10869,6 +11347,16 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
           ]
         }
       ) }),
+      /* @__PURE__ */ jsx(Entry, { label: "Require Tool Approval", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: settings?.modelSettings?.requireToolApproval,
+          onCheckedChange: (value) => setSettings({
+            ...settings,
+            modelSettings: { ...settings?.modelSettings, requireToolApproval: value }
+          })
+        }
+      ) }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
         /* @__PURE__ */ jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
           /* @__PURE__ */ jsx(
@@ -14269,6 +14757,93 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
+const useAgents = () => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["agents", JSON.stringify(runtimeContext)],
+    queryFn: () => client.getAgents(runtimeContext)
+  });
+};
+const useModelProviders = () => {
+  const client = useMastraClient();
+  return useQuery({
+    queryKey: ["model-providers"],
+    queryFn: () => client.getModelProviders()
+  });
+};
+const useUpdateAgentModel = (agentId) => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  return 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 = useMastraClient();
+  const queryClient = useQueryClient();
+  return 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 = useMastraClient();
+  const queryClient = useQueryClient();
+  return 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 = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["agent", agentId, JSON.stringify(runtimeContext)],
+    queryFn: () => agentId ? client.getAgent(agentId).details(runtimeContext) : null,
+    retry: false,
+    enabled: Boolean(agentId)
+  });
+};
+
+const useExecuteAgentTool = () => {
+  const client = useMastraClient();
+  return useMutation({
+    mutationFn: async ({ agentId, toolId, input, playgroundRuntimeContext }) => {
+      const runtimeContext = new RuntimeContext$2();
+      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) {
+        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;
@@ -14391,6 +14966,31 @@ const EmptyToolsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-fu
   }
 ) });
 
+const useExecuteTool = () => {
+  const client = useMastraClient();
+  return useMutation({
+    mutationFn: async ({
+      toolId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      const runtimeContext = new RuntimeContext$2();
+      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) {
+        toast.error("Error executing dev tool");
+        console.error("Error executing dev tool:", error);
+        throw error;
+      }
+    }
+  });
+};
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -16117,7 +16717,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
   );
@@ -17392,6 +17992,106 @@ const PlaygroundQueryClient = ({ children }) => {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
 };
 
+const useMemory = (agentId) => {
+  const client = useMastraClient();
+  return 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 = useMastraClient();
+  return 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 = useMastraClient();
+  return 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 = useMastraClient();
+  const queryClient = useQueryClient();
+  return 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] });
+      }
+      toast.success("Chat deleted successfully");
+    },
+    onError: () => {
+      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);
@@ -17843,5 +18543,16 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full
   }
 ) });
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMCPServerTools, useMainSidebar, useModelReset, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useTraceSpanScores, useWorkflow, useWorkflowRuns, useWorkingMemory };
+const useEvalsByAgentId = (agentId, type) => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = useMastraClient();
+  return 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)
+  });
+};
+
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgent, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useEvalsByAgentId, useExecuteAgentTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTools, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelProviders, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSendWorkflowRunEvent, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map