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

package/dist/index.cjs.js

@@ -15,7 +15,7 @@ const remarkGfm = require('remark-gfm');
 const reactSyntaxHighlighter = require('@assistant-ui/react-syntax-highlighter');
 const prism = require('react-syntax-highlighter/dist/cjs/styles/prism');
 const langJson = require('@codemirror/lang-json');
-const highlight = require('@lezer/highlight');
+const highlight$1 = require('@lezer/highlight');
 const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
@@ -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 = () => {
@@ -4379,7 +4377,7 @@ const useCodemirrorTheme$2 = () => {
         background: "transparent",
         gutterForeground: "#939393"
       },
-      styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -4396,6 +4394,19 @@ const SyntaxHighlighter$2 = ({
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
 };
+async function highlight(code, language) {
+  const { codeToTokens, bundledLanguages } = await import('shiki');
+  if (!(language in bundledLanguages)) return null;
+  const { tokens } = await codeToTokens(code, {
+    lang: language,
+    defaultColor: false,
+    themes: {
+      light: "github-light",
+      dark: "github-dark"
+    }
+  });
+  return tokens;
+}
 
 const variantClasses$2 = {
   default: "text-icon3",
@@ -5288,10 +5299,10 @@ 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] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -6869,6 +6880,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 +7046,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 +7055,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 +7114,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 +7176,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 +7193,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 +7232,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 +7946,7 @@ const LinkComponentContext = React.createContext({
     scorerLink: () => "",
     toolLink: () => "",
     mcpServerLink: () => "",
+    mcpServerToolLink: () => "",
     workflowRunLink: () => ""
   }
 });
@@ -12561,7 +12805,7 @@ const useCodemirrorTheme = () => {
         gutterForeground: "#939393",
         background: "transparent"
       },
-      styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -13234,7 +13478,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 +13492,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,495 +15132,2127 @@ const useExecuteAgentTool = () => {
   });
 };
 
-const NameCell$1 = ({ row }) => {
-  const { Link, paths } = useLinkComponent();
-  const tool = row.original;
+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(
-    EntryCell,
+    ToolExecutor,
     {
-      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.toolLink(tool.id), children: tool.id }),
-      description: tool.description
+      executionResult: result,
+      isExecutingTool,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
     }
   );
 };
-const columns$1 = [
-  {
-    header: "Name",
-    accessorKey: "name",
-    cell: NameCell$1
-  },
-  {
-    header: "Attached entities",
-    accessorKey: "attachedEntities",
-    cell: ({ row }) => {
-      const tool = row.original;
-      const agentsCount = tool.agents.length;
-      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
-        agentsCount,
-        " agent",
-        agentsCount > 1 ? "s" : ""
-      ] }) });
-    }
-  }
-];
 
-const prepareToolsTable = (tools, agents) => {
-  const toolsWithAgents = /* @__PURE__ */ new Map();
-  const agentsKeys = Object.keys(agents);
-  for (const k of agentsKeys) {
-    const agent = agents[k];
-    const agentToolsDict = agent.tools;
-    const agentToolsKeys = Object.keys(agentToolsDict);
-    for (const key of agentToolsKeys) {
-      const tool = agentToolsDict[key];
-      if (!toolsWithAgents.has(tool.id)) {
-        toolsWithAgents.set(tool.id, {
-          ...tool,
-          agents: []
-        });
+const useMemory = (agentId) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", agentId],
+    queryFn: () => agentId ? client.getMemoryStatus(agentId) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false
+  });
+};
+const useMemoryConfig = (agentId) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", "config", agentId],
+    queryFn: () => agentId ? client.getMemoryConfig({ agentId }) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useThreads = ({
+  resourceId,
+  agentId,
+  isMemoryEnabled
+}) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["memory", "threads", resourceId, agentId],
+    queryFn: () => isMemoryEnabled ? client.getMemoryThreads({ resourceId, agentId }) : null,
+    enabled: Boolean(isMemoryEnabled),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useDeleteThread = () => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ threadId, agentId, networkId }) => client.deleteThread(threadId, { agentId, networkId }),
+    onSuccess: (_, variables) => {
+      const { agentId, networkId } = variables;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
       }
-      toolsWithAgents.get(tool.id).agents.push({ ...agent, id: k });
-    }
-  }
-  for (const [_, tool] of Object.entries(tools)) {
-    if (!toolsWithAgents.has(tool.id)) {
-      toolsWithAgents.set(tool.id, {
-        ...tool,
-        agents: []
-      });
+      if (networkId) {
+        queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
+      }
+      sonner.toast.success("Chat deleted successfully");
+    },
+    onError: () => {
+      sonner.toast.error("Failed to delete chat");
     }
-  }
-  return Array.from(toolsWithAgents.values());
-};
-
-function ToolTable({ tools, agents, isLoading }) {
-  const [search, setSearch] = React.useState("");
-  const { navigate, paths } = useLinkComponent();
-  const toolData = React.useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
-  const table = reactTable.useReactTable({
-    data: toolData,
-    columns: columns$1,
-    getCoreRowModel: reactTable.getCoreRowModel()
   });
-  const ths = table.getHeaderGroups()[0];
-  const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0 && !isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
-  }
-  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
-        const firstAgent = row.original.agents[0];
-        const link = firstAgent ? paths.agentToolLink(firstAgent.id, row.original.id) : paths.toolLink(row.original.id);
-        return /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
-      }) })
-    ] }) }) })
-  ] });
-}
-const ToolTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
-  ] }, index)) })
-] });
-const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-  EmptyState,
-  {
-    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
-    titleSlot: "Configure Tools",
-    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
-    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button$1,
-      {
-        size: "lg",
-        className: "w-full",
-        variant: "light",
-        as: "a",
-        href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
-        target: "_blank",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
-          "Docs"
-        ]
-      }
-    )
-  }
-) });
-
-const useExecuteTool = () => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useMutation({
-    mutationFn: async ({
-      toolId,
-      input,
-      runtimeContext: playgroundRuntimeContext
-    }) => {
-      const runtimeContext = new di.RuntimeContext();
-      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
-        runtimeContext.set(key, value);
-      });
-      try {
-        const tool = client.getTool(toolId);
-        const response = await tool.execute({ data: input, runtimeContext });
-        return response;
-      } catch (error) {
-        sonner.toast.error("Error executing dev tool");
-        console.error("Error executing dev tool:", error);
-        throw error;
+};
+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 };
 };
 
-function TemplatesTools({
-  tagOptions,
-  selectedTag,
-  providerOptions,
-  selectedProvider,
-  onTagChange,
-  onProviderChange,
-  searchTerm,
-  onSearchChange,
-  onReset,
-  className,
-  isLoading
-}) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "h-[6.5rem] flex items-center gap-[2rem]",
-          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {})
-        ]
-      }
-    );
+function MarkdownRenderer({ children }) {
+  const processedText = children.replace(/\\n/g, "\n");
+  return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
+}
+const HighlightedPre = React.memo(({ children, language, ...props }) => {
+  const [tokens, setTokens] = React.useState([]);
+  React.useEffect(() => {
+    highlight(children, language).then((tokens2) => {
+      if (tokens2) setTokens(tokens2);
+    });
+  }, [children, language]);
+  if (!tokens.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SearchField,
-      {
-        label: "Search templates",
-        value: searchTerm,
-        onChange: (e) => onSearchChange?.(e.target.value),
-        placeholder: "Search Template"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: line.map((token, tokenIndex) => {
+      const style = typeof token.htmlStyle === "string" ? void 0 : token.htmlStyle;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
+          style,
+          children: token.content
+        },
+        tokenIndex
+      );
+    }) }, lineIndex),
+    lineIndex !== tokens.length - 1 && "\n"
+  ] })) }) });
+});
+HighlightedPre.displayName = "HighlightedCode";
+const CodeBlock = ({ children, className, language, ...restProps }) => {
+  const code = typeof children === "string" ? children : childrenTakeAllStringContents(children);
+  const preClass = cn(
+    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/code relative mb-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      SelectField,
+      React.Suspense,
       {
-        label: "Filter by provider",
-        value: selectedProvider,
-        onValueChange: onProviderChange,
-        options: providerOptions
+        fallback: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: preClass, ...restProps, children }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedPre, { language, className: preClass, children: code })
       }
     ),
-    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
-      "Reset ",
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })
   ] });
+};
+function childrenTakeAllStringContents(element) {
+  if (typeof element === "string") {
+    return element;
+  }
+  if (element?.props?.children) {
+    let children = element.props.children;
+    if (Array.isArray(children)) {
+      return children.map((child) => childrenTakeAllStringContents(child)).join("");
+    } else {
+      return childrenTakeAllStringContents(children);
+    }
+  }
+  return "";
 }
-
-function getRepoName(githubUrl) {
-  return githubUrl.replace(/\/$/, "").split("/").pop();
-}
-function Container({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+const COMPONENTS = {
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-xl", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-lg", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base", ...props, children }),
+  h5: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "font-medium", ...props, children }),
+  strong: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", ...props, children }),
+  a: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: "underline underline-offset-2", ...props, children }),
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "border-l-2 border-primary pl-4", ...props, children }),
+  code: ({ children, className, ...rest }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { className, language: match[1], ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: cn(
+          "font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        ),
+        ...rest,
+        children
+      }
+    );
+  },
+  pre: ({ children }) => children,
+  ol: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal space-y-2 pl-6", ...props, children }),
+  ul: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc space-y-2 pl-6", ...props, children }),
+  li: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "my-1.5", ...props, children }),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20", ...props, children }),
+  th: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
     {
-      className: cn(
-        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
-        className
-      ),
+      className: "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
       children
     }
-  );
+  ),
+  td: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
+      children
+    }
+  ),
+  tr: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "m-0 border-t p-0 even:bg-muted", ...props, children }),
+  p: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap leading-relaxed", ...props, children }),
+  hr: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-foreground/20", ...props })
+};
+
+function CodeDisplay({
+  content,
+  height = "150px",
+  isCopied = false,
+  isDraft = false,
+  onCopy,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded-md border ${className}`, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 cursor-pointer hover:bg-mastra-bg-3/50 transition-colors group relative", onClick: onCopy, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-[10px] whitespace-pre-wrap font-mono", children: content }),
+    isDraft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-500", children: "Draft - Save changes to apply" }) }),
+    isCopied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Copied!" }),
+    onCopy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-mastra-bg-3 text-mastra-el-4 opacity-0 group-hover:opacity-100 transition-opacity", children: "Click to copy" })
+  ] }) }) });
 }
 
-function TemplatesList({ templates, linkComponent, className, isLoading }) {
-  const LinkComponent = linkComponent || "a";
+const AgentWorkingMemory = ({ agentId }) => {
+  const { threadExists, workingMemoryData, workingMemorySource, isLoading, isUpdating, updateWorkingMemory } = useWorkingMemory();
+  const { data } = useMemoryConfig(agentId);
+  const config = data?.config;
+  const isWorkingMemoryEnabled = Boolean(config?.workingMemory?.enabled);
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: workingMemoryData ?? "",
+    copyMessage: "Working memory copied!"
+  });
+  const [editValue, setEditValue] = React.useState(workingMemoryData ?? "");
+  const [isEditing, setIsEditing] = React.useState(false);
+  React.useEffect(() => {
+    setEditValue(workingMemoryData ?? "");
+  }, [workingMemoryData]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-32 w-full" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
-    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "article",
-      {
-        className: cn(
-          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5", children: "Working Memory" }),
+        isWorkingMemoryEnabled && workingMemorySource && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-medium px-2 py-0.5 rounded",
+              workingMemorySource === "resource" ? "bg-purple-500/20 text-purple-400" : "bg-blue-500/20 text-blue-400"
+            ),
+            title: workingMemorySource === "resource" ? "Shared across all threads for this agent" : "Specific to this conversation thread",
+            children: workingMemorySource
+          }
+        )
+      ] }),
+      isWorkingMemoryEnabled && !threadExists && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-icon3", children: "Send a message to the agent to enable working memory." })
+    ] }),
+    isWorkingMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: workingMemoryData ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: workingMemoryData.trim().startsWith("{") ? /* @__PURE__ */ jsxRuntime.jsx(
+        CodeDisplay,
+        {
+          content: workingMemoryData || "",
+          isCopied,
+          onCopy: handleCopy,
+          className: "bg-surface3 text-sm font-mono min-h-[150px] border border-border1 rounded-lg"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface3 border border-border1 rounded-lg", style: { height: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-3 cursor-pointer hover:bg-surface4/20 transition-colors relative group text-[10px]",
+          onClick: handleCopy,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { children: workingMemoryData }),
+            isCopied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Copied!" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-surface3 text-icon4 opacity-0 group-hover:opacity-100 transition-opacity", children: "Click to copy" })
+          ]
+        }
+      ) }) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-icon3 font-mono", children: 'No working memory content yet. Click "Edit Working Memory" to add content.' }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "w-full min-h-[150px] p-3 border border-border1 rounded-lg bg-surface3 font-mono text-sm text-icon5 resize-none",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          disabled: isUpdating,
+          placeholder: "Enter working memory content..."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button$2,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: () => setIsEditing(true),
+          disabled: !threadExists || isUpdating,
+          className: "text-xs",
+          children: "Edit Working Memory"
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button$2,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: async () => {
+              try {
+                await updateWorkingMemory(editValue);
+                setIsEditing(false);
+              } catch (error) {
+                console.error("Failed to update working memory:", error);
+                sonner.toast.error("Failed to update working memory");
+              }
+            },
+            disabled: isUpdating,
+            className: "text-xs",
+            children: isUpdating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcwIcon, { className: "w-3 h-3 animate-spin" }) : "Save Changes"
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            LinkComponent,
-            {
-              to: `/templates/${template.slug}`,
-              className: cn("grid [&:hover_p]:text-icon5", {
-                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
-              }),
-              children: [
-                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
-                    style: {
-                      backgroundImage: `url(${template.imageURL})`
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
-                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
-                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-                          "ul",
-                          {
-                            className: cn(
-                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
-                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
-                            ),
-                            children: [
-                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
-                                " ",
-                                template.agents.length
-                              ] }),
-                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
-                                " ",
-                                template.tools.length
-                              ] }),
-                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
-                                " ",
-                                template.networks.length
-                              ] }),
-                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
-                                " ",
-                                template.workflows.length
-                              ] }),
-                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
-                                " ",
-                                template.mcp.length
-                              ] })
-                            ]
-                          }
-                        ),
-                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: template.githubUrl,
-              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-[0.5rem]  px-[0.5rem] py-[0.25rem] rounded bg-surface1 group-hover:bg-surface2 text-icon3 transition-colors group-hover:text-icon5 ", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, {}),
-                " ",
-                getRepoName(template.githubUrl)
-              ] })
-            }
-          )
-        ]
-      },
-      template.slug
-    );
-  }) });
-}
-
-function TemplateInfo({
-  title,
-  description,
-  imageURL,
-  githubUrl,
-  isLoading,
-  infoData,
-  templateSlug
-}) {
-  const branchName = templateSlug ? `feat/install-template-${templateSlug}` : "feat/install-template-[slug]";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid mt-[2rem] items-center"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "text-[1.5rem] flex items-center gap-[0.75rem]",
-          "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
-          {
-            "[&>svg]:opacity-20": isLoading
-          }
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PackageIcon, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn({
-                "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
-              }),
-              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : title
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] ", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
-              "bg-surface4 rounded-lg ": isLoading
-            }),
-            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
-          }
-        ),
-        !isLoading && templateSlug && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
-              "flex items-start gap-[0.75rem]"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Branch name:" }),
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
-                ] })
-              ] })
-            ]
-          }
-        ),
-        githubUrl && /* @__PURE__ */ jsxRuntime.jsxs(
-          "a",
+          Button$2,
           {
-            href: githubUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex items-center gap-[.5rem] mt-auto text-icon3 text-[0.875rem] hover:text-icon5",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, {}),
-              githubUrl?.split("/")?.pop()
-            ]
+            variant: "secondary",
+            size: "sm",
+            onClick: () => {
+              setEditValue(workingMemoryData ?? "");
+              setIsEditing(false);
+            },
+            disabled: isUpdating,
+            className: "text-xs",
+            children: "Cancel"
           }
         )
-      ] }),
-      infoData && /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: infoData, LinkComponent: lucideReact.Link, labelsAreHidden: true, isLoading })
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 border border-border1 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-icon3 mb-3", children: "Working memory is not enabled for this agent. Enable it to maintain context across conversations." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: "https://mastra.ai/en/docs/memory/working-memory",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors",
+          children: [
+            "Learn about working memory",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3" })
+          ]
+        }
+      )
     ] })
   ] });
-}
+};
 
-function TemplateForm({
-  providerOptions,
-  selectedProvider,
-  onProviderChange,
-  variables,
-  errors,
-  handleInstallTemplate,
-  handleVariableChange,
-  isLoadingEnvVars,
-  defaultModelProvider,
-  defaultModelId,
-  onModelUpdate
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "h2",
+const AgentMemoryConfig = ({ agentId }) => {
+  const { data, isLoading } = useMemoryConfig(agentId);
+  const [expandedSections, setExpandedSections] = React.useState(/* @__PURE__ */ new Set(["General", "Semantic Recall"]));
+  const config = data?.config;
+  const configSections = React.useMemo(() => {
+    if (!config) return [];
+    const memoryEnabled = !!config;
+    const sections = [
       {
-        className: cn(
-          "text-icon4 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
-          "[&>svg]:w-[1.2em] [&_svg]:h-[1.2em] [&_svg]:opacity-70 "
-        ),
-        children: [
-          "Install Template ",
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {})
+        title: "General",
+        items: [
+          { label: "Memory Enabled", value: memoryEnabled, badge: memoryEnabled ? "success" : void 0 },
+          { label: "Last Messages", value: config.lastMessages || 0 },
+          {
+            label: "Auto-generate Titles",
+            value: !!config.threads?.generateTitle,
+            badge: config.threads?.generateTitle ? "info" : void 0
+          }
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SelectField,
-      {
-        options: providerOptions,
-        label: "Template AI Model Provider",
-        onValueChange: onProviderChange,
-        value: selectedProvider,
-        placeholder: "Select"
-      }
-    ),
-    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+    ];
+    if (config.semanticRecall) {
+      const enabled = Boolean(config.semanticRecall);
+      const semanticRecall = typeof config.semanticRecall === "object" ? config.semanticRecall : {};
+      sections.push({
+        title: "Semantic Recall",
+        items: [
+          { label: "Enabled", value: enabled, badge: enabled ? "success" : void 0 },
+          ...enabled ? [
+            { label: "Scope", value: semanticRecall.scope || "thread" },
+            { label: "Top K Results", value: semanticRecall.topK || 5 },
+            {
+              label: "Message Range",
+              value: typeof semanticRecall.messageRange === "object" ? `${semanticRecall.messageRange.before || 0} before, ${semanticRecall.messageRange.after || 0} after` : `${semanticRecall.messageRange || 20} messages`
+            }
+          ] : []
+        ]
+      });
+    }
+    if (config.workingMemory) {
+      sections.push({
+        title: "Working Memory",
+        items: [
+          {
+            label: "Enabled",
+            value: config.workingMemory.enabled,
+            badge: config.workingMemory.enabled ? "success" : void 0
+          },
+          ...config.workingMemory.enabled ? [
+            { label: "Scope", value: config.workingMemory.scope || "thread" },
+            { label: "Template", value: config.workingMemory.template || "default" }
+          ] : []
+        ]
+      });
+    }
+    return sections;
+  }, [config]);
+  const toggleSection = (title) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(title)) {
+      newExpanded.delete(title);
+    } else {
+      newExpanded.add(title);
+    }
+    setExpandedSections(newExpanded);
+  };
+  const renderValue = (value, badge) => {
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
         {
           className: cn(
-            "flex items-center justify-center col-span-2 text-icon3 text-[0.75rem] gap-[1rem]",
-            "[&_svg]:opacity-50 [&_svg]:w-[1.1em] [&_svg]:h-[1.1em]",
-            "animate-in fade-in duration-300"
+            "text-xs font-medium px-2 py-0.5 rounded",
+            value ? badge === "info" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400" : "bg-red-500/20 text-red-400"
           ),
+          children: value ? "Yes" : "No"
+        }
+      );
+    }
+    if (badge) {
+      const badgeColors = {
+        success: "bg-green-500/20 text-green-400",
+        info: "bg-blue-500/20 text-blue-400",
+        warning: "bg-yellow-500/20 text-yellow-400"
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium px-2 py-0.5 rounded", badgeColors[badge]), children: value });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon3", children: value });
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-32 w-full" }) });
+  }
+  if (!config || configSections.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5 mb-3", children: "Memory Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-icon3", children: "No memory configuration available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5 mb-3", children: "Memory Configuration" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: configSections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-border1 rounded-lg bg-surface3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => toggleSection(section.title),
+          className: "w-full px-3 py-2 flex items-center justify-between hover:bg-surface4 transition-colors rounded-t-lg",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-            " Loading variables..."
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-icon5", children: section.title }),
+            expandedSections.has(section.title) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-icon3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-icon3" })
           ]
         }
-      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          InputField,
-          {
-            name: `env-${key}`,
-            labelIsHidden: true,
-            label: "Key",
-            value: key,
-            disabled: true,
-            className: "w-full"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          InputField,
-          {
-            name: key,
+      ),
+      expandedSections.has(section.title) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2 space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon3", children: item.label }),
+        renderValue(item.value || "", item.badge)
+      ] }, `${section.title}-${item.label}`)) })
+    ] }, section.title)) })
+  ] });
+};
+
+const formatRelativeTime = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
+  return date.toLocaleDateString();
+};
+const MemorySearch = ({
+  searchMemory,
+  onResultClick,
+  className,
+  currentThreadId,
+  chatInputValue
+}) => {
+  const [query, setQuery] = React.useState("");
+  const [results, setResults] = React.useState([]);
+  const [isSearching, setIsSearching] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const searchTimeoutRef = React.useRef(void 0);
+  const dropdownRef = React.useRef(null);
+  const prevThreadIdRef = React.useRef(currentThreadId);
+  const lastSearchTimeRef = React.useRef(0);
+  const pendingSearchRef = React.useRef(null);
+  const handleSearch = React.useCallback(
+    async (searchQuery) => {
+      if (!searchQuery.trim()) {
+        setError(null);
+        return;
+      }
+      setIsSearching(true);
+      setError(null);
+      try {
+        const response = await searchMemory(searchQuery);
+        setResults(response.results);
+        setIsOpen((prev) => prev || response.results.length > 0);
+      } catch (err) {
+        setError("Failed to search memory");
+        console.error("Memory search error:", err);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchMemory]
+  );
+  const handleInputChange = React.useCallback(
+    (e) => {
+      const value = e.target.value;
+      setQuery(value);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (value.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(value);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = value;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    },
+    [handleSearch]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+        }
+        handleSearch(query);
+      }
+    },
+    [query, handleSearch]
+  );
+  React.useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  React.useEffect(() => {
+    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
+      handleSearch(query);
+    }
+    prevThreadIdRef.current = currentThreadId;
+  }, [currentThreadId, query, handleSearch]);
+  React.useEffect(() => {
+    if (chatInputValue !== void 0 && chatInputValue !== query) {
+      setQuery(chatInputValue);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (chatInputValue.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(chatInputValue);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = chatInputValue;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    }
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [chatInputValue]);
+  const handleResultClick = (messageId, threadId) => {
+    onResultClick?.(messageId, threadId);
+  };
+  const clearSearch = () => {
+    setQuery("");
+    setResults([]);
+    setIsOpen(false);
+    setError(null);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+  };
+  const truncateContent = (content, maxLength = 100) => {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + "...";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "text",
+          value: query,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Search memory...",
+          className: "pl-10 pr-10 bg-surface3 border-border1"
+        }
+      ),
+      query && /* @__PURE__ */ jsxRuntime.jsx(
+        Button$2,
+        {
+          onClick: clearSearch,
+          variant: "ghost",
+          size: "sm",
+          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
+      'No results found for "',
+      query,
+      '"'
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => handleResultClick(result.id, result.threadId),
+        className: cn(
+          "w-full px-4 py-3 hover:bg-surface4 transition-colors duration-150 text-left border-b border-border1 last:border-b-0",
+          result.threadId !== currentThreadId && "border-l-2 border-l-blue-400"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs font-medium px-2 py-0.5 rounded",
+                    result.role === "user" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400"
+                  ),
+                  children: result.role
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
+              result.threadTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Txt,
+                  {
+                    variant: "ui-xs",
+                    className: cn(
+                      "truncate max-w-[150px]",
+                      result.threadId !== currentThreadId ? "text-blue-400 font-medium" : "text-icon3"
+                    ),
+                    title: result.threadTitle,
+                    children: [
+                      "• ",
+                      result.threadTitle
+                    ]
+                  }
+                ),
+                result.threadId !== currentThreadId && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3 text-blue-400" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
+          ] }) }),
+          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) })
+        ] })
+      },
+      result.id
+    )) }) })
+  ] });
+};
+
+function AgentMemory({ agentId, threadId }) {
+  const { threadInput: chatInputValue } = useThreadInput();
+  const { paths, navigate } = useLinkComponent();
+  const [searchScope, setSearchScope] = React.useState(null);
+  const { data } = useMemoryConfig(agentId);
+  const config = data?.config;
+  const isSemanticRecallEnabled = Boolean(config?.semanticRecall);
+  const { searchMemory } = useMemorySearch({
+    agentId: agentId || "",
+    resourceId: agentId || "",
+    // In playground, agentId is the resourceId
+    threadId
+  });
+  const searchSemanticRecall = React.useCallback(
+    async (query) => {
+      const result = await searchMemory(query, { lastMessages: 0 });
+      if (result.searchScope) {
+        setSearchScope(result.searchScope);
+      }
+      return result;
+    },
+    [searchMemory]
+  );
+  const handleResultClick = React.useCallback(
+    (messageId, resultThreadId) => {
+      if (resultThreadId && resultThreadId !== threadId) {
+        navigate(paths.agentThreadLink(agentId, resultThreadId, messageId));
+      } else {
+        const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (messageElement) {
+          messageElement.scrollIntoView({ behavior: "smooth", block: "center" });
+          messageElement.classList.add("bg-surface4");
+          setTimeout(() => {
+            messageElement.classList.remove("bg-surface4");
+          }, 2e3);
+        }
+      }
+    },
+    [agentId, threadId, navigate]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-border1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5", children: "Semantic Recall" }),
+        searchScope && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-medium px-2 py-0.5 rounded",
+              searchScope === "resource" ? "bg-purple-500/20 text-purple-400" : "bg-blue-500/20 text-blue-400"
+            ),
+            title: searchScope === "resource" ? "Searching across all threads" : "Searching within current thread only",
+            children: searchScope
+          }
+        )
+      ] }) }),
+      isSemanticRecallEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+        MemorySearch,
+        {
+          searchMemory: searchSemanticRecall,
+          onResultClick: handleResultClick,
+          currentThreadId: threadId,
+          className: "w-full",
+          chatInputValue
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 border border-border1 rounded-lg p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-icon3 mb-3", children: "Semantic recall is not enabled for this agent. Enable it to search through conversation history." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: "https://mastra.ai/en/docs/memory/semantic-recall",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors",
+            children: [
+              "Learn about semantic recall",
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AgentWorkingMemory, { agentId }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemoryConfig, { agentId }) })
+    ] })
+  ] });
+}
+
+function CurrentInstructions({
+  instructions,
+  enhancedPrompt,
+  isEnhancing,
+  userComment,
+  onEnhance,
+  onCancel,
+  onSave,
+  onCommentChange,
+  onShowHistory
+}) {
+  const currentContent = enhancedPrompt || extractPrompt(instructions);
+  const { isCopied, handleCopy } = useCopyToClipboard({ text: currentContent || "" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 pb-2", children: enhancedPrompt ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-accent2" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Discard prompt suggestions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onSave, disabled: !enhancedPrompt, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "text-accent1" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Save prompt suggestions" })
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onShowHistory, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileClock, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Version history" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("p-[1px] rounded-lg overflow-hidden relative"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx(
+            "absolute inset-0 bg-surface4 transition-all",
+            enhancedPrompt && "bg-gradient-to-br from-accent1 to-accent3"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 bg-surface4 rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeDisplay,
+          {
+            content: currentContent || "",
+            isCopied,
+            isDraft: !!enhancedPrompt,
+            onCopy: () => currentContent && handleCopy(),
+            className: "border-none bg-surface4 text-ui-sm p-2 !h-[260px]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between rounded-lg border border-border1 bg-surface5 shadow-lg disabled:bg-surface3 text-icon6 w-full py-2 px-3 gap-3 relative z-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              value: userComment,
+              onChange: (e) => onCommentChange(e.target.value),
+              placeholder: "Add your comments or requirements for enhancing your agent's prompt...",
+              className: "resize-none text-ui-sm w-full placeholder:text-icon3 bg-transparent block disabled:text-icon3",
+              disabled: Boolean(isEnhancing || enhancedPrompt)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onEnhance, disabled: isEnhancing || !instructions || Boolean(enhancedPrompt), children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3 hover:text-icon6 disabled:hover:text-icon3", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wand2, {}) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: isEnhancing ? "Enhancing..." : "Enhance prompt" })
+          ] }) })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+function usePromptEnhancer({
+  agentId,
+  instructions,
+  versions,
+  onVersionCreate,
+  onVersionUpdate
+}) {
+  const [enhancedPrompt, setEnhancedPrompt] = React.useState("");
+  const [explanation, setExplanation] = React.useState("");
+  const [isEnhancing, setIsEnhancing] = React.useState(false);
+  const [userComment, setUserComment] = React.useState("");
+  const enhancePrompt = async () => {
+    if (!instructions) return;
+    setIsEnhancing(true);
+    try {
+      const response = await fetch(`/api/agents/${agentId}/instructions/enhance`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-mastra-dev-playground": "true"
+        },
+        body: JSON.stringify({
+          instructions,
+          comment: userComment
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to enhance prompt");
+      }
+      const data = await response.json();
+      setEnhancedPrompt(data.new_prompt);
+      setExplanation(data.explanation);
+      setUserComment("");
+    } catch (error) {
+      console.error("Failed to enhance prompt:", error);
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+  const clearEnhancement = () => {
+    setEnhancedPrompt("");
+    setExplanation("");
+  };
+  const applyChanges = () => {
+    if (!enhancedPrompt) return;
+    const draftIndex = versions.findIndex((v) => v.status === "draft");
+    if (draftIndex !== -1) {
+      onVersionUpdate(draftIndex, {
+        content: enhancedPrompt,
+        analysis: explanation,
+        status: "published",
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    } else {
+      const newVersion = {
+        content: enhancedPrompt,
+        timestamp: /* @__PURE__ */ new Date(),
+        analysis: explanation,
+        status: "published"
+      };
+      onVersionCreate(newVersion);
+    }
+    clearEnhancement();
+  };
+  return {
+    enhancedPrompt,
+    explanation,
+    isEnhancing,
+    userComment,
+    enhancePrompt,
+    setUserComment,
+    clearEnhancement,
+    applyChanges
+  };
+}
+
+function usePromptVersions(agentId, instructions) {
+  const [versions, setVersions] = React.useState([]);
+  const [copiedVersions, setCopiedVersions] = React.useState({});
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [versionToDelete, setVersionToDelete] = React.useState(null);
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  const fetchEvalResults = async () => {
+    try {
+      const response = await client.getAgent(agentId).liveEvals(runtimeContext);
+      return response?.evals;
+    } catch (error) {
+      console.error("Failed to fetch eval results:", error);
+      return [];
+    }
+  };
+  React.useEffect(() => {
+    const loadVersions = async () => {
+      const evals = await fetchEvalResults();
+      const storedVersions = localStorage.getItem(`agent-${agentId}-versions`);
+      if (storedVersions) {
+        const parsedVersions = JSON.parse(storedVersions);
+        const originalVersion = parsedVersions.find((v) => v.status === "original");
+        if (instructions && originalVersion && originalVersion.content !== instructions) {
+          const originalEvals = evals?.filter((m) => m.meta.instructions === instructions);
+          const newVersions = [
+            {
+              content: instructions,
+              timestamp: /* @__PURE__ */ new Date(),
+              analysis: "Original instructions",
+              status: "original",
+              evals: originalEvals
+            }
+          ];
+          newVersions[0].evals = evals;
+          setVersions(newVersions);
+          localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(newVersions));
+        } else {
+          const updatedVersions = await Promise.all(
+            parsedVersions.map(async (v) => {
+              const originalEvals = evals?.filter((m) => m.meta.instructions === v.content);
+              const version = {
+                ...v,
+                timestamp: new Date(v.timestamp),
+                status: v.content === instructions ? "active" : v.status === "active" ? "published" : v.status
+              };
+              return { ...version, evals: originalEvals };
+            })
+          );
+          setVersions(updatedVersions);
+        }
+      } else if (instructions) {
+        const initialVersions = [
+          {
+            content: instructions,
+            timestamp: /* @__PURE__ */ new Date(),
+            analysis: "Original instructions",
+            status: "original",
+            evals: []
+          }
+        ];
+        const originalEvals = evals?.filter((m) => m.meta.instructions === instructions);
+        initialVersions[0].evals = originalEvals;
+        setVersions(initialVersions);
+        localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(initialVersions));
+      }
+    };
+    loadVersions();
+  }, [instructions, agentId]);
+  React.useEffect(() => {
+    if (versions.length > 0) {
+      localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(versions));
+    }
+  }, [versions, agentId]);
+  const copyToClipboard = async (text, versionIndex) => {
+    setCopiedVersions((prev) => ({ ...prev, [versionIndex]: true }));
+    const timer = setTimeout(() => {
+      setCopiedVersions((prev) => ({ ...prev, [versionIndex]: false }));
+    }, 1e3);
+    return () => clearTimeout(timer);
+  };
+  const setVersionActive = async (version, index) => {
+    setIsUpdating(true);
+    try {
+      const response = await fetch(`/api/agents/${agentId}/instructions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-mastra-dev-playground": "true"
+        },
+        body: JSON.stringify({
+          instructions: version.content
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to update instructions");
+      }
+      setVersions(
+        (prev) => prev.map((v, i) => ({
+          ...v,
+          status: i === index ? "active" : v.status === "active" ? "published" : v.status
+        }))
+      );
+    } catch (error) {
+      console.error("Failed to set version as active:", error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  const deleteVersion = (index) => {
+    setVersions((prev) => prev.filter((_, i) => i !== index));
+    setVersionToDelete(null);
+  };
+  const updateVersion = async (index, updates) => {
+    const updatedVersion = {
+      ...versions[index],
+      ...updates
+    };
+    setVersions((prev) => prev.map((version, i) => i === index ? updatedVersion : version));
+  };
+  return {
+    versions,
+    copiedVersions,
+    isUpdating,
+    versionToDelete,
+    setVersions,
+    setVersionToDelete,
+    copyToClipboard,
+    setVersionActive,
+    deleteVersion,
+    updateVersion
+  };
+}
+
+function VersionActions({ version, index, isUpdating, onSetActive, onDelete }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+    version.status !== "active" && version.status !== "draft" && /* @__PURE__ */ jsxRuntime.jsx(
+      Button$2,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 hover:bg-mastra-bg-3 relative group",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSetActive(version, index);
+        },
+        disabled: isUpdating,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-3 w-3" })
+      }
+    ),
+    index !== 0 && version.status !== "active" && /* @__PURE__ */ jsxRuntime.jsx(
+      Button$2,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 hover:bg-mastra-bg-3 relative group",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete(index);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3 text-red-400 hover:text-red-500" })
+      }
+    )
+  ] });
+}
+
+function VersionItem({
+  version,
+  index,
+  isExpanded,
+  isUpdating,
+  onToggleExpand,
+  onToggleAnalysis,
+  onSetActive,
+  onDelete
+}) {
+  const [showEvals, setShowEvals] = React.useState(false);
+  const [showInstructions, setShowInstructions] = React.useState(true);
+  const [showAnalysis, setShowAnalysis] = React.useState(false);
+  const { handleCopy, isCopied } = useCopyToClipboard({
+    text: version.content
+  });
+  const formatText = (text) => {
+    return text.replace(/\\n/g, "\n");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `rounded-md border ${isExpanded ? "border-mastra-purple/30" : "border-mastra-bg-3"} bg-mastra-bg-2`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "p-2 flex items-center justify-between cursor-pointer hover:bg-mastra-bg-3/50",
+            onClick: onToggleExpand,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronRight,
+                  {
+                    className: `h-3 w-3 transition-transform ${isExpanded ? "rotate-90 text-mastra-purple" : ""}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-medium text-mastra-el-4", children: [
+                      "Version ",
+                      index + 1
+                    ] }),
+                    version.status === "active" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Active" }),
+                    version.status === "original" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-blue-500/20 text-blue-500", children: "Original" }),
+                    version.status === "draft" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-500", children: "Draft" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-mastra-el-3", children: version.timestamp.toLocaleString() })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                VersionActions,
+                {
+                  version,
+                  index,
+                  isUpdating,
+                  onSetActive,
+                  onDelete
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[250px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 pb-2 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md mb-2",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowInstructions(!showInstructions);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showInstructions ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-mastra-el-4", children: "Instructions" })
+                ]
+              }
+            ),
+            showInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-mastra-bg-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDisplay, { content: formatText(version.content), isCopied, onCopy: handleCopy }) }) })
+          ] }),
+          version.analysis && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md mb-2",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowAnalysis(!showAnalysis);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showAnalysis ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-mastra-el-4", children: "Analysis" })
+                ]
+              }
+            ),
+            showAnalysis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-mastra-bg-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-[10px] text-mastra-el-4 whitespace-pre-wrap font-mono", children: formatText(version.analysis || "") }) }) })
+          ] }),
+          version.evals && version.evals.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowEvals(!showEvals);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showEvals ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-medium text-mastra-el-4", children: [
+                    "Evaluations (",
+                    version.evals.length,
+                    ")"
+                  ] })
+                ]
+              }
+            ),
+            showEvals && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 pr-4", children: version.evals.map((metric, evalIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-mastra-bg-3 p-1.5 text-[10px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `px-1.5 py-0.5 rounded-full min-w-[32px] text-center ${metric.result.score >= 0.7 ? "bg-green-500/20 text-green-500" : metric.result.score >= 0.4 ? "bg-yellow-500/20 text-yellow-500" : "bg-red-500/20 text-red-500"}`,
+                    children: metric.result.score.toFixed(2)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 text-[9px]", children: new Date(metric.createdAt).toLocaleTimeString() })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 shrink-0", children: "→" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-4", children: metric.input })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 shrink-0", children: "←" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-4", children: metric.output })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 text-[9px] text-mastra-el-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: "⚬" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: metric.result.info.reason })
+                ] })
+              ] })
+            ] }, evalIndex)) }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+function VersionHistory({
+  versions,
+  isUpdating,
+  copiedVersions,
+  onCopy,
+  onSetActive,
+  onDelete
+}) {
+  const [expandedVersion, setExpandedVersion] = React.useState(null);
+  const [expandedAnalysis, setExpandedAnalysis] = React.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 pr-4", children: versions.map((version, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    VersionItem,
+    {
+      version,
+      index,
+      isExpanded: expandedVersion === index,
+      isUpdating,
+      copiedVersions,
+      onToggleExpand: () => {
+        if (expandedVersion === index) {
+          return setExpandedVersion(null);
+        }
+        setExpandedVersion(index);
+      },
+      onToggleAnalysis: () => {
+        if (expandedAnalysis === index) {
+          return setExpandedAnalysis(null);
+        }
+        setExpandedAnalysis(index);
+      },
+      onCopy,
+      onSetActive,
+      onDelete
+    },
+    index
+  )) }) });
+}
+
+const VersionHistoryDialog = ({
+  open,
+  onOpenChange,
+  onDelete,
+  onSetActive,
+  versions,
+  isUpdating
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "bg-surface4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Version History" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "View the history of changes to the agent's instructions." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VersionHistory,
+      {
+        versions,
+        isUpdating,
+        copiedVersions: {},
+        onCopy: async (content, key) => {
+          await navigator.clipboard.writeText(content);
+        },
+        onSetActive,
+        onDelete
+      }
+    )
+  ] }) });
+};
+
+function AgentPromptEnhancer({ agentId }) {
+  const { data: agent } = useAgent(agentId);
+  const [showVersionHistoryDialog, setShowVersionHistoryDialog] = React.useState(false);
+  const formattedInstructions = extractPrompt(agent?.instructions || "");
+  const {
+    versions,
+    isUpdating,
+    versionToDelete,
+    setVersions,
+    setVersionToDelete,
+    deleteVersion,
+    updateVersion,
+    setVersionActive
+  } = usePromptVersions(agentId, formattedInstructions);
+  const { enhancedPrompt, isEnhancing, userComment, enhancePrompt, setUserComment, clearEnhancement, applyChanges } = usePromptEnhancer({
+    agentId,
+    instructions: formattedInstructions,
+    versions,
+    onVersionCreate: (newVersion) => {
+      setVersions((prev) => [...prev, newVersion]);
+    },
+    onVersionUpdate: updateVersion
+  });
+  if (!agent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CurrentInstructions,
+      {
+        instructions: agent.instructions,
+        enhancedPrompt,
+        isEnhancing,
+        userComment,
+        onEnhance: enhancePrompt,
+        onCancel: clearEnhancement,
+        onSave: applyChanges,
+        onCommentChange: setUserComment,
+        agentId,
+        onShowHistory: () => setShowVersionHistoryDialog(true)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VersionHistoryDialog,
+      {
+        versions,
+        isUpdating,
+        onSetActive: setVersionActive,
+        onDelete: setVersionToDelete,
+        open: showVersionHistoryDialog,
+        onOpenChange: setShowVersionHistoryDialog
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open: versionToDelete !== null, onOpenChange: () => setVersionToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Title, { children: [
+          "Delete Version ",
+          versionToDelete !== null ? versionToDelete + 1 : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Description, { children: "Are you sure you want to delete this version? This action cannot be undone." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Cancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AlertDialog.Action,
+          {
+            className: "bg-red-500 hover:bg-red-600",
+            onClick: () => {
+              if (versionToDelete !== null) {
+                deleteVersion(versionToDelete);
+              }
+            },
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+function AgentInformation({ agentId, threadId }) {
+  const { data: agent, isLoading } = useAgent(agentId);
+  const { data: modelProviders } = useModelProviders();
+  const { mutateAsync: updateModel } = useUpdateAgentModel(agentId);
+  const { mutate: reorderModelList } = useReorderModelList(agentId);
+  const { mutateAsync: updateModelInModelList } = useUpdateModelInModelList(agentId);
+  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
+  const { settings, setSettings } = useAgentSettings();
+  const STORAGE_KEY = "agent-info-selected-tab";
+  const [selectedTab, setSelectedTab] = React.useState(() => {
+    return sessionStorage.getItem(STORAGE_KEY) || "overview";
+  });
+  const handleTabChange = (value) => {
+    setSelectedTab(value);
+    sessionStorage.setItem(STORAGE_KEY, value);
+  };
+  React.useEffect(() => {
+    if (agent?.modelId?.includes("gpt-5")) {
+      setSettings({
+        ...settings || {},
+        modelSettings: {
+          ...settings?.modelSettings || {},
+          temperature: 1
+        }
+      });
+    }
+  }, [agent]);
+  React.useEffect(() => {
+    if (!isMemoryLoading && !memory?.result && selectedTab === "memory") {
+      handleTabChange("overview");
+    }
+  }, [isMemoryLoading, memory?.result, selectedTab]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AgentEntityHeader, { agentId, isLoading: isMemoryLoading, agentName: agent?.name || "" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
+        memory?.result && /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "memory", children: "Memory" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "overview", children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }),
+        agent && /* @__PURE__ */ jsxRuntime.jsx(
+          AgentMetadata,
+          {
+            agentId,
+            agent,
+            updateModel,
+            updateModelInModelList,
+            reorderModelList,
+            modelProviders: modelProviders || [],
+            hasMemoryEnabled: Boolean(memory?.result),
+            promptSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentPromptEnhancer, { agentId }),
+            modelVersion: agent.modelVersion
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "model-settings", children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }),
+        agent && /* @__PURE__ */ jsxRuntime.jsx(
+          AgentSettings,
+          {
+            modelVersion: agent.modelVersion,
+            hasMemory: Boolean(memory?.result),
+            hasSubAgents: Boolean(Object.keys(agent.agents || {}).length > 0)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "memory", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) : /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId }) })
+    ] }) })
+  ] });
+}
+
+const NameCell$1 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
+  const tool = row.original;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntryCell,
+    {
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.toolLink(tool.id), children: tool.id }),
+      description: tool.description
+    }
+  );
+};
+const columns$1 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell$1
+  },
+  {
+    header: "Attached entities",
+    accessorKey: "attachedEntities",
+    cell: ({ row }) => {
+      const tool = row.original;
+      const agentsCount = tool.agents.length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+        agentsCount,
+        " agent",
+        agentsCount > 1 ? "s" : ""
+      ] }) });
+    }
+  }
+];
+
+const prepareToolsTable = (tools, agents) => {
+  const toolsWithAgents = /* @__PURE__ */ new Map();
+  const agentsKeys = Object.keys(agents);
+  for (const k of agentsKeys) {
+    const agent = agents[k];
+    const agentToolsDict = agent.tools;
+    const agentToolsKeys = Object.keys(agentToolsDict);
+    for (const key of agentToolsKeys) {
+      const tool = agentToolsDict[key];
+      if (!toolsWithAgents.has(tool.id)) {
+        toolsWithAgents.set(tool.id, {
+          ...tool,
+          agents: []
+        });
+      }
+      toolsWithAgents.get(tool.id).agents.push({ ...agent, id: k });
+    }
+  }
+  for (const [_, tool] of Object.entries(tools)) {
+    if (!toolsWithAgents.has(tool.id)) {
+      toolsWithAgents.set(tool.id, {
+        ...tool,
+        agents: []
+      });
+    }
+  }
+  return Array.from(toolsWithAgents.values());
+};
+
+function ToolTable({ tools, agents, isLoading }) {
+  const [search, setSearch] = React.useState("");
+  const { navigate, paths } = useLinkComponent();
+  const toolData = React.useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
+  const table = reactTable.useReactTable({
+    data: toolData,
+    columns: columns$1,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
+        const firstAgent = row.original.agents[0];
+        const link = firstAgent ? paths.agentToolLink(firstAgent.id, row.original.id) : paths.toolLink(row.original.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
+      }) })
+    ] }) }) })
+  ] });
+}
+const ToolTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
+    titleSlot: "Configure Tools",
+    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button$1,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const useExecuteTool = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({
+      toolId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      const runtimeContext = new di.RuntimeContext();
+      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      try {
+        const tool = client.getTool(toolId);
+        const response = await tool.execute({ data: input, runtimeContext });
+        return response;
+      } catch (error) {
+        sonner.toast.error("Error executing dev tool");
+        console.error("Error executing dev tool:", error);
+        throw error;
+      }
+    }
+  });
+};
+
+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,
+  providerOptions,
+  selectedProvider,
+  onTagChange,
+  onProviderChange,
+  searchTerm,
+  onSearchChange,
+  onReset,
+  className,
+  isLoading
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "h-[6.5rem] flex items-center gap-[2rem]",
+          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchField,
+      {
+        label: "Search templates",
+        value: searchTerm,
+        onChange: (e) => onSearchChange?.(e.target.value),
+        placeholder: "Search Template"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
+      {
+        label: "Filter by provider",
+        value: selectedProvider,
+        onValueChange: onProviderChange,
+        options: providerOptions
+      }
+    ),
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
+      "Reset ",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    ] })
+  ] });
+}
+
+function getRepoName(githubUrl) {
+  return githubUrl.replace(/\/$/, "").split("/").pop();
+}
+function Container({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function TemplatesList({ templates, linkComponent, className, isLoading }) {
+  const LinkComponent = linkComponent || "a";
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
+    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "article",
+      {
+        className: cn(
+          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            LinkComponent,
+            {
+              to: `/templates/${template.slug}`,
+              className: cn("grid [&:hover_p]:text-icon5", {
+                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
+              }),
+              children: [
+                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
+                    style: {
+                      backgroundImage: `url(${template.imageURL})`
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
+                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
+                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "ul",
+                          {
+                            className: cn(
+                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
+                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
+                            ),
+                            children: [
+                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
+                                " ",
+                                template.agents.length
+                              ] }),
+                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+                                " ",
+                                template.tools.length
+                              ] }),
+                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
+                                " ",
+                                template.networks.length
+                              ] }),
+                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
+                                " ",
+                                template.workflows.length
+                              ] }),
+                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
+                                " ",
+                                template.mcp.length
+                              ] })
+                            ]
+                          }
+                        ),
+                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: template.githubUrl,
+              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-[0.5rem]  px-[0.5rem] py-[0.25rem] rounded bg-surface1 group-hover:bg-surface2 text-icon3 transition-colors group-hover:text-icon5 ", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, {}),
+                " ",
+                getRepoName(template.githubUrl)
+              ] })
+            }
+          )
+        ]
+      },
+      template.slug
+    );
+  }) });
+}
+
+function TemplateInfo({
+  title,
+  description,
+  imageURL,
+  githubUrl,
+  isLoading,
+  infoData,
+  templateSlug
+}) {
+  const branchName = templateSlug ? `feat/install-template-${templateSlug}` : "feat/install-template-[slug]";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid mt-[2rem] items-center"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "text-[1.5rem] flex items-center gap-[0.75rem]",
+          "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+          {
+            "[&>svg]:opacity-20": isLoading
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PackageIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn({
+                "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
+              }),
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : title
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] ", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
+              "bg-surface4 rounded-lg ": isLoading
+            }),
+            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
+          }
+        ),
+        !isLoading && templateSlug && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
+              "flex items-start gap-[0.75rem]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Branch name:" }),
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        githubUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: githubUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex items-center gap-[.5rem] mt-auto text-icon3 text-[0.875rem] hover:text-icon5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, {}),
+              githubUrl?.split("/")?.pop()
+            ]
+          }
+        )
+      ] }),
+      infoData && /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: infoData, LinkComponent: lucideReact.Link, labelsAreHidden: true, isLoading })
+    ] })
+  ] });
+}
+
+function TemplateForm({
+  providerOptions,
+  selectedProvider,
+  onProviderChange,
+  variables,
+  errors,
+  handleInstallTemplate,
+  handleVariableChange,
+  isLoadingEnvVars,
+  defaultModelProvider,
+  defaultModelId,
+  onModelUpdate
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "h2",
+      {
+        className: cn(
+          "text-icon4 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
+          "[&>svg]:w-[1.2em] [&_svg]:h-[1.2em] [&_svg]:opacity-70 "
+        ),
+        children: [
+          "Install Template ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
+      {
+        options: providerOptions,
+        label: "Template AI Model Provider",
+        onValueChange: onProviderChange,
+        value: selectedProvider,
+        placeholder: "Select"
+      }
+    ),
+    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center col-span-2 text-icon3 text-[0.75rem] gap-[1rem]",
+            "[&_svg]:opacity-50 [&_svg]:w-[1.1em] [&_svg]:h-[1.1em]",
+            "animate-in fade-in duration-300"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+            " Loading variables..."
+          ]
+        }
+      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputField,
+          {
+            name: `env-${key}`,
+            labelIsHidden: true,
+            label: "Key",
+            value: key,
+            disabled: true,
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputField,
+          {
+            name: key,
             labelIsHidden: true,
             label: "Value",
             value,
@@ -17859,535 +19744,172 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100
       d: "M59.2351 43.2352L43.194 59.2763L40.958 57.0403L56.9991 40.9992L59.2351 43.2352Z",
       fill: "currentColor"
     }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M43.1969 40.9992L59.2379 57.0403L57.002 59.2763L40.9609 43.2352L43.1969 40.9992Z",
-      fill: "currentColor"
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M23.7151 33.0924C17.0466 37.565 13.1629 43.573 13.1629 49.9999C13.1629 56.4269 17.0466 62.4349 23.7151 66.9075C30.3734 71.3733 39.662 74.1867 50.0004 74.1867C60.3388 74.1867 69.6274 71.3733 76.2857 66.9075C82.9541 62.4349 86.8378 56.4269 86.8378 49.9999C86.8378 43.573 82.9541 37.565 76.2857 33.0924C69.6274 28.6266 60.3388 25.8132 50.0004 25.8132C39.662 25.8132 30.3734 28.6266 23.7151 33.0924ZM21.9537 30.4662C29.2002 25.6059 39.1209 22.651 50.0004 22.651C60.8799 22.651 70.8006 25.6059 78.0471 30.4662C85.2834 35.3197 90 42.1957 90 49.9999C90 57.8042 85.2834 64.6802 78.0471 69.5337C70.8006 74.394 60.8799 77.3489 50.0004 77.3489C39.1209 77.3489 29.2002 74.394 21.9537 69.5337C14.7174 64.6802 10.0008 57.8042 10.0008 49.9999C10.0008 42.1957 14.7174 35.3197 21.9537 30.4662Z",
-      fill: "currentColor"
-    }
-  )
-] });
-
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: (e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      className: clsx(
-        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
-        onClick && "cursor-pointer hover:bg-surface4 transition-all",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
-const EntityIcon = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
-};
-
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = React.useState(enabled);
-  const [error, setError] = React.useState(null);
-  const [data, setData] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [firstCallLoading, setFirstCallLoading] = React.useState(false);
-  const timeoutRef = React.useRef(null);
-  const mountedRef = React.useRef(true);
-  const [restart, setRestart] = React.useState(restartPolling);
-  const cleanup = React.useCallback(() => {
-    console.log("cleanup");
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = React.useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = React.useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = React.useCallback(
-    async (refetch2 = true) => {
-      if (!mountedRef.current) return;
-      setIsLoading(true);
-      try {
-        const result = await fetchFn();
-        setData(result);
-        setError(null);
-        onSuccess?.(result);
-        if (shouldContinue(result) && refetch2) {
-          timeoutRef.current = setTimeout(executePoll, interval);
-        } else {
-          stopPolling();
-        }
-      } catch (err) {
-        if (!mountedRef.current) return;
-        setError(err);
-        onError?.(err);
-        stopPolling();
-      } finally {
-        if (mountedRef.current) {
-          setFirstCallLoading(false);
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
-  );
-  const refetch = React.useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  React.useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  React.useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  React.useEffect(() => {
-    if (restart && !isPolling) {
-      setIsPolling(true);
-      executePoll();
-      setRestart(false);
-    }
-  }, [restart]);
-  return {
-    isPolling,
-    isLoading,
-    error,
-    data,
-    startPolling,
-    stopPolling,
-    firstCallLoading,
-    refetch
-  };
-}
-
-const PlaygroundQueryClient = ({ children }) => {
-  const queryClient = new reactQuery.QueryClient();
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
-};
-
-const useMemory = (agentId) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useQuery({
-    queryKey: ["memory", agentId],
-    queryFn: () => agentId ? client.getMemoryStatus(agentId) : null,
-    enabled: Boolean(agentId),
-    staleTime: 5 * 60 * 1e3,
-    // 5 minutes
-    gcTime: 10 * 60 * 1e3,
-    // 10 minutes
-    retry: false
-  });
-};
-const useMemoryConfig = (agentId) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useQuery({
-    queryKey: ["memory", "config", agentId],
-    queryFn: () => agentId ? client.getMemoryConfig({ agentId }) : null,
-    enabled: Boolean(agentId),
-    staleTime: 5 * 60 * 1e3,
-    // 5 minutes
-    gcTime: 10 * 60 * 1e3,
-    // 10 minutes
-    retry: false,
-    refetchOnWindowFocus: false
-  });
-};
-const useThreads = ({
-  resourceId,
-  agentId,
-  isMemoryEnabled
-}) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useQuery({
-    queryKey: ["memory", "threads", resourceId, agentId],
-    queryFn: () => isMemoryEnabled ? client.getMemoryThreads({ resourceId, agentId }) : null,
-    enabled: Boolean(isMemoryEnabled),
-    staleTime: 0,
-    gcTime: 0,
-    retry: false,
-    refetchOnWindowFocus: false
-  });
-};
-const useDeleteThread = () => {
-  const client = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: ({ threadId, agentId, networkId }) => client.deleteThread(threadId, { agentId, networkId }),
-    onSuccess: (_, variables) => {
-      const { agentId, networkId } = variables;
-      if (agentId) {
-        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
-      }
-      if (networkId) {
-        queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
-      }
-      sonner.toast.success("Chat deleted successfully");
-    },
-    onError: () => {
-      sonner.toast.error("Failed to delete chat");
-    }
-  });
-};
-const useMemorySearch = ({
-  agentId,
-  resourceId,
-  threadId
-}) => {
-  const searchMemory = async (searchQuery, memoryConfig) => {
-    if (!searchQuery.trim()) {
-      return { results: [], count: 0, query: searchQuery };
-    }
-    const params = new URLSearchParams({
-      searchQuery,
-      resourceId,
-      agentId
-    });
-    if (threadId) {
-      params.append("threadId", threadId);
-    }
-    if (memoryConfig) {
-      params.append("memoryConfig", JSON.stringify(memoryConfig));
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M43.1969 40.9992L59.2379 57.0403L57.002 59.2763L40.9609 43.2352L43.1969 40.9992Z",
+      fill: "currentColor"
     }
-    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");
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.7151 33.0924C17.0466 37.565 13.1629 43.573 13.1629 49.9999C13.1629 56.4269 17.0466 62.4349 23.7151 66.9075C30.3734 71.3733 39.662 74.1867 50.0004 74.1867C60.3388 74.1867 69.6274 71.3733 76.2857 66.9075C82.9541 62.4349 86.8378 56.4269 86.8378 49.9999C86.8378 43.573 82.9541 37.565 76.2857 33.0924C69.6274 28.6266 60.3388 25.8132 50.0004 25.8132C39.662 25.8132 30.3734 28.6266 23.7151 33.0924ZM21.9537 30.4662C29.2002 25.6059 39.1209 22.651 50.0004 22.651C60.8799 22.651 70.8006 25.6059 78.0471 30.4662C85.2834 35.3197 90 42.1957 90 49.9999C90 57.8042 85.2834 64.6802 78.0471 69.5337C70.8006 74.394 60.8799 77.3489 50.0004 77.3489C39.1209 77.3489 29.2002 74.394 21.9537 69.5337C14.7174 64.6802 10.0008 57.8042 10.0008 49.9999C10.0008 42.1957 14.7174 35.3197 21.9537 30.4662Z",
+      fill: "currentColor"
     }
-    return response.json();
-  };
-  return { searchMemory };
-};
+  )
+] });
 
-const formatRelativeTime = (date) => {
-  const now = /* @__PURE__ */ new Date();
-  const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
-  return date.toLocaleDateString();
-};
-const MemorySearch = ({
-  searchMemory,
-  onResultClick,
-  className,
-  currentThreadId,
-  chatInputValue
-}) => {
-  const [query, setQuery] = React.useState("");
-  const [results, setResults] = React.useState([]);
-  const [isSearching, setIsSearching] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const searchTimeoutRef = React.useRef(void 0);
-  const dropdownRef = React.useRef(null);
-  const prevThreadIdRef = React.useRef(currentThreadId);
-  const lastSearchTimeRef = React.useRef(0);
-  const pendingSearchRef = React.useRef(null);
-  const handleSearch = React.useCallback(
-    async (searchQuery) => {
-      if (!searchQuery.trim()) {
-        setError(null);
-        return;
-      }
-      setIsSearching(true);
-      setError(null);
-      try {
-        const response = await searchMemory(searchQuery);
-        setResults(response.results);
-        setIsOpen((prev) => prev || response.results.length > 0);
-      } catch (err) {
-        setError("Failed to search memory");
-        console.error("Memory search error:", err);
-      } finally {
-        setIsSearching(false);
-      }
-    },
-    [searchMemory]
-  );
-  const handleInputChange = React.useCallback(
-    (e) => {
-      const value = e.target.value;
-      setQuery(value);
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-      if (value.trim()) {
-        const now = Date.now();
-        const timeSinceLastSearch = now - lastSearchTimeRef.current;
-        if (timeSinceLastSearch >= 500) {
-          setIsSearching(true);
-          handleSearch(value);
-          lastSearchTimeRef.current = now;
-        } else {
-          setIsSearching(true);
-          pendingSearchRef.current = value;
-          const remainingTime = 500 - timeSinceLastSearch;
-          searchTimeoutRef.current = setTimeout(() => {
-            if (pendingSearchRef.current) {
-              handleSearch(pendingSearchRef.current);
-              lastSearchTimeRef.current = Date.now();
-              pendingSearchRef.current = null;
-            }
-          }, remainingTime);
-        }
-      } else {
-        setResults([]);
-        setIsOpen(false);
-        setIsSearching(false);
-        pendingSearchRef.current = null;
-      }
-    },
-    [handleSearch]
-  );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        if (searchTimeoutRef.current) {
-          clearTimeout(searchTimeoutRef.current);
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
         }
-        handleSearch(query);
-      }
-    },
-    [query, handleSearch]
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
   );
-  React.useEffect(() => {
-    return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-    };
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+};
+
+function usePolling({
+  fetchFn,
+  interval = 3e3,
+  enabled = false,
+  onSuccess,
+  onError,
+  shouldContinue = () => true,
+  restartPolling = false
+}) {
+  const [isPolling, setIsPolling] = React.useState(enabled);
+  const [error, setError] = React.useState(null);
+  const [data, setData] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [firstCallLoading, setFirstCallLoading] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+  const mountedRef = React.useRef(true);
+  const [restart, setRestart] = React.useState(restartPolling);
+  const cleanup = React.useCallback(() => {
+    console.log("cleanup");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
   }, []);
-  React.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+  const stopPolling = React.useCallback(() => {
+    console.log("stopPolling");
+    setIsPolling(false);
+    cleanup();
+  }, [cleanup]);
+  const startPolling = React.useCallback(() => {
+    console.log("startPolling");
+    setIsPolling(true);
+    setError(null);
   }, []);
-  React.useEffect(() => {
-    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
-      handleSearch(query);
-    }
-    prevThreadIdRef.current = currentThreadId;
-  }, [currentThreadId, query, handleSearch]);
-  React.useEffect(() => {
-    if (chatInputValue !== void 0 && chatInputValue !== query) {
-      setQuery(chatInputValue);
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-      if (chatInputValue.trim()) {
-        const now = Date.now();
-        const timeSinceLastSearch = now - lastSearchTimeRef.current;
-        if (timeSinceLastSearch >= 500) {
-          setIsSearching(true);
-          handleSearch(chatInputValue);
-          lastSearchTimeRef.current = now;
+  const executePoll = React.useCallback(
+    async (refetch2 = true) => {
+      if (!mountedRef.current) return;
+      setIsLoading(true);
+      try {
+        const result = await fetchFn();
+        setData(result);
+        setError(null);
+        onSuccess?.(result);
+        if (shouldContinue(result) && refetch2) {
+          timeoutRef.current = setTimeout(executePoll, interval);
         } else {
-          setIsSearching(true);
-          pendingSearchRef.current = chatInputValue;
-          const remainingTime = 500 - timeSinceLastSearch;
-          searchTimeoutRef.current = setTimeout(() => {
-            if (pendingSearchRef.current) {
-              handleSearch(pendingSearchRef.current);
-              lastSearchTimeRef.current = Date.now();
-              pendingSearchRef.current = null;
-            }
-          }, remainingTime);
+          stopPolling();
+        }
+      } catch (err) {
+        if (!mountedRef.current) return;
+        setError(err);
+        onError?.(err);
+        stopPolling();
+      } finally {
+        if (mountedRef.current) {
+          setFirstCallLoading(false);
+          setIsLoading(false);
         }
+      }
+    },
+    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
+  );
+  const refetch = React.useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
       } else {
-        setResults([]);
-        setIsOpen(false);
-        setIsSearching(false);
-        pendingSearchRef.current = null;
+        executePoll(false);
       }
+      setError(null);
+    },
+    [executePoll]
+  );
+  React.useEffect(() => {
+    mountedRef.current = true;
+    if (enabled && isPolling) {
+      executePoll(true);
     }
     return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
+      console.log("cleanup poll");
+      mountedRef.current = false;
+      cleanup();
     };
-  }, [chatInputValue]);
-  const handleResultClick = (messageId, threadId) => {
-    onResultClick?.(messageId, threadId);
-  };
-  const clearSearch = () => {
-    setQuery("");
-    setResults([]);
-    setIsOpen(false);
-    setError(null);
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current);
+  }, [enabled, isPolling, executePoll, cleanup]);
+  React.useEffect(() => {
+    setRestart(restartPolling);
+  }, [restartPolling]);
+  React.useEffect(() => {
+    if (restart && !isPolling) {
+      setIsPolling(true);
+      executePoll();
+      setRestart(false);
     }
+  }, [restart]);
+  return {
+    isPolling,
+    isLoading,
+    error,
+    data,
+    startPolling,
+    stopPolling,
+    firstCallLoading,
+    refetch
   };
-  const truncateContent = (content, maxLength = 100) => {
-    if (content.length <= maxLength) return content;
-    return content.substring(0, maxLength) + "...";
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "text",
-          value: query,
-          onChange: handleInputChange,
-          onKeyDown: handleKeyDown,
-          placeholder: "Search memory...",
-          className: "pl-10 pr-10 bg-surface3 border-border1"
-        }
-      ),
-      query && /* @__PURE__ */ jsxRuntime.jsx(
-        Button$2,
-        {
-          onClick: clearSearch,
-          variant: "ghost",
-          size: "sm",
-          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
-      'No results found for "',
-      query,
-      '"'
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => handleResultClick(result.id, result.threadId),
-        className: cn(
-          "w-full px-4 py-3 hover:bg-surface4 transition-colors duration-150 text-left border-b border-border1 last:border-b-0",
-          result.threadId !== currentThreadId && "border-l-2 border-l-blue-400"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-              msg.role,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
-          ] }, idx)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-xs font-medium px-2 py-0.5 rounded",
-                    result.role === "user" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400"
-                  ),
-                  children: result.role
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
-              result.threadTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Txt,
-                  {
-                    variant: "ui-xs",
-                    className: cn(
-                      "truncate max-w-[150px]",
-                      result.threadId !== currentThreadId ? "text-blue-400 font-medium" : "text-icon3"
-                    ),
-                    title: result.threadTitle,
-                    children: [
-                      "• ",
-                      result.threadTitle
-                    ]
-                  }
-                ),
-                result.threadId !== currentThreadId && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3 text-blue-400" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
-          ] }) }),
-          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-              msg.role,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
-          ] }, idx)) })
-        ] })
-      },
-      result.id
-    )) }) })
-  ] });
+}
+
+const PlaygroundQueryClient = ({ children }) => {
+  const queryClient = new reactQuery.QueryClient();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
 };
 
 const errorFallback = "Something went wrong while fetching the data.";
@@ -18578,6 +20100,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();
@@ -18594,6 +20344,7 @@ exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEntityHeader = AgentEntityHeader;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
+exports.AgentInformation = AgentInformation;
 exports.AgentMetadata = AgentMetadata;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;
@@ -18609,6 +20360,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 +20428,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 +20496,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 +20558,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 +20584,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;