@mastra/playground-ui 7.0.0-beta.14 → 7.0.0-beta.15

package/dist/index.cjs.js

@@ -73,6 +73,8 @@ const languageData = require('@codemirror/language-data');
 const codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const TabsPrimitive = require('@radix-ui/react-tabs');
+const reactResizablePanels = require('react-resizable-panels');
+const semver = require('semver');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -4491,6 +4493,7 @@ const BadgeWrapper = ({
 };
 
 const Dialog = DialogPrimitive__namespace.Root;
+const DialogTrigger = DialogPrimitive__namespace.Trigger;
 const DialogPortal = DialogPrimitive__namespace.Portal;
 const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
@@ -4988,7 +4991,8 @@ function useTracingSettingsState({ entityId, entityType }) {
   return {
     settings,
     setSettings,
-    resetAll
+    resetAll,
+    entityType
   };
 }
 
@@ -4997,7 +5001,8 @@ const TracingSettingsContext = React.createContext({
   },
   resetAll: () => {
   },
-  settings: void 0
+  settings: void 0,
+  entityType: void 0
 });
 const TracingSettingsProvider = ({ children, entityId, entityType }) => {
   const state = useTracingSettingsState({ entityId, entityType });
@@ -5070,7 +5075,7 @@ const useExecuteWorkflow = () => {
     startAsyncWorkflowRun
   };
 };
