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

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();
@@ -6580,7 +6660,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 min-w-[8rem] max-h-dropdown-max-height overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -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, {}) })
+    ] }) })
   ] });
 }
 
@@ -9424,7 +9627,7 @@ function Combobox({
               ref: listRef,
               id: "combobox-options",
               role: "listbox",
-              className: "max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
+              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
               children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
                 const isSelected = value === option.value;
                 const isHighlighted = index === highlightedIndex;
@@ -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;
@@ -9633,16 +9836,12 @@ const AgentBadge = ({ agentId, messages = [], metadata, toolCallId, toolApproval
   );
 };
 
-const useAgentMessages = ({
-  threadId,
-  agentId,
-  memory
-}) => {
+const useAgentMessages = ({ threadId, agentId, memory }) => {
   const client = react$1.useMastraClient();
   const { requestContext } = usePlaygroundStore();
   return reactQuery.useQuery({
     queryKey: ["memory", "messages", threadId, agentId, "requestContext"],
-    queryFn: () => client.listThreadMessages(threadId, { agentId, requestContext }),
+    queryFn: () => threadId ? client.listThreadMessages(threadId, { agentId, requestContext }) : null,
     enabled: memory && Boolean(threadId),
     staleTime: 0,
     gcTime: 0,
@@ -9659,7 +9858,7 @@ const AgentBadgeWrapper = ({
   toolApprovalMetadata
 }) => {
   const { data } = useAgentMessages({
-    threadId: result?.subAgentThreadId ?? "",
+    threadId: result?.subAgentThreadId,
     agentId,
     memory: true
   });
@@ -10368,8 +10567,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 +11316,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 +11589,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 +11669,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 +11688,8 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              signal: controller.signal
+              signal: controller.signal,
+              tracingOptions: tracingSettings?.tracingOptions
             });
             await refreshThreadList?.();
             return;
@@ -11491,6 +11701,7 @@ function MastraRuntimeProvider({
               requestContext: requestContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
+              tracingOptions: tracingSettings?.tracingOptions,
               onChunk: async (chunk) => {
                 if (chunk.type === "finish") {
                   await refreshThreadList?.();
@@ -11847,13 +12058,15 @@ const AgentChat = ({
   refreshThreadList,
   modelVersion,
   modelList,
-  messageId
+  messageId,
+  isNewThread
 }) => {
   const { settings } = useAgentSettings();
   const { requestContext } = usePlaygroundStore();
   const { data, isLoading: isMessagesLoading } = useAgentMessages({
     agentId,
-    threadId: threadId ?? "",
+    threadId: isNewThread ? void 0 : threadId,
+    // Prevent fetching when thread is new
     memory: memory ?? false
   });
   React.useEffect(() => {
@@ -12633,7 +12846,7 @@ function InputField({
             className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"),
             children: [
               label,
-              required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2", children: "(required)" })
+              required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2 text-xs", children: "(required)" })
             ]
           }
         ) }),
@@ -15750,7 +15963,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 +16697,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 +16706,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 +16972,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" }) });
@@ -18126,6 +18278,13 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
       value: span?.endedAt ? dateFns.format(new Date(span.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
     }
   ];
+  if (span?.attributes?.finishReason) {
+    baseInfo.push({
+      key: "finishReason",
+      label: "Finish Reason",
+      value: span.attributes.finishReason
+    });
+  }
   if (withSpanId) {
     baseInfo.unshift({
       key: "spanId",
@@ -18212,11 +18371,38 @@ const Tabs = Object.assign(TabsRoot, {
   Content: TabContent
 });
 
+function isTokenLimitExceeded(span) {
+  return span?.attributes?.finishReason === "length";
+}
+function getTokenLimitMessage(span) {
+  const usage = span?.attributes?.usage;
+  if (!usage) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.`;
+  }
+  const inputTokens = usage.inputTokens ?? 0;
+  const outputTokens = usage.outputTokens ?? 0;
+  const totalTokens = usage.totalTokens ?? inputTokens + outputTokens;
+  if (inputTokens > 0 || outputTokens > 0) {
+    return `The model stopped generating because it reached the maximum token limit. The response was truncated and may be incomplete.
+
+Token usage: ${inputTokens} input + ${outputTokens} output = ${totalTokens} total`;
+  }
+  return `The model stopped generating because it reached the maximum token limit (${totalTokens} tokens). The response was truncated and may be incomplete.`;
+}
+
 function SpanDetails({ span }) {
   if (!span) {
     return null;
   }
+  const tokenLimitExceeded = isTokenLimitExceeded(span);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tokenLimitExceeded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-yellow-900/20 border border-yellow-200 rounded-md p-2 mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "text-yellow-200 mt-0.5 flex-shrink-0", size: 20 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-yellow-200 mb-1 text-sm", children: "Token Limit Exceeded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-mastra-el-3 whitespace-pre-line", children: getTokenLimitMessage(span) })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SideDialog.CodeSection,
       {
@@ -19090,23 +19276,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 +19500,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.");
@@ -19539,6 +19729,138 @@ function MCPServerCombobox({
   );
 }
 
+const StudioConfigContext = React.createContext({
+  baseUrl: "",
+  headers: {},
+  isLoading: false,
+  setConfig: () => {
+  }
+});
+const useStudioConfig = () => {
+  return React.useContext(StudioConfigContext);
+};
+const LOCAL_STORAGE_KEY = "mastra-studio-config";
+const StudioConfigProvider = ({ children }) => {
+  const [config, setConfig] = React.useState({
+    baseUrl: "",
+    headers: {},
+    isLoading: true
+  });
+  React.useLayoutEffect(() => {
+    const storedConfig = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (storedConfig) {
+      const parsedConfig = JSON.parse(storedConfig);
+      if (typeof parsedConfig === "object" && parsedConfig !== null) {
+        return setConfig({ ...parsedConfig, isLoading: false });
+      }
+    }
+    return setConfig({ baseUrl: "", headers: {}, isLoading: false });
+  }, []);
+  const doSetConfig = (partialNewConfig) => {
+    setConfig((prev) => {
+      const nextConfig = { ...prev, ...partialNewConfig };
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(nextConfig));
+      return nextConfig;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(StudioConfigContext.Provider, { value: { ...config, setConfig: doSetConfig }, children });
+};
+
+const HeaderListForm = ({ headers, onAddHeader, onRemoveHeader }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h2", variant: "header-md", className: "text-icon6", children: "Headers" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface4 rounded-lg p-4 border-sm border-border2 space-y-4", children: [
+      headers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: headers.map((header, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderListFormItem, { index, header, onRemove: () => onRemoveHeader(index) }) }, index)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button$1,
+        {
+          type: "button",
+          variant: "light",
+          className: "w-full border-dashed !bg-surface4 !border-border2 hover:!bg-surface5",
+          size: "lg",
+          onClick: () => onAddHeader({ name: "", value: "" }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+            "Add Header"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const HeaderListFormItem = ({ index, header, onRemove }) => {
+  const nameId = React.useId();
+  const valueId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-4 items-end", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        id: nameId,
+        name: `headers.${index}.name`,
+        label: "Name",
+        placeholder: "e.g. Authorization",
+        required: true,
+        defaultValue: header.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        id: valueId,
+        name: `headers.${index}.value`,
+        label: "Value",
+        placeholder: "e.g. Bearer <token>",
+        required: true,
+        defaultValue: header.value
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button$1,
+      {
+        type: "button",
+        variant: "light",
+        className: "w-full !bg-surface4 !border-border2 hover:!bg-surface5",
+        size: "lg",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash, { "aria-label": "Remove header" }) })
+      }
+    )
+  ] });
+};
+
+const StudioConfigForm = ({ initialConfig }) => {
+  const { setConfig } = useStudioConfig();
+  const [headers, setHeaders] = React.useState(() => {
+    if (!initialConfig) return [];
+    return Object.entries(initialConfig.headers).map(([name, value]) => ({ name, value }));
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const formHeaders = {};
+    for (let i = 0; i < headers.length; i++) {
+      const headerName = formData.get(`headers.${i}.name`);
+      const headerValue = formData.get(`headers.${i}.value`);
+      formHeaders[headerName] = headerValue;
+    }
+    setConfig({ headers: formHeaders });
+    sonner.toast.success("Configuration saved");
+  };
+  const handleAddHeader = (header) => {
+    setHeaders((prev) => [...prev, header]);
+  };
+  const handleRemoveHeader = (index) => {
+    setHeaders((prev) => prev.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HeaderListForm, { headers, onAddHeader: handleAddHeader, onRemoveHeader: handleRemoveHeader }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { type: "submit", variant: "light", className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}) }),
+      "Set Configuration"
+    ] })
+  ] });
+};
+
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
   get: () => sonner.Toaster
@@ -19675,6 +19997,9 @@ exports.SlashIcon = SlashIcon;
 exports.SpanScoreList = SpanScoreList;
 exports.SpanScoring = SpanScoring;
 exports.SpanTabs = SpanTabs;
+exports.StudioConfigContext = StudioConfigContext;
+exports.StudioConfigForm = StudioConfigForm;
+exports.StudioConfigProvider = StudioConfigProvider;
 exports.Tab = Tab$1;
 exports.TabContent = TabContent$1;
 exports.TabList = TabList$1;
@@ -19715,6 +20040,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;
@@ -19777,11 +20104,13 @@ exports.useScorers = useScorers;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStreamWorkflow = useStreamWorkflow;
+exports.useStudioConfig = useStudioConfig;
 exports.useThreadInput = useThreadInput;
 exports.useThreads = useThreads;
 exports.useTool = useTool;
 exports.useTools = useTools;
 exports.useTraceSpanScores = useTraceSpanScores;
+exports.useTracingSettings = useTracingSettings;
 exports.useUpdateAgentModel = useUpdateAgentModel;
 exports.useUpdateModelInModelList = useUpdateModelInModelList;
 exports.useWorkflow = useWorkflow;