@mastra/playground-ui 5.0.2-alpha.1 → 5.0.2-alpha.4

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './domains/workflows/index';
 export * from './domains/resizable-panel';
 export * from './components/dynamic-form/index';
 export * from './components/ui/data-table';
+export * from './components/threads';
 export * from './types';
 export * from './ds/components/Badge/index';
 export * from './ds/components/Button/index';
@@ -14,3 +15,6 @@ export * from './ds/components/Logo/index';
 export * from './ds/components/Table/index';
 export * from './ds/components/Txt/index';
 export * from './ds/icons/index';
+export { useTraces } from './hooks/index';
+export { TraceContext, TraceProvider } from './domains/traces/context/trace-context';
+export { refineTraces } from './domains/traces/utils';

package/dist/index.es.js

@@ -32,7 +32,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
-import z$1, { z } from 'zod';
+import z$1, { z, ZodObject } from 'zod';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -4850,229 +4850,6 @@ function TraceProvider({ children }) {
   );
 }
 
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = useState(enabled);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [firstCallLoading, setFirstCallLoading] = useState(false);
-  const timeoutRef = useRef(null);
-  const mountedRef = useRef(true);
-  const [restart, setRestart] = useState(restartPolling);
-  const cleanup = useCallback(() => {
-    console.log("cleanup");
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = useCallback(
-    async (refetch2 = true) => {
-      if (!mountedRef.current) return;
-      setIsLoading(true);
-      try {
-        const result = await fetchFn();
-        setData(result);
-        setError(null);
-        onSuccess?.(result);
-        if (shouldContinue(result) && refetch2) {
-          timeoutRef.current = setTimeout(executePoll, interval);
-        } else {
-          stopPolling();
-        }
-      } catch (err) {
-        if (!mountedRef.current) return;
-        setError(err);
-        onError?.(err);
-        stopPolling();
-      } finally {
-        if (mountedRef.current) {
-          setFirstCallLoading(false);
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
-  );
-  const refetch = useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  useEffect(() => {
-    if (restart && !isPolling) {
-      setIsPolling(true);
-      executePoll();
-      setRestart(false);
-    }
-  }, [restart]);
-  return {
-    isPolling,
-    isLoading,
-    error,
-    data,
-    startPolling,
-    stopPolling,
-    firstCallLoading,
-    refetch
-  };
-}
-
-function formatOtelTimestamp(otelTimestamp) {
-  const date = new Date(otelTimestamp / 1e3);
-  return new Intl.DateTimeFormat("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hour12: true
-  }).format(date);
-}
-function formatOtelTimestamp2(otelTimestamp) {
-  const date = new Date(otelTimestamp / 1e6);
-  return new Intl.DateTimeFormat("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hour12: true
-  }).format(date);
-}
-function transformKey(key) {
-  if (key.includes(".argument.")) {
-    return `Input`;
-  }
-  if (key.includes(".result")) {
-    return "Output";
-  }
-  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,
-      relativePercentage: parentSpan ? span.duration / parentSpan.duration : 0
-    }));
-    const failedStatus = value.find((span) => span.status.code !== 0)?.status;
-    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
-    };
-  });
-  return tracesData;
-};
-
-const useTraces = (componentName, baseUrl, isWorkflow = false) => {
-  const [traces, setTraces] = useState([]);
-  const { setTraces: setTraceContextTraces } = useContext(TraceContext);
-  const client = useMemo(() => createMastraClient(baseUrl), [baseUrl]);
-  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);
-        setTraceContextTraces(() => newTraces);
-      }
-    },
-    [setTraceContextTraces]
-  );
-  const onError = useCallback((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 };
-};
-
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
   small: "[&>tbody>tr]:h-table-row-small"
@@ -5194,6 +4971,10 @@ const useOpenTrace = () => {
   return { openTrace };
 };
 