-const useStreamWorkflow = () => {
+const useStreamWorkflow = ({ debugMode }) => {
   const client = react$1.useMastraClient();
   const { settings } = useTracingSettings();
   const [streamResult, setStreamResult] = React.useState({});
@@ -5126,6 +5131,10 @@ const useStreamWorkflow = () => {
     if (value.type === "workflow-finish") {
       const streamStatus = value.payload?.workflowStatus;
       const metadata = value.payload?.metadata;
+      setStreamResult((prev) => ({
+        ...prev,
+        status: streamStatus
+      }));
       if (streamStatus === "failed") {
         throw new Error(metadata?.errorMessage || "Workflow execution failed");
       }
@@ -5136,7 +5145,8 @@ const useStreamWorkflow = () => {
       workflowId,
       runId,
       inputData,
-      requestContext: playgroundRequestContext
+      requestContext: playgroundRequestContext,
+      perStep
     }) => {
       if (readerRef.current) {
         readerRef.current.releaseLock();
@@ -5154,7 +5164,8 @@ const useStreamWorkflow = () => {
         inputData,
         requestContext: requestContext$1,
         closeOnSuspend: true,
-        tracingOptions: settings?.tracingOptions
+        tracingOptions: settings?.tracingOptions,
+        perStep: perStep ?? debugMode
       });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
@@ -5259,7 +5270,8 @@ const useStreamWorkflow = () => {
       runId,
       step,
       resumeData,
-      requestContext: playgroundRequestContext
+      requestContext: playgroundRequestContext,
+      perStep
     }) => {
       if (resumeStreamRef.current) {
         resumeStreamRef.current.releaseLock();
@@ -5276,7 +5288,8 @@ const useStreamWorkflow = () => {
         step,
         resumeData,
         requestContext: requestContext$1,
-        tracingOptions: settings?.tracingOptions
+        tracingOptions: settings?.tracingOptions,
+        perStep: perStep ?? debugMode
       });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
@@ -5322,6 +5335,7 @@ const useStreamWorkflow = () => {
       workflowId,
       requestContext: playgroundRequestContext,
       runId,
+      perStep,
       ...params
     }) => {
       if (timeTravelStreamRef.current) {
@@ -5337,6 +5351,7 @@ const useStreamWorkflow = () => {
       const run = await workflow.createRun({ runId });
       const stream = await run.timeTravelStream({
         ...params,
+        perStep: perStep ?? debugMode,
         requestContext: requestContext$1,
         tracingOptions: settings?.tracingOptions
       });
@@ -5588,6 +5603,7 @@ function WorkflowRunProvider({
   const [payload, setPayload] = React.useState(() => snapshot?.context?.input ?? null);
   const [runId, setRunId] = React.useState(() => initialRunId ?? "");
   const [isRunning, setIsRunning] = React.useState(false);
+  const [debugMode, setDebugMode] = React.useState(false);
   const refetchExecResultInterval = isRunning ? void 0 : ["success", "failed", "canceled", "bailed"].includes(result?.status ?? "") ? void 0 : 5e3;
   const { isLoading: isLoadingRunExecutionResult, data: runExecutionResult } = useWorkflowRunExecutionResult(
     workflowId,
@@ -5617,7 +5633,7 @@ function WorkflowRunProvider({
     closeStreamsAndReset,
     resumeWorkflowStream,
     timeTravelWorkflowStream
-  } = useStreamWorkflow();
+  } = useStreamWorkflow({ debugMode });
   const { mutateAsync: cancelWorkflowRun, isPending: isCancellingWorkflowRun } = useCancelWorkflowRun();
   const clearData = () => {
     setResult(null);
@@ -5673,7 +5689,9 @@ function WorkflowRunProvider({
         },
         runSnapshot,
         isLoadingRunExecutionResult,
-        withoutTimeTravel
+        withoutTimeTravel,
+        debugMode,
+        setDebugMode
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowStepDetailProvider, { children })
     }
@@ -7851,17 +7869,24 @@ const JsonField = ({
     ] })
   ] });
 };
-const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
+const WorkflowTimeTravelForm = ({
+  stepKey,
+  closeModal,
+  isPerStepRun,
+  isContinueRun,
+  buttonText = "Start time travel",
+  inputData
+}) => {
   const {
     result,
     workflow,
     timeTravelWorkflowStream,
-    createWorkflowRun,
     runId: prevRunId,
-    workflowId
+    workflowId,
+    setDebugMode
   } = React.useContext(WorkflowRunContext);
   const { requestContext } = usePlaygroundStore();
-  const stepResult = result?.steps?.[stepKey];
+  const stepResult = inputData ? { payload: inputData } : result?.steps?.[stepKey];
   const [resumeData, setResumeData] = React.useState(() => "{}");
   const [contextValue, setContextValue] = React.useState(() => "{}");
   const [nestedContextValue, setNestedContextValue] = React.useState(() => "{}");
@@ -7887,17 +7912,20 @@ 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 run = await createWorkflowRun({ workflowId, prevRunId });
       const payload = {
-        runId: run.runId,
+        runId: prevRunId,
         workflowId,
         step: stepKey,
         inputData: data,
         resumeData: Object.keys(parsedResume)?.length > 0 ? parsedResume : void 0,
         context: Object.keys(parsedContext)?.length > 0 ? parsedContext : void 0,
         nestedStepsContext: Object.keys(parsedNestedContext)?.length > 0 ? parsedNestedContext : void 0,
-        requestContext
+        requestContext,
+        ...isContinueRun ? { perStep: false } : {}
       };
+      if (isContinueRun) {
+        setDebugMode(false);
+      }
       timeTravelWorkflowStream(payload);
       closeModal();
     } catch (error) {
@@ -7921,47 +7949,27 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
         schema: stepSchema,
         defaultValues: stepResult?.payload,
         isSubmitLoading: isSubmitting,
-        submitButtonLabel: "Start time travel",
+        submitButtonLabel: buttonText,
         onSubmit: handleSubmit,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pb-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            JsonField,
-            {
-              label: "Resume Data (JSON)",
-              value: resumeData,
-              onChange: setResumeData,
-              helperText: "Provide any resume payloads that should be passed to the step."
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            JsonField,
-            {
-              label: "Context (JSON)",
-              value: contextValue,
-              onChange: setContextValue,
-              helperText: "Only include top level steps (no nested workflow steps) that are required in the time travel execution.",
-              exampleCode: prettyJson({
-                stepId: {
-                  status: "success",
-                  payload: {
-                    value: "test value"
-                  },
-                  output: {
-                    value: "test output"
-                  }
-                }
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            JsonField,
-            {
-              label: "Nested Step Context (JSON)",
-              value: nestedContextValue,
-              onChange: setNestedContextValue,
-              helperText: "Includes nested workflow steps that are required in the time travel execution.",
-              exampleCode: prettyJson({
-                nestedWorkflowId: {
+          isPerStepRun || isContinueRun ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              JsonField,
+              {
+                label: "Resume Data (JSON)",
+                value: resumeData,
+                onChange: setResumeData,
+                helperText: "Provide any resume payloads that should be passed to the step."
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              JsonField,
+              {
+                label: "Context (JSON)",
+                value: contextValue,
+                onChange: setContextValue,
+                helperText: "Only include top level steps (no nested workflow steps) that are required in the time travel execution.",
+                exampleCode: prettyJson({
                   stepId: {
                     status: "success",
                     payload: {
@@ -7971,10 +7979,32 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
                       value: "test output"
                     }
                   }
-                }
-              })
-            }
-          ),
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              JsonField,
+              {
+                label: "Nested Step Context (JSON)",
+                value: nestedContextValue,
+                onChange: setNestedContextValue,
+                helperText: "Includes nested workflow steps that are required in the time travel execution.",
+                exampleCode: prettyJson({
+                  nestedWorkflowId: {
+                    stepId: {
+                      status: "success",
+                      payload: {
+                        value: "test value"
+                      },
+                      output: {
+                        value: "test output"
+                      }
+                    }
+                  }
+                })
+              }
+            )
+          ] }),
           formError && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-accent2", children: formError })
         ] })
       }
@@ -7994,7 +8024,8 @@ const WorkflowStepActionBar = ({
   stepId,
   onShowNestedGraph,
   status,
-  stepKey
+  stepKey,
+  stepsFlow
 }) => {
   const [isInputOpen, setIsInputOpen] = React.useState(false);
   const [isOutputOpen, setIsOutputOpen] = React.useState(false);
@@ -8002,11 +8033,53 @@ const WorkflowStepActionBar = ({
   const [isErrorOpen, setIsErrorOpen] = React.useState(false);
   const [isTripwireOpen, setIsTripwireOpen] = React.useState(false);
   const [isTimeTravelOpen, setIsTimeTravelOpen] = React.useState(false);
-  const { withoutTimeTravel } = React.useContext(WorkflowRunContext);
+  const [isContinueRunOpen, setIsContinueRunOpen] = React.useState(false);
+  const [isPerStepRunOpen, setIsPerStepRunOpen] = React.useState(false);
+  const {
+    withoutTimeTravel,
+    debugMode,
+    result,
+    runSnapshot,
+    timeTravelWorkflowStream,
+    runId: prevRunId,
+    workflowId,
+    setDebugMode
+  } = React.useContext(WorkflowRunContext);
   const { showMapConfig, stepDetail, closeStepDetail } = useWorkflowStepDetail();
+  const { requestContext } = usePlaygroundStore();
+  const workflowStatus = result?.status ?? runSnapshot?.status;
   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 showTimeTravel = !withoutTimeTravel && stepKey && !mapConfig && workflowStatus !== "running" && workflowStatus !== "paused";
+  const inDebugMode = stepKey && debugMode && workflowStatus === "paused";
+  const stepPayload = React.useMemo(() => {
+    if (!stepKey || !inDebugMode) return void 0;
+    const previousSteps = stepsFlow?.[stepKey] ?? [];
+    if (previousSteps.length === 0) return void 0;
+    if (previousSteps.length > 1) {
+      return {
+        hasMultiSteps: true,
+        input: previousSteps.reduce(
+          (acc, stepId2) => {
+            if (result?.steps?.[stepId2]?.status === "success") {
+              acc[stepId2] = result?.steps?.[stepId2].output;
+            }
+            return acc;
+          },
+          {}
+        )
+      };
+    }
+    const prevStepId = previousSteps[0];
+    if (result?.steps?.[prevStepId]?.status === "success") {
+      return {
+        hasMultiSteps: false,
+        input: result?.steps?.[prevStepId].output
+      };
+    }
+    return void 0;
+  }, [stepKey, stepsFlow, inDebugMode, result]);
+  const showDebugMode = inDebugMode && stepPayload && !result?.steps[stepKey];
   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";
@@ -8024,7 +8097,32 @@ const WorkflowStepActionBar = ({
       onShowNestedGraph?.();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || tripwire || mapConfig || resumeData || onShowNestedGraph || showTimeTravel) && /* @__PURE__ */ jsxRuntime.jsxs(
+  const handleRunMapStep = (isContinueRun) => {
+    const payload = {
+      runId: prevRunId,
+      workflowId,
+      step: stepKey,
+      inputData: stepPayload?.hasMultiSteps ? void 0 : stepPayload?.input,
+      requestContext,
+      ...isContinueRun ? { perStep: false } : {},
+      ...stepPayload?.hasMultiSteps ? {
+        context: Object.keys(stepPayload.input)?.reduce(
+          (acc, stepId2) => {
+            acc[stepId2] = {
+              output: stepPayload.input[stepId2]
+            };
+            return acc;
+          },
+          {}
+        )
+      } : {}
+    };
+    if (isContinueRun) {
+      setDebugMode(false);
+    }
+    timeTravelWorkflowStream(payload);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || tripwire || mapConfig || resumeData || onShowNestedGraph || showTimeTravel || showDebugMode) && /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
@@ -8048,6 +8146,66 @@ const WorkflowStepActionBar = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowTimeTravelForm, { stepKey, closeModal: () => setIsTimeTravelOpen(false) }) })
           ] }) })
         ] }),
