@mastra/playground-ui 7.0.0-beta.5 → 7.0.0-beta.6

package/dist/index.cjs.js

@@ -51,7 +51,7 @@ const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 const prettier = require('prettier');
 const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
-const jsonSchemaToZod = require('json-schema-to-zod');
+const jsonToZod = require('@mastra/schema-compat/json-to-zod');
 const superjson = require('superjson');
 const SliderPrimitive = require('@radix-ui/react-slider');
 const reactCodeBlock = require('react-code-block');
@@ -4893,6 +4893,50 @@ toast.promise = ({
   });
 };
 
+function useTracingSettingsState({ entityId, entityType }) {
+  const [settings, setSettingsState] = React.useState(void 0);
+  const LOCAL_STORAGE_KEY = `tracing-options-${entityType}:${entityId}`;
+  React.useEffect(() => {
+    try {
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        setSettingsState(parsed || void 0);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [LOCAL_STORAGE_KEY]);
+  const setSettings = (settingsValue) => {
+    setSettingsState((prev) => ({ ...prev, ...settingsValue }));
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ ...settingsValue, entityId, entityType }));
+  };
+  const resetAll = () => {
+    setSettingsState(void 0);
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
+  };
+  return {
+    settings,
+    setSettings,
+    resetAll
+  };
+}
+
+const TracingSettingsContext = React.createContext({
+  setSettings: () => {
+  },
+  resetAll: () => {
+  },
+  settings: void 0
+});
+const TracingSettingsProvider = ({ children, entityId, entityType }) => {
+  const state = useTracingSettingsState({ entityId, entityType });
+  return /* @__PURE__ */ jsxRuntime.jsx(TracingSettingsContext.Provider, { value: state, children });
+};
+const useTracingSettings = () => {
+  return React.useContext(TracingSettingsContext);
+};
+
 const useExecuteWorkflow = () => {
   const client = react$1.useMastraClient();
   const createWorkflowRun = reactQuery.useMutation({
@@ -4956,6 +5000,7 @@ const useExecuteWorkflow = () => {
 };
 const useStreamWorkflow = () => {
   const client = react$1.useMastraClient();
+  const { settings } = useTracingSettings();
   const [streamResult, setStreamResult] = React.useState({});
   const [isStreaming, setIsStreaming] = React.useState(false);
   const readerRef = React.useRef(null);
@@ -5032,7 +5077,13 @@ const useStreamWorkflow = () => {
         requestContext$1.set(key, value);
       });
       const workflow = client.getWorkflow(workflowId);
-      const stream = await workflow.streamVNext({ runId, inputData, requestContext: requestContext$1, closeOnSuspend: true });
+      const stream = await workflow.streamVNext({
+        runId,
+        inputData,
+        requestContext: requestContext$1,
+        closeOnSuspend: true,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5147,7 +5198,13 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext$1.set(key, value);
       });
-      const stream = await workflow.resumeStreamVNext({ runId, step, resumeData, requestContext: requestContext$1 });
+      const stream = await workflow.resumeStreamVNext({
+        runId,
+        step,
+        resumeData,
+        requestContext: requestContext$1,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5203,7 +5260,11 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext$1.set(key, value);
       });
-      const stream = await workflow.timeTravelStream({ ...params, requestContext: requestContext$1 });
+      const stream = await workflow.timeTravelStream({
+        ...params,
+        requestContext: requestContext$1,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5328,16 +5389,35 @@ const useWorkflow = (workflowId) => {
   });
 };
 
+const PER_PAGE = 20;
 const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   const client = react$1.useMastraClient();
-  return reactQuery.useQuery({
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = reactQuery.useInfiniteQuery({
     queryKey: ["workflow-runs", workflowId],
-    queryFn: () => client.getWorkflow(workflowId).runs({ perPage: 50, page: 0 }),
+    queryFn: ({ pageParam }) => client.getWorkflow(workflowId).runs({ limit: PER_PAGE, offset: pageParam * PER_PAGE }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _, lastPageParam) => {
+      if (lastPage.runs.length < PER_PAGE) {
+        return void 0;
+      }
+      return lastPageParam + 1;
+    },
+    select: (data) => {
+      return data.pages.flatMap((page) => page.runs);
+    },
+    retry: false,
     enabled,
     refetchInterval: 5e3,
     gcTime: 0,
     staleTime: 0
   });
+  React.useEffect(() => {
+    if (isEndOfListInView && query.hasNextPage && !query.isFetchingNextPage) {
+      query.fetchNextPage();
+    }
+  }, [isEndOfListInView, query.hasNextPage, query.isFetchingNextPage]);
+  return { ...query, setEndOfListElement };
 };
 const useWorkflowRunExecutionResult = (workflowId, runId, refetchInterval) => {
   const client = react$1.useMastraClient();
@@ -6930,6 +7010,41 @@ const DiscriminatedUnionField = ({ field, path }) => {
   ] }, field.key);
 };
 
+react$3.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;
+}
+
 function CustomAutoForm({
   schema,
   onSubmit = () => {
@@ -6958,7 +7073,7 @@ function CustomAutoForm({
     }
   }, [onFormInit, methods]);
   const handleSubmit = async (dataRaw) => {
-    const data = core.removeEmptyValues(dataRaw);
+    const data = removeEmptyValues(dataRaw);
     const validationResult = schema.validateSchema(data);
     if (validationResult.success) {
       await onSubmit(validationResult.data, methods);
@@ -7038,41 +7153,6 @@ function AutoForm({
   );
 }
 
-react$3.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 }));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
@@ -7113,6 +7193,9 @@ function inferFieldType(schema, fieldConfig) {
     }
     return "union";
   }
+  if (schema instanceof z.z.ZodDiscriminatedUnion) {
+    return "discriminated-union";
+  }
   return "string";
 }
 
