@mastra/playground-ui 7.0.0-beta.0 → 7.0.0-beta.2

package/dist/index.cjs.js

@@ -26,6 +26,7 @@ const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
 const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+const view = require('@codemirror/view');
 const SliderPrimitive = require('@radix-ui/react-slider');
 const jsonSchemaToZod = require('json-schema-to-zod');
 const superjson = require('superjson');
@@ -4681,6 +4682,8 @@ function convertWorkflowRunStateToStreamResult(runState) {
         status: result.status,
         output: "output" in result ? result.output : void 0,
         payload: "payload" in result ? result.payload : void 0,
+        suspendPayload: "suspendPayload" in result ? result.suspendPayload : void 0,
+        suspendOutput: "suspendOutput" in result ? result.suspendOutput : void 0,
         resumePayload: "resumePayload" in result ? result.resumePayload : void 0,
         error: "error" in result ? result.error : void 0,
         startedAt: "startedAt" in result ? result.startedAt : Date.now(),
@@ -4759,6 +4762,26 @@ const lodashTitleCase = (str) => {
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
 };
 
+const formatMappingLabel = (stepId, prevStepIds, nextStepIds) => {
+  if (!stepId.startsWith("mapping_")) {
+    return stepId;
+  }
+  const capitalizeWords = (str) => {
+    return str.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  const formatStepName = (id) => {
+    const cleaned = id.replace(/Step$/, "").replace(/[-_]/g, " ").trim();
+    return capitalizeWords(cleaned);
+  };
+  const formatMultipleSteps = (ids, isTarget) => {
+    if (ids.length === 0) return isTarget ? "End" : "Start";
+    if (ids.length === 1) return formatStepName(ids[0]);
+    return `${ids.length} Steps`;
+  };
+  const fromLabel = formatMultipleSteps(prevStepIds, false);
+  const toLabel = formatMultipleSteps(nextStepIds, true);
+  return `${fromLabel} → ${toLabel} Map`;
+};
 const getLayoutedElements = (nodes, edges) => {
   const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   g.setGraph({ rankdir: "TB" });
@@ -4855,12 +4878,15 @@ const getStepNodeAndEdge = ({
         position: { x: xIndex * 300, y: (yIndex + (condition ? 1 : 0)) * 100 },
         type: hasGraph ? "nested-node" : "default-node",
         data: {
-          label: stepFlow.step.id,
+          label: formatMappingLabel(stepFlow.step.id, prevStepIds, nextStepIds),
+          stepId: stepFlow.step.id,
           description: stepFlow.step.description,
           withoutTopHandle: condition ? false : !prevNodeIds.length,
           withoutBottomHandle: !nextNodeIds.length,
           stepGraph: hasGraph ? stepFlow.step.serializedStepFlow : void 0,
-          mapConfig: stepFlow.step.mapConfig
+          mapConfig: stepFlow.step.mapConfig,
+          canSuspend: stepFlow.step.canSuspend,
+          isForEach: stepFlow.type === "foreach"
         }
       }
     ];
@@ -4978,7 +5004,8 @@ const getStepNodeAndEdge = ({
           description: _step.description,
           withoutTopHandle: !prevNodeIds.length,
           withoutBottomHandle: false,
-          stepGraph: hasGraph ? _step.serializedStepFlow : void 0
+          stepGraph: hasGraph ? _step.serializedStepFlow : void 0,
+          canSuspend: _step.canSuspend
         }
       },
       {
@@ -5040,7 +5067,14 @@ const getStepNodeAndEdge = ({
         nextStepFlow,
         allPrevNodeIds
       });
-      nodes.push(..._nodes);
+      const markedNodes = _nodes.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          isParallel: true
+        }
+      }));
+      nodes.push(...markedNodes);
       edges.push(..._edges);
       nextPrevStepIds.push(..._nextPrevStepIds);
     });
@@ -5156,6 +5190,90 @@ const CollapsibleTrigger = (props) => {
 };
 const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
 