+        showDebugMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button$1,
+            {
+              onClick: () => {
+                if (mapConfig) {
+                  handleRunMapStep();
+                } else {
+                  setIsPerStepRunOpen(true);
+                }
+              },
+              children: "Run step"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isPerStepRunOpen, onOpenChange: setIsPerStepRunOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              "Run step ",
+              stepKey
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              WorkflowTimeTravelForm,
+              {
+                stepKey,
+                closeModal: () => setIsPerStepRunOpen(false),
+                isPerStepRun: true,
+                buttonText: "Run step",
+                inputData: stepPayload?.input
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button$1,
+            {
+              onClick: () => {
+                if (mapConfig) {
+                  handleRunMapStep(true);
+                } else {
+                  setIsContinueRunOpen(true);
+                }
+              },
+              children: "Continue run"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isContinueRunOpen, onOpenChange: setIsContinueRunOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              "Continue run ",
+              stepKey
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              WorkflowTimeTravelForm,
+              {
+                stepKey,
+                closeModal: () => setIsContinueRunOpen(false),
+                isContinueRun: true,
+                buttonText: "Continue run",
+                inputData: stepPayload?.input
+              }
+            ) })
+          ] }) })
+        ] }),
         mapConfig && /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: handleMapConfigClick, className: cn(isMapConfigOpen && activeButtonClass), children: "Map config" }),
         input && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: () => setIsInputOpen(true), children: "Input" }),
@@ -8280,7 +8438,11 @@ const Clock = ({ startedAt, endedAt }) => {
   ] });
 };
 
-function WorkflowDefaultNode({ data, parentWorkflowName }) {
+function WorkflowDefaultNode({
+  data,
+  parentWorkflowName,
+  stepsFlow
+}) {
   const { steps } = useCurrentRun();
   const {
     label,
@@ -8380,7 +8542,8 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
               tripwire: isTripwire ? step?.tripwire : void 0,
               mapConfig,
               status: displayStatus,
-              stepKey
+              stepKey,
+              stepsFlow
             }
           )
         ]
@@ -8443,36 +8606,13 @@ function WorkflowLoopResultNode({ data }) {
   );
 }
 
-const WorkflowNestedGraphContext = React.createContext(
-  {}
-);
-function WorkflowNestedGraphProvider({ children }) {
-  const { showNestedGraph: showNestedGraphInPanel, closeStepDetail } = useWorkflowStepDetail();
-  const showNestedGraph = ({
-    label,
-    stepGraph,
-    fullStep
-  }) => {
-    showNestedGraphInPanel({ label, stepGraph, fullStep });
-  };
-  const closeNestedGraph = () => {
-    closeStepDetail();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowNestedGraphContext.Provider,
-    {
-      value: {
-        showNestedGraph,
-        closeNestedGraph
-      },
-      children
-    }
-  );
-}
-
-function WorkflowNestedNode({ data, parentWorkflowName }) {
+function WorkflowNestedNode({
+  data,
+  parentWorkflowName,
+  stepsFlow
+}) {
   const { steps } = useCurrentRun();
-  const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
+  const { showNestedGraph } = useWorkflowStepDetail();
   const {
     label,
     stepId,
@@ -8554,7 +8694,8 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
               mapConfig,
               onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
               status: displayStatus,
-              stepKey
+              stepKey,
+              stepsFlow
             }
           )
         ]