@@ -7241,8 +7324,22 @@ class CustomZodProvider extends v4.ZodProvider {
   }
   validateSchema(values) {
     const cleanedValues = removeEmptyValues(values);
-    const result = super.validateSchema(cleanedValues);
-    return result;
+    try {
+      const validationResult = this._schema.safeParse(cleanedValues);
+      if (validationResult.success) {
+        return { success: true, data: validationResult.data };
+      } else {
+        return {
+          success: false,
+          errors: validationResult.error.issues.map((error) => ({
+            path: error.path,
+            message: error.message
+          }))
+        };
+      }
+    } catch (error) {
+      throw error;
+    }
   }
   parseSchema() {
     return parseSchema(this._schema);
@@ -7607,7 +7704,7 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
     }
     try {
       const parsed = superjson.parse(stepDefinition.inputSchema);
-      return { schema: resolveSerializedZodOutput(jsonSchemaToZod(parsed)), schemaError: null };
+      return { schema: resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(parsed)), schemaError: null };
     } catch (err) {
       console.error("Failed to parse step schema", err);
       return { schema: z.z.record(z.z.string(), z.z.any()) };
@@ -7737,7 +7834,7 @@ const WorkflowStepActionBar = ({
   const { withoutTimeTravel } = React.useContext(WorkflowRunContext);
   const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
   const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
-  const showTimeTravel = !withoutTimeTravel && stepKey;
+  const showTimeTravel = !withoutTimeTravel && stepKey && !mapConfig;
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showTimeTravel) && /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8602,7 +8699,7 @@ function WorkflowTrigger({
   }
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
-  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
+  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
   const workflowActivePaths = streamResultToUse?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   const doneStatuses = ["success", "failed", "canceled"];
@@ -8638,7 +8735,7 @@ function WorkflowTrigger({
       !isStreamingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
         const stepDefinition = workflow.allSteps[step.stepId];
         if (!stepDefinition || stepDefinition.isWorkflow) return null;
-        const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.resumeSchema))) : z.z.record(z.z.string(), z.z.any());
+        const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(superjson.parse(stepDefinition.resumeSchema))) : z.z.record(z.z.string(), z.z.any());
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
           step.suspendPayload && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "suspended-payload", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9216,6 +9313,104 @@ const EntityHeader = ({ icon, title, isLoading, children }) => {
   ] });
 };
 
