@mastra/playground-ui 7.0.0-beta.11 → 7.0.0-beta.13

package/dist/index.es.js

@@ -32,6 +32,7 @@ import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { EditorView } from '@codemirror/view';
+import { javascript } from '@codemirror/lang-javascript';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { format, isValid, formatDate, isToday } from 'date-fns';
 import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
@@ -4645,7 +4646,8 @@ const ToolBadge = ({
   metadata,
   toolOutput,
   toolCallId,
-  toolApprovalMetadata
+  toolApprovalMetadata,
+  suspendPayload
 }) => {
   let argSlot = null;
   try {
@@ -4655,6 +4657,7 @@ const ToolBadge = ({
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: args });
   }
   let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, "data-testid": "tool-result" });
+  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   const toolCalled = result || toolOutput.length > 0;
@@ -4671,12 +4674,16 @@ const ToolBadge = ({
           input: agentNetworkInput
         }
       ),
-      initialCollapsed: !!!toolApprovalMetadata,
+      initialCollapsed: !!!(toolApprovalMetadata ?? suspendPayload),
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
           argSlot
         ] }),
+        suspendPayloadSlot !== void 0 && suspendPayload && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool suspend payload" }),
+          suspendPayloadSlot
+        ] }),
         resultSlot !== void 0 && result && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
           resultSlot
@@ -4993,7 +5000,8 @@ const useExecuteWorkflow = () => {
           requestContext.set(key, value);
         });
         const workflow = client.getWorkflow(workflowId);
-        await workflow.start({ runId, inputData: input || {}, requestContext });
+        const run = await workflow.createRun({ runId });
+        await run.start({ inputData: input || {}, requestContext });
       } catch (error) {
         console.error("Error starting workflow run:", error);
         throw error;
@@ -5013,7 +5021,8 @@ const useExecuteWorkflow = () => {
           requestContext.set(key, value);
         });
         const workflow = client.getWorkflow(workflowId);
-        const result = await workflow.startAsync({ runId, inputData: input || {}, requestContext });
+        const run = await workflow.createRun({ runId });
+        const result = await run.startAsync({ inputData: input || {}, requestContext });
         return result;
       } catch (error) {
         console.error("Error starting workflow run:", error);
@@ -5106,8 +5115,8 @@ const useStreamWorkflow = () => {
         requestContext.set(key, value);
       });
       const workflow = client.getWorkflow(workflowId);