@@ -8611,12 +8752,28 @@ function WorkflowGraphInner({ workflow }) {
   const [nodes, _, onNodesChange] = react$2.useNodesState(initialNodes);
   const [edges] = react$2.useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
+  const stepsFlow = React.useMemo(() => {
+    return initialEdges.reduce(
+      (acc, edge) => {
+        if (edge.data) {
+          const stepId = edge.data.nextStepId;
+          const prevStepId = edge.data.previousStepId;
+          return {
+            ...acc,
+            [stepId]: [.../* @__PURE__ */ new Set([...acc[stepId] || [], prevStepId])]
+          };
+        }
+        return acc;
+      },
+      {}
+    );
+  }, [initialEdges]);
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { ...props, stepsFlow }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { ...props, stepsFlow })
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
@@ -8645,6 +8802,33 @@ function WorkflowGraphInner({ workflow }) {
   ) });
 }
 
+const WorkflowNestedGraphContext = React.createContext(
+  {}
+);
+function WorkflowNestedGraphProvider({ children }) {
+  const { showNestedGraph: showNestedGraphInPanel, closeStepDetail } = useWorkflowStepDetail();
+  const showNestedGraph = ({
+    label,
+    stepGraph,
+    fullStep
+  }) => {
+    showNestedGraphInPanel({ label, stepGraph, fullStep });
+  };
+  const closeNestedGraph = () => {
+    closeStepDetail();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowNestedGraphContext.Provider,
+    {
+      value: {
+        showNestedGraph,
+        closeNestedGraph
+      },
+      children
+    }
+  );
+}
+
 function WorkflowGraph({ workflowId, workflow, isLoading }) {
   const { snapshot } = React.useContext(WorkflowRunContext);
   if (isLoading) {
@@ -9533,7 +9717,7 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full overflow-x-auto", 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 }) });
@@ -9567,9 +9751,17 @@ const TabContent$1 = ({ children, value }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-auto flex flex-col", children });
 };
 
+const WorkflowRunOptions = () => {
+  const { debugMode, setDebugMode } = React.useContext(WorkflowRunContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h3", variant: "ui-md", className: "text-icon3", children: "Debug Mode" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: debugMode, onCheckedChange: (value) => setDebugMode(value) })
+  ] });
+};
+
 const TracingRunOptions = () => {
   const theme = useCodemirrorTheme$1();
-  const { settings, setSettings } = useTracingSettings();
+  const { settings, setSettings, entityType } = useTracingSettings();
   const handleChange = (value) => {
     if (!value) {
       return setSettings({ ...settings, tracingOptions: void 0 });
@@ -9598,7 +9790,8 @@ const TracingRunOptions = () => {
         extensions: [langJson.jsonLanguage],
         className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
       }
-    )
+    ),
+    entityType === "workflow" && /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunOptions, {})
   ] });
 };
 
@@ -9629,12 +9822,28 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
   const [nodes, _, onNodesChange] = react$2.useNodesState(initialNodes);
   const [edges] = react$2.useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
+  const stepsFlow = React.useMemo(() => {
+    return initialEdges.reduce(
+      (acc, edge) => {
+        if (edge.data) {
+          const stepId = edge.data.nextStepId;
+          const prevStepId = edge.data.previousStepId;
+          return {
+            ...acc,
+            [stepId]: [.../* @__PURE__ */ new Set([...acc[stepId] || [], prevStepId])]
+          };
+        }
+        return acc;
+      },
+      {}
+    );
+  }, [initialEdges]);
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props, stepsFlow }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props, stepsFlow })
   };
   React.useEffect(() => {
     if (open) {
@@ -9704,7 +9913,7 @@ function WorkflowStepDetailContent() {
           open: true,
           workflowName: stepDetail.nestedGraph.fullStep
         }
-      ) }) })
+      ) }, stepDetail.nestedGraph.fullStep) })
     ] })
   ] });
 }
