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

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useAssistantState, useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, PlayCircle, Workflow, Layers, List, Clock as Clock$1, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, CalendarIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, AlertCircleIcon, CirclePause, StopCircle, Cpu, SearchIcon, ChevronsUpDown, Search, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, ExternalLink, XIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, PanelRightIcon, KeyboardIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Trash, Link2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ShieldAlert, ChevronDown, ChevronRight, RefreshCw, Tag, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, Repeat, Repeat1, Network, CalendarIcon, Braces, ChevronDownIcon, Brackets, PlusIcon, TrashIcon, Plus, Loader2, Circle, EyeOffIcon, EyeIcon, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, AlertCircleIcon, CirclePause, StopCircle, Cpu, SearchIcon, ChevronsUpDown, Search, ArrowRight, ArrowLeft, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, ExternalLink, XIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, PanelRightIcon, KeyboardIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, ChevronsUpIcon, ChevronsDownIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Trash, Link2, MoveRight, Copy } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId, Suspense, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -19,7 +19,7 @@ import CodeMirror, { EditorView as EditorView$1 } from '@uiw/react-codemirror';
 import { toast as toast$1 } from 'sonner';
 import './index.css';export { Toaster } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useQuery, useMutation, useInfiniteQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useQuery, useMutation, useInfiniteQuery, useQueryClient, QueryClient, QueryClientProvider, useQueries } from '@tanstack/react-query';
 export * from '@tanstack/react-query';
 import { useMastraClient, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
 import { create } from 'zustand';
@@ -74,6 +74,8 @@ import { languages } from '@codemirror/language-data';
 import { githubDarkInit } from '@uiw/codemirror-theme-github';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Separator, usePanelRef, Panel as Panel$1, useDefaultLayout, Group } from 'react-resizable-panels';
+import semver from 'semver';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -4457,6 +4459,7 @@ const BadgeWrapper = ({
 };
 
 const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
@@ -4954,7 +4957,8 @@ function useTracingSettingsState({ entityId, entityType }) {
   return {
     settings,
     setSettings,
-    resetAll
+    resetAll,
+    entityType
   };
 }
 
@@ -4963,7 +4967,8 @@ const TracingSettingsContext = createContext({
   },
   resetAll: () => {
   },
-  settings: void 0
+  settings: void 0,
+  entityType: void 0
 });
 const TracingSettingsProvider = ({ children, entityId, entityType }) => {
   const state = useTracingSettingsState({ entityId, entityType });
@@ -5036,7 +5041,7 @@ const useExecuteWorkflow = () => {
     startAsyncWorkflowRun
   };
 };
