@mastra/playground-ui 6.7.1 → 6.7.2-alpha.0

package/dist/index.cjs.js

@@ -26,7 +26,6 @@ const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
 const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-const colors = require('./colors-B_l6leHd.cjs');
 const prettier = require('prettier');
 const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
@@ -45,14 +44,18 @@ const reactDayPicker = require('react-day-picker');
 const PopoverPrimitive = require('@radix-ui/react-popover');
 const SelectPrimitive = require('@radix-ui/react-select');
 const uuid = require('@lukeed/uuid');
+const reactHookForm = require('react-hook-form');
+const core = require('@autoform/core');
 const LabelPrimitive = require('@radix-ui/react-label');
 const v4 = require('@autoform/zod/v4');
 const v3 = require('zod/v3');
+const z$1 = require('zod/v4');
 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 colors = require('./colors-B_l6leHd.cjs');
 const Markdown = require('react-markdown');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
@@ -4347,25 +4350,20 @@ function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
   return { isCopied, handleCopy };
 }
 
-function CopyButton({ content, copyMessage, className }) {
-  const { isCopied, handleCopy } = useCopyToClipboard({
+function CopyButton({
+  content,
+  copyMessage,
+  tooltip = "Copy to clipboard",
+  iconSize = "default"
+}) {
+  const { handleCopy } = useCopyToClipboard({
     text: content,
     copyMessage
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button$2,
-    {
-      variant: "ghost",
-      size: "icon",
-      className: cn("relative h-6 w-6", className),
-      "aria-label": "Copy to clipboard",
-      onClick: handleCopy,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "transition-colors hover:bg-surface4 rounded-lg text-icon3 hover:text-icon6", size: iconSize, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+  ] });
 }
 
 const useCodemirrorTheme$2 = () => {
@@ -5288,7 +5286,7 @@ const useCodemirrorTheme$1 = () => {
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        gutterForeground: colors.IconColors.icon3,
+        gutterForeground: "#939393",
         background: "transparent"
       },
       styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
@@ -6869,6 +6867,145 @@ const RecordField = ({ inputProps, field, error, id }) => {
   ] });
 };
 
+const CustomObjectField = ({ field, path }) => {
+  const { uiComponents } = react$2.useAutoForm();
+  return /* @__PURE__ */ jsxRuntime.jsx(uiComponents.ObjectWrapper, { label: core.getLabel(field), field, children: Object.entries(field.schema).map(([_key, subField]) => /* @__PURE__ */ jsxRuntime.jsx(
+    CustomAutoFormField,
+    {
+      field: subField,
+      path: [...path, subField.key]
+    },
+    `${path.join(".")}.${subField.key}`
+  )) });
+};
+
+const CustomArrayField = ({ field, path }) => {
+  const { uiComponents } = react$2.useAutoForm();
+  const { control } = reactHookForm.useFormContext();
+  const { fields, append, remove } = reactHookForm.useFieldArray({
+    control,
+    name: path.join(".")
+  });
+  const subFieldType = field.schema?.[0]?.type;
+  let defaultValue;
+  if (subFieldType === "object") {
+    defaultValue = {};
+  } else if (subFieldType === "array") {
+    defaultValue = [];
+  } else {
+    defaultValue = null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(uiComponents.ArrayWrapper, { label: core.getLabel(field), field, onAddItem: () => append(defaultValue), children: fields.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(uiComponents.ArrayElementWrapper, { onRemove: () => remove(index), index, children: /* @__PURE__ */ jsxRuntime.jsx(CustomAutoFormField, { field: field.schema[0], path: [...path, index.toString()] }) }, item.id)) });
+};
+
+const CustomAutoFormField = ({ field, path }) => {
+  const { formComponents, uiComponents } = react$2.useAutoForm();
+  const {
+    register,
+    formState: { errors },
+    getValues
+  } = reactHookForm.useFormContext();
+  const fullPath = path.join(".");
+  const error = react$2.getPathInObject(errors, path)?.message;
+  const value = getValues(fullPath);
+  const FieldWrapper = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;
+  let FieldComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
+    uiComponents.ErrorMessage,
+    {
+      error: `[AutoForm Configuration Error] No component found for type "${field.type}" nor a fallback`
+    }
+  );
+  if (field.type === "array") {
+    FieldComponent = CustomArrayField;
+  } else if (field.type === "object") {
+    FieldComponent = CustomObjectField;
+  } else if (field.type in formComponents) {
+    FieldComponent = formComponents[field.type];
+  } else if ("fallback" in formComponents) {
+    FieldComponent = formComponents.fallback;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldWrapper, { label: core.getLabel(field), error, id: fullPath, field, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FieldComponent,
+    {
+      label: core.getLabel(field),
+      field,
+      value,
+      error,
+      id: fullPath,
+      path,
+      inputProps: {
+        required: field.required,
+        error,
+        key: `${fullPath}-input`,
+        ...field.fieldConfig?.inputProps,
+        ...register(fullPath)
+      }
+    },
+    fullPath
+  ) });
+};
+
+const UnionField = ({ field, inputProps }) => {
+  const path = inputProps.name?.split(".") ?? [];
+  return field.schema?.map((schema, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CustomAutoFormField, { field: schema, path }, path.join(".")),
+      index < (field.schema?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-center", children: "OR" })
+    ] }, schema.key);
+  });
+};
+
+const DiscriminatedUnionField = ({ field, path }) => {
+  const { watch } = reactHookForm.useFormContext();
+  const fullPath = path.join(".");
+  const value = watch(fullPath);
+  const allSchemas = field.schema?.flatMap((schema) => schema.schema || []) || [];
+  const literalSchemas = allSchemas?.filter((schema) => schema.fieldConfig?.customData?.isLiteral) || [];
+  const firstLiteralSchema = literalSchemas[0];
+  const literalSchemaField = literalSchemas?.reduce(
+    (acc, schema) => {
+      const optionValues = (schema.fieldConfig?.customData?.literalValues ?? []).map(
+        (value2) => [value2, value2]
+      );
+      acc.options?.push(...optionValues);
+      return acc;
+    },
+    {
+      key: firstLiteralSchema.key,
+      required: firstLiteralSchema.required,
+      type: "select",
+      default: firstLiteralSchema.default,
+      description: firstLiteralSchema.description,
+      options: [],
+      fieldConfig: firstLiteralSchema.fieldConfig
+    }
+  );
+  const otherFieldSchemas = field.schema?.reduce(
+    (acc, schema) => {
+      const literalSchema = schema.schema?.find((schema2) => schema2.fieldConfig?.customData?.isLiteral);
+      const literalSchemaValue = literalSchema?.fieldConfig?.customData?.literalValues?.[0];
+      const otherSchemas = schema.schema?.filter((schema2) => schema2.key !== literalSchema?.key) ?? [];
+      if (literalSchemaValue) {
+        acc[literalSchemaValue] = otherSchemas;
+      }
+      return acc;
+    },
+    {}
+  );
+  const literalFieldValue = value?.[literalSchemaField.key];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CustomAutoFormField,
+      {
+        field: literalSchemaField,
+        path: [...path, literalSchemaField.key]
+      },
+      `${fullPath}.${literalSchemaField.key}`
+    ),
+    literalFieldValue && otherFieldSchemas?.[literalFieldValue] && otherFieldSchemas[literalFieldValue].map((schema) => /* @__PURE__ */ jsxRuntime.jsx(CustomAutoFormField, { field: schema, path: [...path, schema.key] }, `${fullPath}.${schema.key}`))
+  ] }, field.key);
+};
+
 const ShadcnUIComponents = {
   Form,
   FieldWrapper,
@@ -6896,6 +7033,8 @@ function AutoForm({
         date: (props2) => /* @__PURE__ */ jsxRuntime.jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         select: (props2) => /* @__PURE__ */ jsxRuntime.jsx(SelectField$1, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         record: (props2) => /* @__PURE__ */ jsxRuntime.jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        union: (props2) => /* @__PURE__ */ jsxRuntime.jsx(UnionField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        "discriminated-union": (props2) => /* @__PURE__ */ jsxRuntime.jsx(DiscriminatedUnionField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         ...formComponents
       }
     }
@@ -6903,6 +7042,39 @@ function AutoForm({
 }
 
 react$2.buildZodFieldConfig();
+function removeEmptyValues(values) {
+  const result = {};
+  for (const key in values) {
+    const value = values[key];
+    if ([null, void 0, "", [], {}].includes(value)) {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      const newArray = value.map((item) => {
+        if (typeof item === "object") {
+          const cleanedItem = removeEmptyValues(item);
+          if (Object.keys(cleanedItem).length > 0) {
+            return cleanedItem;
+          }
+          return null;
+        }
+        return item;
+      });
+      const filteredArray = newArray.filter((item) => item !== null);
+      if (filteredArray.length > 0) {
+        result[key] = filteredArray;
+      }
+    } else if (typeof value === "object") {
+      const cleanedValue = removeEmptyValues(value);
+      if (Object.keys(cleanedValue).length > 0) {
+        result[key] = cleanedValue;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
 
 const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 const Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: clsx(labelVariants(), className), ...props }));
@@ -6929,14 +7101,55 @@ function inferFieldType(schema, fieldConfig) {
   if (schema instanceof v3.z.ZodNativeEnum) return "select";
   if (schema instanceof z.z.ZodArray) return "array";
   if (schema instanceof z.z.ZodRecord) return "record";
+  if (schema instanceof z.z.ZodUnion) {
+    const options = schema._zod.def.options;
+    const hasLiteral = options.every((option) => {
+      if ("shape" in option._zod.def) {
+        return Object.values(option._zod.def.shape).some(
+          (value) => value instanceof z.z.ZodLiteral
+        );
+      }
+      return false;
+    });
+    if (hasLiteral) {
+      return "discriminated-union";
+    }
+    return "union";
+  }
   return "string";
 }
 
+function getDefaultValueInZodStack(schema) {
+  if (schema instanceof z$1.core.$ZodDefault) {
+    return schema._zod.def.defaultValue;
+  } else if ("innerType" in schema._zod.def) {
+    return getDefaultValueInZodStack(schema._zod.def.innerType);
+  } else if ("shape" in schema._zod.def) {
+    return getDefaultValues(schema);
+  } else if ("left" in schema._zod.def && "right" in schema._zod.def) {
+    const left = getDefaultValues(schema._zod.def.left);
+    const right = getDefaultValues(schema._zod.def.right);
+    return { ...left, ...right };
+  }
+  return void 0;
+}
+function getDefaultValues(schema) {
+  const shape = schema._zod.def.shape;
+  const defaultValues = {};
+  for (const [key, field] of Object.entries(shape)) {
+    const defaultValue = getDefaultValueInZodStack(field);
+    if (defaultValue !== void 0) {
+      defaultValues[key] = defaultValue;
+    }
+  }
+  return defaultValues;
+}
+
 function parseField(key, schema) {
   const baseSchema = getBaseSchema(schema);
   const fieldConfig = v4.getFieldConfigInZodStack(schema);
   const type = inferFieldType(baseSchema, fieldConfig);
-  const defaultValue = v4.getDefaultValueInZodStack(schema);
+  const defaultValue = getDefaultValueInZodStack(schema);
   const options = baseSchema._zod.def?.entries;
   let optionValues = [];
   if (options) {
@@ -6950,11 +7163,16 @@ function parseField(key, schema) {
   if (baseSchema instanceof v3.z.ZodObject || baseSchema instanceof z.z.ZodObject) {
     subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
   }
+  if (baseSchema instanceof v3.z.ZodUnion || baseSchema instanceof z.z.ZodUnion) {
+    subSchema = Object.entries(baseSchema.def.options).map(([key2, field]) => {
+      return parseField(key2, field);
+    });
+  }
   if (baseSchema instanceof v3.z.ZodIntersection || baseSchema instanceof z.z.ZodIntersection) {
-    const subSchemaLeft = Object.entries(baseSchema._def.left.shape).map(
+    const subSchemaLeft = Object.entries(baseSchema.def.left.shape).map(
       ([key2, field]) => parseField(key2, field)
     );
-    const subSchemaRight = Object.entries(baseSchema._def.right.shape).map(
+    const subSchemaRight = Object.entries(baseSchema.def.right.shape).map(
       ([key2, field]) => parseField(key2, field)
     );
     subSchema = [...subSchemaLeft, ...subSchemaRight];
@@ -6962,13 +7180,21 @@ function parseField(key, schema) {
   if (baseSchema instanceof v3.z.ZodArray || baseSchema instanceof z.z.ZodArray) {
     subSchema = [parseField("0", baseSchema._zod.def.element)];
   }
+  const isLiteral = baseSchema instanceof z.z.ZodLiteral;
+  const literalValues = isLiteral ? baseSchema._zod.def.values : void 0;
   return {
     key,
     type,
     required: !schema.optional(),
     default: defaultValue,
     description: baseSchema.description,
-    fieldConfig,
+    fieldConfig: isLiteral || Object.keys(fieldConfig ?? {})?.length > 0 ? {
+      ...fieldConfig,
+      customData: {
+        ...fieldConfig?.customData ?? {},
+        ...isLiteral ? { isLiteral, literalValues } : {}
+      }
+    } : void 0,
     options: optionValues,
     schema: subSchema
   };
@@ -6993,8 +7219,12 @@ class CustomZodProvider extends v4.ZodProvider {
     super(schema);
     this._schema = schema;
   }
+  getDefaultValues() {
+    return getDefaultValues(this._schema);
+  }
   validateSchema(values) {
-    const result = super.validateSchema(values);
+    const cleanedValues = removeEmptyValues(values);
+    const result = super.validateSchema(cleanedValues);
     return result;
   }
   parseSchema() {
@@ -7703,6 +7933,7 @@ const LinkComponentContext = React.createContext({
     scorerLink: () => "",
     toolLink: () => "",
     mcpServerLink: () => "",
+    mcpServerToolLink: () => "",
     workflowRunLink: () => ""
   }
 });
@@ -13234,7 +13465,7 @@ function MainSidebarNavLink({
   className
 }) {
   const { Link } = useLinkComponent();
-  const isDefaultState = state === "default";
+  const isCollapsed = state === "collapsed";
   const isFeatured = link?.variant === "featured";
   const linkParams = link?.url?.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13248,22 +13479,31 @@ function MainSidebarNavLink({
         {
           "[&>a]:text-icon5 [&>a]:bg-surface3": isActive,
           "[&_svg]:text-icon5": isActive,
-          "[&>a]:justify-start ": isDefaultState,
-          "[&_svg]:text-icon3": !isDefaultState,
+          "[&>a]:justify-start ": !isCollapsed,
+          "[&_svg]:text-icon3": isCollapsed,
           "[&>a]:rounded-md [&>a]:my-[0.5rem] [&>a]:bg-accent1/75 [&>a:hover]:bg-accent1/85 [&>a]:text-black [&>a:hover]:text-black": isFeatured,
-          "[&_svg]:text-black/75": isFeatured
+          "[&_svg]:text-black/75 [&>a:hover_svg]:text-black": isFeatured
         },
         className
       ),
-      children: link ? /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, children: [
-        isDefaultState ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: link.icon && link.icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: link.icon && link.icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.name })
-        ] }),
-        isDefaultState ? link.name : /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: link.name }),
+      children: link ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isCollapsed || link.tooltipMsg ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, children: [
+          link.icon && link.icon,
+          isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: link.name }) : link.name,
+          " ",
+          children
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.tooltipMsg ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          isCollapsed && `${link.name} | `,
+          " ",
+          link.tooltipMsg
+        ] }) : link.name })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, children: [
+        link.icon && link.icon,
+        isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: link.name }) : link.name,
         " ",
         children
-      ] }) : children
+      ] }) }) : children
     }
   );
 }