@@ -10045,6 +10254,162 @@ function WorkflowCombobox({
   );
 }
 
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
+      children
+    }
+  );
+}
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  const contentClassName = getMainContentContentClassName({ isCentered, isDivided, hasLeftServiceColumn, className });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: contentClassName,
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
+    }
+  );
+}
+const getMainContentContentClassName = ({
+  isCentered,
+  isDivided,
+  hasLeftServiceColumn,
+  className
+}) => {
+  return cn(
+    `grid overflow-y-auto h-full `,
+    `overflow-x-auto min-w-[min-content]`,
+    {
+      "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
+      "grid place-items-center": isCentered,
+      "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
+      "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
+      "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+    },
+    className
+  );
+};
+function devUIStyleRequested(name) {
+  try {
+    const raw = localStorage.getItem("add-dev-style-to-components");
+    if (!raw) return false;
+    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
+    return components.includes(name);
+  } catch (error) {
+    console.error("Error reading or parsing localStorage:", error);
+    return false;
+  }
+}
+
+const PanelSeparator = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactResizablePanels.Separator,
+    {
+      className: clsx(
+        "w-1.5 bg-surface3",
+        "[&[data-separator='hover']]:!bg-surface4",
+        "[&[data-separator='active']]:!bg-surface5",
+        "focus:outline-none"
+      )
+    }
+  );
+};
+
+const CollapsiblePanel = ({ collapsedSize, children, direction, ...props }) => {
+  const [collapsed, setCollapsed] = React.useState(false);
+  const panelRef = reactResizablePanels.usePanelRef();
+  const expand = () => {
+    if (!panelRef.current) return;
+    panelRef.current.expand();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactResizablePanels.Panel,
+    {
+      panelRef,
+      collapsedSize,
+      ...props,
+      onResize: (size) => {
+        if (!collapsedSize) return;
+        if (typeof collapsedSize !== "number") return;
+        if (size.inPixels <= collapsedSize) {
+          setCollapsed(true);
+        } else if (collapsed) {
+          setCollapsed(false);
+        }
+      },
+      children: collapsed ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: expand, className: "!h-48 border-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}) }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Expand" })
+      ] }) : children
+    }
+  );
+};
+
+const WorkflowLayout = ({ workflowId, children, leftSlot, rightSlot }) => {
+  const { defaultLayout, onLayoutChange } = reactResizablePanels.useDefaultLayout({
+    id: `workflow-layout-${workflowId}`,
+    storage: localStorage
+  });
+  const computedClassName = getMainContentContentClassName({
+    isCentered: false,
+    isDivided: true,
+    hasLeftServiceColumn: Boolean(leftSlot)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactResizablePanels.Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
+    leftSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CollapsiblePanel,
+        {
+          direction: "left",
+          id: "left-slot",
+          minSize: 200,
+          maxSize: "30%",
+          defaultSize: 200,
+          collapsedSize: 60,
+          collapsible: true,
+          children: leftSlot
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "main-slot", children }),
+    rightSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CollapsiblePanel,
+        {
+          direction: "right",
+          id: "right-slot",
+          minSize: 300,
+          maxSize: "50%",
+          defaultSize: 300,
+          collapsedSize: 60,
+          collapsible: true,
+          children: rightSlot
+        }
+      )
+    ] })
+  ] });
+};
+
 const LoadingBadge = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
@@ -13742,62 +14107,6 @@ const CombinedButtons = ({ className, children }) => {
   );
 };
 