-const useStreamWorkflow = () => {
+const useStreamWorkflow = ({ debugMode }) => {
   const client = useMastraClient();
   const { settings } = useTracingSettings();
   const [streamResult, setStreamResult] = useState({});
@@ -5092,6 +5097,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");
       }
@@ -5102,7 +5111,8 @@ const useStreamWorkflow = () => {
       workflowId,
       runId,
       inputData,
-      requestContext: playgroundRequestContext
+      requestContext: playgroundRequestContext,
+      perStep
     }) => {
       if (readerRef.current) {
         readerRef.current.releaseLock();
@@ -5120,7 +5130,8 @@ const useStreamWorkflow = () => {
         inputData,
         requestContext,
         closeOnSuspend: true,
-        tracingOptions: settings?.tracingOptions
+        tracingOptions: settings?.tracingOptions,
+        perStep: perStep ?? debugMode
       });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
@@ -5225,7 +5236,8 @@ const useStreamWorkflow = () => {
       runId,
       step,
       resumeData,
-      requestContext: playgroundRequestContext
+      requestContext: playgroundRequestContext,
+      perStep
     }) => {
       if (resumeStreamRef.current) {
         resumeStreamRef.current.releaseLock();
@@ -5242,7 +5254,8 @@ const useStreamWorkflow = () => {
         step,
         resumeData,
         requestContext,
-        tracingOptions: settings?.tracingOptions
+        tracingOptions: settings?.tracingOptions,
+        perStep: perStep ?? debugMode
       });
       if (!stream) {
         return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
@@ -5288,6 +5301,7 @@ const useStreamWorkflow = () => {
       workflowId,
       requestContext: playgroundRequestContext,
       runId,
+      perStep,
       ...params
     }) => {
       if (timeTravelStreamRef.current) {
@@ -5303,6 +5317,7 @@ const useStreamWorkflow = () => {
       const run = await workflow.createRun({ runId });
       const stream = await run.timeTravelStream({
         ...params,
+        perStep: perStep ?? debugMode,
         requestContext,
         tracingOptions: settings?.tracingOptions
       });
@@ -5554,6 +5569,7 @@ function WorkflowRunProvider({
   const [payload, setPayload] = useState(() => snapshot?.context?.input ?? null);
   const [runId, setRunId] = useState(() => initialRunId ?? "");
   const [isRunning, setIsRunning] = useState(false);
+  const [debugMode, setDebugMode] = useState(false);
   const refetchExecResultInterval = isRunning ? void 0 : ["success", "failed", "canceled", "bailed"].includes(result?.status ?? "") ? void 0 : 5e3;
   const { isLoading: isLoadingRunExecutionResult, data: runExecutionResult } = useWorkflowRunExecutionResult(
     workflowId,
@@ -5583,7 +5599,7 @@ function WorkflowRunProvider({
     closeStreamsAndReset,
     resumeWorkflowStream,
     timeTravelWorkflowStream
-  } = useStreamWorkflow();
+  } = useStreamWorkflow({ debugMode });
   const { mutateAsync: cancelWorkflowRun, isPending: isCancellingWorkflowRun } = useCancelWorkflowRun();
   const clearData = () => {
     setResult(null);
@@ -5639,7 +5655,9 @@ function WorkflowRunProvider({
         },
         runSnapshot,
         isLoadingRunExecutionResult,
-        withoutTimeTravel
+        withoutTimeTravel,
+        debugMode,
+        setDebugMode
       },
       children: /* @__PURE__ */ jsx(WorkflowStepDetailProvider, { children })
     }
@@ -7817,17 +7835,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
   } = useContext(WorkflowRunContext);
   const { requestContext } = usePlaygroundStore();
-  const stepResult = result?.steps?.[stepKey];
+  const stepResult = inputData ? { payload: inputData } : result?.steps?.[stepKey];
   const [resumeData, setResumeData] = useState(() => "{}");
   const [contextValue, setContextValue] = useState(() => "{}");
   const [nestedContextValue, setNestedContextValue] = useState(() => "{}");
@@ -7853,17 +7878,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) {
@@ -7887,47 +7915,27 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
         schema: stepSchema,
         defaultValues: stepResult?.payload,
         isSubmitLoading: isSubmitting,
-        submitButtonLabel: "Start time travel",
+        submitButtonLabel: buttonText,
         onSubmit: handleSubmit,
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 pb-4", children: [
-          /* @__PURE__ */ jsx(
-            JsonField,
-            {
-              label: "Resume Data (JSON)",
-              value: resumeData,
-              onChange: setResumeData,
-              helperText: "Provide any resume payloads that should be passed to the step."
-            }
-          ),
-          /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              JsonField,
+              {
+                label: "Resume Data (JSON)",
+                value: resumeData,
+                onChange: setResumeData,
+                helperText: "Provide any resume payloads that should be passed to the step."
+              }
+            ),
+            /* @__PURE__ */ 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: {
@@ -7937,10 +7945,32 @@ const WorkflowTimeTravelForm = ({ stepKey, closeModal }) => {
                       value: "test output"
                     }
                   }
-                }
-              })
-            }
-          ),
+                })
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(Txt, { variant: "ui-sm", className: "text-accent2", children: formError })
         ] })
       }