-      const stream = await workflow.streamVNext({
-        runId,
+      const run = await workflow.createRun({ runId });
+      const stream = await run.streamVNext({
         inputData,
         requestContext,
         closeOnSuspend: true,
@@ -5169,7 +5178,8 @@ const useStreamWorkflow = () => {
         return;
       }
       const workflow = client.getWorkflow(workflowId);
-      const stream = await workflow.observeStreamVNext({ runId });
+      const run = await workflow.createRun({ runId });
+      const stream = await run.observeStreamVNext();
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
       }
@@ -5227,8 +5237,8 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext.set(key, value);
       });
-      const stream = await workflow.resumeStreamVNext({
-        runId,
+      const run = await workflow.createRun({ runId });
+      const stream = await run.resumeStreamVNext({
         step,
         resumeData,
         requestContext,
@@ -5277,6 +5287,7 @@ const useStreamWorkflow = () => {
     mutationFn: async ({
       workflowId,
       requestContext: playgroundRequestContext,
+      runId,
       ...params
     }) => {
       if (timeTravelStreamRef.current) {
@@ -5289,7 +5300,8 @@ const useStreamWorkflow = () => {
       Object.entries(playgroundRequestContext).forEach(([key, value]) => {
         requestContext.set(key, value);
       });
-      const stream = await workflow.timeTravelStream({
+      const run = await workflow.createRun({ runId });
+      const stream = await run.timeTravelStream({
         ...params,
         requestContext,
         tracingOptions: settings?.tracingOptions
@@ -5380,7 +5392,9 @@ const useCancelWorkflowRun = () => {
   const cancelWorkflowRun = useMutation({
     mutationFn: async ({ workflowId, runId }) => {
       try {
-        const response = await client.getWorkflow(workflowId).cancelRun(runId);
+        const workflow = client.getWorkflow(workflowId);
+        const run = await workflow.createRun({ runId });
+        const response = await run.cancelRun();
         return response;
       } catch (error) {
         console.error("Error canceling workflow run:", error);
@@ -5474,6 +5488,58 @@ const useDeleteWorkflowRun = (workflowId) => {
   });
 };
 
+const WorkflowStepDetailContext = createContext(null);
+function useWorkflowStepDetail() {
+  const context = useContext(WorkflowStepDetailContext);
+  if (!context) {
+    throw new Error("useWorkflowStepDetail must be used within WorkflowStepDetailProvider");
+  }
+  return context;
+}
+function WorkflowStepDetailProvider({ children }) {
+  const [stepDetail, setStepDetail] = useState(null);
+  const showMapConfig = useCallback(
+    ({ stepName, stepId, mapConfig }) => {
+      setStepDetail({
+        type: "map-config",
+        stepName,
+        stepId,
+        mapConfig
+      });
+    },
+    []
+  );
+  const showNestedGraph = useCallback(
+    ({ label, stepGraph, fullStep }) => {
+      setStepDetail({
+        type: "nested-graph",
+        stepName: label,
+        nestedGraph: {
+          label,
+          stepGraph,
+          fullStep
+        }
+      });
+    },
+    []
+  );
+  const closeStepDetail = useCallback(() => {
+    setStepDetail(null);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    WorkflowStepDetailContext.Provider,
+    {
+      value: {
+        stepDetail,
+        showMapConfig,
+        showNestedGraph,
+        closeStepDetail
+      },
+      children
+    }
+  );
+}
+
 const WorkflowRunContext = createContext({});
 function WorkflowRunProvider({
   children,
@@ -5575,7 +5641,7 @@ function WorkflowRunProvider({
         isLoadingRunExecutionResult,
         withoutTimeTravel
       },
-      children
+      children: /* @__PURE__ */ jsx(WorkflowStepDetailProvider, { children })
     }
   );
 }
@@ -6234,26 +6300,46 @@ const SyntaxHighlighter$1 = ({ data }) => {
   return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
 };
 
-const CodeDialogContent = ({ data }) => {
+const CodeDialogContent = ({
+  data,
+  language = "auto"
+}) => {
   const theme = useCodemirrorTheme$1();
+  const getExtensions = (content) => {
+    if (language === "javascript") {
+      return [javascript(), EditorView.lineWrapping];
+    }
+    if (language === "json") {
+      return [jsonLanguage, EditorView.lineWrapping];
+    }
+    try {
+      JSON.parse(content);
+      return [jsonLanguage, EditorView.lineWrapping];
+    } catch {
+      if (content.includes("=>") || content.includes("function") || content.includes("const ") || content.includes("return ")) {
+        return [javascript(), EditorView.lineWrapping];
+      }
+      return [EditorView.lineWrapping];
+    }
+  };
   if (typeof data !== "string") {
+    const content = JSON.stringify(data, null, 2);
     return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(data, null, 2), theme, extensions: [jsonLanguage] }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: content, theme, extensions: [jsonLanguage, EditorView.lineWrapping] }) })
     ] });
   }
+  const extensions = getExtensions(data);
+  let displayContent = data;
   try {
     const json = JSON.parse(data);
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(json, null, 2), theme, extensions: [jsonLanguage] }) })
-    ] });
-  } catch (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [] }) })
-    ] });
+    displayContent = JSON.stringify(json, null, 2);
+  } catch {
   }
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: displayContent, theme, extensions }) })
+  ] });
 };
 
 const Form = React__default.forwardRef(({ children, ...props }, ref) => {
@@ -7767,9 +7853,9 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
       const parsedResume = resumeData.trim() ? JSON.parse(resumeData) : {};
       const parsedContext = contextValue.trim() ? JSON.parse(contextValue) : {};
       const parsedNestedContext = nestedContextValue.trim() ? JSON.parse(nestedContextValue) : {};
-      const { runId } = await createWorkflowRun({ workflowId, prevRunId });
+      const run = await createWorkflowRun({ workflowId, prevRunId });
       const payload = {
-        runId,
+        runId: run.runId,
         workflowId,
         step: stepKey,
         inputData: data,
@@ -7881,12 +7967,29 @@ const WorkflowStepActionBar = ({
   const [isResumeDataOpen, setIsResumeDataOpen] = useState(false);
   const [isErrorOpen, setIsErrorOpen] = useState(false);
   const [isTripwireOpen, setIsTripwireOpen] = useState(false);
-  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
   const [isTimeTravelOpen, setIsTimeTravelOpen] = useState(false);
   const { withoutTimeTravel } = useContext(WorkflowRunContext);
+  const { showMapConfig, stepDetail, closeStepDetail } = useWorkflowStepDetail();
   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 && !mapConfig;
+  const isMapConfigOpen = stepDetail?.type === "map-config" && stepDetail?.stepName === stepName;
+  const isNestedGraphOpen = stepDetail?.type === "nested-graph" && stepDetail?.stepName === stepName;
+  const activeButtonClass = "ring-2 ring-accent1 ring-offset-1 ring-offset-transparent";
+  const handleMapConfigClick = () => {
+    if (isMapConfigOpen) {
+      closeStepDetail();
+    } else {
+      showMapConfig({ stepName, stepId, mapConfig });
+    }
+  };
+  const handleNestedGraphClick = () => {
+    if (isNestedGraphOpen) {
+      closeStepDetail();
+    } else {
+      onShowNestedGraph?.();
+    }
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || tripwire || mapConfig || resumeData || onShowNestedGraph || showTimeTravel) && /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7900,7 +8003,7 @@ const WorkflowStepActionBar = ({
         status === "running" && "bg-accent6Dark"
       ),
       children: [
-        onShowNestedGraph && /* @__PURE__ */ jsx(Button$1, { onClick: onShowNestedGraph, children: "View nested graph" }),
+        onShowNestedGraph && /* @__PURE__ */ jsx(Button$1, { onClick: handleNestedGraphClick, className: cn(isNestedGraphOpen && activeButtonClass), children: "View nested graph" }),
         showTimeTravel && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsTimeTravelOpen(true), children: "Time travel" }),
           /* @__PURE__ */ jsx(Dialog, { open: isTimeTravelOpen, onOpenChange: setIsTimeTravelOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7911,19 +8014,7 @@ const WorkflowStepActionBar = ({
             /* @__PURE__ */ jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsx(WorkflowTimeTravelForm, { stepKey, closeModal: () => setIsTimeTravelOpen(false) }) })
           ] }) })
         ] }),
-        mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
-          /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-            /* @__PURE__ */ jsx(DialogTitle, { className: dialogTitleClass, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                stepName,
-                " Map Config"
-              ] }),
-              stepId && stepId !== stepName && /* @__PURE__ */ jsx("div", { className: "text-xs text-icon3 font-normal", children: stepId })
-            ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
-          ] }) })
-        ] }),
+        mapConfig && /* @__PURE__ */ jsx(Button$1, { onClick: handleMapConfigClick, className: cn(isMapConfigOpen && activeButtonClass), children: "Map config" }),
         input && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsInputOpen(true), children: "Input" }),
           /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -8065,7 +8156,7 @@ function WorkflowConditionNode({ data }) {
                       "pre",
                       {
                         className: cn(
-                          "relative font-mono p-3 w-full cursor-pointer rounded-lg text-xs !bg-surface4 overflow-scroll",
+                          "relative font-mono p-3 w-full cursor-pointer rounded-lg text-xs !bg-surface4 whitespace-pre-wrap break-words",
                           className,
                           previousDisplayStatus === "success" && nextStep && "!bg-accent1Dark",
                           previousDisplayStatus === "failed" && nextStep && "!bg-accent2Dark",
@@ -8318,172 +8409,29 @@ function WorkflowLoopResultNode({ data }) {
   );
 }
 
-function Spinner({ color = "#fff", className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: clsx("animate-spin duration-700", className),
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
-    }
-  );
-}
-
-const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-const ZoomSlider = forwardRef(({ className, ...props }) => {
-  const { zoom } = useViewport();
-  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
-  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        className: "w-[140px]",
-        value: [zoom],
-        min: 0.01,
-        max: 1,
-        step: 0.01,
-        onValueChange: (values) => {
-          zoomTo(values[0]);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
-      (100 * zoom).toFixed(0),
-      "%"
-    ] }),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" }) })
-  ] });
-});
-ZoomSlider.displayName = "ZoomSlider";
-
-function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
-  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
-    stepGraph
-  });
-  const [isMounted, setIsMounted] = useState(false);
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-  const [edges] = useEdgesState(initialEdges);
-  const { steps } = useCurrentRun();
-  const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
-  };
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setIsMounted(true);
-      }, 500);
-    }
-  }, [open]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges: edges.map((e) => ({
-        ...e,
-        style: {
-          ...e.style,
-          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : e.data?.conditionNode && !steps[`${workflowName}.${e.data?.previousStepId}`] && Boolean(steps[`${workflowName}.${e.data?.nextStepId}`]?.status) ? "#22c55e" : void 0
-        }
-      })),
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 1
-      },
-      minZoom: 0.01,
-      maxZoom: 1,
-      nodeTypes,
-      onNodesChange,
-      children: [
-        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
-}
-
 const WorkflowNestedGraphContext = createContext(
   {}
 );
 function WorkflowNestedGraphProvider({ children }) {
-  const [stepGraph, setStepGraph] = useState(null);
-  const [parentStepGraphList, setParentStepGraphList] = useState([]);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [label, setLabel] = useState("");
-  const [fullStep, setFullStep] = useState("");
-  const closeNestedGraph = () => {
-    if (parentStepGraphList.length) {
-      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
-      setStepGraph(lastStepGraph.stepGraph);
-      setLabel(lastStepGraph.label);
-      setFullStep(lastStepGraph.fullStep);
-      setParentStepGraphList(parentStepGraphList.slice(0, -1));
-    } else {
-      setOpenDialog(false);
-      setStepGraph(null);
-      setLabel("");
-      setFullStep("");
-    }
-  };
+  const { showNestedGraph: showNestedGraphInPanel, closeStepDetail } = useWorkflowStepDetail();
   const showNestedGraph = ({
-    label: newLabel,
-    stepGraph: newStepGraph,
-    fullStep: newFullStep
+    label,
+    stepGraph,
+    fullStep
   }) => {
-    if (stepGraph) {
-      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
-    }
-    setLabel(newLabel);
-    setFullStep(newFullStep);
-    setStepGraph(newStepGraph);
-    setOpenDialog(true);
+    showNestedGraphInPanel({ label, stepGraph, fullStep });
   };
-  return /* @__PURE__ */ jsxs(
+  const closeNestedGraph = () => {
+    closeStepDetail();
+  };
+  return /* @__PURE__ */ jsx(
     WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
         closeNestedGraph
       },
-      children: [
-        children,
-        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
-          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-3 left-3 z-50", children: [
-            /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
-            /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
-              label,
-              " workflow"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
-        ] }) }) }, `${label}-${fullStep}`)
-      ]
+      children
     }
   );
 }