-function MainContentLayout({
-  children,
-  className,
-  style
-}) {
-  const devStyleRequested = devUIStyleRequested("MainContentLayout");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "main",
-    {
-      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
-      children
-    }
-  );
-}
-function MainContentContent({
-  children,
-  className,
-  isCentered = false,
-  isDivided = false,
-  hasLeftServiceColumn = false,
-  style
-}) {
-  const devStyleRequested = devUIStyleRequested("MainContentContent");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        `grid overflow-y-auto h-full `,
-        `overflow-x-auto min-w-[min-content]`,
-        {
-          "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
-          "grid place-items-center": isCentered,
-          "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
-          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
-          "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
-        },
-        className
-      ),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
-      children
-    }
-  );
-}
-function devUIStyleRequested(name) {
-  try {
-    const raw = localStorage.getItem("add-dev-style-to-components");
-    if (!raw) return false;
-    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
-    return components.includes(name);
-  } catch (error) {
-    console.error("Error reading or parsing localStorage:", error);
-    return false;
-  }
-}
-
 function ButtonsGroup({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
 }
@@ -16091,7 +16400,7 @@ const AgentEntityHeader = ({ agentId }) => {
 };
 
 const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bg-surface2 min-h-full overflow-hidden", children });
 };
 const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17205,7 +17514,7 @@ const useAgentInformationSettings = ({ modelId }) => {
 const AgentInformationLayout = ({ children, agentId }) => {
   const { data: agent } = useAgent(agentId);
   useAgentInformationSettings({ modelId: agent?.modelId || "" });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto", children });
 };
 const AgentInformationTabLayout = ({ children, agentId }) => {
   const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
@@ -17217,6 +17526,53 @@ const AgentInformationTabLayout = ({ children, agentId }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
 };
 
+const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
+  const { defaultLayout, onLayoutChange } = reactResizablePanels.useDefaultLayout({
+    id: `agent-layout-${agentId}`,
+    storage: localStorage
+  });
+  const computedClassName = getMainContentContentClassName({
+    isCentered: false,
+    isDivided: true,
+    hasLeftServiceColumn: Boolean(leftSlot)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactResizablePanels.Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
+    leftSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CollapsiblePanel,
+        {
+          direction: "left",
+          id: "left-slot",
+          minSize: 200,
+          maxSize: "30%",
+          defaultSize: 200,
+          collapsedSize: 60,
+          collapsible: true,
+          children: leftSlot
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "main-slot", className: "grid overflow-y-auto relative bg-surface1 py-4", children }),
+    rightSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CollapsiblePanel,
+        {
+          direction: "right",
+          id: "right-slot",
+          minSize: 300,
+          maxSize: "50%",
+          defaultSize: 300,
+          collapsedSize: 60,
+          collapsible: true,
+          children: rightSlot
+        }
+      )
+    ] })
+  ] });
+};
+
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const tool = row.original;
@@ -18184,7 +18540,7 @@ const formatHierarchicalSpans = (spans) => {
   });
   spans.forEach((spanRecord) => {
     const uiSpan = spanMap.get(spanRecord.spanId);
-    if (spanRecord?.parentSpanId === null) {
+    if (spanRecord?.parentSpanId == null) {
       if (overallEndDate && uiSpan.endTime && overallEndDate > new Date(uiSpan.endTime)) {
         uiSpan.endTime = overallEndDate.toISOString();
         const overallEndTime = new Date(overallEndDate).getTime();
@@ -18779,17 +19135,21 @@ function useTraceInfo(trace) {
   }
   const agentsLink = paths.agentsLink();
   const workflowsLink = paths.workflowsLink();
-  const agentLink = paths.agentLink(trace?.metadata?.resourceId);
-  const workflowLink = paths.workflowLink(trace?.attributes?.workflowId);
+  const entityId = trace.entityId;
+  const entityType = trace.entityType;
+  const entityName = trace.entityName;
+  const isAgent = entityType === "agent";
+  const isWorkflow = entityType === "workflow_run";
+  const entityLink = isAgent && entityId ? paths.agentLink(entityId) : isWorkflow && entityId ? paths.workflowLink(entityId) : void 0;
   return [
     {
       key: "entityId",
       label: "Entity Id",
       value: [
         {
-          id: trace?.metadata?.resourceId,
-          name: trace?.attributes?.agentId || trace?.attributes?.workflowId || "-",
-          path: trace?.attributes?.agentId ? agentLink : trace?.attributes?.workflowId ? workflowLink : void 0
+          id: entityId ?? "unknown",
+          name: entityName || entityId || "-",
+          path: entityLink
         }
       ]
     },
@@ -18798,9 +19158,9 @@ function useTraceInfo(trace) {
       label: "Entity Type",
       value: [
         {
-          id: trace?.attributes?.agentId || trace?.attributes?.workflowId,
-          name: trace?.attributes?.agentId ? "Agent" : trace?.attributes?.workflowId ? "Workflow" : "-",
-          path: trace?.attributes?.agentId ? agentsLink : trace?.attributes?.workflowId ? workflowsLink : void 0
+          id: entityType ?? "unknown",
+          name: entityType ?? "-",
+          path: isAgent ? agentsLink : isWorkflow ? workflowsLink : void 0
         }
       ]
     },
@@ -18842,11 +19202,12 @@ function getSpanInfo({ span }) {
       value: span?.endedAt ? dateFns.format(new Date(span.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
     }
   ];
-  if (span?.attributes?.finishReason) {
+  const finishReason = span?.attributes?.finishReason;
+  if (finishReason) {
     baseInfo.push({
       key: "finishReason",
       label: "Finish Reason",
-      value: span.attributes.finishReason
+      value: finishReason
     });
   }
   return baseInfo;
@@ -18949,9 +19310,10 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     return null;
   }
   const generationSpans = traceSpans.filter((span) => span.spanType === "model_generation");
-  const hasV5Format = generationSpans.some(
-    (span) => span.attributes?.usage?.inputTokens !== void 0 || span.attributes?.usage?.outputTokens !== void 0
-  );
+  const hasV5Format = generationSpans.some((span) => {
+    const usage = span.attributes?.usage;
+    return usage && "inputTokens" in usage;
+  });
   const tokensByProvider = generationSpans.reduce(
     (acc, span) => {
       const spanUsage2 = span.attributes?.usage || {};
@@ -18979,8 +19341,8 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
         const v5Acc = acc[spanModelProvider];
         v5Acc.inputTokens += inputTokens;
         v5Acc.outputTokens += outputTokens;
-        v5Acc.reasoningTokens += reasoningTokens;
-        v5Acc.cachedInputTokens += cachedInputTokens;
+        v5Acc.reasoningTokens = (v5Acc.reasoningTokens ?? 0) + reasoningTokens;
+        v5Acc.cachedInputTokens = (v5Acc.cachedInputTokens ?? 0) + cachedInputTokens;
         v5Acc.totalTokens += spanUsage2.totalTokens || inputTokens + outputTokens;
       } else if ("promptTokens" in acc[spanModelProvider] && !hasV5Format) {
         const promptTokens = spanUsage2.promptTokens ?? 0;
@@ -19237,7 +19599,7 @@ function SpanTabs({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
-      span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }),
+      span?.attributes?.usage ? /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
       /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span })
     ] }) }),
@@ -19771,7 +20133,7 @@ function TracesList({
           date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
           time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
           name: trace?.name,
-          entityId: trace?.attributes?.agentId || trace?.attributes?.workflowId,
+          entityId: trace?.entityName || trace?.entityId || trace?.attributes?.agentId || trace?.attributes?.workflowId,
           status: trace?.attributes?.status
         };
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19877,7 +20239,7 @@ function SpanScoreList({
               entry,
               children: traceScoresListColumns.map((col) => {
                 const key = `col-${col.name}`;
-                return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+                return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: String(entry?.[col.name] ?? "") }, key);
               })
             },
             score.id
@@ -20719,6 +21081,292 @@ const StudioConfigForm = ({ initialConfig }) => {
   ] });
 };
 