+const toSigFigs = (num, sigFigs) => {
+  return Number(num.toPrecision(sigFigs));
+};
+
 const TracesTableSkeleton = ({ colsCount }) => {
   return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: Array.from({ length: colsCount }).map((_, index) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2" }) }, index)) }) });
 };
@@ -5212,7 +4993,7 @@ const TraceRow = ({ trace, index, isActive }) => {
       trace.traceId.substring(0, 7),
       "..."
     ] }),
-    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: Math.round(trace.duration / 1e3) }),
+    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
     /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
     /* @__PURE__ */ jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" }) : /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(Check, {}), variant: "success", children: "Success" }) })
   ] });
@@ -5349,11 +5130,12 @@ const variantClasses = {
 };
 const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
+  const percent = Math.min(100, progressPercent);
   return /* @__PURE__ */ jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${progressPercent}%` } }) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${percent}%` } }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        Math.round(durationMs),
+        toSigFigs(durationMs, 3),
         "ms"
       ] }),
       tokenCount && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
@@ -5588,6 +5370,76 @@ const SyntaxHighlighter = ({ data }) => {
   return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
 };
 
+function formatOtelTimestamp(otelTimestamp) {
+  const date = new Date(otelTimestamp / 1e3);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  }).format(date);
+}
+function formatOtelTimestamp2(otelTimestamp) {
+  const date = new Date(otelTimestamp / 1e6);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  }).format(date);
+}
+function transformKey(key) {
+  if (key.includes(".argument.")) {
+    return `Input`;
+  }
+  if (key.includes(".result")) {
+    return "Output";
+  }
+  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,
+      relativePercentage: parentSpan ? span.duration / parentSpan.duration : 0
+    }));
+    const failedStatus = value.find((span) => span.status.code !== 0)?.status;
+    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
+    };
+  });
+  return tracesData;
+};
+
 function SpanDetail() {
   const { span, setSpan, trace, setIsOpen } = useContext(TraceContext);
   if (!span || !trace) return null;
@@ -5623,11 +5475,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
-        Math.round(span.duration / 1e3),
+        toSigFigs(span.duration / 1e3, 3),
         "ms"
       ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
         "Failed in ",
-        Math.round(span.duration / 1e3),
+        toSigFigs(span.duration / 1e3, 3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -5713,15 +5565,14 @@ const TracesSidebar = ({ onResize }) => {
   );
 };
 
-function AgentTraces({ agentName, baseUrl, className }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, className }) });
+function AgentTraces({ className, traces, isLoading, error }) {
+  return /* @__PURE__ */ jsx(AgentTracesInner, { className, traces, isLoading, error });
 }
-function AgentTracesInner({ agentName, baseUrl, className }) {
+function AgentTracesInner({ className, traces, isLoading, error }) {
   const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
   const { isOpen: open } = useContext(TraceContext);
   return /* @__PURE__ */ jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -6173,15 +6024,14 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
 };
 
-function WorkflowTraces({ workflowName, baseUrl }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(WorkflowTracesInner, { workflowName, baseUrl }) });
+function WorkflowTraces({ traces, isLoading, error }) {
+  return /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, isLoading, error });
 }