@@ -8582,6 +8530,48 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
   ] });
 }
 
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+const ZoomSlider = forwardRef(({ className, ...props }) => {
+  const { zoom } = useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        className: "w-[140px]",
+        value: [zoom],
+        min: 0.01,
+        max: 1,
+        step: 0.01,
+        onValueChange: (values) => {
+          zoomTo(values[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" }) })
+  ] });
+});
+ZoomSlider.displayName = "ZoomSlider";
+
 function WorkflowGraphInner({ workflow }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
@@ -8790,11 +8780,11 @@ function WorkflowTrigger({
       setIsRunning(true);
       setCancelResponse(null);
       setResult(null);
-      const { runId } = await createWorkflowRun({ workflowId });
-      setRunId?.(runId);
-      setInnerRunId(runId);
-      setContextRunId(runId);
-      streamWorkflow({ workflowId, runId, inputData: data, requestContext });
+      const run = await createWorkflowRun({ workflowId });
+      setRunId?.(run.runId);
+      setInnerRunId(run.runId);
+      setContextRunId(run.runId);
+      streamWorkflow({ workflowId, runId: run.runId, inputData: data, requestContext });
     } catch (err) {
       setIsRunning(false);
       toast$1.error("Error executing workflow");
@@ -8804,10 +8794,10 @@ function WorkflowTrigger({
     if (!workflow) return;
     setCancelResponse(null);
     const { stepId, runId: prevRunId, resumeData } = step;
-    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
+    const run = await createWorkflowRun({ workflowId, prevRunId });
     await resumeWorkflow({
       step: stepId,
-      runId,
+      runId: run.runId,
       resumeData,
       workflowId,
       requestContext
@@ -8851,7 +8841,7 @@ function WorkflowTrigger({
   const workflowActivePaths = streamResultToUse?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   const doneStatuses = ["success", "failed", "canceled", "tripwire"];
-  return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12 overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 overflow-y-auto", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
       isSuspendedSteps && isStreamingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
@@ -8934,12 +8924,16 @@ function WorkflowTrigger({
             const { status } = step;
             let output = void 0;
             let suspendOutput = void 0;
+            let error = void 0;
             if (step.status === "suspended") {
               suspendOutput = step.suspendOutput;
             }
             if (step.status === "success") {
               output = step.output;
             }
+            if (step.status === "failed") {
+              error = step.error;
+            }
             const tripwireInfo = step.status === "failed" && step.tripwire ? step.tripwire : streamResultToUse?.status === "tripwire" ? {
               reason: streamResultToUse?.tripwire?.reason,
               retry: streamResultToUse?.tripwire?.retry,
@@ -8952,7 +8946,7 @@ function WorkflowTrigger({
               {
                 stepId,
                 status: displayStatus,
-                result: output ?? suspendOutput ?? {},
+                result: output ?? suspendOutput ?? error ?? {},
                 tripwire: tripwireInfo
               },
               stepId
@@ -9521,14 +9515,28 @@ const PlaygroundTabs = ({
 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(
+const Tab$1 = ({ children, value, onClick, onClose }) => {
+  return /* @__PURE__ */ jsxs(
     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",
+      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 flex items-center gap-1.5",
       onClick,
-      children
+      children: [
+        children,
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: "p-0.5 hover:bg-surface3 rounded transition-colors",
+            "aria-label": "Close tab",
+            children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+          }
+        )
+      ]
     }
   );
 };
@@ -9556,20 +9564,127 @@ const TracingRunOptions = () => {
     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"
-      }
-    )
+  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 Spinner({ color = "#fff", className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: clsx("animate-spin duration-700", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+    }
+  );
+}
+
+function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
+  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
+    stepGraph
+  });
+  const [isMounted, setIsMounted] = useState(false);
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
+  const nodeTypes = {
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
+    "condition-node": WorkflowConditionNode,
+    "after-node": WorkflowAfterNode,
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
+  };
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        setIsMounted(true);
+      }, 500);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : e.data?.conditionNode && !steps[`${workflowName}.${e.data?.previousStepId}`] && Boolean(steps[`${workflowName}.${e.data?.nextStepId}`]?.status) ? "#22c55e" : void 0
+        }
+      })),
+      fitView: true,
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      minZoom: 0.01,
+      maxZoom: 1,
+      nodeTypes,
+      onNodesChange,
+      children: [
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
+        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
+}
+
+function WorkflowStepDetailContent() {
+  const { stepDetail, closeStepDetail } = useWorkflowStepDetail();
+  if (!stepDetail) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b-sm border-border1 bg-surface1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        stepDetail.type === "map-config" && /* @__PURE__ */ jsx(List, { className: "w-4 h-4", style: { color: BADGE_COLORS.map } }),
+        stepDetail.type === "nested-graph" && /* @__PURE__ */ jsx(WorkflowIcon, { className: "w-4 h-4", style: { color: BADGE_COLORS.workflow } }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 font-medium", children: stepDetail.type === "map-config" ? `${stepDetail.stepName} Config` : `${stepDetail.stepName} Workflow` }),
+          stepDetail.type === "map-config" && stepDetail.stepId && stepDetail.stepId !== stepDetail.stepName && /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: stepDetail.stepId })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: closeStepDetail,
+          className: "p-1 hover:bg-surface3 rounded transition-colors",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-icon3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto", children: [
+      stepDetail.type === "map-config" && stepDetail.mapConfig && /* @__PURE__ */ jsx(CodeDialogContent, { data: stepDetail.mapConfig }),
+      stepDetail.type === "nested-graph" && stepDetail.nestedGraph && /* @__PURE__ */ jsx("div", { className: "h-full min-h-[400px]", children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+        WorkflowNestedGraph,
+        {
+          stepGraph: stepDetail.nestedGraph.stepGraph,
+          open: true,
+          workflowName: stepDetail.nestedGraph.fullStep
+        }
+      ) }) })
+    ] })
   ] });