+const BADGE_COLORS = {
+  sleep: "#A855F7",
+  // Purple
+  forEach: "#F97316",
+  // Orange
+  map: "#F97316",
+  // Orange
+  parallel: "#3B82F6",
+  // Blue
+  suspend: "#EC4899",
+  // Pink
+  after: "#14B8A6",
+  // Teal
+  workflow: "#8B5CF6",
+  // Purple
+  // Condition colors
+  when: "#ECB047",
+  // Orange
+  dountil: "#8B5CF6",
+  // Purple
+  dowhile: "#06B6D4",
+  // Cyan
+  until: "#F59E0B",
+  // Amber
+  while: "#10B981",
+  // Green
+  if: "#3B82F6",
+  // Blue
+  else: "#6B7280"
+  // Gray
+};
+const BADGE_ICONS = {
+  sleep: lucideReact.Timer,
+  sleepUntil: lucideReact.CalendarClock,
+  forEach: lucideReact.List,
+  map: lucideReact.List,
+  parallel: lucideReact.Workflow,
+  suspend: lucideReact.PlayCircle,
+  after: lucideReact.Clock,
+  workflow: lucideReact.Layers,
+  // Condition icons
+  when: lucideReact.Network,
+  dountil: lucideReact.Repeat1,
+  dowhile: lucideReact.Repeat,
+  until: lucideReact.Timer,
+  while: lucideReact.RefreshCw,
+  if: lucideReact.GitBranch,
+  else: lucideReact.CornerDownRight
+};
+const getConditionIconAndColor = (type) => {
+  switch (type) {
+    case "when":
+      return { icon: BADGE_ICONS.when, color: BADGE_COLORS.when };
+    case "dountil":
+      return { icon: BADGE_ICONS.dountil, color: BADGE_COLORS.dountil };
+    case "dowhile":
+      return { icon: BADGE_ICONS.dowhile, color: BADGE_COLORS.dowhile };
+    case "until":
+      return { icon: BADGE_ICONS.until, color: BADGE_COLORS.until };
+    case "while":
+      return { icon: BADGE_ICONS.while, color: BADGE_COLORS.while };
+    case "if":
+      return { icon: BADGE_ICONS.if, color: BADGE_COLORS.if };
+    case "else":
+      return { icon: BADGE_ICONS.else, color: BADGE_COLORS.else };
+    default:
+      return { icon: void 0, color: void 0 };
+  }
+};
+const getNodeBadgeInfo = (data) => {
+  const isSleepNode = Boolean(data.duration || data.date);
+  const isForEachNode = Boolean(data.isForEach);
+  const isMapNode = Boolean(data.mapConfig && !data.isForEach);
+  const isNestedWorkflow = Boolean(data.stepGraph);
+  const hasSpecialBadge = isSleepNode || data.canSuspend || data.isParallel || isForEachNode || isMapNode || isNestedWorkflow;
+  return {
+    isSleepNode,
+    isForEachNode,
+    isMapNode,
+    isNestedWorkflow,
+    hasSpecialBadge
+  };
+};
+
 const useAutoscroll = (ref, { enabled = true }) => {
   const shouldScrollRef = React.useRef(enabled);
   React.useEffect(() => {
@@ -5244,7 +5362,9 @@ const useCurrentRun = () => {
         status: value.status,
         output: "output" in value ? value.output : void 0,
         input: value.payload,
-        resumeData: "resumePayload" in value ? value.resumePayload : void 0
+        resumeData: "resumePayload" in value ? value.resumePayload : void 0,
+        suspendOutput: "suspendOutput" in value ? value.suspendOutput : void 0,
+        suspendPayload: "suspendPayload" in value ? value.suspendPayload : void 0
       }
     };
   }, {});
@@ -5252,8 +5372,8 @@ const useCurrentRun = () => {
 };
 
 const useCodemirrorTheme$1 = () => {
-  return React.useMemo(
-    () => codemirrorThemeDracula.draculaInit({
+  return React.useMemo(() => {
+    const baseTheme = codemirrorThemeDracula.draculaInit({
       settings: {
         fontFamily: "var(--geist-mono)",
         fontSize: "0.8rem",
@@ -5263,9 +5383,20 @@ const useCodemirrorTheme$1 = () => {
         background: "transparent"
       },
       styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
-    }),
-    []
-  );
+    });
+    const customLineNumberTheme = view.EditorView.theme({
+      ".cm-editor": {
+        colorScheme: "dark",
+        // ensures color scheme
+        backgroundColor: "transparent"
+      },
+      ".cm-lineNumbers .cm-gutterElement": {
+        color: "#939393"
+        // ← custom line number color
+      }
+    });
+    return [baseTheme, customLineNumberTheme];
+  }, []);
 };
 const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
@@ -5299,9 +5430,11 @@ const WorkflowStepActionBar = ({
   input,
   output,
   resumeData,
+  suspendOutput,
   error,
   mapConfig,
   stepName,
+  stepId,
   onShowNestedGraph,
   status
 }) => {
@@ -5328,10 +5461,13 @@ const WorkflowStepActionBar = ({
         mapConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
           /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
-              stepName,
-              " map config"
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: dialogTitleClass, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                stepName,
+                " Map Config"
+              ] }),
+              stepId && stepId !== stepName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-icon3 font-normal", children: stepId })
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: mapConfig }) })
           ] }) })
         ] }),
@@ -5355,14 +5491,14 @@ const WorkflowStepActionBar = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: resumeData }) })
           ] }) })
         ] }),