@@ -7960,7 +7990,8 @@ const WorkflowStepActionBar = ({
   stepId,
   onShowNestedGraph,
   status,
-  stepKey
+  stepKey,
+  stepsFlow
 }) => {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
@@ -7968,11 +7999,53 @@ const WorkflowStepActionBar = ({
   const [isErrorOpen, setIsErrorOpen] = useState(false);
   const [isTripwireOpen, setIsTripwireOpen] = useState(false);
   const [isTimeTravelOpen, setIsTimeTravelOpen] = useState(false);
-  const { withoutTimeTravel } = useContext(WorkflowRunContext);
+  const [isContinueRunOpen, setIsContinueRunOpen] = useState(false);
+  const [isPerStepRunOpen, setIsPerStepRunOpen] = useState(false);
+  const {
+    withoutTimeTravel,
+    debugMode,
+    result,
+    runSnapshot,
+    timeTravelWorkflowStream,
+    runId: prevRunId,
+    workflowId,
+    setDebugMode
+  } = 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 = 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";
@@ -7990,7 +8063,32 @@ const WorkflowStepActionBar = ({
       onShowNestedGraph?.();
     }
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || tripwire || mapConfig || resumeData || onShowNestedGraph || showTimeTravel) && /* @__PURE__ */ 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__ */ jsx(Fragment, { children: (input || output || error || tripwire || mapConfig || resumeData || onShowNestedGraph || showTimeTravel || showDebugMode) && /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -8014,6 +8112,66 @@ const WorkflowStepActionBar = ({
             /* @__PURE__ */ jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsx(WorkflowTimeTravelForm, { stepKey, closeModal: () => setIsTimeTravelOpen(false) }) })
           ] }) })
         ] }),
+        showDebugMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              onClick: () => {
+                if (mapConfig) {
+                  handleRunMapStep();
+                } else {
+                  setIsPerStepRunOpen(true);
+                }
+              },
+              children: "Run step"
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog, { open: isPerStepRunOpen, onOpenChange: setIsPerStepRunOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              "Run step ",
+              stepKey
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsx(
+              WorkflowTimeTravelForm,
+              {
+                stepKey,
+                closeModal: () => setIsPerStepRunOpen(false),
+                isPerStepRun: true,
+                buttonText: "Run step",
+                inputData: stepPayload?.input
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              onClick: () => {
+                if (mapConfig) {
+                  handleRunMapStep(true);
+                } else {
+                  setIsContinueRunOpen(true);
+                }
+              },
+              children: "Continue run"
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog, { open: isContinueRunOpen, onOpenChange: setIsContinueRunOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              "Continue run ",
+              stepKey
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-scroll max-h-[600px]", children: /* @__PURE__ */ jsx(
+              WorkflowTimeTravelForm,
+              {
+                stepKey,
+                closeModal: () => setIsContinueRunOpen(false),
+                isContinueRun: true,
+                buttonText: "Continue run",
+                inputData: stepPayload?.input
+              }
+            ) })
+          ] }) })
+        ] }),
         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" }),
@@ -8246,7 +8404,11 @@ const Clock = ({ startedAt, endedAt }) => {
   ] });
 };
 
-function WorkflowDefaultNode({ data, parentWorkflowName }) {
+function WorkflowDefaultNode({
+  data,
+  parentWorkflowName,
+  stepsFlow
+}) {
   const { steps } = useCurrentRun();
   const {
     label,
@@ -8346,7 +8508,8 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
               tripwire: isTripwire ? step?.tripwire : void 0,
               mapConfig,
               status: displayStatus,
-              stepKey
+              stepKey,
+              stepsFlow
             }
           )
         ]
@@ -8409,36 +8572,13 @@ function WorkflowLoopResultNode({ data }) {
   );
 }
 
-const WorkflowNestedGraphContext = createContext(
-  {}
-);
-function WorkflowNestedGraphProvider({ children }) {
-  const { showNestedGraph: showNestedGraphInPanel, closeStepDetail } = useWorkflowStepDetail();
-  const showNestedGraph = ({
-    label,
-    stepGraph,
-    fullStep
-  }) => {
-    showNestedGraphInPanel({ label, stepGraph, fullStep });
-  };
-  const closeNestedGraph = () => {
-    closeStepDetail();
-  };
-  return /* @__PURE__ */ jsx(
-    WorkflowNestedGraphContext.Provider,
-    {
-      value: {
-        showNestedGraph,
-        closeNestedGraph
-      },
-      children
-    }
-  );
-}
-
-function WorkflowNestedNode({ data, parentWorkflowName }) {
+function WorkflowNestedNode({
+  data,
+  parentWorkflowName,
+  stepsFlow
+}) {
   const { steps } = useCurrentRun();
-  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
+  const { showNestedGraph } = useWorkflowStepDetail();
   const {
     label,
     stepId,
@@ -8520,7 +8660,8 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
               mapConfig,
               onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
               status: displayStatus,
-              stepKey
+              stepKey,
+              stepsFlow
             }
           )
         ]
