@mastra/playground-ui 6.5.2-alpha.0 → 6.6.0

package/dist/index.es.js

@@ -47,7 +47,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { useMastraClient, useChat, toAssistantUIMessage } from '@mastra/react';
+import { useMastraClient, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
 import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -4350,11 +4350,12 @@ const useCodemirrorTheme$2 = () => {
 };
 const SyntaxHighlighter$2 = ({
   data,
-  className
+  className,
+  ...props
 }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
-  return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), ...props, children: [
     /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
     /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
   ] });
@@ -4515,11 +4516,11 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
-    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: formattedArgs });
+    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: formattedArgs, "data-testid": "tool-args" });
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, "data-testid": "tool-result" });
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsx(
@@ -4546,7 +4547,7 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
         ] }),
         toolOutput.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool output" }),
-          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput }) })
+          /* @__PURE__ */ jsx("div", { className: "h-40 overflow-y-auto", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: toolOutput, "data-testid": "tool-output" }) })
         ] })
       ] })
     }
@@ -6606,12 +6607,16 @@ const SelectField$1 = ({ field, inputProps, error, id, value }) => {
 
 const ObjectWrapper = ({ label, children }) => {
   const hasLabel = label !== "​" && label !== "";
+  const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
-    hasLabel && /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
-      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
-      label
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      hasLabel && /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsOpen(!isOpen), type: "button", className: "ml-auto", children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("transition-all", isOpen ? "rotate-180" : "rotate-0") }) }) })
     ] }),
-    /* @__PURE__ */ jsx(
+    isOpen && /* @__PURE__ */ jsx(
       "div",
       {
         className: hasLabel ? "flex flex-col gap-1 [&>*]:border-dashed [&>*]:border-l [&>*]:border-l-border1 [&>*]:pl-4" : "",
@@ -7757,7 +7762,46 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex
   }
 ) });
 
-const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) => {
+const LoadingBadge = () => {
+  return /* @__PURE__ */ jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsx(Spinner, { color: IconColors.icon3 }),
+      title: /* @__PURE__ */ jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
+      collapsible: false
+    }
+  );
+};
+
+const useInView = () => {
+  const [inView, setInView] = useState(false);
+  const setRef = useCallback((node) => {
+    if (node) {
+      const observer = new IntersectionObserver(([entry]) => {
+        setInView(entry.isIntersecting);
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+  }, []);
+  return { inView, setRef };
+};
+
+const useWorkflow = (workflowId) => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["workflow", workflowId],
+    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
+    enabled: Boolean(workflowId),
+    retry: false,
+    refetchOnWindowFocus: false,
+    throwOnError: false
+  });
+};
+
+const WorkflowBadge = ({ runId, workflowId, isStreaming, metadata }) => {
+  const { data: workflow, isLoading: isWorkflowLoading } = useWorkflow(workflowId);
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
   });
@@ -7766,6 +7810,7 @@ const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) =
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
+  if (isWorkflowLoading || !workflow) return /* @__PURE__ */ jsx(LoadingBadge, {});
   return /* @__PURE__ */ jsxs(
     BadgeWrapper,
     {
@@ -7792,7 +7837,7 @@ const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
       /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
-      /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
+      runId && /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow }) })
   ] });
@@ -7805,30 +7850,6 @@ const useWorkflowStream = (workflowFullState) => {
   }, [workflowFullState]);
 };
 
-const useWorkflow = (workflowId) => {
-  const client = useMastraClient();
-  const { runtimeContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["workflow", workflowId],
-    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
-    enabled: Boolean(workflowId),
-    retry: false,
-    refetchOnWindowFocus: false,
-    throwOnError: false
-  });
-};
-
-const LoadingBadge = () => {
-  return /* @__PURE__ */ jsx(
-    BadgeWrapper,
-    {
-      icon: /* @__PURE__ */ jsx(Spinner, { color: IconColors.icon3 }),
-      title: /* @__PURE__ */ jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
-      collapsible: false
-    }
-  );
-};
-
 const AgentBadge = ({ agentId, messages = [], metadata }) => {
   const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
   const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
@@ -7873,25 +7894,51 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
   );
 };
 