+const Tabs$1 = TabsPrimitive__namespace.Root;
+const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "-outline-offset-2 data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+const PlaygroundTabs = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange,
+  className
+}) => {
+  const [internalTab, setInternalTab] = React.useState(defaultTab);
+  const isControlled = value !== void 0 && onValueChange !== void 0;
+  const currentTab = isControlled ? value : internalTab;
+  const handleTabChange = (newValue) => {
+    const typedValue = newValue;
+    if (isControlled) {
+      onValueChange(typedValue);
+    } else {
+      setInternalTab(typedValue);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+};
+const TabList$1 = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
+};
+const Tab$1 = ({ children, value, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsTrigger,
+    {
+      value,
+      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0",
+      onClick,
+      children
+    }
+  );
+};
+const TabContent$1 = ({ children, value }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
+};
+
+const TracingRunOptions = () => {
+  const theme = useCodemirrorTheme$1();
+  const { settings, setSettings } = useTracingSettings();
+  const handleChange = (value) => {
+    if (!value) {
+      return setSettings({ ...settings, tracingOptions: void 0 });
+    }
+    try {
+      const parsed = JSON.parse(value);
+      if (typeof parsed === "object" && parsed !== null) {
+        setSettings({ ...settings, tracingOptions: parsed });
+      }
+    } catch {
+    }
+  };
+  let strValue = "{}";
+  try {
+    strValue = JSON.stringify(settings?.tracingOptions, null, 2);
+  } catch {
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 px-5 py-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h3", variant: "ui-md", className: "text-icon3", children: "Tracing Options" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CodeMirror,
+      {
+        value: strValue,
+        onChange: handleChange,
+        theme,
+        extensions: [langJson.jsonLanguage],
+        className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+      }
+    )
+  ] });
+};
+
 function WorkflowInformation({ workflowId, initialRunId }) {
   const { data: workflow, isLoading, error } = useWorkflow(workflowId);
   const {
@@ -9229,6 +9424,7 @@ function WorkflowInformation({ workflowId, initialRunId }) {
     cancelWorkflowRun,
     isCancellingWorkflowRun
   } = React.useContext(WorkflowRunContext);
+  const [tab, setTab] = React.useState("current-run");
   const [runId, setRunId] = React.useState("");
   const { handleCopy } = useCopyToClipboard({ text: workflowId });
   const stepsCount = Object.keys(workflow?.steps ?? {}).length;
@@ -9258,39 +9454,46 @@ function WorkflowInformation({ workflowId, initialRunId }) {
         stepsCount > 1 ? "s" : ""
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto border-t-sm border-border1", children: workflowId ? initialRunId ? /* @__PURE__ */ jsxRuntime.jsx(
-      WorkflowRunDetail,
-      {
-        workflowId,
-        runId: initialRunId,
-        setRunId,
-        workflow: workflow ?? void 0,
-        isLoading,
-        createWorkflowRun,
-        streamWorkflow,
-        resumeWorkflow,
-        streamResult,
-        isStreamingWorkflow,
-        isCancellingWorkflowRun,
-        cancelWorkflowRun,
-        observeWorkflowStream
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      WorkflowTrigger,
-      {
-        workflowId,
-        setRunId,
-        workflow: workflow ?? void 0,
-        isLoading,
-        createWorkflowRun,
-        streamWorkflow,
-        resumeWorkflow,
-        streamResult,
-        isStreamingWorkflow,
-        isCancellingWorkflowRun,
-        cancelWorkflowRun
-      }
-    ) : null })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "current-run", value: tab, onValueChange: setTab, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "current-run", children: "Current Run" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "run-options", children: "Run options" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "current-run", children: workflowId ? initialRunId ? /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowRunDetail,
+        {
+          workflowId,
+          runId: initialRunId,
+          setRunId,
+          workflow: workflow ?? void 0,
+          isLoading,
+          createWorkflowRun,
+          streamWorkflow,
+          resumeWorkflow,
+          streamResult,
+          isStreamingWorkflow,
+          isCancellingWorkflowRun,
+          cancelWorkflowRun,
+          observeWorkflowStream
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowTrigger,
+        {
+          workflowId,
+          setRunId,
+          workflow: workflow ?? void 0,
+          isLoading,
+          createWorkflowRun,
+          streamWorkflow,
+          resumeWorkflow,
+          streamResult,
+          isStreamingWorkflow,
+          isCancellingWorkflowRun,
+          cancelWorkflowRun
+        }
+      ) : null }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "run-options", children: /* @__PURE__ */ jsxRuntime.jsx(TracingRunOptions, {}) })
+    ] }) })
   ] });
 }
 