@@ -14879,6 +15119,86 @@ const useExecuteAgentTool = () => {
   });
 };
 
+const ToolIconMap = {
+  agent: AgentIcon,
+  workflow: WorkflowIcon,
+  tool: ToolsIcon
+};
+
+const ToolInformation = ({ toolDescription, toolId, toolType }) => {
+  const ToolIconComponent = ToolIconMap[toolType || "tool"];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-icon6 flex gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: /* @__PURE__ */ jsxRuntime.jsx(ToolIconComponent, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 justify-between w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "font-medium truncate", children: toolId }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: toolDescription })
+    ] }) })
+  ] }) });
+};
+
+const ToolExecutor = ({
+  isExecutingTool,
+  zodInputSchema,
+  handleExecuteTool,
+  executionResult: result,
+  errorString,
+  toolDescription,
+  toolId,
+  toolType
+}) => {
+  const theme = useCodemirrorTheme$1();
+  const code = JSON.stringify(result ?? {}, null, 2);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainContentContent, { hasLeftServiceColumn: true, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface2 border-r-sm border-border1 w-[20rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ToolInformation, { toolDescription, toolId, toolType }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicForm,
+        {
+          isSubmitLoading: isExecutingTool,
+          schema: zodInputSchema,
+          onSubmit: (data) => {
+            handleExecuteTool(data);
+          },
+          className: "h-auto pb-7"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: code, tooltip: "Copy JSON result to clipboard" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 h-full relative overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: errorString || code, editable: true, theme, extensions: [langJson.jsonLanguage] }) })
+  ] });
+};
+
+const AgentToolPanel = ({ toolId, agentId }) => {
+  const { data: agent, isLoading: isAgentLoading } = useAgent(agentId);
+  const tool = Object.values(agent?.tools ?? {}).find((tool2) => tool2.id === toolId);
+  const { mutateAsync: executeTool, isPending: isExecutingTool, data: result } = useExecuteAgentTool();
+  const { runtimeContext: playgroundRuntimeContext } = usePlaygroundStore();
+  const handleExecuteTool = async (data) => {
+    if (!tool) return;
+    await executeTool({
+      agentId,
+      toolId: tool.id,
+      input: data,
+      playgroundRuntimeContext
+    });
+  };
+  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
+  if (isAgentLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
+    }
+  );
+};
+
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const tool = row.original;
@@ -15026,6 +15346,52 @@ const useExecuteTool = () => {
   });
 };
 
