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

package/dist/index.es.js

@@ -20,6 +20,8 @@ import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { toast } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useDebouncedCallback } from 'use-debounce';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
@@ -34,7 +36,7 @@ import prettierPluginEstree from 'prettier/plugins/estree';
 import { C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
-import z$2, { z, ZodObject } from 'zod';
+import z$2, { z, ZodObject, ZodIntersection } from 'zod';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { format, isValid, formatDate, formatDistanceToNow } from 'date-fns';
@@ -47,8 +49,6 @@ import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from
 import { z as z$1 } from 'zod/v3';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useShallow } from 'zustand/shallow';
@@ -4513,11 +4513,24 @@ function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
+const usePlaygroundStore = create()(
+  persist(
+    (set) => ({
+      runtimeContext: {},
+      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
+
 const useWorkflow = (workflowId) => {
   const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
   return useQuery({
     queryKey: ["workflow", workflowId],
-    queryFn: () => client.getWorkflow(workflowId).details(),
+    queryFn: () => client.getWorkflow(workflowId).details(runtimeContext),
     retry: false,
     refetchOnWindowFocus: false
   });
@@ -4535,7 +4548,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");
@@ -4546,7 +4560,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 };
           })
@@ -7140,6 +7154,7 @@ function inferFieldType(schema, fieldConfig) {
     return fieldConfig.fieldType;
   }
   if (schema instanceof z.ZodObject) return "object";
+  if (schema instanceof z.ZodIntersection) return "object";
   if (schema instanceof z.ZodNumber) return "number";
   if (schema instanceof z.ZodBoolean) return "boolean";
   if (schema instanceof z.ZodString) {
@@ -7176,6 +7191,15 @@ function parseField(key, schema) {
   if (baseSchema instanceof z$1.ZodObject || baseSchema instanceof z.ZodObject) {
     subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
   }
+  if (baseSchema instanceof z$1.ZodIntersection || baseSchema instanceof 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 z$1.ZodArray || baseSchema instanceof z.ZodArray) {
     subSchema = [parseField("0", baseSchema._zod.def.element)];
   }
@@ -7223,6 +7247,9 @@ function isEmptyZodObject(schema) {
   if (schema instanceof ZodObject) {
     return Object.keys(schema.shape).length === 0;
   }
+  if (schema instanceof ZodIntersection) {
+    return isEmptyZodObject(schema._def.left) || isEmptyZodObject(schema._def.right);
+  }
   return false;
 }
 function DynamicForm({
@@ -7829,18 +7856,6 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEve
   );
 }
 
-const usePlaygroundStore = create()(
-  persist(
-    (set) => ({
-      runtimeContext: {},
-      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
-    }),
-    {
-      name: "mastra-playground-store"
-    }
-  )
-);
-
 const WorkflowStatus = ({ stepId, status, result }) => {
   return /* @__PURE__ */ jsx(
     WorkflowCard,
@@ -15290,9 +15305,11 @@ function RelationWrapper({ description, children }) {
 }
 
 function EntryListTextCell({ children, isLoading }) {
-  const randomWidth = useMemo(() => {
-    return Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+  const [randomWidth, setRandomWidth] = useState(void 0);
+  useEffect(() => {
+    setRandomWidth(Math.floor(Math.random() * (90 - 50 + 1)) + 50);
   }, []);
+  if (!randomWidth) return null;
   return /* @__PURE__ */ jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsx(
     "div",
     {
@@ -15428,9 +15445,10 @@ function EntryList({
             onClick: isLoading ? void 0 : onItemClick,
             columns,
             isLoading,
-            children: (columns || []).map((col) => {
+            children: (columns || []).map((col, index) => {
               const isValidReactElement = isValidElement(item?.[col.name]);
-              return isValidReactElement ? item?.[col.name] : /* @__PURE__ */ jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, col.name);
+              const key = `${index}-${item.id}`;
+              return isValidReactElement ? /* @__PURE__ */ jsx(React__default.Fragment, { children: item?.[col.name] }, key) : /* @__PURE__ */ jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, key);
             })
           },
           item.id
@@ -17997,10 +18015,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",
@@ -18009,7 +18031,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
         }
       ]
     },
@@ -18020,7 +18042,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
         }
       ]
     },
@@ -18156,7 +18178,9 @@ function TraceDialog({
   onClose,
   onNext,
   onPrevious,
-  isLoadingSpans
+  isLoadingSpans,
+  computeAgentsLink,
+  computeWorkflowsLink
 }) {
   const { Link } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = useState(false);
@@ -18206,7 +18230,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(