-};
+}
 
 function WorkflowInformation({ workflowId, initialRunId }) {
   const { data: workflow, isLoading, error } = useWorkflow(workflowId);
@@ -9584,10 +9699,21 @@ function WorkflowInformation({ workflowId, initialRunId }) {
     cancelWorkflowRun,
     isCancellingWorkflowRun
   } = useContext(WorkflowRunContext);
+  const { stepDetail, closeStepDetail } = useWorkflowStepDetail();
   const [tab, setTab] = useState("current-run");
   const [runId, setRunId] = useState("");
   const { handleCopy } = useCopyToClipboard({ text: workflowId });
   const stepsCount = Object.keys(workflow?.steps ?? {}).length;
+  const nodeDetailTabName = useMemo(() => {
+    if (!stepDetail) return null;
+    if (stepDetail.type === "map-config") {
+      return "Map Config";
+    }
+    if (stepDetail.type === "nested-graph") {
+      return "Nested Workflow";
+    }
+    return "Node";
+  }, [stepDetail]);
   useEffect(() => {
     if (!runId && !initialRunId) {
       closeStreamsAndReset();
@@ -9599,6 +9725,19 @@ function WorkflowInformation({ workflowId, initialRunId }) {
       toast.error(`Error loading workflow: ${errorMessage}`);
     }
   }, [error]);
+  useEffect(() => {
+    if (stepDetail) {
+      setTab("node-details");
+    } else if (tab === "node-details") {
+      setTab("current-run");
+    }
+  }, [stepDetail]);
+  const handleTabChange = (newTab) => {
+    if (tab === "node-details" && newTab !== "node-details") {
+      closeStepDetail();
+    }
+    setTab(newTab);
+  };
   if (error) {
     return null;
   }
@@ -9615,10 +9754,24 @@ function WorkflowInformation({ workflowId, initialRunId }) {
       ] }),
       workflow?.isProcessorWorkflow && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Cpu, { className: "h-3 w-3" }), className: "bg-violet-500/20 text-violet-400", children: "Processor" })
     ] }) }),
-    /* @__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__ */ jsx("div", { className: "flex-1 overflow-auto border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "current-run", value: tab, onValueChange: handleTabChange, className: "h-full", 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(Tab$1, { value: "run-options", children: "Run Options" }),
+        stepDetail && nodeDetailTabName && /* @__PURE__ */ jsxs(
+          Tab$1,
+          {
+            value: "node-details",
+            onClose: () => {
+              closeStepDetail();
+              setTab("current-run");
+            },
+            children: [
+              nodeDetailTabName,
+              " Details"
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(TabContent$1, { value: "current-run", children: workflowId ? initialRunId ? /* @__PURE__ */ jsx(
         WorkflowRunDetail,
@@ -9653,7 +9806,8 @@ function WorkflowInformation({ workflowId, initialRunId }) {
           cancelWorkflowRun
         }
       ) : null }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "run-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
+      /* @__PURE__ */ jsx(TabContent$1, { value: "run-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) }),
+      stepDetail && /* @__PURE__ */ jsx(TabContent$1, { value: "node-details", children: /* @__PURE__ */ jsx(WorkflowStepDetailContent, {}) })
     ] }) })
   ] });
 }
@@ -9885,7 +10039,8 @@ const WorkflowBadge = ({
   isStreaming,
   metadata,
   toolCallId,
-  toolApprovalMetadata
+  toolApprovalMetadata,
+  suspendPayload
 }) => {
   const { runId, status } = result || {};
   const { data: workflow, isLoading: isWorkflowLoading } = useWorkflow(workflowId);
@@ -9897,6 +10052,7 @@ const WorkflowBadge = ({
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
+  let suspendPayloadSlot = typeof suspendPayload === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre bg-surface4 p-4 rounded-md overflow-x-auto", children: suspendPayload }) : /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: suspendPayload, "data-testid": "tool-suspend-payload" });
   if (isWorkflowLoading || !workflow) return /* @__PURE__ */ jsx(LoadingBadge, {});
   return /* @__PURE__ */ jsxs(
     BadgeWrapper,
@@ -9913,6 +10069,10 @@ const WorkflowBadge = ({
         }
       ),
       children: [
+        suspendPayloadSlot !== void 0 && suspendPayload && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool suspend payload" }),
+          suspendPayloadSlot
+        ] }),
         !isStreaming && !isLoading && /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot, workflowId, initialRunId: runId, withoutTimeTravel: true, children: /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
         isStreaming && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }),
         /* @__PURE__ */ jsx(ToolApprovalButtons, { toolCalled: !!status, toolCallId, toolApprovalMetadata })
@@ -10048,7 +10208,9 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...pr
   const agentToolName = toolName.startsWith("agent-") ? toolName.substring("agent-".length) : toolName;
   const workflowToolName = toolName.startsWith("workflow-") ? toolName.substring("workflow-".length) : toolName;
   const requireApprovalMetadata = metadata?.mode === "stream" && metadata?.requireApprovalMetadata;
