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

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) })
     ] })
   ] });
 }
@@ -9844,8 +10053,7 @@ function Combobox({
   emptyText = "No option found.",
   className,
   disabled = false,
-  buttonClassName,
-  contentClassName
+  variant = "default"
 }) {
   const [open, setOpen] = React__namespace.useState(false);
   const [search, setSearch] = React__namespace.useState("");
@@ -9923,78 +10131,71 @@ function Combobox({
       Button$2,
       {
         ref: triggerRef,
-        variant: "outline",
+        variant,
         role: "combobox",
         "aria-expanded": open,
-        className: cn("w-full justify-between", buttonClassName, className),
+        className: cn("w-full justify-between", className),
         disabled,
+        size: "sm",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-ui-lg", children: selectedOption ? selectedOption.label : placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PopoverContent,
-      {
-        className: cn("p-0", contentClassName),
-        align: "start",
-        style: { width: triggerWidth ? `${triggerWidth}px` : void 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 outline-none",
+            placeholder: searchPlaceholder,
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            onKeyDown: handleKeyDown,
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-controls": "combobox-options",
+            "aria-expanded": open
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: listRef,
+          id: "combobox-options",
+          role: "listbox",
+          className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
+            const isSelected = value === option.value;
+            const isHighlighted = index === highlightedIndex;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                ref: inputRef,
-                className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 outline-none",
-                placeholder: searchPlaceholder,
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                onKeyDown: handleKeyDown,
-                role: "combobox",
-                "aria-autocomplete": "list",
-                "aria-controls": "combobox-options",
-                "aria-expanded": open
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: listRef,
-              id: "combobox-options",
-              role: "listbox",
-              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
-                const isSelected = value === option.value;
-                const isHighlighted = index === highlightedIndex;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    "aria-selected": isSelected,
-                    className: cn(
-                      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
-                      "hover:bg-accent hover:text-accent-foreground",
-                      isHighlighted && "bg-accent text-accent-foreground",
-                      isSelected && !isHighlighted && "bg-accent/50"
-                    ),
-                    onClick: () => handleSelect(option.value),
-                    onMouseEnter: () => setHighlightedIndex(index),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
-                      option.label
-                    ]
-                  },
-                  option.value
-                );
-              })
-            }
-          )
-        ] })
-      }
-    )
+                role: "option",
+                "aria-selected": isSelected,
+                className: cn(
+                  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  isHighlighted && "bg-accent text-accent-foreground",
+                  isSelected && !isHighlighted && "bg-accent/50"
+                ),
+                onClick: () => handleSelect(option.value),
+                onMouseEnter: () => setHighlightedIndex(index),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
+                  option.label
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -10005,9 +10206,7 @@ function WorkflowCombobox({
   searchPlaceholder = "Search workflows...",
   emptyText = "No workflows found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: workflows = {}, isLoading, isError, error } = useWorkflows();
   const { navigate, paths } = useLinkComponent();
@@ -10039,12 +10238,167 @@ function WorkflowCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
 
+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,
@@ -11317,7 +11671,7 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { agentName }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
         react.ThreadPrimitive.Messages,
         {
           components: {
@@ -11355,11 +11709,11 @@ const Composer = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
   const textareaRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2",
+        className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-3xl w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2",
         onClick: () => {
           textareaRef.current?.focus();
         },
@@ -12526,149 +12880,151 @@ const AgentAdvancedSettings = () => {
       setError("Invalid JSON");
     }
   };
-  const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
-  const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
-  const collapsibleContentClassName = "bg-surface2 p-[10px] grid grid-cols-2 gap-[10px]";
-  const buttonClass = "text-icon3 hover:text-icon6";
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
-      "Advanced Settings",
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "frequency-penalty",
-            type: "number",
-            step: "0.1",
-            min: "-1",
-            max: "1",
-            value: settings?.modelSettings?.frequencyPenalty ?? "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "presence-penalty",
-            type: "number",
-            step: "0.1",
-            min: "-1",
-            max: "1",
-            value: settings?.modelSettings?.presencePenalty ?? "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                presencePenalty: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "top-k",
-            type: "number",
-            value: settings?.modelSettings?.topK || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                topK: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-tokens",
-            type: "number",
-            value: settings?.modelSettings?.maxTokens || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxTokens: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-steps",
-            type: "number",
-            value: settings?.modelSettings?.maxSteps || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxSteps: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "max-retries",
-            type: "number",
-            value: settings?.modelSettings?.maxRetries || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                maxRetries: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
+  const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
+  const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
+  const collapsibleContentClassName = "bg-surface2 p-[10px] @container/collapsible";
+  const buttonClass = "text-icon3 hover:text-icon6";
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
+      "Advanced Settings",
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 pb-2 @xs/collapsible:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "frequency-penalty",
+              type: "number",
+              step: "0.1",
+              min: "-1",
+              max: "1",
+              value: settings?.modelSettings?.frequencyPenalty ?? "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "presence-penalty",
+              type: "number",
+              step: "0.1",
+              min: "-1",
+              max: "1",
+              value: settings?.modelSettings?.presencePenalty ?? "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  presencePenalty: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "top-k",
+              type: "number",
+              value: settings?.modelSettings?.topK || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  topK: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-tokens",
+              type: "number",
+              value: settings?.modelSettings?.maxTokens || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxTokens: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-steps",
+              type: "number",
+              value: settings?.modelSettings?.maxSteps || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxSteps: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "max-retries",
+              type: "number",
+              value: settings?.modelSettings?.maxRetries || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  maxRetries: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "seed", children: "Seed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "seed",
+              type: "number",
+              value: settings?.modelSettings?.seed || "",
+              onChange: (e) => setSettings({
+                ...settings,
+                modelSettings: {
+                  ...settings?.modelSettings,
+                  seed: e.target.value ? Number(e.target.value) : void 0
+                }
+              })
+            }
+          )
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "seed", children: "Seed" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "seed",
-            type: "number",
-            value: settings?.modelSettings?.seed || "",
-            onChange: (e) => setSettings({
-              ...settings,
-              modelSettings: {
-                ...settings?.modelSettings,
-                seed: e.target.value ? Number(e.target.value) : void 0
-              }
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 col-span-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "provider-options", children: "Provider Options" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -12855,7 +13211,7 @@ const AgentSettings = ({ agentId }) => {
     radioValue = settings?.modelSettings?.chatWithGenerateLegacy ? "generateLegacy" : "streamLegacy";
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7 @container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxRuntime.jsxs(
         RadioGroup,
         {
@@ -12870,7 +13226,7 @@ const AgentSettings = ({ agentId }) => {
               chatWithNetwork: value === "network"
             }
           }),
-          className: "flex flex-row gap-4",
+          className: "flex flex-col gap-4 @xs:flex-row",
           children: [
             !isSupportedModel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateLegacy", id: "generateLegacy", className: "text-icon6" }),
@@ -12902,7 +13258,7 @@ const AgentSettings = ({ agentId }) => {
           })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 @xs:grid-cols-2 gap-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Slider,
@@ -13742,62 +14098,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 });
 }
@@ -14945,9 +15245,7 @@ function ScorerCombobox({
   searchPlaceholder = "Search scorers...",
   emptyText = "No scorers found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: scorers = {}, isLoading, isError, error } = useScorers();
   const { navigate, paths } = useLinkComponent();
@@ -14979,8 +15277,7 @@ function ScorerCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -15274,8 +15571,8 @@ const AgentMetadataModelSwitcher = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col xl:flex-row items-stretch xl:items-center gap-2 w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "@container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col @xs:flex-row items-stretch @xs:items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Popover,
         {
@@ -15288,7 +15585,7 @@ const AgentMetadataModelSwitcher = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full xl:w-2/5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full @xs:w-2/5", children: [
               !isSearchingProvider && currentModelProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: currentModelProvider, size: 16 }),
@@ -15467,7 +15764,7 @@ const AgentMetadataModelSwitcher = ({
                 "aria-label": "Search models",
                 spellCheck: "false",
                 ref: modelInputRef,
-                className: "w-full xl:w-3/5",
+                className: "w-full @xs:w-3/5",
                 type: "text",
                 value: modelSearch || selectedModel,
                 onChange: (e) => {
@@ -16091,7 +16388,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(
@@ -16294,9 +16591,7 @@ function AgentCombobox({
   searchPlaceholder = "Search agents...",
   emptyText = "No agents found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: agents = {}, isLoading, isError, error } = useAgents();
   const { navigate, paths } = useLinkComponent();
@@ -16328,8 +16623,7 @@ function AgentCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -17205,7 +17499,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 +17511,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;
@@ -17444,9 +17785,7 @@ function ToolCombobox({
   searchPlaceholder = "Search tools...",
   emptyText = "No tools found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: tools = {}, isLoading: isLoadingTools, isError: isErrorTools, error: errorTools } = useTools();
   const { data: agents = {}, isLoading: isLoadingAgents, isError: isErrorAgents, error: errorAgents } = useAgents();
@@ -17500,8 +17839,7 @@ function ToolCombobox({
       emptyText,
       className,
       disabled: disabled || isLoadingTools || isLoadingAgents || isErrorTools || isErrorAgents,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -18184,7 +18522,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 +19117,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 +19140,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 +19184,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 +19292,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 +19323,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 +19581,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 +20115,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 +20221,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
@@ -20515,9 +20859,7 @@ function MCPServerCombobox({
   searchPlaceholder = "Search MCP servers...",
   emptyText = "No MCP servers found.",
   className,
-  disabled = false,
-  buttonClassName = "h-8",
-  contentClassName
+  disabled = false
 }) {
   const { data: mcpServers = [], isLoading, isError, error } = useMCPServers();
   const { navigate, paths } = useLinkComponent();
@@ -20549,8 +20891,7 @@ function MCPServerCombobox({
       emptyText,
       className,
       disabled: disabled || isLoading || isError,
-      buttonClassName,
-      contentClassName
+      variant: "ghost"
     }
   );
 }
@@ -20719,6 +21060,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 +21365,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 +21456,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 +21547,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 +21562,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 +21594,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;