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

package/dist/domains/agents/agent/agent-traces.d.ts

@@ -1,6 +1,11 @@
+import { RefinedTrace } from '../../traces/types';
+
 export interface AgentTracesProps {
-    agentName: string;
-    baseUrl: string;
     className?: string;
+    traces: RefinedTrace[];
+    isLoading: boolean;
+    error: {
+        message: string;
+    } | null;
 }
-export declare function AgentTraces({ agentName, baseUrl, className }: AgentTracesProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentTraces({ className, traces, isLoading, error }: AgentTracesProps): import("react/jsx-runtime").JSX.Element;

package/dist/domains/workflows/workflow/workflow-traces.d.ts

@@ -1,5 +1,10 @@
+import { RefinedTrace } from '../../traces/types';
+
 export interface WorkflowTracesProps {
-    workflowName: string;
-    baseUrl: string;
+    traces: RefinedTrace[];
+    isLoading: boolean;
+    error: {
+        message: string;
+    } | null;
 }
-export declare function WorkflowTraces({ workflowName, baseUrl }: WorkflowTracesProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowTraces({ traces, isLoading, error }: WorkflowTracesProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-traces';

package/dist/index.cjs.js

@@ -4882,229 +4882,6 @@ function TraceProvider({ children }) {
   );
 }
 
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = React.useState(enabled);
-  const [error, setError] = React.useState(null);
-  const [data, setData] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [firstCallLoading, setFirstCallLoading] = React.useState(false);
-  const timeoutRef = React.useRef(null);
-  const mountedRef = React.useRef(true);
-  const [restart, setRestart] = React.useState(restartPolling);
-  const cleanup = React.useCallback(() => {
-    console.log("cleanup");
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = React.useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = React.useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = React.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 = React.useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  React.useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  React.useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  React.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] = React.useState([]);
-  const { setTraces: setTraceContextTraces } = React.useContext(TraceContext);
-  const client = React.useMemo(() => createMastraClient(baseUrl), [baseUrl]);
-  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);
-        setTraceContextTraces(() => newTraces);
-      }
-    },
-    [setTraceContextTraces]
-  );
-  const onError = React.useCallback((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 };
-};
-
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
   small: "[&>tbody>tr]:h-table-row-small"
@@ -5226,6 +5003,10 @@ const useOpenTrace = () => {
   return { openTrace };
 };
 
+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)) }) });
 };