-function WorkflowTracesInner({ workflowName, baseUrl }) {
+function WorkflowTracesInner({ traces, isLoading, error }) {
   const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = useContext(TraceContext);
   return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -8208,6 +8058,12 @@ class CustomZodProvider extends ZodProvider {
   }
 }
 
+function isEmptyZodObject(schema) {
+  if (schema instanceof ZodObject) {
+    return Object.keys(schema.shape).length === 0;
+  }
+  return false;
+}
 function DynamicForm({
   schema,
   onSubmit,
@@ -8220,6 +8076,9 @@ function DynamicForm({
     return null;
   }
   const normalizedSchema = (schema2) => {
+    if (isEmptyZodObject(schema2)) {
+      return z$1.object({});
+    }
     return z$1.object({
       "​": schema2
     });
@@ -8228,7 +8087,7 @@ function DynamicForm({
   const formProps = {
     schema: schemaProvider,
     onSubmit: async (values) => {
-      await onSubmit(values["​"]);
+      await onSubmit(values?.["​"] || {});
     },
     defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
@@ -8835,6 +8694,47 @@ const DataTable = ({
   ] });
 };
 
+const Threads = ({ children }) => {
+  return /* @__PURE__ */ jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
+};
+const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      href,
+      prefetch,
+      to,
+      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
+      children
+    }
+  );
+};
+const ThreadList = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+const ThreadItem = ({ children, isActive }) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-5 py-2",
+        isActive && "bg-surface4"
+      ),
+      children
+    }
+  );
+};
+const ThreadDeleteButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
+      onClick,
+      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-icon3" }) })
+    }
+  );
+};
+
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -8910,5 +8810,159 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, 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, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
+function usePolling({
+  fetchFn,
+  interval = 3e3,
+  enabled = false,
+  onSuccess,
+  onError,
+  shouldContinue = () => true,
+  restartPolling = false
+}) {
+  const [isPolling, setIsPolling] = useState(enabled);
+  const [error, setError] = useState(null);
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [firstCallLoading, setFirstCallLoading] = useState(false);
+  const timeoutRef = useRef(null);
+  const mountedRef = useRef(true);
+  const [restart, setRestart] = useState(restartPolling);
+  const cleanup = useCallback(() => {
+    console.log("cleanup");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const stopPolling = useCallback(() => {
+    console.log("stopPolling");
+    setIsPolling(false);
+    cleanup();
+  }, [cleanup]);
+  const startPolling = useCallback(() => {
+    console.log("startPolling");
+    setIsPolling(true);
+    setError(null);
+  }, []);
+  const executePoll = useCallback(
+    async (refetch2 = true) => {
+      if (!mountedRef.current) return;
+      setIsLoading(true);
+      try {
+        const result = await fetchFn();
+        setData(result);
+        setError(null);
+        onSuccess?.(result);
+        if (shouldContinue(result) && refetch2) {
+          timeoutRef.current = setTimeout(executePoll, interval);
+        } else {
+          stopPolling();
+        }
+      } catch (err) {
+        if (!mountedRef.current) return;
+        setError(err);
+        onError?.(err);
+        stopPolling();
+      } finally {
+        if (mountedRef.current) {
+          setFirstCallLoading(false);
+          setIsLoading(false);
+        }
+      }
+    },
+    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
+  );
+  const refetch = useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
+      } else {
+        executePoll(false);
+      }
+      setError(null);
+    },
+    [executePoll]
+  );
+  useEffect(() => {
+    mountedRef.current = true;
+    if (enabled && isPolling) {
+      executePoll(true);
+    }
+    return () => {
+      console.log("cleanup poll");
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [enabled, isPolling, executePoll, cleanup]);
+  useEffect(() => {
+    setRestart(restartPolling);
+  }, [restartPolling]);
+  useEffect(() => {
+    if (restart && !isPolling) {
+      setIsPolling(true);
+      executePoll();
+      setRestart(false);
+    }
+  }, [restart]);
+  return {
+    isPolling,
+    isLoading,
+    error,
+    data,
+    startPolling,
+    stopPolling,
+    firstCallLoading,
+    refetch
+  };
+}
+
+const useTraces = (componentName, baseUrl, isWorkflow = false) => {
+  const [traces, setTraces] = useState([]);
+  const { setTraces: setTraceContextTraces } = useContext(TraceContext);
+  const client = useMemo(() => createMastraClient(baseUrl), [baseUrl]);
+  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);
+        setTraceContextTraces(() => newTraces);
+      }
+    },
+    [setTraceContextTraces]
+  );
+  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, 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, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useTraces };
 //# sourceMappingURL=index.es.js.map