-        output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        (output ?? suspendOutput) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: () => setIsOutputOpen(true), children: "Output" }),
           /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
               " output"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: output }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: output ?? suspendOutput }) })
           ] }) })
         ] }),
         error && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5389,6 +5525,7 @@ function WorkflowConditionNode({ data }) {
   const { steps } = useCurrentRun();
   const previousStep = steps[previousStepId];
   const nextStep = steps[nextStepId];
+  const { icon: IconComponent, color } = getConditionIconAndColor(type);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5415,7 +5552,13 @@ function WorkflowConditionNode({ data }) {
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full px-3 py-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: type === "when" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Network, { className: "text-[#ECB047]" }) : null, children: type?.toUpperCase() }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Badge,
+                    {
+                      icon: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "text-current", ...color ? { style: { color } } : {} }) : null,
+                      children: type?.toUpperCase()
+                    }
+                  ),
                   isCollapsible && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(
                     lucideReact.ChevronDown,
                     {
@@ -5426,6 +5569,21 @@ function WorkflowConditionNode({ data }) {
                   ) })
                 ] }),
                 type === "else" ? null : /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, { className: "flex flex-col gap-2 pb-2", children: conditions.map((condition, index) => {
+                  const conjType = condition.conj || type;
+                  const { icon: ConjIconComponent, color: conjColor } = getConditionIconAndColor(conjType);
+                  const conjBadge = index === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
+                    Badge,
+                    {
+                      icon: ConjIconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+                        ConjIconComponent,
+                        {
+                          className: "text-current",
+                          ...conjColor ? { style: { color: conjColor } } : {}
+                        }
+                      ) : null,
+                      children: condition.conj?.toLocaleUpperCase() || "WHEN"
+                    }
+                  );
                   return condition.fnString ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { theme: prismReactRenderer.themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsxRuntime.jsx(
                       "pre",
@@ -5471,7 +5629,7 @@ function WorkflowConditionNode({ data }) {
                       ) })
                     ] }) })
                   ] }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: condition.ref?.step ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                    index === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Network, { className: "text-[#ECB047]" }), children: condition.conj?.toLocaleUpperCase() || "WHEN" }),
+                    conjBadge,
                     /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", className: " text-mastra-el-3 flex-1", children: [
                       condition.ref.step.id || condition.ref.step,
                       "'s ",