@@ -5244,7 +5025,7 @@ const TraceRow = ({ trace, index, isActive }) => {
       trace.traceId.substring(0, 7),
       "..."
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: Math.round(trace.duration / 1e3) }),
+    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
     /* @__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" }) })
   ] });
@@ -5381,11 +5162,12 @@ const variantClasses = {
 };
 const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
+  const percent = Math.min(100, progressPercent);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${progressPercent}%` } }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${percent}%` } }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        Math.round(durationMs),
+        toSigFigs(durationMs, 3),
         "ms"
       ] }),
       tokenCount && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
@@ -5620,6 +5402,76 @@ const SyntaxHighlighter = ({ data }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.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 } = React.useContext(TraceContext);
   if (!span || !trace) return null;
@@ -5655,11 +5507,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
-        Math.round(span.duration / 1e3),
+        toSigFigs(span.duration / 1e3, 3),
         "ms"
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
         "Failed in ",
-        Math.round(span.duration / 1e3),
+        toSigFigs(span.duration / 1e3, 3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -5745,15 +5597,14 @@ const TracesSidebar = ({ onResize }) => {
   );
 };
 
-function AgentTraces({ agentName, baseUrl, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { agentName, baseUrl, className }) });
+function AgentTraces({ className, traces, isLoading, error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { className, traces, isLoading, error });
 }
-function AgentTracesInner({ agentName, baseUrl, className }) {
+function AgentTracesInner({ className, traces, isLoading, error }) {
   const [sidebarWidth, setSidebarWidth] = React.useState(100);
-  const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
   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: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -6205,15 +6056,14 @@ 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({ workflowName, baseUrl }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { workflowName, baseUrl }) });
+function WorkflowTraces({ traces, isLoading, error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { traces, isLoading, error });
 }
-function WorkflowTracesInner({ workflowName, baseUrl }) {
+function WorkflowTracesInner({ traces, isLoading, error }) {
   const [sidebarWidth, setSidebarWidth] = React.useState(100);
-  const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = React.useContext(TraceContext);
   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: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -8240,6 +8090,12 @@ class CustomZodProvider extends zod.ZodProvider {
   }
 }
 
+function isEmptyZodObject(schema) {
+  if (schema instanceof z.ZodObject) {
+    return Object.keys(schema.shape).length === 0;
+  }
+  return false;
+}
 function DynamicForm({
   schema,
   onSubmit,
@@ -8252,6 +8108,9 @@ function DynamicForm({
     return null;
   }
   const normalizedSchema = (schema2) => {
+    if (isEmptyZodObject(schema2)) {
+      return z.object({});
+    }
     return z.object({
       "​": schema2
     });
@@ -8260,7 +8119,7 @@ function DynamicForm({
   const formProps = {
     schema: schemaProvider,
     onSubmit: async (values) => {
-      await onSubmit(values["​"]);
+      await onSubmit(values?.["​"] || {});
     },
     defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
@@ -8942,6 +8801,160 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100
   )
 ] });
 
+function usePolling({
+  fetchFn,
+  interval = 3e3,
+  enabled = false,
+  onSuccess,
+  onError,
+  shouldContinue = () => true,
+  restartPolling = false
+}) {
+  const [isPolling, setIsPolling] = React.useState(enabled);
+  const [error, setError] = React.useState(null);
+  const [data, setData] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [firstCallLoading, setFirstCallLoading] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+  const mountedRef = React.useRef(true);
+  const [restart, setRestart] = React.useState(restartPolling);
+  const cleanup = React.useCallback(() => {
+    console.log("cleanup");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const stopPolling = React.useCallback(() => {
+    console.log("stopPolling");
+    setIsPolling(false);
+    cleanup();
+  }, [cleanup]);
+  const startPolling = React.useCallback(() => {
+    console.log("startPolling");
+    setIsPolling(true);
+    setError(null);
+  }, []);
+  const executePoll = React.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 = React.useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
+      } else {
+        executePoll(false);
+      }
+      setError(null);
+    },
+    [executePoll]
+  );
+  React.useEffect(() => {
+    mountedRef.current = true;
+    if (enabled && isPolling) {
+      executePoll(true);
+    }
+    return () => {
+      console.log("cleanup poll");
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [enabled, isPolling, executePoll, cleanup]);
+  React.useEffect(() => {
+    setRestart(restartPolling);
+  }, [restartPolling]);
+  React.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] = React.useState([]);
+  const { setTraces: setTraceContextTraces } = React.useContext(TraceContext);
+  const client = React.useMemo(() => createMastraClient(baseUrl), [baseUrl]);
+  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);
+        setTraceContextTraces(() => newTraces);
+      }
+    },
+    [setTraceContextTraces]
+  );
+  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;
@@ -9004,7 +9017,9 @@ exports.Tbody = Tbody;
 exports.Th = Th;
 exports.Thead = Thead;
 exports.ToolsIcon = ToolsIcon;
+exports.TraceContext = TraceContext;
 exports.TraceIcon = TraceIcon;
+exports.TraceProvider = TraceProvider;
 exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;
@@ -9019,4 +9034,6 @@ exports.WorkflowRunContext = WorkflowRunContext;
 exports.WorkflowRunProvider = WorkflowRunProvider;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
+exports.refineTraces = refineTraces;
+exports.useTraces = useTraces;
 //# sourceMappingURL=index.cjs.js.map