-  const toolApprovalMetadata = requireApprovalMetadata ? requireApprovalMetadata?.[toolCallId] : void 0;
+  const suspendedTools = metadata?.mode === "stream" && metadata?.suspendedTools;
+  const toolApprovalMetadata = requireApprovalMetadata ? requireApprovalMetadata?.[toolName] ?? requireApprovalMetadata?.[toolCallId] : void 0;
+  const suspendedToolMetadata = suspendedTools ? suspendedTools?.[toolName] : void 0;
   useWorkflowStream(result);
   if (isAgent) {
     return /* @__PURE__ */ jsx(
@@ -10072,7 +10234,8 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...pr
         result,
         metadata,
         toolCallId,
-        toolApprovalMetadata
+        toolApprovalMetadata,
+        suspendPayload: suspendedToolMetadata?.suspendPayload
       }
     );
   }
@@ -10085,7 +10248,8 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...pr
       toolOutput: result?.toolOutput || [],
       metadata,
       toolCallId,
-      toolApprovalMetadata
+      toolApprovalMetadata,
+      suspendPayload: suspendedToolMetadata?.suspendPayload
     }
   );
 };
@@ -11166,25 +11330,36 @@ const ThreadWelcome = ({ agentName }) => {
 };
 const Composer = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
+  const textareaRef = useRef(null);
   return /* @__PURE__ */ jsx("div", { className: "mx-4", children: /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
     /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2", children: [
-      /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
-          autoFocus: document.activeElement === document.body,
-          placeholder: "Enter your message...",
-          name: "",
-          id: "",
-          onChange: (e) => setThreadInput?.(e.target.value)
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(SpeechInput, { agentId }),
-        /* @__PURE__ */ jsx(ComposerAction, {})
-      ] })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2",
+        onClick: () => {
+          textareaRef.current?.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
+              autoFocus: document.activeElement === document.body,
+              placeholder: "Enter your message...",
+              name: "",
+              id: "",
+              onChange: (e) => setThreadInput?.(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(SpeechInput, { agentId }),
+            /* @__PURE__ */ jsx(ComposerAction, {})
+          ] })
+        ]
+      }
+    )
   ] }) });
 };
 const SpeechInput = ({ agentId }) => {
@@ -11522,34 +11697,33 @@ function useAgentSettingsState({ agentId, defaultSettings: defaultSettingsProp }
   useEffect(() => {
     try {
       const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        const settings2 = {
-          ...parsed,
-          modelSettings: {
-            ...defaultSettingsProp?.modelSettings ?? {},
-            ...parsed?.modelSettings ?? {}
-          }
-        };
-        setSettingsState(settings2 ?? void 0);
-      }
+      const parsed = stored ? JSON.parse(stored) : {};
+      const mergedSettings = {
+        ...parsed,
+        modelSettings: {
+          ...defaultSettings.modelSettings,
+          ...parsed?.modelSettings ?? {},
+          ...defaultSettingsProp?.modelSettings ?? {}
+          // Code defaults win
+        }
+      };
+      setSettingsState(mergedSettings);
     } catch (e) {
-      console.error(e);
     }
-  }, [LOCAL_STORAGE_KEY]);
+  }, [LOCAL_STORAGE_KEY, defaultSettingsProp]);
   const setSettings = (settingsValue) => {
     setSettingsState((prev) => ({ ...prev, ...settingsValue }));
     localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ ...settingsValue, agentId }));
   };
   const resetAll = () => {
-    const settings2 = {
+    const resetSettings = {
       modelSettings: {
-        ...defaultSettingsProp?.modelSettings ?? {},
-        ...defaultSettings.modelSettings
+        ...defaultSettings.modelSettings,
+        ...defaultSettingsProp?.modelSettings ?? {}
       }
     };
-    setSettingsState(settings2);
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(settings2));
+    setSettingsState(resetSettings);
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
   };
   return {
     settings,
@@ -11700,18 +11874,19 @@ const initializeMessageState = (initialMessages) => {
           };
         } else if (part.toolInvocation.state === "call") {
           const toolCallId = part.toolInvocation.toolCallId;
+          const toolName = part.toolInvocation.toolName;
           const pendingToolApprovals = message.metadata?.pendingToolApprovals;
           const suspensionData = pendingToolApprovals?.[toolCallId];
           if (suspensionData) {
             return {
               type: "tool-call",
               toolCallId,
-              toolName: part.toolInvocation.toolName,
+              toolName,
               args: part.toolInvocation.args,
               metadata: {
                 mode: "stream",
                 requireApprovalMetadata: {
-                  [toolCallId]: suspensionData
+                  [toolName]: suspensionData
                 }
               }
             };
@@ -11781,6 +11956,7 @@ function MastraRuntimeProvider({
     temperature,
     topK,
     topP,
+    seed,
     chatWithGenerateLegacy,
     chatWithGenerate,
     chatWithNetwork,
@@ -11799,7 +11975,9 @@ function MastraRuntimeProvider({
     temperature,
     topK,
     topP,
-    maxTokens,
+    seed,
+    maxOutputTokens: maxTokens,
+    // AI SDK v5 uses maxOutputTokens
     instructions,
     providerOptions,
     maxSteps,
@@ -11898,6 +12076,7 @@ function MastraRuntimeProvider({
             temperature,
             topK,
             topP,
+            seed,
             instructions,
             requestContext: requestContextInstance,
             ...memory ? { threadId, resourceId: agentId } : {},
@@ -12014,6 +12193,7 @@ function MastraRuntimeProvider({
             temperature,
             topK,
             topP,
+            seed,
             instructions,
             requestContext: requestContextInstance,
             ...memory ? { threadId, resourceId: agentId } : {},
@@ -12334,54 +12514,60 @@ const AgentAdvancedSettings = () => {
     ] }),
     /* @__PURE__ */ jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
         /* @__PURE__ */ jsx(
           Input,
           {
-            id: "top-k",
+            id: "frequency-penalty",
             type: "number",
-            value: settings?.modelSettings?.topK || "",
+            step: "0.1",
+            min: "-1",
+            max: "1",
+            value: settings?.modelSettings?.frequencyPenalty ?? "",
             onChange: (e) => setSettings({
               ...settings,
               modelSettings: {
                 ...settings?.modelSettings,
-                topK: e.target.value ? Number(e.target.value) : void 0
+                frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
               }
             })
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
         /* @__PURE__ */ jsx(
           Input,
           {
-            id: "frequency-penalty",
+            id: "presence-penalty",
             type: "number",
-            value: settings?.modelSettings?.frequencyPenalty || "",
+            step: "0.1",
+            min: "-1",
+            max: "1",
+            value: settings?.modelSettings?.presencePenalty ?? "",
             onChange: (e) => setSettings({
               ...settings,
               modelSettings: {
                 ...settings?.modelSettings,
-                frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+                presencePenalty: e.target.value ? Number(e.target.value) : void 0
               }
             })
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
         /* @__PURE__ */ jsx(
           Input,
           {
-            id: "presence-penalty",
+            id: "top-k",
             type: "number",
-            value: settings?.modelSettings?.presencePenalty || "",
+            value: settings?.modelSettings?.topK || "",
             onChange: (e) => setSettings({
               ...settings,
               modelSettings: {
                 ...settings?.modelSettings,
-                presencePenalty: e.target.value ? Number(e.target.value) : void 0
+                topK: e.target.value ? Number(e.target.value) : void 0
               }
             })
           }
@@ -12441,6 +12627,24 @@ const AgentAdvancedSettings = () => {
           }
         )
       ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "seed", children: "Seed" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "seed",
+            type: "number",
+            value: settings?.modelSettings?.seed || "",
+            onChange: (e) => setSettings({
+              ...settings,
+              modelSettings: {
+                ...settings?.modelSettings,
+                seed: e.target.value ? Number(e.target.value) : void 0
+              }
+            })
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1 col-span-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
           /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "provider-options", children: "Provider Options" }),
@@ -15452,6 +15656,7 @@ const AgentMetadataModelList = ({
 }) => {
   const [modelConfigs, setModelConfigs] = useState(() => modelList);
   const hasMultipleModels = modelConfigs.length > 1;
+  const enabledCount = modelConfigs.filter((m) => m.enabled !== false).length;
   const handleDragEnd = (result) => {
     if (!result.destination) {
       return;
@@ -15486,7 +15691,8 @@ const AgentMetadataModelList = ({
         modelConfig,
         updateModelInModelList: updateModel,
         showDragHandle: hasMultipleModels,
-        dragHandleProps: provided2.dragHandleProps
+        dragHandleProps: provided2.dragHandleProps,
+        isLastEnabled: modelConfig.enabled !== false && enabledCount === 1
       }
     ) }) }, modelConfig.id)),
     provided.placeholder
@@ -15496,7 +15702,8 @@ const AgentMetadataModelListItem = ({
   modelConfig,
   updateModelInModelList,
   showDragHandle,
-  dragHandleProps
+  dragHandleProps,
+  isLastEnabled
 }) => {
   const [enabled, setEnabled] = useState(() => modelConfig.enabled);
   return /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-background hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
@@ -15510,7 +15717,10 @@ const AgentMetadataModelListItem = ({
         autoSave: true
       }
     ) }),
-    /* @__PURE__ */ jsx(
+    isLastEnabled ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(Switch, { checked: enabled, disabled: true, className: "pointer-events-none" }) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "At least one model must be enabled" }) })
+    ] }) }) : /* @__PURE__ */ jsx(
       Switch,
       {
         checked: enabled,
@@ -15528,7 +15738,14 @@ function usePromptEnhancer({ agentId }) {
   const client = useMastraClient();
   return useMutation({
     mutationFn: async ({ instructions, userComment }) => {
-      return await client.getAgent(agentId).enhanceInstructions(instructions, userComment);
+      try {
+        return await client.getAgent(agentId).enhanceInstructions(instructions, userComment);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Error enhancing prompt";
+        toast.error(errorMessage);
+        console.error("Error enhancing prompt:", error);
+        throw error;
+      }
     }
   });
 }
@@ -15571,21 +15788,53 @@ const PromptEnhancer = ({ agentId }) => {
 const PromptEnhancerTextarea = ({ agentId }) => {
   const { prompt, setPrompt } = useAgentPromptExperiment();
   const { mutateAsync: enhancePrompt, isPending } = usePromptEnhancer({ agentId });
+  const { data: agent, isLoading: isAgentLoading, isError: isAgentError } = useAgent(agentId);
+  const { data: providersData, isLoading: isProvidersLoading } = useAgentsModelProviders();
+  const providers = providersData?.providers || [];
+  const isProviderConnected = (providerId) => {
+    const cleanId = cleanProviderId(providerId);
+    const provider = providers.find((p) => cleanProviderId(p.id) === cleanId);
+    return provider?.connected === true;
+  };
+  const hasConnectedModel = () => {
+    if (agent?.modelList && agent.modelList.length > 0) {
+      return agent.modelList.some((m) => m.enabled !== false && isProviderConnected(m.model.provider));
+    }
+    return agent?.provider ? isProviderConnected(agent.provider) : false;
+  };
+  const isDataLoading = isAgentLoading || isProvidersLoading;
+  const hasValidModel = !isDataLoading && !isAgentError && hasConnectedModel();
   const handleSubmit = async (e) => {
     e.preventDefault();
     const form = e.target;
     const formData = new FormData(form);
     const userComment = formData.get("userComment");
-    const result = await enhancePrompt({ instructions: prompt, userComment });
-    form.reset();
-    setPrompt(result.new_prompt);
+    try {
+      const result = await enhancePrompt({ instructions: prompt, userComment });
+      form.reset();
+      setPrompt(result.new_prompt);
+    } catch {
+    }
   };
+  const isDisabled = isPending || !hasValidModel;
+  const showWarning = !isDataLoading && !hasValidModel;
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(Input, { name: "userComment", placeholder: "Enter your comment here...", className: "resize-none", disabled: isPending }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(Button$1, { variant: "light", type: "submit", disabled: isPending, children: [
-      /* @__PURE__ */ jsx(Icon, { children: isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(RefreshCcwIcon, {}) }),
-      "Enhance prompt"
-    ] }) })
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        name: "userComment",
+        placeholder: "Enter your comment here...",
+        className: "resize-none",
+        disabled: isDisabled
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
+      showWarning && /* @__PURE__ */ jsx("span", { className: "text-xs text-yellow-200", children: "No model with a configured API key found." }),
+      /* @__PURE__ */ jsxs(Button$1, { variant: "light", type: "submit", disabled: isDisabled, children: [
+        /* @__PURE__ */ jsx(Icon, { children: isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(RefreshCcwIcon, {}) }),
+        "Enhance prompt"
+      ] })
+    ] })
   ] });
 };
 