@@ -5520,10 +5678,30 @@ const Clock = ({ startedAt, endedAt }) => {
 };
 
 function WorkflowDefaultNode({ data, parentWorkflowName }) {
-  const { steps, runId } = useCurrentRun();
-  const { label, description, withoutTopHandle, withoutBottomHandle, mapConfig, duration, date } = data;
-  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
-  const step = steps[fullLabel];
+  const { steps } = useCurrentRun();
+  const {
+    label,
+    stepId,
+    description,
+    withoutTopHandle,
+    withoutBottomHandle,
+    mapConfig,
+    duration,
+    date,
+    isParallel,
+    canSuspend,
+    isForEach
+  } = data;
+  const stepKey = parentWorkflowName ? `${parentWorkflowName}.${stepId || label}` : stepId || label;
+  const step = steps[stepKey];
+  const { isSleepNode, isForEachNode, isMapNode, hasSpecialBadge } = getNodeBadgeInfo({
+    duration,
+    date,
+    isForEach,
+    mapConfig,
+    canSuspend,
+    isParallel
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5533,7 +5711,8 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
         "data-workflow-step-status": step?.status ?? "idle",
         "data-testid": "workflow-default-node",
         className: cn(
-          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
+          "bg-surface3 rounded-lg w-[274px] border-sm border-border1",
+          hasSpecialBadge ? "pt-0" : "pt-2",
           step?.status === "success" && "bg-accent1Darker",
           step?.status === "failed" && "bg-accent2Darker",
           step?.status === "suspended" && "bg-accent3Darker",
@@ -5541,6 +5720,19 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
           step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
+          hasSpecialBadge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pt-2 pb-1 flex gap-1.5 flex-wrap", children: [
+            isSleepNode && /* @__PURE__ */ jsxRuntime.jsx(
+              Badge,
+              {
+                icon: date ? /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.sleepUntil, { className: "text-current", style: { color: BADGE_COLORS.sleep } }) : /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.sleep, { className: "text-current", style: { color: BADGE_COLORS.sleep } }),
+                children: date ? "SLEEP UNTIL" : "SLEEP"
+              }
+            ),
+            canSuspend && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.suspend, { className: "text-current", style: { color: BADGE_COLORS.suspend } }), children: "SUSPEND/RESUME" }),
+            isParallel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.parallel, { className: "text-current", style: { color: BADGE_COLORS.parallel } }), children: "PARALLEL" }),
+            isForEachNode && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.forEach, { className: "text-current", style: { color: BADGE_COLORS.forEach } }), children: "FOREACH" }),
+            isMapNode && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.map, { className: "text-current", style: { color: BADGE_COLORS.map } }), children: "MAP" })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
@@ -5572,9 +5764,11 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
             WorkflowStepActionBar,
             {
               stepName: label,
+              stepId,
               input: step?.input,
               resumeData: step?.resumeData,
               output: step?.output,
+              suspendOutput: step?.suspendOutput,
               error: step?.error,
               mapConfig,
               status: step?.status
@@ -5599,23 +5793,15 @@ function WorkflowAfterNode({ data }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
         /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
-            {
-              size: "xs",
-              weight: "medium",
-              className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
-              children: "AFTER"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.after, { className: "text-current", style: { color: BADGE_COLORS.after } }), children: "AFTER" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronDown,
             {
-              className: cn("w-4 h-4 transition-transform", {
+              className: cn("transition-transform text-icon3", {
                 "transform rotate-180": open
               })
             }
-          )
+          ) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-current w-4 h-4" }),
@@ -5821,9 +6007,28 @@ function WorkflowNestedGraphProvider({ children }) {
 function WorkflowNestedNode({ data, parentWorkflowName }) {
   const { steps } = useCurrentRun();
   const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
-  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
+  const {
+    label,
+    stepId,
+    description,
+    withoutTopHandle,
+    withoutBottomHandle,
+    stepGraph,
+    mapConfig,
+    isParallel,
+    canSuspend,
+    isForEach
+  } = data;
   const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
-  const step = steps[fullLabel];
+  const stepKey = parentWorkflowName ? `${parentWorkflowName}.${stepId || label}` : stepId || label;
+  const step = steps[stepKey];
+  const { isForEachNode, isMapNode, isNestedWorkflow, hasSpecialBadge } = getNodeBadgeInfo({
+    isForEach,
+    mapConfig,
+    canSuspend,
+    isParallel,
+    stepGraph
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5833,7 +6038,8 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
         "data-workflow-node": true,
         "data-workflow-step-status": step?.status,
         className: cn(
-          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
+          "bg-surface3 rounded-lg w-[274px] border-sm border-border1",
+          hasSpecialBadge ? "pt-0" : "pt-2",
           step?.status === "success" && "bg-accent1Darker",
           step?.status === "failed" && "bg-accent2Darker",
           step?.status === "suspended" && "bg-accent3Darker",
@@ -5841,6 +6047,13 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
           step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
+          hasSpecialBadge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pt-2 pb-1 flex gap-1.5 flex-wrap", children: [
+            canSuspend && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.suspend, { className: "text-current", style: { color: BADGE_COLORS.suspend } }), children: "SUSPEND/RESUME" }),
+            isParallel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.parallel, { className: "text-current", style: { color: BADGE_COLORS.parallel } }), children: "PARALLEL" }),
+            isNestedWorkflow && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.workflow, { className: "text-current", style: { color: BADGE_COLORS.workflow } }), children: "WORKFLOW" }),
+            isForEachNode && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.forEach, { className: "text-current", style: { color: BADGE_COLORS.forEach } }), children: "FOREACH" }),
+            isMapNode && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(BADGE_ICONS.map, { className: "text-current", style: { color: BADGE_COLORS.map } }), children: "MAP" })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
@@ -5861,9 +6074,11 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
             WorkflowStepActionBar,
             {
               stepName: label,
+              stepId,
               input: step?.input,
               resumeData: step?.resumeData,
               output: step?.output,
+              suspendOutput: step?.suspendOutput,
               error: step?.error,
               mapConfig,
               onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
@@ -7293,10 +7508,10 @@ function WorkflowTrigger({
     setCancelResponse(response);
   };
   const streamResultToUse = result ?? streamResult;
-  const suspendedSteps = Object.entries(streamResultToUse?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
+  const suspendedSteps = Object.entries(streamResultToUse?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { suspendPayload }]) => ({
     stepId,
     runId: innerRunId,
-    suspendPayload: payload2,
+    suspendPayload,
     isLoading: false
   }));
   React.useEffect(() => {
@@ -7407,11 +7622,23 @@ function WorkflowTrigger({
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, step]) => {
             const { status } = step;
-            let output = {};
+            let output = void 0;
+            let suspendOutput = void 0;
+            if (step.status === "suspended") {
+              suspendOutput = step.suspendOutput;
+            }
             if (step.status === "success") {
               output = step.output;
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(WorkflowStatus, { stepId, status, result: output }, stepId);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              WorkflowStatus,
+              {
+                stepId,
+                status,
+                result: output ?? suspendOutput ?? {}
+              },
+              stepId
+            );
           }) })
         ] })
       ] })
