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

package/dist/index.es.js

@@ -19,7 +19,7 @@ import CodeMirror, { EditorView as EditorView$1 } from '@uiw/react-codemirror';
 import { toast as toast$1 } from 'sonner';
 import './index.css';export { Toaster } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useQuery, useMutation, useInfiniteQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 export * from '@tanstack/react-query';
 import { useMastraClient, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
 import { create } from 'zustand';
@@ -40,8 +40,8 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { v4 } from '@lukeed/uuid';
 import { useFormContext, useFieldArray, useForm, FormProvider } from 'react-hook-form';
-import { getLabel, parseSchema as parseSchema$1, getDefaultValues as getDefaultValues$1, removeEmptyValues as removeEmptyValues$1 } from '@autoform/core';
-import { useAutoForm, getPathInObject, AutoFormProvider, buildZodFieldConfig } from '@autoform/react';
+import { getLabel, parseSchema as parseSchema$1, getDefaultValues as getDefaultValues$1 } from '@autoform/core';
+import { useAutoForm, getPathInObject, buildZodFieldConfig, AutoFormProvider } from '@autoform/react';
 import z$3, { z, ZodObject, ZodIntersection } from 'zod';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack } from '@autoform/zod/v4';
@@ -51,7 +51,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
-import jsonSchemaToZod from 'json-schema-to-zod';
+import { jsonSchemaToZod } from '@mastra/schema-compat/json-to-zod';
 import { parse } from 'superjson';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
@@ -4859,6 +4859,50 @@ toast.promise = ({
   });
 };
 
+function useTracingSettingsState({ entityId, entityType }) {
+  const [settings, setSettingsState] = useState(void 0);
+  const LOCAL_STORAGE_KEY = `tracing-options-${entityType}:${entityId}`;
+  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 = createContext({
+  setSettings: () => {
+  },
+  resetAll: () => {
+  },
+  settings: void 0
+});
+const TracingSettingsProvider = ({ children, entityId, entityType }) => {
+  const state = useTracingSettingsState({ entityId, entityType });
+  return /* @__PURE__ */ jsx(TracingSettingsContext.Provider, { value: state, children });
+};
+const useTracingSettings = () => {
+  return useContext(TracingSettingsContext);
+};
+
 const useExecuteWorkflow = () => {
   const client = useMastraClient();
   const createWorkflowRun = useMutation({
@@ -4922,6 +4966,7 @@ const useExecuteWorkflow = () => {
 };
 const useStreamWorkflow = () => {
   const client = useMastraClient();
+  const { settings } = useTracingSettings();
   const [streamResult, setStreamResult] = useState({});
   const [isStreaming, setIsStreaming] = useState(false);
   const readerRef = useRef(null);
@@ -4998,7 +5043,13 @@ const useStreamWorkflow = () => {
         requestContext.set(key, value);
       });
       const workflow = client.getWorkflow(workflowId);
-      const stream = await workflow.streamVNext({ runId, inputData, requestContext, closeOnSuspend: true });
+      const stream = await workflow.streamVNext({
+        runId,
+        inputData,
+        requestContext,
+        closeOnSuspend: true,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5113,7 +5164,13 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext.set(key, value);
       });
-      const stream = await workflow.resumeStreamVNext({ runId, step, resumeData, requestContext });
+      const stream = await workflow.resumeStreamVNext({
+        runId,
+        step,
+        resumeData,
+        requestContext,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5169,7 +5226,11 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext.set(key, value);
       });
-      const stream = await workflow.timeTravelStream({ ...params, requestContext });
+      const stream = await workflow.timeTravelStream({
+        ...params,
+        requestContext,
+        tracingOptions: settings?.tracingOptions
+      });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5294,16 +5355,35 @@ const useWorkflow = (workflowId) => {
   });
 };
 
+const PER_PAGE = 20;
 const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   const client = useMastraClient();
-  return useQuery({
+  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const query = 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
   });
+  useEffect(() => {
+    if (isEndOfListInView && query.hasNextPage && !query.isFetchingNextPage) {
+      query.fetchNextPage();
+    }
+  }, [isEndOfListInView, query.hasNextPage, query.isFetchingNextPage]);
+  return { ...query, setEndOfListElement };
 };
 const useWorkflowRunExecutionResult = (workflowId, runId, refetchInterval) => {
   const client = useMastraClient();
@@ -6896,6 +6976,41 @@ const DiscriminatedUnionField = ({ field, path }) => {
   ] }, field.key);
 };
 
