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

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessagePart, useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, TriangleAlert, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, XIcon, PanelRightIcon, GaugeIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, XIcon, PanelRightIcon, GaugeIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -24,18 +24,17 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { I as IconColors } from './colors-Br49332d.js';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
-import z$2, { z, ZodObject, ZodIntersection } from 'zod';
+import z$3, { z, ZodObject, ZodIntersection } from 'zod';
 import { CodeBlock } from 'react-code-block';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
+import { useAutoForm, getPathInObject, AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { format, isValid, formatDistanceToNow, formatDate, isToday } from 'date-fns';
 import { useDebouncedCallback } from 'use-debounce';
@@ -43,15 +42,19 @@ import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { v4 } from '@lukeed/uuid';
+import { useFormContext, useFieldArray } from 'react-hook-form';
+import { getLabel } from '@autoform/core';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
+import { ZodProvider, getFieldConfigInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
+import z$2 from 'zod/v4';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useMastraClient, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
 import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/runtime-context';
+import { I as IconColors } from './colors-Br49332d.js';
 import Markdown from 'react-markdown';
 import { useShallow } from 'zustand/shallow';
 import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/di';
@@ -4312,25 +4315,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__ */ jsxs(
-    Button$2,
-    {
-      variant: "ghost",
-      size: "icon",
-      className: cn("relative h-6 w-6", className),
-      "aria-label": "Copy to clipboard",
-      onClick: handleCopy,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
-        /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, type: "button", children: /* @__PURE__ */ jsx(Icon, { className: "transition-colors hover:bg-surface4 rounded-lg text-icon3 hover:text-icon6", size: iconSize, children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
 }
 
 const useCodemirrorTheme$2 = () => {
@@ -5253,7 +5251,7 @@ const useCodemirrorTheme$1 = () => {
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        gutterForeground: IconColors.icon3,
+        gutterForeground: "#939393",
         background: "transparent"
       },
       styles: [{ tag: [tags.className, tags.propertyName] }]
@@ -6834,6 +6832,145 @@ const RecordField = ({ inputProps, field, error, id }) => {
   ] });
 };
 
+const CustomObjectField = ({ field, path }) => {
+  const { uiComponents } = useAutoForm();
+  return /* @__PURE__ */ jsx(uiComponents.ObjectWrapper, { label: getLabel(field), field, children: Object.entries(field.schema).map(([_key, subField]) => /* @__PURE__ */ jsx(
+    CustomAutoFormField,
+    {
+      field: subField,
+      path: [...path, subField.key]
+    },
+    `${path.join(".")}.${subField.key}`
+  )) });
+};
+
+const CustomArrayField = ({ field, path }) => {
+  const { uiComponents } = useAutoForm();
+  const { control } = useFormContext();
+  const { fields, append, remove } = 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__ */ jsx(uiComponents.ArrayWrapper, { label: getLabel(field), field, onAddItem: () => append(defaultValue), children: fields.map((item, index) => /* @__PURE__ */ jsx(uiComponents.ArrayElementWrapper, { onRemove: () => remove(index), index, children: /* @__PURE__ */ jsx(CustomAutoFormField, { field: field.schema[0], path: [...path, index.toString()] }) }, item.id)) });
+};
+
+const CustomAutoFormField = ({ field, path }) => {
+  const { formComponents, uiComponents } = useAutoForm();
+  const {
+    register,
+    formState: { errors },
+    getValues
+  } = useFormContext();
+  const fullPath = path.join(".");
+  const error = getPathInObject(errors, path)?.message;
+  const value = getValues(fullPath);
+  const FieldWrapper = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;
+  let FieldComponent = () => /* @__PURE__ */ 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__ */ jsx(FieldWrapper, { label: getLabel(field), error, id: fullPath, field, children: /* @__PURE__ */ jsx(
+    FieldComponent,
+    {
+      label: 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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CustomAutoFormField, { field: schema, path }, path.join(".")),
+      index < (field.schema?.length ?? 0) - 1 && /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "text-center", children: "OR" })
+    ] }, schema.key);
+  });
+};
+
+const DiscriminatedUnionField = ({ field, path }) => {
+  const { watch } = 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      CustomAutoFormField,
+      {
+        field: literalSchemaField,
+        path: [...path, literalSchemaField.key]
+      },
+      `${fullPath}.${literalSchemaField.key}`
+    ),
+    literalFieldValue && otherFieldSchemas?.[literalFieldValue] && otherFieldSchemas[literalFieldValue].map((schema) => /* @__PURE__ */ jsx(CustomAutoFormField, { field: schema, path: [...path, schema.key] }, `${fullPath}.${schema.key}`))
+  ] }, field.key);
+};
+
 const ShadcnUIComponents = {
   Form,
   FieldWrapper,
@@ -6861,6 +6998,8 @@ function AutoForm({
         date: (props2) => /* @__PURE__ */ jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         select: (props2) => /* @__PURE__ */ jsx(SelectField$1, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         record: (props2) => /* @__PURE__ */ jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        union: (props2) => /* @__PURE__ */ jsx(UnionField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        "discriminated-union": (props2) => /* @__PURE__ */ jsx(DiscriminatedUnionField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
         ...formComponents
       }
     }
@@ -6868,6 +7007,39 @@ function AutoForm({
 }
 
 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: clsx(labelVariants(), className), ...props }));
@@ -6894,9 +7066,50 @@ function inferFieldType(schema, fieldConfig) {
   if (schema instanceof z$1.ZodNativeEnum) return "select";
   if (schema instanceof z.ZodArray) return "array";
   if (schema instanceof z.ZodRecord) return "record";
+  if (schema instanceof 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.ZodLiteral
+        );
+      }
+      return false;
+    });
+    if (hasLiteral) {
+      return "discriminated-union";
+    }
+    return "union";
+  }
   return "string";
 }
 