@@ -7583,12 +7810,6 @@ const Cell = ({ className, children, ...props }) => {
 const TxtCell = ({ className, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-md", className: "w-full truncate", children }) });
 };
-const UnitCell = ({ className, children, unit }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
-    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full truncate", children: unit })
-  ] }) });
-};
 const DateTimeCell = ({ dateTime, ...props }) => {
   const { day, time } = formatDateCell(dateTime);
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0", children: [
@@ -10474,32 +10695,6 @@ const useAgentSettings = () => {
   return React.useContext(AgentSettingsContext);
 };
 
-const ModelResetContext = React.createContext(null);
-function ModelResetProvider({ children }) {
-  const resetFnRef = React.useRef(null);
-  const registerResetFn = React.useCallback((fn) => {
-    resetFnRef.current = fn;
-  }, []);
-  const triggerReset = React.useCallback(() => {
-    if (resetFnRef.current) {
-      resetFnRef.current();
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(ModelResetContext.Provider, { value: { registerResetFn, triggerReset }, children });
-}
-function useModelReset() {
-  const context = React.useContext(ModelResetContext);
-  if (!context) {
-    return {
-      registerResetFn: () => {
-      },
-      triggerReset: () => {
-      }
-    };
-  }
-  return context;
-}
-
 const resolveInstructionPart = (part) => {
   if (typeof part === "string") {
     return part.trim();
@@ -11860,104 +12055,6 @@ function InputField({
   );
 }
 
-function TextareaField({
-  value,
-  label,
-  helpText,
-  className,
-  testId,
-  type,
-  disabled,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "grid gap-[.5rem]  grid-rows-[auto_1fr]",
-        {
-          "grid-rows-[auto_1fr_auto]": helpText
-        },
-        className
-      ),
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"), children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            className: cn(
-              "flex w-full items-center leading-[1.6] text-[0.875rem] text-[rgba(255,255,255,0.7)] border border-[rgba(255,255,255,0.15)] rounded-lg bg-transparent py-[0.5rem] px-[0.75rem] min-h-[6rem]",
-              "focus:outline-none focus:shadow-[inset_0_0_0_1px_#18fb6f]",
-              { "cursor-not-allowed opacity-50": disabled }
-            ),
-            "data-testid": testId,
-            ...props,
-            children: value
-          }
-        ),
-        helpText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpText })
-      ]
-    }
-  );
-}
-
-const Button = React.forwardRef(
-  ({ className, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        className: cn(
-          "text-[.875rem] inline-flex items-center justify-center rounded-lg px-[1rem] gap-[.75rem] leading-0 border bg-transparent text-[rgba(255,255,255,0.7)] whitespace-nowrap",
-          "[&:not(:disabled):hover]:border-[rgba(255,255,255,0.25)] [&:not(:disabled):hover]:text-[rgba(255,255,255,0.9)]",
-          "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:mx-[-0.3em] [&>svg]:opacity-70 [&>svg]:shrink-0",
-          "focus:outline-none focus:shadow-[inset_0_0_0_1px_rgba(24,251,111,0.75)]",
-          className,
-          {
-            "cursor-not-allowed opacity-50": props.disabled,
-            "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
-            "min-h-[2rem]": variant === "ghost",
-            "min-h-[2.5rem]": variant !== "ghost",
-            "border-[rgba(255,255,255,0.15)]": variant === "outline"
-          }
-        ),
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-function FormActions({
-  children,
-  onSubmit,
-  onCancel,
-  className,
-  submitLabel,
-  cancelLabel,
-  isSubmitting,
-  variant = "toLeft"
-}) {
-  if (!children && (!onSubmit || !onCancel)) {
-    console.warn("FormActions requires either children or onSubmit and onCancel props");
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "flex gap-[1rem] items-center justify-start",
-        { "justify-end": variant === "toRight", "grid w-full grid-cols-[1fr_auto]": variant === "stretch" },
-        className
-      ),
-      children: children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onSubmit, className: "min-w-[12rem]", disabled: isSubmitting, variant: "primary", children: submitLabel || "Submit" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: cancelLabel || "Cancel" })
-      ] })
-    }
-  );
-}
-
 function SelectField({
   name,
   value,
@@ -12006,158 +12103,6 @@ function SelectField({
   );
 }
 
-function SliderField({
-  name,
-  value,
-  label,
-  className,
-  testId,
-  required,
-  disabled,
-  helpMsg,
-  errorMsg,
-  onChange,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "grid gap-[.5rem] grid-rows-[auto_1fr]",
-        {
-          "grid-rows-[auto_1fr_auto]": helpMsg
-        },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"), children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2", children: "(required)" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full items-center gap-[1rem] grid-cols-[1fr_auto]"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            SliderPrimitive__namespace.Root,
-            {
-              name,
-              className: cn("relative flex w-full touch-none select-none items-center ", className),
-              value,
-              disabled,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-[4px] w-full grow overflow-hidden rounded-full bg-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-gray-400" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-4 w-4 rounded-full bg-gray-400 shadow transition-colors focus:outline-none focus:bg-[#18fb6f] disabled:pointer-events-none disabled:opacity-50" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon4 text-[0.875rem] flex justify-end", children: value })
-        ] }),
-        helpMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg }),
-        errorMsg && /* @__PURE__ */ jsxRuntime.jsxs(
-          "p",
-          {
-            className: cn(
-              "text-[0.75rem] text-red-500 flex items-center gap-[.5rem]",
-              "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-70"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
-              " ",
-              errorMsg
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-function RadioGroupField({
-  name,
-  value,
-  label,
-  className,
-  testId,
-  required,
-  disabled,
-  helpMsg,
-  errorMsg,
-  onChange,
-  options = [],
-  layout = "vertical",
-  onValueChange,
-  ...props
-}) {
-  const Wrapper = layout === "horizontal" ? "div" : "fieldset";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Wrapper,
-    {
-      className: cn(
-        "w-full",
-        {
-          "flex items-center gap-[2rem]": layout === "horizontal"
-        },
-        className
-      ),
-      role: layout === "horizontal" ? "radiogroup" : void 0,
-      "aria-labelledby": layout === "horizontal" ? void 0 : `${name}-legend`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("legend", { id: `${name}-legend`, className: cn("text-[0.8125rem] text-icon3"), children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("grid gap-[2.5rem]", {
-              "mt-[0.5rem]": layout === "vertical",
-              "grid-rows-[1fr_auto]": helpMsg
-            }),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                RadioGroupPrimitive__namespace.Root,
-                {
-                  value,
-                  onValueChange,
-                  ...props,
-                  className: cn({
-                    "grid gap-[0.5rem]": layout === "vertical",
-                    "flex gap-[1rem]": layout === "horizontal"
-                  }),
-                  children: options.map((option) => {
-                    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-[0.5rem] text-[0.875rem] text-icon4 ", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        RadioGroupPrimitive__namespace.Item,
-                        {
-                          className: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ",
-                          value: option.value,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-                        }
-                      ),
-                      option.label
-                    ] }, option.value);
-                  })
-                }
-              ),
-              helpMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg }),
-              errorMsg && /* @__PURE__ */ jsxRuntime.jsxs(
-                "p",
-                {
-                  className: cn(
-                    "text-[0.75rem] text-red-500 flex items-center gap-[.5rem]",
-                    "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-70"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
-                    " ",
-                    errorMsg
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
 function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoading }) {
   const { Link } = useLinkComponent();
   const LabelWrapper = ({ children }) => {
@@ -12517,6 +12462,33 @@ function SideDialogRoot({
   ] }) });
 }
 