@@ -16359,13 +16608,16 @@ const AgentWorkingMemory = ({ agentId }) => {
           placeholder: "Enter working memory content..."
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: !isEditing ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: !isEditing ? /* @__PURE__ */ jsx(Fragment, { children: !threadExists ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { tabIndex: 0, children: /* @__PURE__ */ jsx(Button$2, { variant: "secondary", size: "sm", disabled: true, className: "text-xs pointer-events-none", children: "Edit Working Memory" }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Working memory will be available after the agent calls updateWorkingMemory" }) })
+      ] }) : /* @__PURE__ */ jsx(
         Button$2,
         {
           variant: "secondary",
           size: "sm",
           onClick: () => setIsEditing(true),
-          disabled: !threadExists || isUpdating,
+          disabled: isUpdating,
           className: "text-xs",
           children: "Edit Working Memory"
         }
@@ -16462,22 +16714,6 @@ const AgentMemoryConfig = ({ agentId }) => {
         ]
       });
     }
-    if (config.workingMemory) {
-      sections.push({
-        title: "Working Memory",
-        items: [
-          {
-            label: "Enabled",
-            value: config.workingMemory.enabled,
-            badge: config.workingMemory.enabled ? "success" : void 0
-          },
-          ...config.workingMemory.enabled ? [
-            { label: "Scope", value: config.workingMemory.scope || "resource" },
-            { label: "Template", value: config.workingMemory.template || "default" }
-          ] : []
-        ]
-      });
-    }
     return sections;
   }, [config]);
   const toggleSection = (title) => {
@@ -16537,7 +16773,7 @@ const AgentMemoryConfig = ({ agentId }) => {
       ),
       expandedSections.has(section.title) && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2 space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs text-icon3", children: item.label }),
-        renderValue(item.value || "", item.badge)
+        renderValue(item.value ?? "", item.badge)
       ] }, `${section.title}-${item.label}`)) })
     ] }, section.title)) })
   ] });