@@ -9528,7 +9731,7 @@ const WorkflowBadge = ({
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
   });
-  const run = runs?.runs.find((run2) => run2.runId === runId);
+  const run = runs?.find((run2) => run2.runId === runId);
   const isLoading = isRunsLoading || !run;
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
@@ -10368,8 +10571,12 @@ const useSpeechRecognition = ({
     const agent2 = client.getAgent(agentId);
     const check = async () => {
       try {
-        await agent2.voice.getSpeakers(requestContext);
-        setAgent(agent2);
+        const speakers = await agent2.voice.getSpeakers(requestContext);
+        if (speakers.length > 0) {
+          setAgent(agent2);
+        } else {
+          setAgent(null);
+        }
       } catch (error) {
         setAgent(null);
       }
@@ -11113,8 +11320,12 @@ const useAdapters = (agentId) => {
     const check = async () => {
       const agent = baseClient.getAgent(agentId);
       try {
-        await agent.voice.getSpeakers(requestContext);
-        setSpeechAdapter(new VoiceAttachmentAdapter(agent));
+        const speakers = await agent.voice.getSpeakers(requestContext);
+        if (speakers.length > 0) {
+          setSpeechAdapter(new VoiceAttachmentAdapter(agent));
+        } else {
+          setSpeechAdapter(new react.WebSpeechSynthesisAdapter());
+        }
         setIsReady(true);
       } catch {
         setSpeechAdapter(new react.WebSpeechSynthesisAdapter());
@@ -11382,6 +11593,7 @@ function MastraRuntimeProvider({
   modelVersion
 }) {
   const { prompt: instructions } = useAgentPromptExperiment();
+  const { settings: tracingSettings } = useTracingSettings();
   const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
   const [legacyMessages, setLegacyMessages] = React.useState(
     () => memory ? initializeMessageState(initialLegacyMessages || []) : []
@@ -11461,6 +11673,7 @@ function MastraRuntimeProvider({
             threadId,
             modelSettings: modelSettingsArgs,
             signal: controller.signal,
+            tracingOptions: tracingSettings?.tracingOptions,
             onNetworkChunk: async (chunk) => {
               if (chunk.type === "tool-execution-end" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
                 refreshWorkingMemory?.();
@@ -11479,7 +11692,8 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              signal: controller.signal
+              signal: controller.signal,
+              tracingOptions: tracingSettings?.tracingOptions
             });
             await refreshThreadList?.();
             return;
@@ -11491,6 +11705,7 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
+              tracingOptions: tracingSettings?.tracingOptions,
               onChunk: async (chunk) => {
                 if (chunk.type === "finish") {
                   await refreshThreadList?.();
@@ -15750,7 +15965,7 @@ const AgentToolPanel = ({ toolId, agentId }) => {
       playgroundRequestContext
     });
   };
-  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
+  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
   if (isAgentLoading || error) 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" }) });
@@ -16484,69 +16699,6 @@ function AgentMemory({ agentId, threadId }) {
   ] });
 }
 
-const Tabs$1 = TabsPrimitive__namespace.Root;
-const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
-  {
-    ref,
-    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "-outline-offset-2 data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
-TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-
-const PlaygroundTabs = ({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  className
-}) => {
-  const [internalTab, setInternalTab] = React.useState(defaultTab);
-  const isControlled = value !== void 0 && onValueChange !== void 0;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue) => {
-    const typedValue = newValue;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
-};
-const TabList$1 = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
-};
-const Tab$1 = ({ children, value, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsTrigger,
-    {
-      value,
-      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0",
-      onClick,
-      children
-    }
-  );
-};
-const TabContent$1 = ({ children, value }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
-};
-
 function AgentInformation({ agentId, threadId }) {
   const { data: memory } = useMemory(agentId);
   const hasMemory = Boolean(memory?.result);
@@ -16556,11 +16708,13 @@ function AgentInformation({ agentId, threadId }) {
       /* @__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" }),
-        hasMemory && /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "memory", children: "Memory" })
+        hasMemory && /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "memory", children: "Memory" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "tracing-options", children: "Tracing Options" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "overview", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadata, { agentId }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "model-settings", children: /* @__PURE__ */ jsxRuntime.jsx(AgentSettings, { agentId }) }),
-      hasMemory && /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId }) })
+      hasMemory && /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "tracing-options", children: /* @__PURE__ */ jsxRuntime.jsx(TracingRunOptions, {}) })
     ] })
   ] });
 }