+const useMastraPackages = () => {
+  const client = react$1.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["mastra-packages"],
+    queryFn: () => {
+      return client.getSystemPackages();
+    }
+  });
+};
+
+async function fetchPackageInfo(packageName, installedVersion) {
+  const prereleaseComponents = semver.prerelease(installedVersion);
+  const prereleaseTag = prereleaseComponents ? String(prereleaseComponents[0]) : null;
+  try {
+    const response = await fetch(`https://registry.npmjs.org/${encodeURIComponent(packageName)}`);
+    if (!response.ok) {
+      return {
+        name: packageName,
+        version: installedVersion,
+        latestVersion: null,
+        isOutdated: false,
+        isDeprecated: false,
+        prereleaseTag,
+        targetPrereleaseTag: null
+      };
+    }
+    const data = await response.json();
+    const latestVersion = data["dist-tags"]?.latest ?? null;
+    const versionInfo = data.versions?.[installedVersion];
+    const deprecationMessage = versionInfo?.deprecated;
+    const targetPrereleaseComponents = latestVersion ? semver.prerelease(latestVersion) : null;
+    const targetPrereleaseTag = targetPrereleaseComponents ? String(targetPrereleaseComponents[0]) : null;
+    let isOutdated = false;
+    if (latestVersion !== null && semver.valid(installedVersion) && semver.valid(latestVersion)) {
+      isOutdated = semver.gt(latestVersion, installedVersion);
+    }
+    return {
+      name: packageName,
+      version: installedVersion,
+      latestVersion,
+      isOutdated,
+      isDeprecated: !!deprecationMessage,
+      prereleaseTag,
+      targetPrereleaseTag,
+      deprecationMessage
+    };
+  } catch {
+    return {
+      name: packageName,
+      version: installedVersion,
+      latestVersion: null,
+      isOutdated: false,
+      isDeprecated: false,
+      prereleaseTag,
+      targetPrereleaseTag: null
+    };
+  }
+}
+function usePackageUpdates(packages) {
+  const queries = reactQuery.useQueries({
+    queries: packages.map((pkg) => ({
+      queryKey: ["package-update", pkg.name, pkg.version],
+      queryFn: () => fetchPackageInfo(pkg.name, pkg.version),
+      staleTime: 1e3 * 60 * 60,
+      // 1 hour - latest versions don't change often
+      gcTime: 1e3 * 60 * 60 * 24
+      // 24 hours
+    }))
+  });
+  const isLoading = queries.some((q) => q.isLoading);
+  const packageUpdates = queries.map((q) => q.data).filter((p) => p !== void 0);
+  const allComplete = !isLoading && packageUpdates.length === packages.length;
+  const outdatedCount = allComplete ? packageUpdates.filter((p) => p.isOutdated && !p.isDeprecated).length : 0;
+  const deprecatedCount = allComplete ? packageUpdates.filter((p) => p.isDeprecated).length : 0;
+  return {
+    packages: packageUpdates,
+    isLoading,
+    outdatedCount,
+    deprecatedCount
+  };
+}
+
+const packageManagerCommands = {
+  pnpm: "pnpm add",
+  npm: "npm install",
+  yarn: "yarn add",
+  bun: "bun add"
+};
+const MastraVersionFooter = ({ collapsed }) => {
+  const { data, isLoading: isLoadingPackages } = useMastraPackages();
+  const installedPackages = data?.packages ?? [];
+  const {
+    packages: packageUpdates,
+    isLoading: isLoadingUpdates,
+    outdatedCount,
+    deprecatedCount
+  } = usePackageUpdates(installedPackages);
+  const [packageManager, setPackageManager] = React.useState("pnpm");
+  if (collapsed) {
+    return null;
+  }
+  if (isLoadingPackages) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse h-4 bg-surface2 rounded w-16" }) });
+  }
+  const mastraCorePackage = installedPackages.find((pkg) => pkg.name === "@mastra/core");
+  if (!mastraCorePackage && installedPackages.length === 0) {
+    return null;
+  }
+  const mainVersion = mastraCorePackage?.version ?? installedPackages[0]?.version ?? "";
+  const updateCommand = generateUpdateCommand(packageUpdates, packageManager);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "px-3 py-2 hover:bg-surface2 transition-colors rounded w-full text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-sm", className: "text-accent1 font-mono", children: "mastra version:" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 font-mono", children: mainVersion }),
+        isLoadingUpdates && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "w-3 h-3", color: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center -space-x-1.5", children: [
+          outdatedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { count: outdatedCount, variant: "warning" }),
+          deprecatedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { count: deprecatedCount, variant: "error" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PackagesModalContent,
+      {
+        packages: packageUpdates,
+        isLoadingUpdates,
+        outdatedCount,
+        deprecatedCount,
+        updateCommand,
+        packageManager,
+        onPackageManagerChange: setPackageManager
+      }
+    )
+  ] });
+};
+function generateUpdateCommand(packages, packageManager) {
+  const outdatedPackages = packages.filter((p) => p.isOutdated || p.isDeprecated);
+  if (outdatedPackages.length === 0) return null;
+  const command = packageManagerCommands[packageManager];
+  const packageArgs = outdatedPackages.map((p) => `${p.name}@${p.targetPrereleaseTag ?? "latest"}`).join(" ");
+  return `${command} ${packageArgs}`;
+}
+function CountBadge({ count, variant }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center min-w-[1.125rem] h-[1.125rem] px-1 rounded-full text-[0.625rem] font-bold text-black",
+        variant === "error" ? "bg-red-700" : "bg-yellow-700"
+      ),
+      children: count
+    }
+  );
+}
+function StatusBadge({ value, variant }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex font-bold rounded-md px-1.5 py-0.5 items-center justify-center text-black text-xs min-w-[1.25rem]",
+        variant === "error" ? "bg-red-700" : "bg-yellow-700"
+      ),
+      children: value
+    }
+  );
+}
+const PackagesModalContent = ({
+  packages,
+  isLoadingUpdates,
+  outdatedCount,
+  deprecatedCount,
+  updateCommand,
+  packageManager,
+  onPackageManagerChange
+}) => {
+  const hasUpdates = outdatedCount > 0 || deprecatedCount > 0;
+  const packagesText = packages.map((pkg) => `${pkg.name}@${pkg.version}`).join("\n");
+  const { isCopied: isCopiedAll, handleCopy: handleCopyAll } = useCopyToClipboard({
+    text: packagesText,
+    copyMessage: "Copied package versions!"
+  });
+  const { isCopied: isCopiedCommand, handleCopy: handleCopyCommand } = useCopyToClipboard({
+    text: updateCommand ?? "",
+    copyMessage: "Copied update command!"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "bg-surface1 border-border1 max-w-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-text1", children: "Installed Mastra Packages" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-icon3 py-2", children: isLoadingUpdates ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "Checking for updates..." }) : !hasUpdates ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent1", children: "✓ All packages are up to date" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      outdatedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { value: outdatedCount, variant: "warning" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "package",
+          outdatedCount !== 1 ? "s" : "",
+          " outdated"
+        ] })
+      ] }),
+      deprecatedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { value: deprecatedCount, variant: "error" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "package",
+          deprecatedCount !== 1 ? "s" : "",
+          " deprecated"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-y-auto border border-border1 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[1fr_auto_auto] text-sm", children: packages.map((pkg, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("contents", index > 0 && "[&>div]:border-t [&>div]:border-border1"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 font-mono text-text1 truncate min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: `https://www.npmjs.com/package/${pkg.name}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "hover:text-accent1 hover:underline inline-flex items-center gap-1 group",
+          children: [
+            pkg.name,
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 font-mono text-icon3 flex items-center gap-1.5", children: pkg.isOutdated || pkg.isDeprecated ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "cursor-help",
+              pkg.isDeprecated ? "text-red-500" : pkg.isOutdated ? "text-yellow-500" : ""
+            ),
+            children: pkg.version
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: pkg.isDeprecated ? pkg.deprecationMessage || "This version is deprecated" : "Newer version available" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: pkg.version }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 font-mono text-icon3 flex items-center", children: (pkg.isOutdated || pkg.isDeprecated) && pkg.latestVersion && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoveRight, { className: "w-4 h-4 mx-2 text-icon3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent1", children: pkg.latestVersion })
+      ] }) })
+    ] }, pkg.name)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleCopyAll,
+        className: "flex items-center justify-center gap-2 w-full py-2 px-3 rounded bg-surface2 hover:bg-surface3 text-icon3 hover:text-icon1 transition-colors",
+        children: [
+          isCopiedAll ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-accent1" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-sm", children: isCopiedAll ? "Copied!" : "Copy current versions" })
+        ]
+      }
+    ),
+    hasUpdates && updateCommand && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 pt-2 border-t border-border1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-icon3 pt-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Use the command below to update your packages" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectField,
+          {
+            value: packageManager,
+            onValueChange: (value) => onPackageManagerChange(value),
+            options: [
+              { label: "pnpm", value: "pnpm" },
+              { label: "npm", value: "npm" },
+              { label: "yarn", value: "yarn" },
+              { label: "bun", value: "bun" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "flex-1 text-sm text-icon3 bg-surface2 rounded-md px-3 py-1.5 overflow-x-auto whitespace-pre-wrap break-all", children: updateCommand })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleCopyCommand,
+          className: "flex items-center justify-center gap-2 w-full py-2 px-3 rounded bg-surface2 hover:bg-surface3 text-icon3 hover:text-icon1 transition-colors",
+          children: [
+            isCopiedCommand ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-accent1" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-sm", children: isCopiedCommand ? "Copied!" : "Copy command" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const MastraPackagesInfo = MastraVersionFooter;
+
 const PlaygroundConfigGuard = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-screen w-full items-center justify-center bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full mx-auto px-4 pt-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(LogoWithoutText, { className: "size-32" }) }),