+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 = () => {
@@ -6924,7 +7039,7 @@ function CustomAutoForm({
     }
   }, [onFormInit, methods]);
   const handleSubmit = async (dataRaw) => {
-    const data = removeEmptyValues$1(dataRaw);
+    const data = removeEmptyValues(dataRaw);
     const validationResult = schema.validateSchema(data);
     if (validationResult.success) {
       await onSubmit(validationResult.data, methods);
@@ -7004,41 +7119,6 @@ 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 }));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -7079,6 +7159,9 @@ function inferFieldType(schema, fieldConfig) {
     }
     return "union";
   }
+  if (schema instanceof z.ZodDiscriminatedUnion) {
+    return "discriminated-union";
+  }
   return "string";
 }
 
@@ -7207,8 +7290,22 @@ class CustomZodProvider extends 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);
@@ -7703,7 +7800,7 @@ const WorkflowStepActionBar = ({
   const { withoutTimeTravel } = 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__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showTimeTravel) && /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9182,6 +9279,104 @@ const EntityHeader = ({ icon, title, isLoading, children }) => {
   ] });
 };
 
+const Tabs$1 = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.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.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+const PlaygroundTabs = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange,
+  className
+}) => {
+  const [internalTab, setInternalTab] = 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__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+};
+const TabList$1 = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
+};
+const Tab$1 = ({ children, value, onClick }) => {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "space-y-2 px-5 py-2", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "h3", variant: "ui-md", className: "text-icon3", children: "Tracing Options" }),
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        value: strValue,
+        onChange: handleChange,
+        theme,
+        extensions: [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 {
@@ -9195,6 +9390,7 @@ function WorkflowInformation({ workflowId, initialRunId }) {
     cancelWorkflowRun,
     isCancellingWorkflowRun
   } = useContext(WorkflowRunContext);
+  const [tab, setTab] = useState("current-run");
   const [runId, setRunId] = useState("");
   const { handleCopy } = useCopyToClipboard({ text: workflowId });
   const stepsCount = Object.keys(workflow?.steps ?? {}).length;
@@ -9224,39 +9420,46 @@ function WorkflowInformation({ workflowId, initialRunId }) {
         stepsCount > 1 ? "s" : ""
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto border-t-sm border-border1", children: workflowId ? initialRunId ? /* @__PURE__ */ jsx(
-      WorkflowRunDetail,
-      {
-        workflowId,
-        runId: initialRunId,
-        setRunId,
-        workflow: workflow ?? void 0,
-        isLoading,
-        createWorkflowRun,
-        streamWorkflow,
-        resumeWorkflow,
-        streamResult,
-        isStreamingWorkflow,
-        isCancellingWorkflowRun,
-        cancelWorkflowRun,
-        observeWorkflowStream
-      }
-    ) : /* @__PURE__ */ jsx(
-      WorkflowTrigger,
-      {
-        workflowId,
-        setRunId,
-        workflow: workflow ?? void 0,
-        isLoading,
-        createWorkflowRun,
-        streamWorkflow,
-        resumeWorkflow,
-        streamResult,
-        isStreamingWorkflow,
-        isCancellingWorkflowRun,
-        cancelWorkflowRun
-      }
-    ) : null })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "current-run", value: tab, onValueChange: setTab, children: [
+      /* @__PURE__ */ jsxs(TabList$1, { children: [
+        /* @__PURE__ */ jsx(Tab$1, { value: "current-run", children: "Current Run" }),
+        /* @__PURE__ */ jsx(Tab$1, { value: "run-options", children: "Run options" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent$1, { value: "current-run", children: workflowId ? initialRunId ? /* @__PURE__ */ jsx(
+        WorkflowRunDetail,
+        {
+          workflowId,
+          runId: initialRunId,
+          setRunId,
+          workflow: workflow ?? void 0,
+          isLoading,
+          createWorkflowRun,
+          streamWorkflow,
+          resumeWorkflow,
+          streamResult,
+          isStreamingWorkflow,
+          isCancellingWorkflowRun,
+          cancelWorkflowRun,
+          observeWorkflowStream
+        }
+      ) : /* @__PURE__ */ jsx(
+        WorkflowTrigger,
+        {
+          workflowId,
+          setRunId,
+          workflow: workflow ?? void 0,
+          isLoading,
+          createWorkflowRun,
+          streamWorkflow,
+          resumeWorkflow,
+          streamResult,
+          isStreamingWorkflow,
+          isCancellingWorkflowRun,
+          cancelWorkflowRun
+        }
+      ) : null }),
+      /* @__PURE__ */ jsx(TabContent$1, { value: "run-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
+    ] }) })
   ] });
 }
 