+function getDefaultValueInZodStack(schema) {
+  if (schema instanceof z$2.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 = getFieldConfigInZodStack(schema);
@@ -6915,11 +7128,16 @@ function parseField(key, schema) {
   if (baseSchema instanceof z$1.ZodObject || baseSchema instanceof z.ZodObject) {
     subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
   }
+  if (baseSchema instanceof z$1.ZodUnion || baseSchema instanceof z.ZodUnion) {
+    subSchema = Object.entries(baseSchema.def.options).map(([key2, field]) => {
+      return parseField(key2, field);
+    });
+  }
   if (baseSchema instanceof z$1.ZodIntersection || baseSchema instanceof 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];
@@ -6927,13 +7145,21 @@ function parseField(key, schema) {
   if (baseSchema instanceof z$1.ZodArray || baseSchema instanceof z.ZodArray) {
     subSchema = [parseField("0", baseSchema._zod.def.element)];
   }
+  const isLiteral = baseSchema instanceof 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
   };
@@ -6958,8 +7184,12 @@ class CustomZodProvider extends 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() {
@@ -6992,10 +7222,10 @@ function DynamicForm({
   }
   const normalizedSchema = (schema2) => {
     if (isEmptyZodObject(schema2)) {
-      return z$2.object({});
+      return z$3.object({});
     }
     if (isNotZodObject) {
-      return z$2.object({
+      return z$3.object({
         "​": schema2
       });
     }
@@ -7668,6 +7898,7 @@ const LinkComponentContext = createContext({
     scorerLink: () => "",
     toolLink: () => "",
     mcpServerLink: () => "",
+    mcpServerToolLink: () => "",
     workflowRunLink: () => ""
   }
 });
@@ -13199,7 +13430,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__ */ jsx(
@@ -13213,22 +13444,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__ */ jsxs(Link, { href: link.url, ...linkParams, children: [
-        isDefaultState ? /* @__PURE__ */ jsx(Fragment, { children: link.icon && link.icon }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: link.icon && link.icon }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.name })
-        ] }),
-        isDefaultState ? link.name : /* @__PURE__ */ jsx(VisuallyHidden$1, { children: link.name }),
+      children: link ? /* @__PURE__ */ jsx(Fragment, { children: isCollapsed || link.tooltipMsg ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: link.url, ...linkParams, children: [
+          link.icon && link.icon,
+          isCollapsed ? /* @__PURE__ */ jsx(VisuallyHidden$1, { children: link.name }) : link.name,
+          " ",
+          children
+        ] }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.tooltipMsg ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          isCollapsed && `${link.name} | `,
+          " ",
+          link.tooltipMsg
+        ] }) : link.name })
+      ] }) : /* @__PURE__ */ jsxs(Link, { href: link.url, ...linkParams, children: [
+        link.icon && link.icon,
+        isCollapsed ? /* @__PURE__ */ jsx(VisuallyHidden$1, { children: link.name }) : link.name,
         " ",
         children
-      ] }) : children
+      ] }) }) : children
     }
   );
 }
