@mastra/playground-ui 3.0.0 → 4.0.0-alpha.1

package/dist/index.es.js

@@ -7944,10 +7944,10 @@ function WorkflowTrigger({
   }, [isWatchingWorkflow]);
   useEffect(() => {
     if (!watchResultToUse?.activePaths || !result?.runId) return;
-    const suspended = watchResultToUse.activePaths.filter((path) => watchResultToUse.context?.steps?.[path.stepId]?.status === "suspended").map((path) => ({
-      stepId: path.stepId,
+    const suspended = Object.entries(watchResultToUse.activePaths).filter(([_, { status }]) => status === "suspended").map(([stepId, { suspendPayload }]) => ({
+      stepId,
       runId: result.runId,
-      suspendPayload: watchResultToUse.context?.steps?.[path.stepId]?.suspendPayload
+      suspendPayload
     }));
     setSuspendedSteps(suspended);
   }, [watchResultToUse, result]);
@@ -8010,31 +8010,20 @@ function WorkflowTrigger({
         }
       )
     ] }),
-    workflowActivePaths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-      /* @__PURE__ */ jsx("div", { className: "px-4", children: workflowActivePaths?.map((activePath, idx) => {
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-2 overflow-hidden border", children: activePath?.stepPath?.map((sp, idx2) => {
-          const status = activePath?.status === "completed" ? "Completed" : sp === activePath?.stepId ? activePath?.status.charAt(0).toUpperCase() + activePath?.status.slice(1) : "Completed";
+      /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
+          const status = pathStatus === "completed" ? "Completed" : stepId === path ? pathStatus.charAt(0).toUpperCase() + pathStatus.slice(1) : "Completed";
           const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `
-                            flex items-center justify-between p-3
-                            ${idx2 !== activePath.stepPath.length - 1 ? "border-b" : ""}
-                            bg-white/5
-                          `,
-              children: [
-                /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: sp.charAt(0).toUpperCase() + sp.slice(1) }),
-                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
-                  status
-                ] })
-              ]
-            },
-            idx2
-          );
-        }) }, idx);
+          return /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-hidden border", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between p-3`, children: [
+            /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: path.charAt(0).toUpperCase() + path.slice(1) }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
+              status
+            ] })
+          ] }) }, idx);
+        }) });
       }) })
     ] }),
     isSuspendedSteps && suspendedSteps?.map((step) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
@@ -8042,7 +8031,7 @@ function WorkflowTrigger({
       step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
         CodeBlockDemo,
         {
-          className: "w-[300px] overflow-x-auto",
+          className: "w-[300px] overflow-x-auto p-2",
           code: JSON.stringify(step.suspendPayload, null, 2),
           language: "json"
         }