+const Button = React.forwardRef(
+  ({ className, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          "text-[.875rem] inline-flex items-center justify-center rounded-lg px-[1rem] gap-[.75rem] leading-0 border bg-transparent text-[rgba(255,255,255,0.7)] whitespace-nowrap",
+          "[&:not(:disabled):hover]:border-[rgba(255,255,255,0.25)] [&:not(:disabled):hover]:text-[rgba(255,255,255,0.9)]",
+          "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:mx-[-0.3em] [&>svg]:opacity-70 [&>svg]:shrink-0",
+          "focus:outline-none focus:shadow-[inset_0_0_0_1px_rgba(24,251,111,0.75)]",
+          className,
+          {
+            "cursor-not-allowed opacity-50": props.disabled,
+            "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
+            "min-h-[2rem]": variant === "ghost",
+            "min-h-[2.5rem]": variant !== "ghost",
+            "border-[rgba(255,255,255,0.15)]": variant === "outline"
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
 function MainContentLayout({
   children,
   className,
@@ -12745,39 +12717,6 @@ const SideDialog = Object.assign(SideDialogRoot, {
   Nav: SideDialogNav
 });
 
-function EntityMainHeader({
-  title,
-  description,
-  icon,
-  children,
-  isLoading,
-  className,
-  placement = "page"
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "header",
-    {
-      className: cn(
-        "grid gap-[.5rem]",
-        "[&>h1]:text-icon6 [&>h1]:text-[1.25rem] [&>h1]:font-normal [&>h1]:flex [&>h1]:items-center [&>h1]:gap-[0.5rem]",
-        "[&_svg]:w-[1.4rem] [&_svg]:h-[1.4rem] [&_svg]:text-icon3",
-        "[&>p]:text-icon4 [&>p]:text-[0.875rem] [&>p]:m-0",
-        { "pt-[2rem] pb-[2rem]": placement === "page" },
-        { "pt-[1.5em] pb-[1rem]": placement === "sidebar" },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h1", { children: [
-          icon && icon,
-          " ",
-          title
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
-      ]
-    }
-  );
-}
-
 function PageHeader({ title, description, icon, className }) {
   const titleIsLoading = title === "loading";
   const descriptionIsLoading = description === "loading";
@@ -13221,11 +13160,23 @@ function MainSidebarNavSeparator({ className }) {
 function MainSidebarRoot({ children, className }) {
   const { state, toggleSidebar } = useMainSidebar();
   const isCollapsed = state === "collapsed";
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.ctrlKey && event.key === "b") {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [toggleSidebar]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col h-full px-[1rem] pb-[1rem] relative overflow-y-auto",
+        "flex flex-col h-full px-[1rem] relative overflow-y-auto",
         {
           "lg:min-w-[13rem] xl:min-w-[14rem] 2xl:min-w-[15rem] 3xl:min-w-[16rem] 4xl:min-w-[17rem]": !isCollapsed
         },
@@ -13233,30 +13184,41 @@ function MainSidebarRoot({ children, className }) {
       ),
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: toggleSidebar,
-            className: cn(
-              "inline-flex  w-auto items-center text-icon3 h-[2rem] px-[0.75rem] rounded-md",
-              "hover:bg-surface4",
-              "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-icon3",
-              {
-                "ml-auto": !isCollapsed
-              }
-            ),
-            "aria-label": "Toggle sidebar",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.PanelRightIcon,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 grid sticky bottom-0 pb-[.75rem] ", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                className: cn({
-                  "rotate-180": isCollapsed
-                })
+                onClick: toggleSidebar,
+                className: cn(
+                  "inline-flex w-auto items-center text-icon3 h-[2rem] px-[0.75rem] rounded-md ml-auto",
+                  "hover:bg-surface4",
+                  "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-icon3",
+                  {
+                    "ml-auto": !isCollapsed
+                  }
+                ),
+                "aria-label": "Toggle sidebar",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.PanelRightIcon,
+                  {
+                    className: cn({
+                      "rotate-180": isCollapsed
+                    })
+                  }
+                )
               }
-            )
-          }
-        ),
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+              "Toggle Sidebar",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyboardIcon, {}),
+                " Ctrl+B"
+              ] })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -13660,31 +13622,6 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
   ] });
 }
 
