@mastra/playground-ui 5.1.2-alpha.0 → 5.1.2-alpha.1

package/dist/index.cjs.js

@@ -5405,11 +5405,10 @@ function EvalTable({ evals, isCIMode = false }) {
 const TraceContext = React.createContext({});
 function TraceProvider({
   children,
-  initialTraces
+  initialTraces: traces = []
 }) {
   const [open, setOpen] = React.useState(false);
   const [trace, setTrace] = React.useState(null);
-  const [traces, setTraces] = React.useState(initialTraces || []);
   const [currentTraceIndex, setCurrentTraceIndex] = React.useState(0);
   const [span, setSpan] = React.useState(null);
   const nextTrace = () => {
@@ -5446,7 +5445,6 @@ function TraceProvider({
         trace,
         setTrace,
         traces,
-        setTraces,
         currentTraceIndex,
         setCurrentTraceIndex,
         nextTrace,
@@ -5571,9 +5569,6 @@ const toSigFigs = (num, sigFigs) => {
   return Number(num.toPrecision(sigFigs));
 };
 
-const TracesTableSkeleton = ({ colsCount }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: Array.from({ length: colsCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-1/2" }) }, index)) }) });
-};
 const TracesTableEmpty = ({ colsCount }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "No traces found" }) }) }) });
 };
@@ -5594,7 +5589,7 @@ const TraceRow = ({ trace, index, isActive }) => {
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" }) : /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), variant: "success", children: "Success" }) })
   ] });
 };
-const TracesTable = ({ traces, isLoading, error }) => {
+const TracesTable = ({ traces, error }) => {
   const hasNoTraces = !traces || traces.length === 0;
   const { currentTraceIndex } = React.useContext(TraceContext);
   const colsCount = 4;
@@ -5606,7 +5601,7 @@ const TracesTable = ({ traces, isLoading, error }) => {
       /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Spans" }),
       /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Status" })
     ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) }) })
+    error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) }) })
   ] });
 };
 
@@ -6214,14 +6209,14 @@ const TracesSidebar = ({ onResize }) => {
   );
 };
 
-function AgentTraces({ className, traces, isLoading, error }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { className, traces, isLoading, error });
+function AgentTraces({ className, traces, error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { className, traces, error }) });
 }
-function AgentTracesInner({ className, traces, isLoading, error }) {
+function AgentTracesInner({ className, traces, error }) {
   const [sidebarWidth, setSidebarWidth] = React.useState(100);
   const { isOpen: open } = React.useContext(TraceContext);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -6673,10 +6668,10 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { ToolFallback }) }) });
 };
 
-function WorkflowTraces({ traces, isLoading, error, runId, stepName }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { traces, isLoading, error, runId, stepName });
+function WorkflowTraces({ traces, error, runId, stepName }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
 }
-function WorkflowTracesInner({ traces, isLoading, error, runId, stepName }) {
+function WorkflowTracesInner({ traces, error, runId, stepName }) {
   const hasRunRef = React.useRef(false);
   const [sidebarWidth, setSidebarWidth] = React.useState(100);
   const { isOpen: open, setTrace, setIsOpen, setSpan } = React.useContext(TraceContext);
@@ -6693,7 +6688,7 @@ function WorkflowTracesInner({ traces, isLoading, error, runId, stepName }) {
     hasRunRef.current = true;
   }, [runId, traces, setTrace]);
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -10131,7 +10126,6 @@ function usePolling({
 
 const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   const [traces, setTraces] = React.useState([]);
-  const { setTraces: setTraceContextTraces } = React.useContext(TraceContext);
   const client = React.useMemo(() => createMastraClient(baseUrl), [baseUrl]);
   const fetchFn = React.useCallback(async () => {
     try {
@@ -10149,15 +10143,11 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
       throw error2;
     }
   }, [client, componentName, isWorkflow]);
-  const onSuccess = React.useCallback(
-    (newTraces) => {
-      if (newTraces.length > 0) {
-        setTraces(() => newTraces);
-        setTraceContextTraces(() => newTraces);
-      }
-    },
-    [setTraceContextTraces]
-  );
+  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);
@@ -10256,9 +10246,7 @@ exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolsIcon = ToolsIcon;
-exports.TraceContext = TraceContext;
 exports.TraceIcon = TraceIcon;
-exports.TraceProvider = TraceProvider;
 exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;