@@ -16820,7 +16974,7 @@ const ToolPanel = ({ toolId }) => {
       requestContext: playgroundRequestContext
     });
   };
-  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
+  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
   if (isLoading || error) 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" }) });
@@ -19090,23 +19244,27 @@ const parseError = (error) => {
 
 const WorkflowRunList = ({ workflowId, runId }) => {
   const { Link, paths } = useLinkComponent();
-  const { isLoading, data: runs } = useWorkflowRuns(workflowId);
-  const actualRuns = runs?.runs || [];
+  const { isLoading, data: runs, setEndOfListElement, isFetchingNextPage } = useWorkflowRuns(workflowId);
+  const actualRuns = runs || [];
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
-      "New workflow run"
-    ] }) }) }),
-    actualRuns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3 py-3 px-5", children: "Your run history will appear here once you run the workflow" }),
-    actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
-      typeof run?.snapshot === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-    ] }) }, run.runId))
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+        "New workflow run"
+      ] }) }) }),
+      actualRuns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3 py-3 px-5", children: "Your run history will appear here once you run the workflow" }),
+      actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
+        typeof run?.snapshot === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+      ] }) }, run.runId))
+    ] }) }),
+    isFetchingNextPage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setEndOfListElement })
+  ] });
 };
 const WorkflowRunStatusBadge = ({ status }) => {
   if (status === "running") {
@@ -19310,7 +19468,7 @@ const MCPToolPanel = ({ toolId, serverId }) => {
     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));
+    zodInputSchema = resolveSerializedZodOutput(jsonToZod.jsonSchemaToZod(tool.inputSchema));
   } catch (e) {
     console.error("Error processing input schema:", e);
     toast.error("Failed to process tool input schema.");
@@ -19715,6 +19873,8 @@ exports.TraceTimelineLegend = TraceTimelineLegend;
 exports.TraceTimelineSpan = TraceTimelineSpan;
 exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
+exports.TracingSettingsContext = TracingSettingsContext;
+exports.TracingSettingsProvider = TracingSettingsProvider;
 exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;
@@ -19782,6 +19942,7 @@ exports.useThreads = useThreads;
 exports.useTool = useTool;
 exports.useTools = useTools;
 exports.useTraceSpanScores = useTraceSpanScores;
+exports.useTracingSettings = useTracingSettings;
 exports.useUpdateAgentModel = useUpdateAgentModel;
 exports.useUpdateModelInModelList = useUpdateModelInModelList;
 exports.useWorkflow = useWorkflow;