@@ -8577,12 +8718,28 @@ function WorkflowGraphInner({ workflow }) {
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
+  const stepsFlow = 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__ */ jsx(WorkflowDefaultNode, { ...props, stepsFlow }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { ...props, stepsFlow })
   };
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -8611,6 +8768,33 @@ function WorkflowGraphInner({ workflow }) {
   ) });
 }
 
+const WorkflowNestedGraphContext = createContext(
+  {}
+);
+function WorkflowNestedGraphProvider({ children }) {
+  const { showNestedGraph: showNestedGraphInPanel, closeStepDetail } = useWorkflowStepDetail();
+  const showNestedGraph = ({
+    label,
+    stepGraph,
+    fullStep
+  }) => {
+    showNestedGraphInPanel({ label, stepGraph, fullStep });
+  };
+  const closeNestedGraph = () => {
+    closeStepDetail();
+  };
+  return /* @__PURE__ */ jsx(
+    WorkflowNestedGraphContext.Provider,
+    {
+      value: {
+        showNestedGraph,
+        closeNestedGraph
+      },
+      children
+    }
+  );
+}
+
 function WorkflowGraph({ workflowId, workflow, isLoading }) {
   const { snapshot } = useContext(WorkflowRunContext);
   if (isLoading) {
@@ -9329,18 +9513,17 @@ const columns$4 = [
   }
 ];
 
-const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700",
-  dark: "bg-surface4 border-border1 text-icon6"
-};
-const Kbd = ({ children, theme = "dark" }) => {
-  const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
-};
-
-const Searchbar = ({ onSearch, label, placeholder }) => {
+const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300 }) => {
   const id = useId();
   const inputRef = useRef(null);
+  const debouncedSearch = useDebouncedCallback((value) => {
+    onSearch(value);
+  }, debounceMs);
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
   useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
@@ -9355,37 +9538,27 @@ const Searchbar = ({ onSearch, label, placeholder }) => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.target);
-    const search = formData.get(id);
-    onSearch(search);
+  const handleChange = (e) => {
+    debouncedSearch(e.target.value);
   };
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "focus-within:outline focus-within:outline-accent1 -outline-offset-2 border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1",
-      children: [
-        /* @__PURE__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id,
-              type: "text",
-              placeholder,
-              className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 outline-none",
-              name: id,
-              ref: inputRef
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx(Kbd, { children: "↵ Enter" }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "focus-within:outline focus-within:outline-accent1 -outline-offset-2 border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1", children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          placeholder,
+          className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 outline-none",
+          name: id,
+          ref: inputRef,
+          onChange: handleChange
+        }
+      )
+    ] })
+  ] });
 };
 const SearchbarWrapper = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b-sm border-border1", children });
@@ -9510,7 +9683,7 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+  return /* @__PURE__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full overflow-x-auto", className), children });
 };
 const TabList$1 = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
@@ -9544,9 +9717,17 @@ const TabContent$1 = ({ children, value }) => {
   return /* @__PURE__ */ jsx(TabsContent, { value, className: "h-full overflow-auto flex flex-col", children });
 };
 
+const WorkflowRunOptions = () => {
+  const { debugMode, setDebugMode } = useContext(WorkflowRunContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Txt, { as: "h3", variant: "ui-md", className: "text-icon3", children: "Debug Mode" }),
+    /* @__PURE__ */ 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 });
@@ -9575,7 +9756,8 @@ const TracingRunOptions = () => {
         extensions: [jsonLanguage],
         className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
       }
-    )
+    ),
+    entityType === "workflow" && /* @__PURE__ */ jsx(WorkflowRunOptions, {})
   ] });
 };
 
@@ -9606,12 +9788,28 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
+  const stepsFlow = 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__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props, stepsFlow }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props, stepsFlow })
   };
   useEffect(() => {
     if (open) {
@@ -9681,7 +9879,7 @@ function WorkflowStepDetailContent() {
           open: true,
           workflowName: stepDetail.nestedGraph.fullStep
         }
-      ) }) })
+      ) }, stepDetail.nestedGraph.fullStep) })
     ] })
   ] });
 }
