@mastra/playground-ui 6.5.0 → 6.5.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 6.5.1-alpha.0
+
+### Patch Changes
+
+- Add @mastra/react to peer deps ([#8857](https://github.com/mastra-ai/mastra/pull/8857))
+
+- Updated dependencies [[`ca85c93`](https://github.com/mastra-ai/mastra/commit/ca85c932b232e6ad820c811ec176d98e68c59b0a), [`a1d40f8`](https://github.com/mastra-ai/mastra/commit/a1d40f88d4ce42c4508774ad22e38ac582157af2), [`01c4a25`](https://github.com/mastra-ai/mastra/commit/01c4a2506c514d5e861c004d3d2fb3791c6391f3), [`9ba695e`](https://github.com/mastra-ai/mastra/commit/9ba695e9ff977b8f13cc71df3b452775757361e5), [`cce8aad`](https://github.com/mastra-ai/mastra/commit/cce8aad878a0dd98e5647680f3765caba0b1701c)]:
+  - @mastra/core@0.21.1-alpha.0
+  - @mastra/react@0.0.7-alpha.0
+  - @mastra/client-js@0.16.1-alpha.0
+
 ## 6.5.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -5446,6 +5446,9 @@ function WorkflowConditionNode({ data }) {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        "data-workflow-node": true,
+        "data-workflow-step-status": previousStep?.status,
+        "data-testid": "workflow-condition-node",
         className: cn(
           "bg-surface3 rounded-lg w-[300px] border-sm border-border1",
           previousStep?.status === "success" && nextStep && "bg-accent1Darker",
@@ -5583,6 +5586,9 @@ function WorkflowDefaultNode({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        "data-workflow-node": true,
+        "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",
           step?.status === "success" && "bg-accent1Darker",
@@ -5688,14 +5694,23 @@ function WorkflowAfterNode({ data }) {
 
 function WorkflowLoopResultNode({ data }) {
   const { result } = data;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-mastra-bg-8 rounded-md w-[274px]"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
-      result ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "text-current w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: String(result) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Bottom, style: { visibility: "hidden" } })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "workflow-loop-result-node",
+      "data-workflow-step-status": result ? "success" : "failed",
+      className: cn("bg-mastra-bg-8 rounded-md w-[274px]"),
+      "data-workflow-node": true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Top, style: { visibility: "hidden" } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
+          result ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "text-current w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: "text-current w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: String(result) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Bottom, style: { visibility: "hidden" } })
+      ]
+    }
+  );
 }
 
 function Spinner({ color = "#fff", className }) {
@@ -5919,6 +5934,9 @@ function WorkflowNestedNode({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        "data-testid": "workflow-nested-node",
+        "data-workflow-node": true,
+        "data-workflow-step-status": step?.status,
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
           step?.status === "success" && "bg-accent1Darker",
@@ -7201,7 +7219,7 @@ function WorkflowTrigger({
         const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.resumeSchema))) : z.z.record(z.z.string(), z.z.any());
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
-          step.suspendPayload && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          step.suspendPayload && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "suspended-payload", children: /* @__PURE__ */ jsxRuntime.jsx(
             CodeBlockDemo,
             {
               className: "w-full overflow-x-auto p-2",
@@ -7214,7 +7232,7 @@ function WorkflowTrigger({
             {
               schema: stepSchema,
               isSubmitLoading: isStreamingWorkflow,
-              submitButtonLabel: "Resume",
+              submitButtonLabel: "Resume workflow",
               onSubmit: (data) => {
                 const stepIds = step.stepId?.split(".");
                 handleResumeWorkflow({
@@ -17629,6 +17647,48 @@ const parseError = (error) => {
   }
 };
 
+const WorkflowRunList = ({ workflowId, runId }) => {
+  const { Link, paths } = useLinkComponent();
+  const { isLoading, data: runs } = useWorkflowRuns(workflowId);
+  const actualRuns = runs?.runs || [];
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+      "New workflow run"
+    ] }) }) }),
+    actualRuns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3 py-3 px-5", children: "Your run history will appear here once you run the workflow" }),
+    actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
+      typeof run?.snapshot === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+    ] }) }, run.runId))
+  ] }) }) });
+};
+const WorkflowRunStatusBadge = ({ status }) => {
+  if (status === "running") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}), children: status });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-accent2" }), children: status });
+  }
+  if (status === "canceled") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlash, { className: "text-icon3" }), children: status });
+  }
+  if (status === "pending" || status === "waiting") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "text-icon3" }), children: status });
+  }
+  if (status === "suspended") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-accent3" }), children: status });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "text-accent1" }), children: status });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", children: status });
+};
+
 const useMCPServerTools = (selectedServer) => {
   const client = react$3.useMastraClient();
   return reactQuery.useQuery({
@@ -17757,48 +17817,6 @@ const EmptyMCPTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
   }
 ) });
 
-const WorkflowRunList = ({ workflowId, runId }) => {
-  const { Link, paths } = useLinkComponent();
-  const { isLoading, data: runs } = useWorkflowRuns(workflowId);
-  const actualRuns = runs?.runs || [];
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: paths.workflowLink(workflowId), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
-      "New workflow run"
-    ] }) }) }),
-    actualRuns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3 py-3 px-5", children: "Your run history will appear here once you run the workflow" }),
-    actualRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { isActive: run.runId === runId, className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: paths.workflowRunLink(workflowId, run.runId), children: [
-      typeof run?.snapshot === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunStatusBadge, { status: run.snapshot.status }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem] text-muted-foreground", children: run.runId }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-    ] }) }, run.runId))
-  ] }) }) });
-};
-const WorkflowRunStatusBadge = ({ status }) => {
-  if (status === "running") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}), children: status });
-  }
-  if (status === "failed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-accent2" }), children: status });
-  }
-  if (status === "canceled") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlash, { className: "text-icon3" }), children: status });
-  }
-  if (status === "pending" || status === "waiting") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "text-icon3" }), children: status });
-  }
-  if (status === "suspended") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-accent3" }), children: status });
-  }
-  if (status === "success") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "text-accent1" }), children: status });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "default", children: status });
-};
-
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEntityHeader = AgentEntityHeader;