@mastra/playground-ui 6.1.3-alpha.1 → 6.1.4-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @mastra/playground-ui
 
+## 6.1.4-alpha.0
+
+### Patch Changes
+
+- fix minor playground stuff for observability ([#7765](https://github.com/mastra-ai/mastra/pull/7765))
+
+- Handle zod intersections in dynamic form ([#7768](https://github.com/mastra-ai/mastra/pull/7768))
+
+- Playground ui -pass runtimeContext to client SDK get methods ([#7767](https://github.com/mastra-ai/mastra/pull/7767))
+
+- Updated dependencies [[`5802bf5`](https://github.com/mastra-ai/mastra/commit/5802bf57f6182e4b67c28d7d91abed349a8d14f3), [`5bda53a`](https://github.com/mastra-ai/mastra/commit/5bda53a9747bfa7d876d754fc92c83a06e503f62), [`f26a8fd`](https://github.com/mastra-ai/mastra/commit/f26a8fd99fcb0497a5d86c28324430d7f6a5fb83), [`f0ab020`](https://github.com/mastra-ai/mastra/commit/f0ab02034532a4afb71a1ef4fe243f9a8dffde84), [`cdc63c0`](https://github.com/mastra-ai/mastra/commit/cdc63c0d2725ee0191aa7f5287ccf83629019748), [`e6e37a0`](https://github.com/mastra-ai/mastra/commit/e6e37a05ec2b6de4f34ee77bb2dd08edfae4ae4a), [`1a1fbe6`](https://github.com/mastra-ai/mastra/commit/1a1fbe66efb7d94abc373ed0dd9676adb8122454), [`36f39c0`](https://github.com/mastra-ai/mastra/commit/36f39c00dc794952dc3c11aab91c2fa8bca74b11)]:
+  - @mastra/core@0.16.4-alpha.0
+  - @mastra/client-js@0.12.4-alpha.0
+
+## 6.1.3
+
+### Patch Changes
+
+- AN packages ([#7711](https://github.com/mastra-ai/mastra/pull/7711))
+
+- Client SDK Agents, Mastra server - support runtimeContext with GET requests ([#7734](https://github.com/mastra-ai/mastra/pull/7734))
+
+- fix playground UI issue about dynmic workflow exec in agent thread ([#7665](https://github.com/mastra-ai/mastra/pull/7665))
+
+- Updated dependencies [[`b4379f7`](https://github.com/mastra-ai/mastra/commit/b4379f703fd74474f253420e8c3a684f2c4b2f8e), [`2a6585f`](https://github.com/mastra-ai/mastra/commit/2a6585f7cb71f023f805d521d1c3c95fb9a3aa59), [`3d26e83`](https://github.com/mastra-ai/mastra/commit/3d26e8353a945719028f087cc6ac4b06f0ce27d2), [`dd9119b`](https://github.com/mastra-ai/mastra/commit/dd9119b175a8f389082f75c12750e51f96d65dca), [`d34aaa1`](https://github.com/mastra-ai/mastra/commit/d34aaa1da5d3c5f991740f59e2fe6d28d3e2dd91), [`56e55d1`](https://github.com/mastra-ai/mastra/commit/56e55d1e9eb63e7d9e41aa46e012aae471256812), [`ce1e580`](https://github.com/mastra-ai/mastra/commit/ce1e580f6391e94a0c6816a9c5db0a21566a262f), [`b2babfa`](https://github.com/mastra-ai/mastra/commit/b2babfa9e75b22f2759179e71d8473f6dc5421ed), [`d8c3ba5`](https://github.com/mastra-ai/mastra/commit/d8c3ba516f4173282d293f7e64769cfc8738d360), [`a566c4e`](https://github.com/mastra-ai/mastra/commit/a566c4e92d86c1671707c54359b1d33934f7cc13), [`0666082`](https://github.com/mastra-ai/mastra/commit/06660820230dcb1fa7c1d51c8254107afd68cd67), [`af333aa`](https://github.com/mastra-ai/mastra/commit/af333aa30fe6d1b127024b03a64736c46eddeca2), [`4c81b65`](https://github.com/mastra-ai/mastra/commit/4c81b65a28d128560bdf63bc9b8a1bddd4884812), [`3863c52`](https://github.com/mastra-ai/mastra/commit/3863c52d44b4e5779968b802d977e87adf939d8e), [`6424c7e`](https://github.com/mastra-ai/mastra/commit/6424c7ec38b6921d66212431db1e0958f441b2a7), [`db94750`](https://github.com/mastra-ai/mastra/commit/db94750a41fd29b43eb1f7ce8e97ba8b9978c91b), [`a66a371`](https://github.com/mastra-ai/mastra/commit/a66a3716b00553d7f01842be9deb34f720b10fab), [`779d469`](https://github.com/mastra-ai/mastra/commit/779d469366bb9f7fcb6d1638fdabb9f3acc49218), [`69fc3cd`](https://github.com/mastra-ai/mastra/commit/69fc3cd0fd814901785bdcf49bf536ab1e7fd975)]:
+  - @mastra/core@0.16.3
+  - @mastra/client-js@0.12.3
+
 ## 6.1.3-alpha.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -22,6 +22,8 @@ const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
 const DialogPrimitive = require('@radix-ui/react-dialog');
 const useDebounce = require('use-debounce');
+const zustand = require('zustand');
+const middleware = require('zustand/middleware');
 const reactQuery = require('@tanstack/react-query');
 const react = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
@@ -48,8 +50,6 @@ const v4 = require('@autoform/zod/v4');
 const v3 = require('zod/v3');
 const reactCodeBlock = require('react-code-block');
 const SliderPrimitive = require('@radix-ui/react-slider');
-const zustand = require('zustand');
-const middleware = require('zustand/middleware');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 const reactTable = require('@tanstack/react-table');
 const shallow = require('zustand/shallow');
@@ -4547,11 +4547,24 @@ function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
+const usePlaygroundStore = zustand.create()(
+  middleware.persist(
+    (set) => ({
+      runtimeContext: {},
+      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
+
 const useWorkflow = (workflowId) => {
   const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
   return reactQuery.useQuery({
     queryKey: ["workflow", workflowId],
-    queryFn: () => client.getWorkflow(workflowId).details(),
+    queryFn: () => client.getWorkflow(workflowId).details(runtimeContext),
     retry: false,
     refetchOnWindowFocus: false
   });
@@ -4569,7 +4582,8 @@ const useLegacyWorkflow = (workflowId) => {
           setIsLoading(false);
           return;
         }
-        const res = await client.getLegacyWorkflow(workflowId).details();
+        const { runtimeContext } = usePlaygroundStore.getState();
+        const res = await client.getLegacyWorkflow(workflowId).details(runtimeContext);
         if (!res) {
           setLegacyWorkflow(null);
           console.error("Error fetching legacy workflow");
@@ -4580,7 +4594,7 @@ const useLegacyWorkflow = (workflowId) => {
         const stepsWithWorkflow = await Promise.all(
           Object.values(steps)?.map(async (step) => {
             if (!step.workflowId) return step;
-            const wFlow = await client.getLegacyWorkflow(step.workflowId).details();
+            const wFlow = await client.getLegacyWorkflow(step.workflowId).details(runtimeContext);
             if (!wFlow) return step;
             return { ...step, stepGraph: wFlow.stepGraph, stepSubscriberGraph: wFlow.stepSubscriberGraph };
           })
@@ -7174,6 +7188,7 @@ function inferFieldType(schema, fieldConfig) {
     return fieldConfig.fieldType;
   }
   if (schema instanceof z.z.ZodObject) return "object";
+  if (schema instanceof z.z.ZodIntersection) return "object";
   if (schema instanceof z.z.ZodNumber) return "number";
   if (schema instanceof z.z.ZodBoolean) return "boolean";
   if (schema instanceof z.z.ZodString) {
@@ -7210,6 +7225,15 @@ function parseField(key, schema) {
   if (baseSchema instanceof v3.z.ZodObject || baseSchema instanceof z.z.ZodObject) {
     subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
   }
+  if (baseSchema instanceof v3.z.ZodIntersection || baseSchema instanceof z.z.ZodIntersection) {
+    const subSchemaLeft = Object.entries(baseSchema._def.left.shape).map(
+      ([key2, field]) => parseField(key2, field)
+    );
+    const subSchemaRight = Object.entries(baseSchema._def.right.shape).map(
+      ([key2, field]) => parseField(key2, field)
+    );
+    subSchema = [...subSchemaLeft, ...subSchemaRight];
+  }
   if (baseSchema instanceof v3.z.ZodArray || baseSchema instanceof z.z.ZodArray) {
     subSchema = [parseField("0", baseSchema._zod.def.element)];
   }
@@ -7257,6 +7281,9 @@ function isEmptyZodObject(schema) {
   if (schema instanceof z.ZodObject) {
     return Object.keys(schema.shape).length === 0;
   }
+  if (schema instanceof z.ZodIntersection) {
+    return isEmptyZodObject(schema._def.left) || isEmptyZodObject(schema._def.right);
+  }
   return false;
 }
 function DynamicForm({
@@ -7863,18 +7890,6 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEve
   );
 }
 
-const usePlaygroundStore = zustand.create()(
-  middleware.persist(
-    (set) => ({
-      runtimeContext: {},
-      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
-    }),
-    {
-      name: "mastra-playground-store"
-    }
-  )
-);
-
 const WorkflowStatus = ({ stepId, status, result }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowCard,
@@ -15324,9 +15339,11 @@ function RelationWrapper({ description, children }) {
 }
 
 function EntryListTextCell({ children, isLoading }) {
-  const randomWidth = React.useMemo(() => {
-    return Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+  const [randomWidth, setRandomWidth] = React.useState(void 0);
+  React.useEffect(() => {
+    setRandomWidth(Math.floor(Math.random() * (90 - 50 + 1)) + 50);
   }, []);
+  if (!randomWidth) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15462,9 +15479,10 @@ function EntryList({
             onClick: isLoading ? void 0 : onItemClick,
             columns,
             isLoading,
-            children: (columns || []).map((col) => {
+            children: (columns || []).map((col, index) => {
               const isValidReactElement = React.isValidElement(item?.[col.name]);
-              return isValidReactElement ? item?.[col.name] : /* @__PURE__ */ jsxRuntime.jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, col.name);
+              const key = `${index}-${item.id}`;
+              return isValidReactElement ? /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: item?.[col.name] }, key) : /* @__PURE__ */ jsxRuntime.jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, key);
             })
           },
           item.id
@@ -18031,10 +18049,14 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   );
 }
 
-function getTraceInfo(trace) {
+function getTraceInfo(trace, computeAgentsLink, computeWorkflowsLink) {
   if (!trace) {
     return [];
   }
+  const agentsLink = computeAgentsLink ? computeAgentsLink() : "/agents";
+  const workflowsLink = computeWorkflowsLink ? computeWorkflowsLink() : "/workflows";
+  const agentLink = computeAgentsLink ? `${agentsLink}/${trace?.metadata?.resourceId}` : `/agents/${trace?.metadata?.resourceId}`;
+  const workflowLink = computeWorkflowsLink ? `${workflowsLink}/${trace?.metadata?.resourceId}` : `/workflows/${trace?.metadata?.resourceId}`;
   return [
     {
       key: "entityId",
@@ -18043,7 +18065,7 @@ function getTraceInfo(trace) {
         {
           id: trace?.metadata?.resourceId,
           name: trace?.attributes?.agentId || trace?.attributes?.workflowId || "-",
-          path: trace?.attributes?.agentId ? `/agents/${trace?.metadata?.resourceId}` : trace?.attributes?.workflowId ? `/workflows/${trace?.metadata?.resourceId}` : void 0
+          path: trace?.attributes?.agentId ? agentLink : trace?.attributes?.workflowId ? workflowLink : void 0
         }
       ]
     },
@@ -18054,7 +18076,7 @@ function getTraceInfo(trace) {
         {
           id: trace?.attributes?.agentId || trace?.attributes?.workflowId,
           name: trace?.attributes?.agentId ? "Agent" : trace?.attributes?.workflowId ? "Workflow" : "-",
-          path: trace?.attributes?.agentId ? `/agents` : trace?.attributes?.workflowId ? `/workflows` : void 0
+          path: trace?.attributes?.agentId ? agentsLink : trace?.attributes?.workflowId ? workflowsLink : void 0
         }
       ]
     },
@@ -18190,7 +18212,9 @@ function TraceDialog({
   onClose,
   onNext,
   onPrevious,
-  isLoadingSpans
+  isLoadingSpans,
+  computeAgentsLink,
+  computeWorkflowsLink
 }) {
   const { Link } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
@@ -18240,7 +18264,7 @@ function TraceDialog({
     const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
     return currentIndex > 0;
   };
-  const traceInfo = getTraceInfo(traceDetails);
+  const traceInfo = getTraceInfo(traceDetails, computeAgentsLink, computeWorkflowsLink);
   const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(