+const useAgentMessages = ({
+  threadId,
+  agentId,
+  memory
+}) => {
+  const client = useMastraClient();
+  return useQuery({
+    queryKey: ["memory", "messages", threadId, agentId],
+    queryFn: () => client.getThreadMessages(threadId, { agentId }),
+    enabled: memory && Boolean(threadId),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+
+const AgentBadgeWrapper = ({ agentId, result, metadata }) => {
+  const { data: memoryMessages } = useAgentMessages({
+    threadId: result?.subAgentThreadId ?? "",
+    agentId,
+    memory: true
+  });
+  const childMessages = result?.childMessages ?? resolveToChildMessages(memoryMessages?.uiMessages ?? []);
+  return /* @__PURE__ */ jsx(AgentBadge, { agentId, messages: childMessages, metadata });
+};
+
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
 const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
+  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT" || toolName.startsWith("agent-");
+  const isWorkflow = metadata?.mode === "network" && metadata.from === "WORKFLOW" || toolName.startsWith("workflow-");
+  const agentToolName = toolName.startsWith("agent-") ? toolName.substring("agent-".length) : toolName;
+  const workflowToolName = toolName.startsWith("workflow-") ? toolName.substring("workflow-".length) : toolName;
   useWorkflowStream(result);
-  const { data: workflow, isLoading } = useWorkflow(toolName);
-  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT";
   if (isAgent) {
-    const messages = result?.childMessages ?? [];
-    return /* @__PURE__ */ jsx(AgentBadge, { agentId: toolName, messages, metadata });
+    return /* @__PURE__ */ jsx(AgentBadgeWrapper, { agentId: agentToolName, result, metadata });
   }
-  if (isLoading) return /* @__PURE__ */ jsx(LoadingBadge, {});
-  if (workflow) {
+  if (isWorkflow) {
     const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
     return /* @__PURE__ */ jsx(
       WorkflowBadge,
       {
-        workflowId: toolName,
-        workflow,
+        workflowId: workflowToolName,
         isStreaming,
         runId: result?.runId,
         metadata
@@ -10068,15 +10115,36 @@ const AgentChat = ({
   agentId,
   agentName,
   threadId,
-  initialMessages,
-  initialLegacyMessages,
   memory,
   refreshThreadList,
   modelVersion,
-  modelList
+  modelList,
+  messageId
 }) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
+  const { data: messages, isLoading: isMessagesLoading } = useAgentMessages({
+    agentId,
+    threadId: threadId ?? "",
+    memory: memory ?? false
+  });
+  useEffect(() => {
+    if (messageId && messages && !isMessagesLoading) {
+      setTimeout(() => {
+        const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (messageElement) {
+          messageElement.scrollIntoView({ behavior: "smooth", block: "center" });
+          messageElement.classList.add("bg-surface4");
+          setTimeout(() => {
+            messageElement.classList.remove("bg-surface4");
+          }, 2e3);
+        }
+      }, 100);
+    }
+  }, [messageId, messages, isMessagesLoading]);
+  if (isMessagesLoading) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     MastraRuntimeProvider,
     {
@@ -10084,8 +10152,8 @@ const AgentChat = ({
       agentName,
       modelVersion,
       threadId,
-      initialMessages,
-      initialLegacyMessages,
+      initialMessages: messages?.uiMessages || [],
+      initialLegacyMessages: messages?.legacyMessages || [],
       memory,
       refreshThreadList,
       settings,
@@ -17319,20 +17387,6 @@ function usePolling({
   };
 }
 
-const useInView = () => {
-  const [inView, setInView] = useState(false);
-  const setRef = useCallback((node) => {
-    if (node) {
-      const observer = new IntersectionObserver(([entry]) => {
-        setInView(entry.isIntersecting);
-      });
-      observer.observe(node);
-      return () => observer.disconnect();
-    }
-  }, []);
-  return { inView, setRef };
-};
-
 const PlaygroundQueryClient = ({ children }) => {
   const queryClient = new QueryClient();
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });