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

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessagePart, useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, Network, ChevronDown, PauseIcon, HourglassIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Braces, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, ChevronsUpDown, Search, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, RefreshCw, ExternalLink, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, XIcon, PanelRightIcon, GaugeIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, ChevronRight, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, ChevronUpIcon, X, Share2, Check, PlayCircle, Workflow, Layers, List, Clock as Clock$1, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, ChevronDown, PauseIcon, HourglassIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Braces, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, ChevronsUpDown, Search, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, SaveIcon, ExternalLink, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, XIcon, PanelRightIcon, KeyboardIcon, GaugeIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, RefreshCcwIcon, AlertTriangleIcon, ChevronRight, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId, Suspense } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -15,7 +15,7 @@ import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { jsonLanguage, json } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
-import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import CodeMirror, { EditorView as EditorView$1 } from '@uiw/react-codemirror';
 import { toast as toast$1 } from 'sonner';
 import './index.css';export { Toaster } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25,6 +25,7 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { EditorView } from '@codemirror/view';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
@@ -4647,6 +4648,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(),
@@ -4725,6 +4728,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" });
@@ -4821,12 +4844,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"
         }
       }
     ];
@@ -4944,7 +4970,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
         }
       },
       {
@@ -5006,7 +5033,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);
     });
@@ -5122,6 +5156,90 @@ const CollapsibleTrigger = (props) => {
 };
 const CollapsibleContent = CollapsiblePrimitive.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: Timer,
+  sleepUntil: CalendarClock,
+  forEach: List,
+  map: List,
+  parallel: Workflow,
+  suspend: PlayCircle,
+  after: Clock$1,
+  workflow: Layers,
+  // Condition icons
+  when: Network,
+  dountil: Repeat1,
+  dowhile: Repeat,
+  until: Timer,
+  while: RefreshCw,
+  if: GitBranch,
+  else: 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 = useRef(enabled);
   React__default.useEffect(() => {
@@ -5210,7 +5328,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
       }
     };
   }, {});
@@ -5218,8 +5338,8 @@ const useCurrentRun = () => {
 };
 
 const useCodemirrorTheme$1 = () => {
-  return useMemo(
-    () => draculaInit({
+  return useMemo(() => {
+    const baseTheme = draculaInit({
       settings: {
         fontFamily: "var(--geist-mono)",
         fontSize: "0.8rem",
@@ -5229,9 +5349,20 @@ const useCodemirrorTheme$1 = () => {
         background: "transparent"
       },
       styles: [{ tag: [tags.className, tags.propertyName] }]
-    }),
-    []
-  );
+    });
+    const customLineNumberTheme = 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);
@@ -5265,9 +5396,11 @@ const WorkflowStepActionBar = ({
   input,
   output,
   resumeData,
+  suspendOutput,
   error,
   mapConfig,
   stepName,
+  stepId,
   onShowNestedGraph,
   status
 }) => {
@@ -5294,10 +5427,13 @@ const WorkflowStepActionBar = ({
         mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
           /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-              stepName,
-              " map config"
-            ] }),
+            /* @__PURE__ */ jsx(DialogTitle, { className: dialogTitleClass, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                stepName,
+                " Map Config"
+              ] }),
+              stepId && stepId !== stepName && /* @__PURE__ */ jsx("div", { className: "text-xs text-icon3 font-normal", children: stepId })
+            ] }) }),
             /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
           ] }) })
         ] }),
@@ -5321,14 +5457,14 @@ const WorkflowStepActionBar = ({
             /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: resumeData }) })
           ] }) })
         ] }),