@@ -9494,7 +9697,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;
@@ -10334,8 +10537,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);
       }
@@ -11079,8 +11286,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 WebSpeechSynthesisAdapter());
+        }
         setIsReady(true);
       } catch {
         setSpeechAdapter(new WebSpeechSynthesisAdapter());
@@ -11348,6 +11559,7 @@ function MastraRuntimeProvider({
   modelVersion
 }) {
   const { prompt: instructions } = useAgentPromptExperiment();
+  const { settings: tracingSettings } = useTracingSettings();
   const [isLegacyRunning, setIsLegacyRunning] = useState(false);
   const [legacyMessages, setLegacyMessages] = useState(
     () => memory ? initializeMessageState(initialLegacyMessages || []) : []
@@ -11427,6 +11639,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?.();
@@ -11445,7 +11658,8 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              signal: controller.signal
+              signal: controller.signal,
+              tracingOptions: tracingSettings?.tracingOptions
             });
             await refreshThreadList?.();
             return;
@@ -11457,6 +11671,7 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
+              tracingOptions: tracingSettings?.tracingOptions,
               onChunk: async (chunk) => {
                 if (chunk.type === "finish") {
                   await refreshThreadList?.();
@@ -16450,69 +16665,6 @@ function AgentMemory({ agentId, threadId }) {
   ] });
 }
 
-const Tabs$1 = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.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.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-const PlaygroundTabs = ({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  className
-}) => {
-  const [internalTab, setInternalTab] = 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__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
-};
-const TabList$1 = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
-};
-const Tab$1 = ({ children, value, onClick }) => {
-  return /* @__PURE__ */ 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__ */ 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);
@@ -16522,11 +16674,13 @@ function AgentInformation({ agentId, threadId }) {
       /* @__PURE__ */ jsxs(TabList$1, { children: [
         /* @__PURE__ */ jsx(Tab$1, { value: "overview", children: "Overview" }),
         /* @__PURE__ */ jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
-        hasMemory && /* @__PURE__ */ jsx(Tab$1, { value: "memory", children: "Memory" })
+        hasMemory && /* @__PURE__ */ jsx(Tab$1, { value: "memory", children: "Memory" }),
+        /* @__PURE__ */ jsx(Tab$1, { value: "tracing-options", children: "Tracing Options" })
       ] }),
       /* @__PURE__ */ jsx(TabContent$1, { value: "overview", children: /* @__PURE__ */ jsx(AgentMetadata, { agentId }) }),
       /* @__PURE__ */ jsx(TabContent$1, { value: "model-settings", children: /* @__PURE__ */ jsx(AgentSettings, { agentId }) }),
-      hasMemory && /* @__PURE__ */ jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) })
+      hasMemory && /* @__PURE__ */ jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) }),
+      /* @__PURE__ */ jsx(TabContent$1, { value: "tracing-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
     ] })
   ] });
 }
@@ -19056,23 +19210,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__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "overflow-y-auto h-full w-full", children: /* @__PURE__ */ jsx(Threads, { children: /* @__PURE__ */ jsxs(ThreadList, { children: [
-    /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
-      "New workflow run"
-    ] }) }) }),
-    actualRuns.length === 0 && /* @__PURE__ */ 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__ */ jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
-      typeof run?.snapshot === "object" && /* @__PURE__ */ jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
-      /* @__PURE__ */ jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
-      /* @__PURE__ */ jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-    ] }) }, run.runId))
-  ] }) }) });
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
+    /* @__PURE__ */ jsx(Threads, { children: /* @__PURE__ */ jsxs(ThreadList, { children: [
+      /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
+        "New workflow run"
+      ] }) }) }),
+      actualRuns.length === 0 && /* @__PURE__ */ 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__ */ jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
+        typeof run?.snapshot === "object" && /* @__PURE__ */ jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
+        /* @__PURE__ */ jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+      ] }) }, run.runId))
+    ] }) }),
+    isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) }),
+    /* @__PURE__ */ jsx("div", { ref: setEndOfListElement })
+  ] });
 };
 const WorkflowRunStatusBadge = ({ status }) => {
   if (status === "running") {
@@ -19505,5 +19663,5 @@ function MCPServerCombobox({
   );
 }
 
-export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentMemory, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentInformationSettings, useAgentInformationTab, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentMemory, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracingSettingsContext, TracingSettingsProvider, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentInformationSettings, useAgentInformationTab, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useTracingSettings, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map