-const useScoresByEntityId = (entityId, entityType, page = 0) => {
-  const client = react$3.useMastraClient();
-  const [scores, setScores] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  React.useEffect(() => {
-    const fetchScores = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.listScoresByEntityId({
-          entityId,
-          entityType,
-          page: page || 0,
-          perPage: 10
-        });
-        setScores(res);
-        setIsLoading(false);
-      } catch (error) {
-        setScores(null);
-        setIsLoading(false);
-      }
-    };
-    fetchScores();
-  }, [entityId, entityType, page]);
-  return { scores, isLoading };
-};
 const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
   const client = react$3.useMastraClient();
   return reactQuery.useQuery({
@@ -13869,6 +13806,20 @@ const useTraceSpanScores = ({ traceId = "", spanId = "", page }) => {
   });
 };
 
+const ModelResetContext = React.createContext(null);
+function useModelReset() {
+  const context = React.useContext(ModelResetContext);
+  if (!context) {
+    return {
+      registerResetFn: () => {
+      },
+      triggerReset: () => {
+      }
+    };
+  }
+  return context;
+}
+
 const useAgentsModelProviders = () => {
   const client = react$3.useMastraClient();
   return reactQuery.useQuery({
@@ -18452,89 +18403,6 @@ const SpanScoring = ({ traceId, spanId, entityType }) => {
   ] });
 };
 