@@ -18668,6 +18904,17 @@ const Tabs = Object.assign(TabsRoot, {
   Content: TabContent
 });
 
+function isTokenDetailsObject(value) {
+  return typeof value === "object" && value !== null;
+}
+const detailKeyLabels = {
+  text: "Text",
+  cacheRead: "Cache Read",
+  cacheWrite: "Cache Write",
+  audio: "Audio",
+  image: "Image",
+  reasoning: "Reasoning"
+};
 function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   if (!traceUsage && !spanUsage) {
     console.warn("No usage data available");
@@ -18772,6 +19019,14 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     cachedInputTokens: {
       label: "Cached Input Tokens",
       icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    },
+    inputDetails: {
+      label: "Input Details",
+      icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+    },
+    outputDetails: {
+      label: "Output Details",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
     }
   };
   const commonTokenPresentations = {
@@ -18787,47 +19042,79 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   };
   let usageKeyOrder = [];
   if (hasV5Format) {
-    usageKeyOrder = ["totalTokens", "inputTokens", "outputTokens", "reasoningTokens", "cachedInputTokens"];
+    usageKeyOrder = [
+      "totalTokens",
+      "inputTokens",
+      "outputTokens",
+      "reasoningTokens",
+      "cachedInputTokens",
+      "inputDetails",
+      "outputDetails"
+    ];
   } else {
     usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
   }