@@ -10022,6 +10220,162 @@ function WorkflowCombobox({
   );
 }
 
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    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] = useState(false);
+  const panelRef = usePanelRef();
+  const expand = () => {
+    if (!panelRef.current) return;
+    panelRef.current.expand();
+  };
+  return /* @__PURE__ */ jsx(
+    Panel$1,
+    {
+      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__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { onClick: expand, className: "!h-48 border-none", children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ArrowRight, {}) : /* @__PURE__ */ jsx(ArrowLeft, {}) }) }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Expand" })
+      ] }) : children
+    }
+  );
+};
+
+const WorkflowLayout = ({ workflowId, children, leftSlot, rightSlot }) => {
+  const { defaultLayout, onLayoutChange } = useDefaultLayout({
+    id: `workflow-layout-${workflowId}`,
+    storage: localStorage
+  });
+  const computedClassName = getMainContentContentClassName({
+    isCentered: false,
+    isDivided: true,
+    hasLeftServiceColumn: Boolean(leftSlot)
+  });
+  return /* @__PURE__ */ jsxs(Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
+    leftSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsiblePanel,
+        {
+          direction: "left",
+          id: "left-slot",
+          minSize: 200,
+          maxSize: "30%",
+          defaultSize: 200,
+          collapsedSize: 60,
+          collapsible: true,
+          children: leftSlot
+        }
+      ),
+      /* @__PURE__ */ jsx(PanelSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsx(Panel$1, { id: "main-slot", children }),
+    rightSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PanelSeparator, {}),
+      /* @__PURE__ */ jsx(
+        CollapsiblePanel,
+        {
+          direction: "right",
+          id: "right-slot",
+          minSize: 300,
+          maxSize: "50%",
+          defaultSize: 300,
+          collapsedSize: 60,
+          collapsible: true,
+          children: rightSlot
+        }
+      )
+    ] })
+  ] });
+};
+
 const LoadingBadge = () => {
   return /* @__PURE__ */ jsx(
     BadgeWrapper,
@@ -11984,12 +12338,12 @@ function MastraRuntimeProvider({
     requireToolApproval
   };
   const baseClient = useMastraClient();
-  const isVNext = modelVersion === "v2";
+  const isSupportedModel = modelVersion === "v2" || modelVersion === "v3";
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    if (!isVNext) {
+    if (!isSupportedModel) {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
     const controller = new AbortController();
@@ -12000,7 +12354,7 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
-      if (isVNext) {
+      if (isSupportedModel) {
         if (chatWithNetwork) {
           await sendMessage({
             message: input,
@@ -12343,7 +12697,7 @@ function MastraRuntimeProvider({
       if (error.name === "AbortError") {
         return;
       }
-      if (isVNext) {
+      if (isSupportedModel) {
         setMessages((currentConversation) => [
           ...currentConversation,
           { role: "assistant", parts: [{ type: "text", text: `${error}` }] }
@@ -12370,7 +12724,7 @@ function MastraRuntimeProvider({
   const vnextmessages = messages.map(toAssistantUIMessage);
   const runtime = useExternalStoreRuntime({
     isRunning: isLegacyRunning || isRunningStream,
-    messages: isVNext ? vnextmessages : legacyMessages,
+    messages: isSupportedModel ? vnextmessages : legacyMessages,
     convertMessage: (x) => x,
     onNew,
     onCancel,
@@ -12820,8 +13174,9 @@ const AgentSettings = ({ agentId }) => {
   const hasMemory = Boolean(memory?.result);
   const hasSubAgents = Boolean(Object.keys(agent.agents || {}).length > 0);
   const modelVersion = agent.modelVersion;
+  const isSupportedModel = modelVersion === "v2" || modelVersion === "v3";
   let radioValue;
-  if (modelVersion === "v2") {
+  if (isSupportedModel) {
     if (settings?.modelSettings?.chatWithNetwork) {
       radioValue = "network";
     } else {
@@ -12848,23 +13203,23 @@ const AgentSettings = ({ agentId }) => {
           }),
           className: "flex flex-row gap-4",
           children: [
-            modelVersion !== "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateLegacy", children: "Generate (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
             ] }),
-            modelVersion !== "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "streamLegacy", id: "streamLegacy", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamLegacy", children: "Stream (Legacy)" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isSupportedModel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
             ] }),
-            modelVersion === "v2" && /* @__PURE__ */ jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
+            isSupportedModel && /* @__PURE__ */ jsx(NetworkCheckbox, { hasMemory, hasSubAgents })
           ]
         }
       ) }),
@@ -13718,62 +14073,6 @@ const CombinedButtons = ({ className, children }) => {
   );
 };
 
-function MainContentLayout({
-  children,
-  className,
-  style
-}) {
-  const devStyleRequested = devUIStyleRequested("MainContentLayout");
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
 }
@@ -15939,7 +16238,7 @@ const AgentMetadata = ({ agentId }) => {
       AgentMetadataSection,
       {
         title: "Model",
-        hint: agent.modelVersion === "v2" ? void 0 : {
+        hint: agent.modelVersion === "v2" || agent.modelVersion === "v3" ? void 0 : {
           link: "https://mastra.ai/guides/migrations/vnext-to-standard-apis",
           title: "You are using a legacy v1 model",
           icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
@@ -16067,7 +16366,7 @@ const AgentEntityHeader = ({ agentId }) => {
 };
 
 const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
+  return /* @__PURE__ */ jsx("nav", { className: "bg-surface2 min-h-full overflow-hidden", children });
 };
 const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
   return /* @__PURE__ */ jsx(
@@ -17181,7 +17480,7 @@ const useAgentInformationSettings = ({ modelId }) => {
 const AgentInformationLayout = ({ children, agentId }) => {
   const { data: agent } = useAgent(agentId);
   useAgentInformationSettings({ modelId: agent?.modelId || "" });
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children });
+  return /* @__PURE__ */ 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);
@@ -17193,6 +17492,53 @@ const AgentInformationTabLayout = ({ children, agentId }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsx(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
 };
 
+const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
+  const { defaultLayout, onLayoutChange } = useDefaultLayout({
+    id: `agent-layout-${agentId}`,
+    storage: localStorage
+  });
+  const computedClassName = getMainContentContentClassName({
+    isCentered: false,
+    isDivided: true,
+    hasLeftServiceColumn: Boolean(leftSlot)
+  });
+  return /* @__PURE__ */ jsxs(Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
+    leftSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsiblePanel,
+        {
+          direction: "left",
+          id: "left-slot",
+          minSize: 200,
+          maxSize: "30%",
+          defaultSize: 200,
+          collapsedSize: 60,
+          collapsible: true,
+          children: leftSlot
+        }
+      ),
+      /* @__PURE__ */ jsx(PanelSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsx(Panel$1, { id: "main-slot", className: "grid overflow-y-auto relative bg-surface1 py-4", children }),
+    rightSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PanelSeparator, {}),
+      /* @__PURE__ */ 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;
@@ -18160,7 +18506,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();
@@ -18755,17 +19101,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
         }
       ]
     },
@@ -18774,9 +19124,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
         }
       ]
     },
@@ -18818,11 +19168,12 @@ function getSpanInfo({ span }) {
       value: span?.endedAt ? 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;
@@ -18925,9 +19276,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 || {};
@@ -18955,8 +19307,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;
@@ -19213,7 +19565,7 @@ function SpanTabs({
       ] })
     ] }),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxs(Sections, { children: [
-      span?.attributes?.usage && /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }),
+      span?.attributes?.usage ? /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }) : null,
       /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
       /* @__PURE__ */ jsx(SpanDetails, { span })
     ] }) }),
@@ -19747,7 +20099,7 @@ function TracesList({
           date: isTodayDate ? "Today" : format(createdAtDate, "MMM dd"),
           time: 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__ */ jsx(
@@ -19853,7 +20205,7 @@ function SpanScoreList({
               entry,
               children: traceScoresListColumns.map((col) => {
                 const key = `col-${col.name}`;
-                return /* @__PURE__ */ jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+                return /* @__PURE__ */ jsx(EntryList.EntryText, { children: String(entry?.[col.name] ?? "") }, key);
               })
             },
             score.id
@@ -20086,6 +20438,15 @@ const PlaygroundQueryClient = ({ children, options }) => {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
 };
 
+const themeClasses = {
+  light: "bg-gray-100 border-gray-300 text-gray-700",
+  dark: "bg-surface4 border-border1 text-icon6"
+};
+const Kbd = ({ children, theme = "dark" }) => {
+  const themeClass = themeClasses[theme];
+  return /* @__PURE__ */ jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
 const errorFallback = "Something went wrong while fetching the data.";
 const parseError = (error) => {
   try {
@@ -20686,6 +21047,292 @@ const StudioConfigForm = ({ initialConfig }) => {
   ] });
 };
 
+const useMastraPackages = () => {
+  const client = useMastraClient();
+  return 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 = 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] = useState("pnpm");
+  if (collapsed) {
+    return null;
+  }
+  if (isLoadingPackages) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ 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__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "px-3 py-2 hover:bg-surface2 transition-colors rounded w-full text-left", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-accent1 font-mono", children: "mastra version:" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 font-mono", children: mainVersion }),
+        isLoadingUpdates && /* @__PURE__ */ jsx(Spinner, { className: "w-3 h-3", color: "currentColor" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center -space-x-1.5", children: [
+          outdatedCount > 0 && /* @__PURE__ */ jsx(CountBadge, { count: outdatedCount, variant: "warning" }),
+          deprecatedCount > 0 && /* @__PURE__ */ jsx(CountBadge, { count: deprecatedCount, variant: "error" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(DialogContent, { className: "bg-surface1 border-border1 max-w-2xl", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-text1", children: "Installed Mastra Packages" }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-icon3 py-2", children: isLoadingUpdates ? /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "Checking for updates..." }) : !hasUpdates ? /* @__PURE__ */ jsx("span", { className: "text-accent1", children: "✓ All packages are up to date" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      outdatedCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(StatusBadge, { value: outdatedCount, variant: "warning" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "package",
+          outdatedCount !== 1 ? "s" : "",
+          " outdated"
+        ] })
+      ] }),
+      deprecatedCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(StatusBadge, { value: deprecatedCount, variant: "error" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "package",
+          deprecatedCount !== 1 ? "s" : "",
+          " deprecated"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto border border-border1 rounded-md", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[1fr_auto_auto] text-sm", children: packages.map((pkg, index) => /* @__PURE__ */ jsxs("div", { className: cn("contents", index > 0 && "[&>div]:border-t [&>div]:border-border1"), children: [
+      /* @__PURE__ */ jsx("div", { className: "py-2 px-3 font-mono text-text1 truncate min-w-0", children: /* @__PURE__ */ 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__ */ jsx(ExternalLink, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "py-2 px-3 font-mono text-icon3 flex items-center gap-1.5", children: pkg.isOutdated || pkg.isDeprecated ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "cursor-help",
+              pkg.isDeprecated ? "text-red-500" : pkg.isOutdated ? "text-yellow-500" : ""
+            ),
+            children: pkg.version
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: pkg.isDeprecated ? pkg.deprecationMessage || "This version is deprecated" : "Newer version available" })
+      ] }) : /* @__PURE__ */ jsx("span", { children: pkg.version }) }),
+      /* @__PURE__ */ jsx("div", { className: "py-2 px-3 font-mono text-icon3 flex items-center", children: (pkg.isOutdated || pkg.isDeprecated) && pkg.latestVersion && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MoveRight, { className: "w-4 h-4 mx-2 text-icon3" }),
+        /* @__PURE__ */ jsx("span", { className: "text-accent1", children: pkg.latestVersion })
+      ] }) })
+    ] }, pkg.name)) }) }),
+    /* @__PURE__ */ 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__ */ jsx(Check, { className: "w-4 h-4 text-accent1" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", children: isCopiedAll ? "Copied!" : "Copy current versions" })
+        ]
+      }
+    ),
+    hasUpdates && updateCommand && /* @__PURE__ */ jsxs("div", { className: "space-y-3 pt-2 border-t border-border1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-icon3 pt-3", children: [
+        /* @__PURE__ */ jsx(Info, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx("span", { children: "Use the command below to update your packages" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Check, { className: "w-4 h-4 text-accent1" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", children: isCopiedCommand ? "Copied!" : "Copy command" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const MastraPackagesInfo = MastraVersionFooter;
+
 const PlaygroundConfigGuard = () => {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col h-screen w-full items-center justify-center bg-surface1", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full mx-auto px-4 pt-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center pb-4", children: /* @__PURE__ */ jsx(LogoWithoutText, { className: "size-32" }) }),
@@ -20693,5 +21340,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, 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 };
+export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, 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, MastraPackagesInfo, MastraVersionFooter, 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, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getMainContentContentClassName, 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, useMastraPackages, useMemory, useMemoryConfig, useMemorySearch, usePackageUpdates, 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