@@ -20738,6 +21386,7 @@ exports.AgentIcon = AgentIcon;
 exports.AgentInformation = AgentInformation;
 exports.AgentInformationLayout = AgentInformationLayout;
 exports.AgentInformationTabLayout = AgentInformationTabLayout;
+exports.AgentLayout = AgentLayout;
 exports.AgentMemory = AgentMemory;
 exports.AgentMetadata = AgentMetadata;
 exports.AgentMetadataList = AgentMetadataList;
@@ -20828,6 +21477,8 @@ exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
 exports.MainSidebar = MainSidebar;
 exports.MainSidebarProvider = MainSidebarProvider;
+exports.MastraPackagesInfo = MastraPackagesInfo;
+exports.MastraVersionFooter = MastraVersionFooter;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
@@ -20917,6 +21568,7 @@ exports.WorkflowCombobox = WorkflowCombobox;
 exports.WorkflowGraph = WorkflowGraph;
 exports.WorkflowIcon = WorkflowIcon;
 exports.WorkflowInformation = WorkflowInformation;
+exports.WorkflowLayout = WorkflowLayout;
 exports.WorkflowRunContext = WorkflowRunContext;
 exports.WorkflowRunDetail = WorkflowRunDetail;
 exports.WorkflowRunList = WorkflowRunList;
@@ -20931,6 +21583,7 @@ exports.convertWorkflowRunStateToStreamResult = convertWorkflowRunStateToStreamR
 exports.extractPrompt = extractPrompt;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.getColumnTemplate = getColumnTemplate;
+exports.getMainContentContentClassName = getMainContentContentClassName;
 exports.getShortId = getShortId;
 exports.getSpanTypeUi = getSpanTypeUi;
 exports.getToNextEntryFn = getToNextEntryFn;
@@ -20962,9 +21615,11 @@ exports.useMCPServerTool = useMCPServerTool;
 exports.useMCPServerTools = useMCPServerTools;
 exports.useMCPServers = useMCPServers;
 exports.useMainSidebar = useMainSidebar;
+exports.useMastraPackages = useMastraPackages;
 exports.useMemory = useMemory;
 exports.useMemoryConfig = useMemoryConfig;
 exports.useMemorySearch = useMemorySearch;
+exports.usePackageUpdates = usePackageUpdates;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.useReorderModelList = useReorderModelList;
 exports.useResetAgentModel = useResetAgentModel;