-  const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
-  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-[1.5rem] flex-wrap", className), children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("bg-white/5 p-[.75rem] px-[1rem] rounded-lg text-[0.875rem] flex-grow", {
-        "min-h-[5.5rem]": traceUsage
-      }),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
-              "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
-            ),
-            children: [
-              tokenPresentations?.[key]?.icon,
-              /* @__PURE__ */ jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
-              /* @__PURE__ */ jsx("b", { className: "text-[1rem]", children: value })
-            ]
-          }
-        ),
-        tokensByProviderValid && /* @__PURE__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxs(
-          "dl",
-          {
-            className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
-            children: [
-              /* @__PURE__ */ jsx("dt", { children: provider }),
-              /* @__PURE__ */ jsx("dd", { children: providerTokens?.[key] })
-            ]
-          },
-          provider
-        )) })
-      ]
-    },
-    key
-  )) });
+  const usageAsArray = Object.entries(traceUsage || spanUsage || {}).filter((entry) => {
+    const value = entry[1];
+    return typeof value === "number" || isTokenDetailsObject(value);
+  }).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-[1.5rem] flex-wrap", className), children: usageAsArray.map(({ key, value }) => {
+    const isObject = isTokenDetailsObject(value);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("bg-white/5 p-[.75rem] px-[1rem] rounded-lg text-[0.875rem] flex-grow", {
+          "min-h-[5.5rem]": traceUsage
+        }),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
+                "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
+              ),
+              children: [
+                tokenPresentations?.[key]?.icon,
+                /* @__PURE__ */ jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+                !isObject && /* @__PURE__ */ jsx("b", { className: "text-[1rem]", children: value })
+              ]
+            }
+          ),
+          isObject && /* @__PURE__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(value).map(([detailKey, detailValue]) => {
+            if (typeof detailValue !== "number") return null;
+            return /* @__PURE__ */ jsxs(
+              "dl",
+              {
+                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem] justify-between text-icon3",
+                children: [
+                  /* @__PURE__ */ jsx("dt", { children: detailKeyLabels[detailKey] || detailKey }),
+                  /* @__PURE__ */ jsx("dd", { children: detailValue })
+                ]
+              },
+              detailKey
+            );
+          }) }),
+          !isObject && tokensByProviderValid && /* @__PURE__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => {
+            const tokenValue = providerTokens?.[key];
+            if (typeof tokenValue !== "number") return null;
+            return /* @__PURE__ */ jsxs(
+              "dl",
+              {
+                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+                children: [
+                  /* @__PURE__ */ jsx("dt", { children: provider }),
+                  /* @__PURE__ */ jsx("dd", { children: tokenValue })
+                ]
+              },
+              provider
+            );
+          }) })
+        ]
+      },
+      key
+    );
+  }) });
 }
 
 function isTokenLimitExceeded(span) {
@@ -18940,7 +19227,7 @@ function SpanTabs({
           SpanScoring,
           {
             traceId: trace?.traceId,
-            isTopLevelSpan: span?.parentSpanId === null,
+            isTopLevelSpan: !Boolean(span?.parentSpanId),
             spanId: span?.spanId,
             entityType,
             scorers,
@@ -20100,14 +20387,6 @@ const MCPToolPanel = ({ toolId, serverId }) => {
   );
 };
 
-const CodeMirrorBlock = (props) => {
-  const theme = useCodemirrorTheme$1();
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4 relative", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy code", content: props.value || "No content" }) }),
-    /* @__PURE__ */ jsx(CodeMirror, { extensions: [json()], theme, ...props })
-  ] });
-};
-
 const MCPDetail = ({ isLoading, server }) => {
   const [{ sseUrl, httpStreamUrl }, setUrls] = useState({
     sseUrl: "",
@@ -20129,112 +20408,45 @@ const MCPDetail = ({ isLoading, server }) => {
   if (isLoading) return null;
   if (!server)
     return /* @__PURE__ */ jsx(MainContentContent, { children: /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon3 font-medium py-20 text-center", children: "Server not found" }) });
+  const commandLineConfig = `npx -y mcp-remote ${sseUrl}`;
   return /* @__PURE__ */ jsxs(MainContentContent, { isDivided: true, children: [
-    /* @__PURE__ */ jsxs("div", { className: "px-8 py-20 mx-auto max-w-[604px] w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-8 py-12 mx-auto max-w-2xl w-full", children: [
       /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "header-md", className: "text-icon6 font-medium pb-4", children: server.name }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Badge,
-            {
-              icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "SSE" }),
-              className: "!text-icon4",
-              children: sseUrl
-            }
-          ),
-          /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy SSE URL", content: sseUrl, iconSize: "sm" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Badge,
-            {
-              icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 text-ui-xs font-medium", children: "HTTP" }),
-              className: "!text-icon4",
-              children: httpStreamUrl
-            }
-          ),
-          /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy HTTP Stream URL", content: httpStreamUrl, iconSize: "sm" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pt-3 pb-9", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pb-6", children: [
         /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(FolderIcon, { className: "text-icon6" }), className: "rounded-r-sm !text-icon4", children: "Version" }),
         /* @__PURE__ */ jsx(Badge, { className: "rounded-l-sm !text-icon4", children: server.version_detail.version })
       ] }),
-      /* @__PURE__ */ jsx(McpSetupTabs, { sseUrl, serverName: server.name })
+      /* @__PURE__ */ jsx(Txt, { className: "text-icon3 pb-4", children: "This MCP server can be accessed through multiple transport methods. Choose the one that best fits your use case." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4", children: [
+          /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 font-medium mr-1", children: "HTTP" }), children: "Regular HTTP Endpoint" }),
+          /* @__PURE__ */ jsx(Txt, { className: "text-icon3 pt-1 pb-2", children: "Use for stateless HTTP transport with streamable responses." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Txt, { className: "px-2 py-1 bg-surface4 rounded-lg", children: httpStreamUrl }),
+            /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy HTTP Stream URL", content: httpStreamUrl, iconSize: "sm" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4", children: [
+          /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 font-medium mr-1", children: "SSE" }), children: "Server-Sent Events" }),
+          /* @__PURE__ */ jsx(Txt, { className: "text-icon3 pt-1 pb-2", children: "Use for real-time communication via SSE." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Txt, { className: "px-2 py-1 bg-surface4 rounded-lg", children: sseUrl }),
+            /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy SSE URL", content: sseUrl, iconSize: "sm" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface3 p-4", children: [
+          /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx("span", { className: "font-mono w-6 text-accent1 font-medium mr-1", children: "CLI" }), children: "Command Line" }),
+          /* @__PURE__ */ jsx(Txt, { className: "text-icon3 pt-1 pb-2", children: "Use for local command-line access via npx and mcp-remote." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Txt, { className: "px-2 py-1 bg-surface4 rounded-lg", children: commandLineConfig }),
+            /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(CopyButton, { tooltip: "Copy Command Line Config", content: commandLineConfig, iconSize: "sm" }) })
+          ] })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll border-l-sm border-border1", children: /* @__PURE__ */ jsx(McpToolList, { server }) })
   ] });
 };
-const McpSetupTabs = ({ sseUrl, serverName }) => {
-  const { Link } = useLinkComponent();
-  return /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "cursor", children: [
-    /* @__PURE__ */ jsxs(TabList$1, { children: [
-      /* @__PURE__ */ jsx(Tab$1, { value: "cursor", children: "Cursor" }),
-      /* @__PURE__ */ jsx(Tab$1, { value: "windsurf", children: "Windsurf" })
-    ] }),
-    /* @__PURE__ */ jsxs(TabContent$1, { value: "cursor", children: [
-      /* @__PURE__ */ jsxs(Txt, { className: "text-icon3 pb-4", children: [
-        "Cursor comes with built-in MCP Support.",
-        " ",
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            href: "https://docs.cursor.com/context/model-context-protocol",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "underline hover:text-icon6",
-            children: "Following the documentation"
-          }
-        ),
-        ", you can register an MCP server using SSE with the following configuration."
-      ] }),
-      /* @__PURE__ */ jsx(
-        CodeMirrorBlock,
-        {
-          editable: false,
-          value: `{
-    "mcpServers": {
-      "${serverName}": {
-        "url": "${sseUrl}"
-      }
-    }
-  }`
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(TabContent$1, { value: "windsurf", children: [
-      /* @__PURE__ */ jsxs(Txt, { className: "text-icon3 pb-4", children: [
-        "Windsurf comes with built-in MCP Support.",
-        " ",
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            href: "https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "underline hover:text-icon6",
-            children: "Following the documentation"
-          }
-        ),
-        ", you can register an MCP server using SSE with the following configuration."
-      ] }),
-      /* @__PURE__ */ jsx(
-        CodeMirrorBlock,
-        {
-          editable: false,
-          value: `{
-    "mcpServers": {
-      "${serverName}": {
-        "command": "npx",
-        "args": ["-y", "mcp-remote", "${sseUrl}"]
-      }
-    }
-  }`
-        }
-      )
-    ] })
-  ] });
-};
 const McpToolList = ({ server }) => {
   const { data: tools = {}, isLoading } = useMCPServerTools(server);
   if (isLoading) return null;
@@ -20481,5 +20693,5 @@ const PlaygroundConfigGuard = () => {
   ] }) });
 };
 
-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, PlaygroundConfigGuard, 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, StudioConfigContext, StudioConfigForm, StudioConfigProvider, 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, TraceTimelineSpan, TraceTimelineTools, 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, useDeleteWorkflowRun, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useStudioConfig, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useTracingSettings, 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, PlaygroundConfigGuard, 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, StudioConfigContext, StudioConfigForm, StudioConfigProvider, 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, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracingSettingsContext, TracingSettingsProvider, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, 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, useDeleteWorkflowRun, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useStudioConfig, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useTracingSettings, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map