-        output && /* @__PURE__ */ jsxs(Fragment, { children: [
+        (output ?? suspendOutput) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsOutputOpen(true), children: "Output" }),
           /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               stepName,
               " output"
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: output }) })
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: output ?? suspendOutput }) })
           ] }) })
         ] }),
         error && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5355,6 +5491,7 @@ function WorkflowConditionNode({ data }) {
   const { steps } = useCurrentRun();
   const previousStep = steps[previousStepId];
   const nextStep = steps[nextStepId];
+  const { icon: IconComponent, color } = getConditionIconAndColor(type);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxs(
@@ -5381,7 +5518,13 @@ function WorkflowConditionNode({ data }) {
               },
               children: [
                 /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full px-3 py-2", children: [
-                  /* @__PURE__ */ jsx(Badge, { icon: type === "when" ? /* @__PURE__ */ jsx(Network, { className: "text-[#ECB047]" }) : null, children: type?.toUpperCase() }),
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      icon: IconComponent ? /* @__PURE__ */ jsx(IconComponent, { className: "text-current", ...color ? { style: { color } } : {} }) : null,
+                      children: type?.toUpperCase()
+                    }
+                  ),
                   isCollapsible && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
                     ChevronDown,
                     {
@@ -5392,6 +5535,21 @@ function WorkflowConditionNode({ data }) {
                   ) })
                 ] }),
                 type === "else" ? null : /* @__PURE__ */ 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__ */ jsx(
+                    Badge,
+                    {
+                      icon: ConjIconComponent ? /* @__PURE__ */ jsx(
+                        ConjIconComponent,
+                        {
+                          className: "text-current",
+                          ...conjColor ? { style: { color: conjColor } } : {}
+                        }
+                      ) : null,
+                      children: condition.conj?.toLocaleUpperCase() || "WHEN"
+                    }
+                  );
                   return condition.fnString ? /* @__PURE__ */ jsxs("div", { className: "px-3", children: [
                     /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
                       "pre",
@@ -5437,7 +5595,7 @@ function WorkflowConditionNode({ data }) {
                       ) })
                     ] }) })
                   ] }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    index === 0 ? null : /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(Network, { className: "text-[#ECB047]" }), children: condition.conj?.toLocaleUpperCase() || "WHEN" }),
+                    conjBadge,
                     /* @__PURE__ */ jsxs(Text, { size: "xs", className: " text-mastra-el-3 flex-1", children: [
                       condition.ref.step.id || condition.ref.step,
                       "'s ",
@@ -5486,10 +5644,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__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxs(
@@ -5499,7 +5677,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",
@@ -5507,6 +5686,19 @@ function WorkflowDefaultNode({ data, parentWorkflowName }) {
           step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
+          hasSpecialBadge && /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2 pb-1 flex gap-1.5 flex-wrap", children: [
+            isSleepNode && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                icon: date ? /* @__PURE__ */ jsx(BADGE_ICONS.sleepUntil, { className: "text-current", style: { color: BADGE_COLORS.sleep } }) : /* @__PURE__ */ jsx(BADGE_ICONS.sleep, { className: "text-current", style: { color: BADGE_COLORS.sleep } }),
+                children: date ? "SLEEP UNTIL" : "SLEEP"
+              }
+            ),
+            canSuspend && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.suspend, { className: "text-current", style: { color: BADGE_COLORS.suspend } }), children: "SUSPEND/RESUME" }),
+            isParallel && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.parallel, { className: "text-current", style: { color: BADGE_COLORS.parallel } }), children: "PARALLEL" }),
+            isForEachNode && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.forEach, { className: "text-current", style: { color: BADGE_COLORS.forEach } }), children: "FOREACH" }),
+            isMapNode && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.map, { className: "text-current", style: { color: BADGE_COLORS.map } }), children: "MAP" })
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             /* @__PURE__ */ jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
@@ -5538,9 +5730,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
@@ -5565,23 +5759,15 @@ function WorkflowAfterNode({ data }) {
       children: [
         /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
         /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ 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__ */ jsx(
+          /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.after, { className: "text-current", style: { color: BADGE_COLORS.after } }), children: "AFTER" }),
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
             ChevronDown,
             {
-              className: cn("w-4 h-4 transition-transform", {
+              className: cn("transition-transform text-icon3", {
                 "transform rotate-180": open
               })
             }
-          )
+          ) })
         ] }),
         /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: steps.map((step) => /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
           /* @__PURE__ */ jsx(Footprints, { className: "text-current w-4 h-4" }),
@@ -5787,9 +5973,28 @@ function WorkflowNestedGraphProvider({ children }) {
 function WorkflowNestedNode({ data, parentWorkflowName }) {
   const { steps } = useCurrentRun();
   const { showNestedGraph } = 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__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxs(
@@ -5799,7 +6004,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",
@@ -5807,6 +6013,13 @@ function WorkflowNestedNode({ data, parentWorkflowName }) {
           step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
+          hasSpecialBadge && /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2 pb-1 flex gap-1.5 flex-wrap", children: [
+            canSuspend && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.suspend, { className: "text-current", style: { color: BADGE_COLORS.suspend } }), children: "SUSPEND/RESUME" }),
+            isParallel && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.parallel, { className: "text-current", style: { color: BADGE_COLORS.parallel } }), children: "PARALLEL" }),
+            isNestedWorkflow && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.workflow, { className: "text-current", style: { color: BADGE_COLORS.workflow } }), children: "WORKFLOW" }),
+            isForEachNode && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.forEach, { className: "text-current", style: { color: BADGE_COLORS.forEach } }), children: "FOREACH" }),
+            isMapNode && /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(BADGE_ICONS.map, { className: "text-current", style: { color: BADGE_COLORS.map } }), children: "MAP" })
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             /* @__PURE__ */ jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
@@ -5827,9 +6040,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 }),
@@ -7259,10 +7474,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
   }));
   useEffect(() => {
@@ -7373,11 +7588,23 @@ function WorkflowTrigger({
           /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
           /* @__PURE__ */ 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__ */ jsx(WorkflowStatus, { stepId, status, result: output }, stepId);
+            return /* @__PURE__ */ jsx(
+              WorkflowStatus,
+              {
+                stepId,
+                status,
+                result: output ?? suspendOutput ?? {}
+              },
+              stepId
+            );
           }) })
         ] })
       ] })
