@mastra/playground-ui 22.1.1-alpha.0 → 22.1.1-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 22.1.1-alpha.1
+
+### Patch Changes
+
+- Fixed integration tools (Composio, Arcade) not saving when added to code-defined agents in the Agent Editor ([#15185](https://github.com/mastra-ai/mastra/pull/15185))
+
+- Updated dependencies [[`ef94400`](https://github.com/mastra-ai/mastra/commit/ef9440049402596b31f2ab976c5e4508f6cb6c91)]:
+  - @mastra/core@1.24.1-alpha.0
+  - @mastra/client-js@1.13.3-alpha.0
+  - @mastra/react@0.2.25-alpha.0
+
 ## 22.1.1-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -30171,6 +30171,53 @@ const useAllIntegrationTools = () => {
   };
 };
 
+function SelectedToolList({ providerId, selectedTools, onToggle }) {
+  const tools = React.useMemo(() => {
+    const result = [];
+    for (const [id, description] of selectedTools) {
+      const sep = id.indexOf(":");
+      if (sep === -1) continue;
+      if (id.slice(0, sep) !== providerId) continue;
+      result.push({ id, slug: id.slice(sep + 1), description });
+    }
+    return result;
+  }, [selectedTools, providerId]);
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-neutral3", children: "No tools selected" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 p-3", children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: onToggle ? "button" : void 0,
+      tabIndex: onToggle ? 0 : void 0,
+      onClick: onToggle ? () => onToggle(tool.id, tool.description) : void 0,
+      onKeyDown: onToggle ? (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle(tool.id, tool.description);
+        }
+      } : void 0,
+      className: cn("flex items-start gap-3 rounded-md px-3 py-2.5 bg-surface4", onToggle && "cursor-pointer"),
+      children: [
+        onToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            checked: true,
+            onCheckedChange: () => onToggle(tool.id, tool.description),
+            onClick: (e) => e.stopPropagation()
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-neutral6 font-medium", children: tool.slug }),
+          tool.description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-neutral3 line-clamp-2", children: tool.description })
+        ] })
+      ]
+    },
+    tool.id
+  )) }) });
+}
+
 const useProviderTools = (providerId, params) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
@@ -30202,6 +30249,7 @@ function ToolList({ providerId, toolkit, selectedIds, onToggle }) {
           tabIndex: onToggle ? 0 : void 0,
           onClick: onToggle ? () => onToggle(toolId, tool.description || "") : void 0,
           onKeyDown: onToggle ? (e) => {
+            if (e.target !== e.currentTarget) return;
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               onToggle(toolId, tool.description || "");
@@ -30245,7 +30293,8 @@ const useToolkits = (providerId) => {
   });
 };
 
-function ToolkitList({ providerId, selectedToolkit, onSelectToolkit }) {
+const SELECTED_TOOLKIT_SENTINEL = "__selected__";
+function ToolkitList({ providerId, selectedToolkit, onSelectToolkit, selectedCount = 0 }) {
   const { data, isLoading } = useToolkits(providerId);
   const toolkits = data?.data ?? [];
   if (isLoading) {
@@ -30265,6 +30314,22 @@ function ToolkitList({ providerId, selectedToolkit, onSelectToolkit }) {
         children: "All"
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelectToolkit(SELECTED_TOOLKIT_SENTINEL),
+        className: cn(
+          "text-left px-3 py-2 rounded-md text-ui-sm flex items-center justify-between gap-2",
+          transitions.colors,
+          selectedToolkit === SELECTED_TOOLKIT_SENTINEL ? "bg-surface4 text-neutral6 font-medium" : "text-neutral3 hover:bg-surface4 hover:text-neutral5"
+        ),
+        children: [
+          "Selected",
+          selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs tabular-nums bg-surface3 rounded-full px-1.5 py-0.5 min-w-[1.25rem] text-center", children: selectedCount })
+        ]
+      }
+    ),
     toolkits.map((toolkit) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -30341,10 +30406,18 @@ function ToolProviderDialog({ provider, onClose, selectedToolIds, onSubmit }) {
             {
               providerId: provider.id,
               selectedToolkit,
-              onSelectToolkit: setSelectedToolkit
+              onSelectToolkit: setSelectedToolkit,
+              selectedCount: localSelection.size
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: provider && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: provider && selectedToolkit === SELECTED_TOOLKIT_SENTINEL ? /* @__PURE__ */ jsxRuntime.jsx(
+            SelectedToolList,
+            {
+              providerId: provider.id,
+              selectedTools: localSelection,
+              onToggle: onSubmit ? handleToggle : void 0
+            }
+          ) : provider && /* @__PURE__ */ jsxRuntime.jsx(
             ToolList,
             {
               providerId: provider.id,
@@ -30363,6 +30436,17 @@ function IntegrationToolsSection({ selectedToolIds, onSubmitTools }) {
   const { data, isLoading } = useToolProviders();
   const providers = data?.providers ?? [];
   const [selectedProvider, setSelectedProvider] = React.useState(null);
+  const toolCountsByProvider = React.useMemo(() => {
+    const counts = {};
+    if (!selectedToolIds) return counts;
+    for (const key of Object.keys(selectedToolIds)) {
+      const sep = key.indexOf(":");
+      if (sep === -1) continue;
+      const providerId = key.slice(0, sep);
+      counts[providerId] = (counts[providerId] ?? 0) + 1;
+    }
+    return counts;
+  }, [selectedToolIds]);
   if (isLoading || providers.length === 0) {
     return null;
   }
@@ -30372,6 +30456,7 @@ function IntegrationToolsSection({ selectedToolIds, onSubmitTools }) {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: providers.map((provider) => {
         const bg = stringToColor(provider.name);
         const text = stringToColor(provider.name, 25);
+        const count = toolCountsByProvider[provider.id] ?? 0;
         return /* @__PURE__ */ jsxRuntime.jsxs(Entity, { onClick: () => setSelectedProvider(provider), className: "bg-surface2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -30385,7 +30470,14 @@ function IntegrationToolsSection({ selectedToolIds, onSubmitTools }) {
             /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: provider.name }),
             provider.description && /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: provider.description })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: "Available" }) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            count > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", children: [
+              count,
+              " ",
+              count === 1 ? "tool" : "tools"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: "Available" })
+          ] })
         ] }, provider.id);
       }) })
     ] }),
@@ -33496,9 +33588,10 @@ function useAgentCmsForm(options) {
           // applyStoredOverrides will NOT apply these fields for code agent overrides.
           name: values.name,
           model: values.model,
-          // Only send editable fields: instructions, tools, and variables (requestContextSchema)
+          // Only send editable fields: instructions, tools, integrationTools, and variables (requestContextSchema)
           instructions: mapInstructionBlocksToApi(values.instructionBlocks),
           tools: Object.keys(registryTools2).length > 0 ? registryTools2 : void 0,
+          integrationTools: transformIntegrationToolsForApi(values.integrationTools),
           mcpClients: mcpClientsParam2,
           requestContextSchema: values.variables ? Object.fromEntries(Object.entries(values.variables)) : void 0
         };