@mastra/playground-ui 5.1.2-alpha.3 → 5.1.2-alpha.5

package/dist/index.cjs.js

@@ -6057,42 +6057,6 @@ function transformKey(key) {
   const newKey = key.split(".").join(" ").split("_").join(" ").replaceAll("ai", "AI");
   return newKey.substring(0, 1).toUpperCase() + newKey.substring(1);
 }
-const refineTraces = (traces, isWorkflow = false) => {
-  const listOfSpanIds = /* @__PURE__ */ new Set();
-  const newName = (name) => {
-    if (name?.startsWith("workflow.") && isWorkflow) {
-      return name?.split(".")?.slice(2)?.join(".");
-    }
-    if (name?.startsWith("agent.") && !isWorkflow) {
-      return name?.split(".")?.slice(1)?.join(".");
-    }
-    return name;
-  };
-  const groupedTraces = traces?.reduce((acc, curr) => {
-    const newCurr = { ...curr, name: newName(curr.name), duration: curr.endTime - curr.startTime };
-    listOfSpanIds.add(curr.id);
-    return { ...acc, [curr.traceId]: [...acc[curr.traceId] || [], newCurr] };
-  }, {});
-  const tracesData = Object.entries(groupedTraces).map(([key, value]) => {
-    const parentSpan = value.find((span) => !span.parentSpanId || !listOfSpanIds.has(span.parentSpanId));
-    const enrichedSpans = value.map((span) => ({
-      ...span,
-      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId
-    }));
-    const failedStatus = value.find((span) => span.status.code !== 0)?.status;
-    const runId = value?.[0]?.attributes?.runId;
-    return {
-      traceId: key,
-      serviceName: parentSpan?.name || key,
-      duration: parentSpan?.duration || value.reduce((acc, curr) => acc + curr.duration, 0),
-      status: failedStatus || parentSpan?.status || value[0].status,
-      started: value[0].startTime,
-      trace: enrichedSpans,
-      runId: runId ? String(runId) : void 0
-    };
-  });
-  return tracesData;
-};
 
 function SpanDetail() {
   const { span, setSpan, trace, setIsOpen } = React.useContext(TraceContext);
@@ -6389,7 +6353,7 @@ function MastraNetworkRuntimeProvider({
       console.log(messages);
       setIsRunning(false);
     } catch (error) {
-      console.error("Error occured in MastraRuntimeProvider", error);
+      console.error("Error occurred in MastraRuntimeProvider", error);
       setIsRunning(false);
     }
   };
@@ -7787,7 +7751,8 @@ function WorkflowRunProvider({
         setResult,
         payload,
         setPayload,
-        clearData
+        clearData,
+        snapshot
       },
       children
     }
@@ -9597,8 +9562,9 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
 
 function WorkflowGraph({ workflowId, onShowTrace }) {
   const { workflow, isLoading } = useWorkflow(workflowId);
+  const { snapshot } = React.useContext(WorkflowRunContext);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) });
   }
   if (!workflow) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
@@ -9610,7 +9576,13 @@ function WorkflowGraph({ workflowId, onShowTrace }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraphInner, { workflow, onShowTrace }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowGraphInner,
+    {
+      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+      onShowTrace
+    }
+  ) }) }, snapshot?.runId ?? workflowId);
 }
 
 const WorkflowStatus = ({ stepId, status }) => {
@@ -9818,7 +9790,7 @@ const DataTable = ({
   const rows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => {
+      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0 bg-surface2", children: ths.headers.map((header) => {
         const size = header.column.getSize();
         const meta = header.column.columnDef.meta;
         return /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
@@ -10126,48 +10098,6 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, isWorkflow = false) => {
-  const [traces, setTraces] = React.useState([]);
-  const client = React.useMemo(() => useMastraClient(), []);
-  const fetchFn = React.useCallback(async () => {
-    try {
-      const res = await client.getTelemetry({
-        attribute: {
-          componentName
-        }
-      });
-      if (!res.traces) {
-        throw new Error("Error fetching traces");
-      }
-      const refinedTraces = refineTraces(res?.traces || [], isWorkflow);
-      return refinedTraces;
-    } catch (error2) {
-      throw error2;
-    }
-  }, [client, componentName, isWorkflow]);
-  const onSuccess = React.useCallback((newTraces) => {
-    if (newTraces.length > 0) {
-      setTraces(() => newTraces);
-    }
-  }, []);
-  const onError = React.useCallback((error2) => {
-    console.log(`error, onError`, error2);
-    sonner.toast.error(error2.message);
-  }, []);
-  const shouldContinue = React.useCallback(() => {
-    return true;
-  }, []);
-  const { firstCallLoading, error } = usePolling({
-    fetchFn,
-    interval: 3e3,
-    onSuccess,
-    onError,
-    shouldContinue,
-    enabled: true
-  });
-  return { traces, firstCallLoading, error };
-};
-
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentContext = AgentContext;
@@ -10262,11 +10192,9 @@ exports.WorkflowRunContext = WorkflowRunContext;
 exports.WorkflowRunProvider = WorkflowRunProvider;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
-exports.refineTraces = refineTraces;
 exports.useCurrentRun = useCurrentRun;
 exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
 exports.useSpeechRecognition = useSpeechRecognition;
-exports.useTraces = useTraces;
 //# sourceMappingURL=index.cjs.js.map