@@ -7549,12 +7776,6 @@ const Cell = ({ className, children, ...props }) => {
 const TxtCell = ({ className, children }) => {
   return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full truncate", children }) });
 };
-const UnitCell = ({ className, children, unit }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
-    /* @__PURE__ */ 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__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
@@ -10440,32 +10661,6 @@ const useAgentSettings = () => {
   return useContext(AgentSettingsContext);
 };
 
-const ModelResetContext = createContext(null);
-function ModelResetProvider({ children }) {
-  const resetFnRef = useRef(null);
-  const registerResetFn = useCallback((fn) => {
-    resetFnRef.current = fn;
-  }, []);
-  const triggerReset = useCallback(() => {
-    if (resetFnRef.current) {
-      resetFnRef.current();
-    }
-  }, []);
-  return /* @__PURE__ */ jsx(ModelResetContext.Provider, { value: { registerResetFn, triggerReset }, children });
-}
-function useModelReset() {
-  const context = useContext(ModelResetContext);
-  if (!context) {
-    return {
-      registerResetFn: () => {
-      },
-      triggerReset: () => {
-      }
-    };
-  }
-  return context;
-}
-
 const resolveInstructionPart = (part) => {
   if (typeof part === "string") {
     return part.trim();
@@ -11826,104 +12021,6 @@ function InputField({
   );
 }
 
-function TextareaField({
-  value,
-  label,
-  helpText,
-  className,
-  testId,
-  type,
-  disabled,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "grid gap-[.5rem]  grid-rows-[auto_1fr]",
-        {
-          "grid-rows-[auto_1fr_auto]": helpText
-        },
-        className
-      ),
-      children: [
-        label && /* @__PURE__ */ jsx("label", { className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"), children: label }),
-        /* @__PURE__ */ 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__ */ jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpText })
-      ]
-    }
-  );
-}
-
-const Button = React__default.forwardRef(
-  ({ className, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { onClick: onSubmit, className: "min-w-[12rem]", disabled: isSubmitting, variant: "primary", children: submitLabel || "Submit" }),
-        /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: cancelLabel || "Cancel" })
-      ] })
-    }
-  );
-}
-
 function SelectField({
   name,
   value,
@@ -11972,158 +12069,6 @@ function SelectField({
   );
 }
 
-function SliderField({
-  name,
-  value,
-  label,
-  className,
-  testId,
-  required,
-  disabled,
-  helpMsg,
-  errorMsg,
-  onChange,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "grid gap-[.5rem] grid-rows-[auto_1fr]",
-        {
-          "grid-rows-[auto_1fr_auto]": helpMsg
-        },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("label", { className: cn("text-[0.8125rem] text-icon3 flex justify-between items-center"), children: [
-          label,
-          required && /* @__PURE__ */ jsx("i", { className: "text-icon2", children: "(required)" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid w-full items-center gap-[1rem] grid-cols-[1fr_auto]"), children: [
-          /* @__PURE__ */ jsxs(
-            SliderPrimitive.Root,
-            {
-              name,
-              className: cn("relative flex w-full touch-none select-none items-center ", className),
-              value,
-              disabled,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-[4px] w-full grow overflow-hidden rounded-full bg-gray-600", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-gray-400" }) }),
-                /* @__PURE__ */ jsx(SliderPrimitive.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__ */ jsx("span", { className: "text-icon4 text-[0.875rem] flex justify-end", children: value })
-        ] }),
-        helpMsg && /* @__PURE__ */ jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg }),
-        errorMsg && /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ jsx("legend", { id: `${name}-legend`, className: cn("text-[0.8125rem] text-icon3"), children: label }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("grid gap-[2.5rem]", {
-              "mt-[0.5rem]": layout === "vertical",
-              "grid-rows-[1fr_auto]": helpMsg
-            }),
-            children: [
-              /* @__PURE__ */ jsx(
-                RadioGroupPrimitive.Root,
-                {
-                  value,
-                  onValueChange,
-                  ...props,
-                  className: cn({
-                    "grid gap-[0.5rem]": layout === "vertical",
-                    "flex gap-[1rem]": layout === "horizontal"
-                  }),
-                  children: options.map((option) => {
-                    return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-[0.5rem] text-[0.875rem] text-icon4 ", children: [
-                      /* @__PURE__ */ jsx(
-                        RadioGroupPrimitive.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__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-                        }
-                      ),
-                      option.label
-                    ] }, option.value);
-                  })
-                }
-              ),
-              helpMsg && /* @__PURE__ */ jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg }),
-              errorMsg && /* @__PURE__ */ 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__ */ jsx(TriangleAlertIcon, {}),
-                    " ",
-                    errorMsg
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
 function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoading }) {
   const { Link } = useLinkComponent();
   const LabelWrapper = ({ children }) => {
@@ -12483,6 +12428,33 @@ function SideDialogRoot({
   ] }) });
 }
 
+const Button = React__default.forwardRef(
+  ({ className, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ 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,
@@ -12614,7 +12586,7 @@ function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }
         hasMultilineText && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {}) })
       ] })
     ] }),
-    codeStr && /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-[1rem] overflow-hidden rounded-xl border border-white/10 text-icon4 text-[0.875rem] break-all", children: simplified ? /* @__PURE__ */ jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView.lineWrapping], theme, value: finalCodeStr }) })
+    codeStr && /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-[1rem] overflow-hidden rounded-xl border border-white/10 text-icon4 text-[0.875rem] break-all", children: simplified ? /* @__PURE__ */ jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView$1.lineWrapping], theme, value: finalCodeStr }) })
   ] });
 }
 function containsInnerNewline(obj) {
@@ -12711,39 +12683,6 @@ const SideDialog = Object.assign(SideDialogRoot, {
   Nav: SideDialogNav
 });
 
-function EntityMainHeader({
-  title,
-  description,
-  icon,
-  children,
-  isLoading,
-  className,
-  placement = "page"
-}) {
-  return /* @__PURE__ */ 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__ */ jsxs("h1", { children: [
-          icon && icon,
-          " ",
-          title
-        ] }),
-        description && /* @__PURE__ */ jsx("p", { children: description })
-      ]
-    }
-  );
-}
-
 function PageHeader({ title, description, icon, className }) {
   const titleIsLoading = title === "loading";
   const descriptionIsLoading = description === "loading";
@@ -13187,11 +13126,23 @@ function MainSidebarNavSeparator({ className }) {
 function MainSidebarRoot({ children, className }) {
   const { state, toggleSidebar } = useMainSidebar();
   const isCollapsed = state === "collapsed";
+  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__ */ 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
         },
@@ -13199,30 +13150,41 @@ function MainSidebarRoot({ children, className }) {
       ),
       children: [
         children,
-        /* @__PURE__ */ jsx(MainSidebarNavSeparator, {}),
-        /* @__PURE__ */ 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__ */ jsx(
-              PanelRightIcon,
+        /* @__PURE__ */ jsxs("div", { className: "bg-surface1 grid sticky bottom-0 pb-[.75rem] ", children: [
+          /* @__PURE__ */ jsx(MainSidebarNavSeparator, {}),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(
+                  PanelRightIcon,
+                  {
+                    className: cn({
+                      "rotate-180": isCollapsed
+                    })
+                  }
+                )
               }
-            )
-          }
-        ),
+            ) }),
+            /* @__PURE__ */ jsxs(TooltipContent, { children: [
+              "Toggle Sidebar",
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
+                /* @__PURE__ */ jsx(KeyboardIcon, {}),
+                " Ctrl+B"
+              ] })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -13626,31 +13588,6 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
   ] });
 }
 