+const useTools = () => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["tools"],
+    queryFn: () => client.getTools(runtimeContext)
+  });
+};
+const useTool = (toolId) => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["tool", toolId],
+    queryFn: () => client.getTool(toolId).details(runtimeContext)
+  });
+};
+
+const ToolPanel = ({ toolId }) => {
+  const { data: tool, isLoading } = useTool(toolId);
+  const { mutateAsync: executeTool, isPending: isExecuting, data: result } = useExecuteTool();
+  const { runtimeContext: playgroundRuntimeContext } = usePlaygroundStore();
+  const handleExecuteTool = async (data) => {
+    if (!tool) return;
+    return executeTool({
+      toolId: tool.id,
+      input: data,
+      runtimeContext: playgroundRuntimeContext
+    });
+  };
+  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
+  if (isLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool: isExecuting,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
+    }
+  );
+};
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -18578,6 +18944,234 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
   }
 ) });
 
+const useMCPServers = () => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["mcp-servers"],
+    queryFn: async () => {
+      const mcpServers = (await client.getMcpServers(runtimeContext)).servers;
+      return mcpServers;
+    }
+  });
+};
+
+const useMCPServerTool = (serverId, toolId) => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["mcp-server-tool", serverId, toolId],
+    queryFn: () => {
+      const instance = client.getMcpServerTool(serverId, toolId);
+      return instance.details(runtimeContext);
+    }
+  });
+};
+const useExecuteMCPTool = (serverId, toolId) => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: (data) => {
+      const instance = client.getMcpServerTool(serverId, toolId);
+      return instance.execute({ data, runtimeContext });
+    }
+  });
+};
+
+const MCPToolPanel = ({ toolId, serverId }) => {
+  const { data: tool, isLoading } = useMCPServerTool(serverId, toolId);
+  const { mutateAsync: executeTool, isPending: isExecuting, data: result } = useExecuteMCPTool(serverId, toolId);
+  const handleExecuteTool = async (data) => {
+    if (!tool) return;
+    return await executeTool(data);
+  };
+  if (isLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  let zodInputSchema;
+  try {
+    zodInputSchema = resolveSerializedZodOutput(jsonSchemaToZod(tool.inputSchema));
+  } catch (e) {
+    console.error("Error processing input schema:", e);
+    sonner.toast.error("Failed to process tool input schema.");
+    zodInputSchema = z.z.object({});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool: isExecuting,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description || "",
+      toolId: tool.id
+    }
+  );
+};
+
+const CodeMirrorBlock = (props) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4 relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { tooltip: "Copy code", content: props.value || "No content" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json()], theme, ...props })
+  ] });
+};
+
+const MCPDetail = ({ isLoading, server }) => {
+  const [{ sseUrl, httpStreamUrl }, setUrls] = React.useState({
+    sseUrl: "",
+    httpStreamUrl: ""
+  });
+  React.useEffect(() => {
+    if (!server) return;
+    const host = window.MASTRA_SERVER_HOST;
+    const port = window.MASTRA_SERVER_PORT;
+    let baseUrl = null;
+    if (host && port) {
+      baseUrl = `http://${host}:${port}`;
+    }
+    const effectiveBaseUrl = baseUrl || "http://localhost:4111";
+    const sseUrl2 = `${effectiveBaseUrl}/api/mcp/${server.id}/sse`;
+    const httpStreamUrl2 = `${effectiveBaseUrl}/api/mcp/${server.id}/mcp`;
+    setUrls({ sseUrl: sseUrl2, httpStreamUrl: httpStreamUrl2 });
+  }, [server]);
+  if (isLoading) return null;
+  if (!server)
+    return /* @__PURE__ */ jsxRuntime.jsx(MainContentContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon3 font-medium py-20 text-center", children: "Server not found" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainContentContent, { isDivided: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-20 mx-auto max-w-[604px] w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon6 font-medium pb-4", children: server.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge$1,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "SSE" }),
+              className: "!text-icon4",
+              children: sseUrl
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { tooltip: "Copy SSE URL", content: sseUrl, iconSize: "sm" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge$1,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "HTTP" }),
+              className: "!text-icon4",
+              children: httpStreamUrl
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { tooltip: "Copy HTTP Stream URL", content: httpStreamUrl, iconSize: "sm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 pt-3 pb-9", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, { className: "text-icon6" }), className: "rounded-r-sm !text-icon4", children: "Version" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { className: "rounded-l-sm !text-icon4", children: server.version_detail.version })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(McpSetupTabs, { sseUrl, serverName: server.name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll border-l-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(McpToolList, { server }) })
+  ] });
+};
+const McpSetupTabs = ({ sseUrl, serverName }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "cursor", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "cursor", children: "Cursor" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "windsurf", children: "Windsurf" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "cursor", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { className: "text-icon3 pb-4", children: [
+        "Cursor comes with built-in MCP Support.",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Link,
+          {
+            href: "https://docs.cursor.com/context/model-context-protocol",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "underline hover:text-icon6",
+            children: "Following the documentation"
+          }
+        ),
+        ", you can register an MCP server using SSE with the following configuration."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CodeMirrorBlock,
+        {
+          editable: false,
+          value: `{
+    "mcpServers": {
+      "${serverName}": {
+        "url": "${sseUrl}"
+      }
+    }
+  }`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "windsurf", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { className: "text-icon3 pb-4", children: [
+        "Windsurf comes with built-in MCP Support.",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Link,
+          {
+            href: "https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "underline hover:text-icon6",
+            children: "Following the documentation"
+          }
+        ),
+        ", you can register an MCP server using SSE with the following configuration."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CodeMirrorBlock,
+        {
+          editable: false,
+          value: `{
+    "mcpServers": {
+      "${serverName}": {
+        "command": "npx",
+        "args": ["-y", "mcp-remote", "${sseUrl}"]
+      }
+    }
+  }`
+        }
+      )
+    ] })
+  ] });
+};
+const McpToolList = ({ server }) => {
+  const { data: tools = {}, isLoading } = useMCPServerTools(server);
+  if (isLoading) return null;
+  const toolsKeyArray = Object.keys(tools);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 overflow-y-scroll", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-icon6 flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "font-medium", children: "Available Tools" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", children: toolsKeyArray.map((toolId) => {
+      const tool = tools[toolId];
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolEntry, { tool, serverId: server.id }, toolId);
+    }) })
+  ] });
+};
+const ToolEntry = ({ tool, serverId }) => {
+  const linkRef = React.useRef(null);
+  const { Link, paths } = useLinkComponent();
+  const ToolIconComponent = ToolIconMap[tool.toolType || "tool"];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolIconComponent, { className: "group-hover/entity:text-[#ECB047]" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: paths.mcpServerToolLink(serverId, tool.id), children: tool.id }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: tool.description })
+    ] })
+  ] });
+};
+
 const useEvalsByAgentId = (agentId, type) => {
   const { runtimeContext } = usePlaygroundStore();
   const client = react$3.useMastraClient();
@@ -18609,6 +19203,7 @@ exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
 exports.AgentSettings = AgentSettings;
 exports.AgentSettingsContext = AgentSettingsContext;
 exports.AgentSettingsProvider = AgentSettingsProvider;
+exports.AgentToolPanel = AgentToolPanel;
 exports.AgentsTable = AgentsTable;
 exports.AiIcon = AiIcon;
 exports.Alert = Alert$1;
@@ -18676,7 +19271,9 @@ exports.KeyValueList = KeyValueList;
 exports.LatencyIcon = LatencyIcon;
 exports.LinkComponentProvider = LinkComponentProvider;
 exports.LogsIcon = LogsIcon;
+exports.MCPDetail = MCPDetail;
 exports.MCPTable = MCPTable;
+exports.MCPToolPanel = MCPToolPanel;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
 exports.MainSidebar = MainSidebar;
@@ -18742,6 +19339,9 @@ exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolFallback = ToolFallback;
+exports.ToolIconMap = ToolIconMap;
+exports.ToolInformation = ToolInformation;
+exports.ToolPanel = ToolPanel;
 exports.ToolTable = ToolTable;
 exports.ToolsIcon = ToolsIcon;
 exports.Tooltip = Tooltip;
@@ -18801,11 +19401,14 @@ exports.useCurrentRun = useCurrentRun;
 exports.useDeleteThread = useDeleteThread;
 exports.useEvalsByAgentId = useEvalsByAgentId;
 exports.useExecuteAgentTool = useExecuteAgentTool;
+exports.useExecuteMCPTool = useExecuteMCPTool;
 exports.useExecuteTool = useExecuteTool;
 exports.useExecuteWorkflow = useExecuteWorkflow;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
+exports.useMCPServerTool = useMCPServerTool;
 exports.useMCPServerTools = useMCPServerTools;
+exports.useMCPServers = useMCPServers;
 exports.useMainSidebar = useMainSidebar;
 exports.useMemory = useMemory;
 exports.useMemoryConfig = useMemoryConfig;
@@ -18824,6 +19427,8 @@ exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStreamWorkflow = useStreamWorkflow;
 exports.useThreadInput = useThreadInput;
 exports.useThreads = useThreads;
+exports.useTool = useTool;
+exports.useTools = useTools;
 exports.useTraceSpanScores = useTraceSpanScores;
 exports.useUpdateAgentModel = useUpdateAgentModel;
 exports.useUpdateModelInModelList = useUpdateModelInModelList;