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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @mastra/playground-ui
 
+## 6.7.0-alpha.0
+
+### Minor Changes
+
+- Update peer dependencies to match core package version bump (0.22.1) ([#8649](https://github.com/mastra-ai/mastra/pull/8649))
+
+### Patch Changes
+
+- Add tool call approval ([#8649](https://github.com/mastra-ai/mastra/pull/8649))
+
+- Updated dependencies [[`f743dbb`](https://github.com/mastra-ai/mastra/commit/f743dbb8b40d1627b5c10c0e6fc154f4ebb6e394), [`5df9cce`](https://github.com/mastra-ai/mastra/commit/5df9cce1a753438413f64c11eeef8f845745c2a8), [`2060766`](https://github.com/mastra-ai/mastra/commit/20607667bf78ea104cca3e15dfb93ae0b62c9d18), [`2c4438b`](https://github.com/mastra-ai/mastra/commit/2c4438b87817ab7eed818c7990fef010475af1a3)]:
+  - @mastra/core@0.23.0-alpha.0
+  - @mastra/client-js@0.16.5-alpha.0
+  - @mastra/react@0.0.11-alpha.0
+
 ## 6.6.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -4432,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(
@@ -4548,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,
     {
@@ -4572,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
+          }
+        )
       ] })
     }
   );
@@ -5171,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({
@@ -8164,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
@@ -8191,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 })
       ]
     }
   );
@@ -8214,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",
@@ -8231,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);
-      })
+        )
+      ]
     }
   );
 };
@@ -8275,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";
@@ -8304,8 +8431,10 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       {
         workflowId: workflowToolName,
         isStreaming,
-        runId: result?.runId,
-        metadata
+        result,
+        metadata,
+        toolCallId,
+        toolApprovalMetadata
       }
     );
   }
@@ -8316,7 +8445,9 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
       args,
       result,
       toolOutput: result?.toolOutput || [],
-      metadata
+      metadata,
+      toolCallId,
+      toolApprovalMetadata
     }
   );
 };
@@ -9984,7 +10115,10 @@ function MastraRuntimeProvider({
     sendMessage,
     cancelRun,
     isRunning: isRunningStream,
-    setMessages
+    setMessages,
+    approveToolCall,
+    declineToolCall,
+    toolCallApprovals
   } = react$3.useChat({
     agentId,
     initializeMessages: () => initialMessages || []
@@ -10004,7 +10138,8 @@ function MastraRuntimeProvider({
     chatWithGenerateLegacy,
     chatWithGenerate,
     chatWithNetwork,
-    providerOptions
+    providerOptions,
+    requireToolApproval
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = React.useRef({});
   const runtimeContextInstance = new di.RuntimeContext();
@@ -10021,7 +10156,8 @@ function MastraRuntimeProvider({
     maxTokens,
     instructions,
     providerOptions,
-    maxSteps
+    maxSteps,
+    requireToolApproval
   };
   const baseClient = react$3.useMastraClient();
   const isVNext = modelVersion === "v2";
@@ -10409,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 = {
@@ -11233,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(
@@ -16593,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
   );