-const useResizeColumn = ({
-  defaultWidth,
-  minimumWidth,
-  maximumWidth,
-  setCurrentWidth
-}) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [sidebarWidth, setSidebarWidth] = React.useState(defaultWidth);
-  const containerRef = React.useRef(null);
-  const dragStartXRef = React.useRef(0);
-  const initialWidthRef = React.useRef(0);
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    dragStartXRef.current = e.clientX;
-    initialWidthRef.current = sidebarWidth;
-  };
-  React.useEffect(() => {
-    setSidebarWidth(defaultWidth);
-    setCurrentWidth?.(defaultWidth);
-  }, [defaultWidth]);
-  React.useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const deltaX = dragStartXRef.current - e.clientX;
-      const deltaPercentage = deltaX / containerWidth * 100;
-      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaPercentage, minimumWidth), maximumWidth);
-      setSidebarWidth(newWidth);
-      setCurrentWidth?.(newWidth);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-    if (isDragging) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
-  return { sidebarWidth, isDragging, handleMouseDown, containerRef };
-};
-
-const MastraResizablePanel = ({
-  children,
-  defaultWidth,
-  minimumWidth,
-  maximumWidth,
-  className,
-  disabled = false,
-  setCurrentWidth,
-  dividerPosition = "left"
-}) => {
-  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
-    defaultWidth: disabled ? 100 : defaultWidth,
-    minimumWidth,
-    maximumWidth,
-    setCurrentWidth
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full h-full relative", className), ref: containerRef, style: { width: `${sidebarWidth}%` }, children: [
-    !disabled && dividerPosition === "left" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `w-px bg-border1 h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 z-10
-          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
-      }
-    ) : null,
-    children,
-    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `w-px bg-border1 h-full cursor-col-resize hover:w-1.5 hover:bg-border2 active:bg-border3 transition-colors absolute inset-y-0 z-10
-          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
-      }
-    ) : null
-  ] });
-};
-
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -18624,113 +18492,6 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
 };
 
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = React.useState(enabled);
-  const [error, setError] = React.useState(null);
-  const [data, setData] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [firstCallLoading, setFirstCallLoading] = React.useState(false);
-  const timeoutRef = React.useRef(null);
-  const mountedRef = React.useRef(true);
-  const [restart, setRestart] = React.useState(restartPolling);
-  const cleanup = React.useCallback(() => {
-    console.log("cleanup");
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = React.useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = React.useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = React.useCallback(
-    async (refetch2 = true) => {
-      if (!mountedRef.current) return;
-      setIsLoading(true);
-      try {
-        const result = await fetchFn();
-        setData(result);
-        setError(null);
-        onSuccess?.(result);
-        if (shouldContinue(result) && refetch2) {
-          timeoutRef.current = setTimeout(executePoll, interval);
-        } else {
-          stopPolling();
-        }
-      } catch (err) {
-        if (!mountedRef.current) return;
-        setError(err);
-        onError?.(err);
-        stopPolling();
-      } finally {
-        if (mountedRef.current) {
-          setFirstCallLoading(false);
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
-  );
-  const refetch = React.useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  React.useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  React.useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  React.useEffect(() => {
-    if (restart && !isPolling) {
-      setIsPolling(true);
-      executePoll();
-      setRestart(false);
-    }
-  }, [restart]);
-  return {
-    isPolling,
-    isLoading,
-    error,
-    data,
-    startPolling,
-    stopPolling,
-    firstCallLoading,
-    refetch
-  };
-}
-
 const PlaygroundQueryClient = ({ children }) => {
   const queryClient = new reactQuery.QueryClient();
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
@@ -19270,7 +19031,6 @@ exports.EntityContent = EntityContent;
 exports.EntityDescription = EntityDescription;
 exports.EntityHeader = EntityHeader;
 exports.EntityIcon = EntityIcon;
-exports.EntityMainHeader = EntityMainHeader;
 exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;
@@ -19279,7 +19039,6 @@ exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
 exports.FiltersIcon = FiltersIcon;
 exports.FolderIcon = FolderIcon;
-exports.FormActions = FormActions;
 exports.GithubCoinIcon = GithubCoinIcon;
 exports.GithubIcon = GithubIcon;
 exports.GoogleIcon = GoogleIcon;
@@ -19306,12 +19065,10 @@ exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
 exports.MainSidebar = MainSidebar;
 exports.MainSidebarProvider = MainSidebarProvider;
-exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
 exports.MemorySearch = MemorySearch;
-exports.ModelResetProvider = ModelResetProvider;
 exports.Notification = Notification;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PageHeader = PageHeader;
@@ -19319,7 +19076,6 @@ exports.PlaygroundQueryClient = PlaygroundQueryClient;
 exports.PlaygroundTabs = PlaygroundTabs;
 exports.PromptIcon = PromptIcon;
 exports.RadioGroup = RadioGroup;
-exports.RadioGroupField = RadioGroupField;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RepoIcon = RepoIcon;
 exports.RequestContext = RequestContext;
@@ -19338,8 +19094,8 @@ exports.Sections = Sections;
 exports.SelectField = SelectField;
 exports.SettingsIcon = SettingsIcon;
 exports.SideDialog = SideDialog;
+exports.Skeleton = Skeleton;
 exports.SlashIcon = SlashIcon;
-exports.SliderField = SliderField;
 exports.SpanScoreList = SpanScoreList;
 exports.SpanScoring = SpanScoring;
 exports.SpanTabs = SpanTabs;
@@ -19356,7 +19112,6 @@ exports.TemplateSuccess = TemplateSuccess;
 exports.TemplatesList = TemplatesList;
 exports.TemplatesTools = TemplatesTools;
 exports.TextAndIcon = TextAndIcon;
-exports.TextareaField = TextareaField;
 exports.Th = Th;
 exports.Thead = Thead;
 exports.ThreadDeleteButton = ThreadDeleteButton;
@@ -19387,7 +19142,6 @@ exports.TracesTools = TracesTools;
 exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;
-exports.UnitCell = UnitCell;
 exports.VariablesIcon = VariablesIcon;
 exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkflowCombobox = WorkflowCombobox;
@@ -19437,14 +19191,11 @@ exports.useMainSidebar = useMainSidebar;
 exports.useMemory = useMemory;
 exports.useMemoryConfig = useMemoryConfig;
 exports.useMemorySearch = useMemorySearch;
-exports.useModelReset = useModelReset;
 exports.usePlaygroundStore = usePlaygroundStore;
-exports.usePolling = usePolling;
 exports.useReorderModelList = useReorderModelList;
 exports.useResetAgentModel = useResetAgentModel;
 exports.useScorer = useScorer;
 exports.useScorers = useScorers;
-exports.useScoresByEntityId = useScoresByEntityId;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStreamWorkflow = useStreamWorkflow;