-const useScoresByEntityId = (entityId, entityType, page = 0) => {
-  const client = useMastraClient();
-  const [scores, setScores] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  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 = useMastraClient();
   return useQuery({
@@ -13835,6 +13772,20 @@ const useTraceSpanScores = ({ traceId = "", spanId = "", page }) => {
   });
 };
 
+const ModelResetContext = createContext(null);
+function useModelReset() {
+  const context = useContext(ModelResetContext);
+  if (!context) {
+    return {
+      registerResetFn: () => {
+      },
+      triggerReset: () => {
+      }
+    };
+  }
+  return context;
+}
+
 const useAgentsModelProviders = () => {
   const client = useMastraClient();
   return useQuery({
@@ -14521,7 +14472,7 @@ const PromptEnhancer = ({ agentId }) => {
         {
           value: prompt,
           editable: true,
-          extensions: [markdown({ base: markdownLanguage, codeLanguages: languages }), EditorView.lineWrapping],
+          extensions: [markdown({ base: markdownLanguage, codeLanguages: languages }), EditorView$1.lineWrapping],
           onChange: setPrompt,
           theme: githubDarkInit({
             settings: {
@@ -18418,89 +18369,6 @@ const SpanScoring = ({ traceId, spanId, entityType }) => {
   ] });
 };
 
-const useResizeColumn = ({
-  defaultWidth,
-  minimumWidth,
-  maximumWidth,
-  setCurrentWidth
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
-  const containerRef = useRef(null);
-  const dragStartXRef = useRef(0);
-  const initialWidthRef = useRef(0);
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    dragStartXRef.current = e.clientX;
-    initialWidthRef.current = sidebarWidth;
-  };
-  useEffect(() => {
-    setSidebarWidth(defaultWidth);
-    setCurrentWidth?.(defaultWidth);
-  }, [defaultWidth]);
-  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__ */ jsxs("div", { className: cn("w-full h-full relative", className), ref: containerRef, style: { width: `${sidebarWidth}%` }, children: [
-    !disabled && dividerPosition === "left" ? /* @__PURE__ */ 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__ */ 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__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -18590,113 +18458,6 @@ const EntityContent = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className, children });
 };
 
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = useState(enabled);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [firstCallLoading, setFirstCallLoading] = useState(false);
-  const timeoutRef = useRef(null);
-  const mountedRef = useRef(true);
-  const [restart, setRestart] = useState(restartPolling);
-  const cleanup = useCallback(() => {
-    console.log("cleanup");
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = 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 = useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  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 QueryClient();
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
@@ -19171,5 +18932,5 @@ function MCPServerCombobox({
   );
 }
 
-export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map