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

package/dist/index.es.js

@@ -6025,42 +6025,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 } = useContext(TraceContext);
@@ -6357,7 +6321,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);
     }
   };
@@ -7755,7 +7719,8 @@ function WorkflowRunProvider({
         setResult,
         payload,
         setPayload,
-        clearData
+        clearData,
+        snapshot
       },
       children
     }
@@ -9565,8 +9530,9 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
 
 function WorkflowGraph({ workflowId, onShowTrace }) {
   const { workflow, isLoading } = useWorkflow(workflowId);
+  const { snapshot } = useContext(WorkflowRunContext);
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
   }
   if (!workflow) {
     return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
@@ -9578,7 +9544,13 @@ function WorkflowGraph({ workflowId, onShowTrace }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow, onShowTrace }) }) });
+  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    WorkflowGraphInner,
+    {
+      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+      onShowTrace
+    }
+  ) }) }, snapshot?.runId ?? workflowId);
 }
 
 const WorkflowStatus = ({ stepId, status }) => {
@@ -9786,7 +9758,7 @@ const DataTable = ({
   const rows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => {
+      /* @__PURE__ */ 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__ */ jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
@@ -10094,47 +10066,5 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, isWorkflow = false) => {
-  const [traces, setTraces] = useState([]);
-  const client = useMemo(() => useMastraClient(), []);
-  const fetchFn = 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 = useCallback((newTraces) => {
-    if (newTraces.length > 0) {
-      setTraces(() => newTraces);
-    }
-  }, []);
-  const onError = useCallback((error2) => {
-    console.log(`error, onError`, error2);
-    toast.error(error2.message);
-  }, []);
-  const shouldContinue = useCallback(() => {
-    return true;
-  }, []);
-  const { firstCallLoading, error } = usePolling({
-    fetchFn,
-    interval: 3e3,
-    onSuccess,
-    onError,
-    shouldContinue,
-    enabled: true
-  });
-  return { traces, firstCallLoading, error };
-};
-
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
 //# sourceMappingURL=index.es.js.map