@@ -14844,6 +15084,86 @@ const useExecuteAgentTool = () => {
   });
 };
 
+const ToolIconMap = {
+  agent: AgentIcon,
+  workflow: WorkflowIcon,
+  tool: ToolsIcon
+};
+
+const ToolInformation = ({ toolDescription, toolId, toolType }) => {
+  const ToolIconComponent = ToolIconMap[toolType || "tool"];
+  return /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex gap-2", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: /* @__PURE__ */ jsx(ToolIconComponent, {}) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4 justify-between w-full min-w-0", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "font-medium truncate", children: toolId }),
+      /* @__PURE__ */ 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__ */ jsxs(MainContentContent, { hasLeftServiceColumn: true, className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-surface2 border-r-sm border-border1 w-[20rem]", children: [
+      /* @__PURE__ */ jsx(ToolInformation, { toolDescription, toolId, toolType }),
+      /* @__PURE__ */ jsx("div", { className: "p-5 overflow-y-auto", children: /* @__PURE__ */ jsx(
+        DynamicForm,
+        {
+          isSubmitLoading: isExecutingTool,
+          schema: zodInputSchema,
+          onSubmit: (data) => {
+            handleExecuteTool(data);
+          },
+          className: "h-auto pb-7"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: code, tooltip: "Copy JSON result to clipboard" }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-5 h-full relative overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ jsx(CodeMirror, { value: errorString || code, editable: true, theme, extensions: [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(parse(tool?.inputSchema))) : z.object({});
+  if (isAgentLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  return /* @__PURE__ */ jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
+    }
+  );
+};
+
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const tool = row.original;
@@ -14991,6 +15311,52 @@ const useExecuteTool = () => {
   });
 };
 
+const useTools = () => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = useMastraClient();
+  return useQuery({
+    queryKey: ["tools"],
+    queryFn: () => client.getTools(runtimeContext)
+  });
+};
+const useTool = (toolId) => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return 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(parse(tool?.inputSchema))) : z.object({});
+  if (isLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  return /* @__PURE__ */ jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool: isExecuting,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
+    }
+  );
+};
+
 function TemplatesTools({
   tagOptions,
   selectedTag,
@@ -18543,6 +18909,234 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full
   }
 ) });
 
+const useMCPServers = () => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["mcp-servers"],
+    queryFn: async () => {
+      const mcpServers = (await client.getMcpServers(runtimeContext)).servers;
+      return mcpServers;
+    }
+  });
+};
+
+const useMCPServerTool = (serverId, toolId) => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = useMastraClient();
+  return 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 = useMastraClient();
+  return 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__ */ jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ 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);
+    toast.error("Failed to process tool input schema.");
+    zodInputSchema = z.object({});
+  }
+  return /* @__PURE__ */ jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool: isExecuting,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description || "",
+      toolId: tool.id
+    }
+  );
+};
+
+const CodeMirrorBlock = (props) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4 relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy code", content: props.value || "No content" }) }),
+    /* @__PURE__ */ jsx(CodeMirror, { extensions: [json()], theme, ...props })
+  ] });
+};
+
+const MCPDetail = ({ isLoading, server }) => {
+  const [{ sseUrl, httpStreamUrl }, setUrls] = useState({
+    sseUrl: "",
+    httpStreamUrl: ""
+  });
+  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__ */ jsx(MainContentContent, { children: /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon3 font-medium py-20 text-center", children: "Server not found" }) });
+  return /* @__PURE__ */ jsxs(MainContentContent, { isDivided: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-8 py-20 mx-auto max-w-[604px] w-full", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon6 font-medium pb-4", children: server.name }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Badge$1,
+            {
+              icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "SSE" }),
+              className: "!text-icon4",
+              children: sseUrl
+            }
+          ),
+          /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy SSE URL", content: sseUrl, iconSize: "sm" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Badge$1,
+            {
+              icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "HTTP" }),
+              className: "!text-icon4",
+              children: httpStreamUrl
+            }
+          ),
+          /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy HTTP Stream URL", content: httpStreamUrl, iconSize: "sm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pt-3 pb-9", children: [
+        /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(FolderIcon, { className: "text-icon6" }), className: "rounded-r-sm !text-icon4", children: "Version" }),
+        /* @__PURE__ */ jsx(Badge$1, { className: "rounded-l-sm !text-icon4", children: server.version_detail.version })
+      ] }),
+      /* @__PURE__ */ jsx(McpSetupTabs, { sseUrl, serverName: server.name })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll border-l-sm border-border1", children: /* @__PURE__ */ jsx(McpToolList, { server }) })
+  ] });
+};
+const McpSetupTabs = ({ sseUrl, serverName }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "cursor", children: [
+    /* @__PURE__ */ jsxs(TabList$1, { children: [
+      /* @__PURE__ */ jsx(Tab$1, { value: "cursor", children: "Cursor" }),
+      /* @__PURE__ */ jsx(Tab$1, { value: "windsurf", children: "Windsurf" })
+    ] }),
+    /* @__PURE__ */ jsxs(TabContent$1, { value: "cursor", children: [
+      /* @__PURE__ */ jsxs(Txt, { className: "text-icon3 pb-4", children: [
+        "Cursor comes with built-in MCP Support.",
+        " ",
+        /* @__PURE__ */ 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__ */ jsx(
+        CodeMirrorBlock,
+        {
+          editable: false,
+          value: `{
+    "mcpServers": {
+      "${serverName}": {
+        "url": "${sseUrl}"
+      }
+    }
+  }`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(TabContent$1, { value: "windsurf", children: [
+      /* @__PURE__ */ jsxs(Txt, { className: "text-icon3 pb-4", children: [
+        "Windsurf comes with built-in MCP Support.",
+        " ",
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "p-5 overflow-y-scroll", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: /* @__PURE__ */ jsx(McpServerIcon, {}) }),
+      /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "font-medium", children: "Available Tools" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-6", children: toolsKeyArray.map((toolId) => {
+      const tool = tools[toolId];
+      return /* @__PURE__ */ jsx(ToolEntry, { tool, serverId: server.id }, toolId);
+    }) })
+  ] });
+};
+const ToolEntry = ({ tool, serverId }) => {
+  const linkRef = useRef(null);
+  const { Link, paths } = useLinkComponent();
+  const ToolIconComponent = ToolIconMap[tool.toolType || "tool"];
+  return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(ToolIconComponent, { className: "group-hover/entity:text-[#ECB047]" }) }),
+    /* @__PURE__ */ jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: paths.mcpServerToolLink(serverId, tool.id), children: tool.id }) }),
+      /* @__PURE__ */ jsx(EntityDescription, { children: tool.description })
+    ] })
+  ] });
+};
+
 const useEvalsByAgentId = (agentId, type) => {
   const { runtimeContext } = usePlaygroundStore();
   const client = useMastraClient();
@@ -18554,5 +19148,5 @@ const useEvalsByAgentId = (agentId, type) => {
   });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgent, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useEvalsByAgentId, useExecuteAgentTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTools, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelProviders, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSendWorkflowRunEvent, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRuns, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPDetail, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgent, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useEvalsByAgentId, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelProviders, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSendWorkflowRunEvent, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map