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

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @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
+
+- Update peer dependencies to match core package version bump (0.21.0) ([#8619](https://github.com/mastra-ai/mastra/pull/8619))
+
+### Patch Changes
+
+- dependencies updates: ([#8685](https://github.com/mastra-ai/mastra/pull/8685))
+  - Updated dependency [`zod@^4.1.12` ↗︎](https://www.npmjs.com/package/zod/v/4.1.12) (from `^4.1.9`, in `dependencies`)
+
+- Prepares some basic set of homemade components ([#8619](https://github.com/mastra-ai/mastra/pull/8619))
+
+- Improve the surface API of the react sdk ([#8715](https://github.com/mastra-ai/mastra/pull/8715))
+
+- Fix auto tab for model picker in playground-ui, the UI no longer auto tabs to the next selector when selecting a model/provider. ([#8680](https://github.com/mastra-ai/mastra/pull/8680))
+
+- Create unified Sidebar component to use on Playground and Cloud ([#8655](https://github.com/mastra-ai/mastra/pull/8655))
+
+- Adds reset button to model picker to reset to original model set on the agent. ([#8633](https://github.com/mastra-ai/mastra/pull/8633))
+
+- Fix back the tripwire verification inside the new react system ([#8674](https://github.com/mastra-ai/mastra/pull/8674))
+
+- Use only zod validation in dynamic form ([#8802](https://github.com/mastra-ai/mastra/pull/8802))
+
+- Add div wrapper around entity tables to fix table vertical position ([#8758](https://github.com/mastra-ai/mastra/pull/8758))
+
+- Update peer dependencies to match core package version bump (0.21.0) ([#8557](https://github.com/mastra-ai/mastra/pull/8557))
+
+- handle error case in react sdk ([#8676](https://github.com/mastra-ai/mastra/pull/8676))
+
+- Make sure to convert the agent instructions when showing them ([#8702](https://github.com/mastra-ai/mastra/pull/8702))
+
+- Update peer dependencies to match core package version bump (0.21.0) ([#8626](https://github.com/mastra-ai/mastra/pull/8626))
+
+- Customize AITraces type to seamlessly work on Cloud too ([#8759](https://github.com/mastra-ai/mastra/pull/8759))
+
+- Refactor EntryList component and Scorer and Observability pages ([#8652](https://github.com/mastra-ai/mastra/pull/8652))
+
+- fix maxSteps model settings not being passed to generate and stream endpoints ([#8627](https://github.com/mastra-ai/mastra/pull/8627))
+
+- Update peer dependencies to match core package version bump (0.21.0) ([#8686](https://github.com/mastra-ai/mastra/pull/8686))
+
+- Updated dependencies [[`f920afd`](https://github.com/mastra-ai/mastra/commit/f920afdf8725d14d73f895f51a24bb7c79bb4fba), [`2ddb851`](https://github.com/mastra-ai/mastra/commit/2ddb8519c4b6f1d31be10ffd33b41d2b649a04ff), [`421f019`](https://github.com/mastra-ai/mastra/commit/421f01949651d2766046ca1961e32a2dc2fd712b), [`1ed9670`](https://github.com/mastra-ai/mastra/commit/1ed9670d3ca50cb60dc2e517738c5eef3968ed27), [`b5a66b7`](https://github.com/mastra-ai/mastra/commit/b5a66b748a14fc8b3f63b04642ddb9621fbcc9e0), [`f59fc1e`](https://github.com/mastra-ai/mastra/commit/f59fc1e406b8912e692f6bff6cfd4754cc8d165c), [`158381d`](https://github.com/mastra-ai/mastra/commit/158381d39335be934b81ef8a1947bccace492c25), [`a1799bc`](https://github.com/mastra-ai/mastra/commit/a1799bcc1b5a1cdc188f2ac0165f17a1c4ac6f7b), [`6ff6094`](https://github.com/mastra-ai/mastra/commit/6ff60946f4ecfebdeef6e21d2b230c2204f2c9b8), [`288c2ec`](https://github.com/mastra-ai/mastra/commit/288c2ec873ff9f296cebfdb4654d1b9ba498ad9b), [`fb703b9`](https://github.com/mastra-ai/mastra/commit/fb703b9634eeaff1a6eb2b5531ce0f9e8fb04727), [`2a90197`](https://github.com/mastra-ai/mastra/commit/2a90197276e8439a1ee8371c10cde4d6a23bddef), [`37a2314`](https://github.com/mastra-ai/mastra/commit/37a23148e0e5a3b40d4f9f098b194671a8a49faf), [`7b1ef57`](https://github.com/mastra-ai/mastra/commit/7b1ef57fc071c2aa2a2e32905b18cd88719c5a39), [`05a9dee`](https://github.com/mastra-ai/mastra/commit/05a9dee3d355694d28847bfffb6289657fcf7dfa), [`e3c1077`](https://github.com/mastra-ai/mastra/commit/e3c107763aedd1643d3def5df450c235da9ff76c), [`1908ca0`](https://github.com/mastra-ai/mastra/commit/1908ca0521f90e43779cc29ab590173ca560443c), [`1bccdb3`](https://github.com/mastra-ai/mastra/commit/1bccdb33eb90cbeba2dc5ece1c2561fb774b26b6), [`5ef944a`](https://github.com/mastra-ai/mastra/commit/5ef944a3721d93105675cac2b2311432ff8cc393), [`c3ef11f`](https://github.com/mastra-ai/mastra/commit/c3ef11f76e1931cf8f041e9eccf3b382260da022), [`78cfb6b`](https://github.com/mastra-ai/mastra/commit/78cfb6b66fe88bc848105fccb6459fd75413ec87), [`d6b186f`](https://github.com/mastra-ai/mastra/commit/d6b186fb08f1caf1b86f73d3a5ee88fb999ca3be), [`ee68e82`](https://github.com/mastra-ai/mastra/commit/ee68e8289ea4408d29849e899bc6e78b3bd4e843), [`228228b`](https://github.com/mastra-ai/mastra/commit/228228b0b1de9291cb8887587f5cea1a8757ebad), [`ea33930`](https://github.com/mastra-ai/mastra/commit/ea339301e82d6318257720d811b043014ee44064), [`5f7c6a9`](https://github.com/mastra-ai/mastra/commit/5f7c6a986cd9469279820961f8da0a0321fbbd71), [`65493b3`](https://github.com/mastra-ai/mastra/commit/65493b31c36f6fdb78f9679f7e1ecf0c250aa5ee), [`a998b8f`](https://github.com/mastra-ai/mastra/commit/a998b8f858091c2ec47683e60766cf12d03001e4), [`b5a66b7`](https://github.com/mastra-ai/mastra/commit/b5a66b748a14fc8b3f63b04642ddb9621fbcc9e0), [`8a37bdd`](https://github.com/mastra-ai/mastra/commit/8a37bddb6d8614a32c5b70303d583d80c620ea61), [`135d6f2`](https://github.com/mastra-ai/mastra/commit/135d6f22a326ed1dffff858700669dff09d2c9eb)]:
+  - @mastra/react@0.0.6
+  - @mastra/core@0.21.0
+  - @mastra/client-js@0.16.0
+
 ## 6.5.0-alpha.4
 
 ### Patch 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;