@mastra/playground-ui 4.0.4-alpha.3 → 4.0.4-alpha.6

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
 import * as React from 'react';
-import React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -16,12 +16,10 @@ import { format, formatDistanceToNow, isValid } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
 import { AnimatePresence } from 'motion/react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { githubDarkInit } from '@uiw/codemirror-theme-github';
 import CodeMirror from '@uiw/react-codemirror';
-import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { useDebouncedCallback } from 'use-debounce';
@@ -31,6 +29,7 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 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';
@@ -43,6 +42,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { v4 } from '@lukeed/uuid';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2925,7 +2925,7 @@ const CodeHeader = ({ language, code }) => {
                 gridArea: "1/1"
               },
               className: cn("transition-transform", isCopied ? "scale-100" : "scale-0"),
-              children: /* @__PURE__ */ jsx(CheckIcon, { size: 14 })
+              children: /* @__PURE__ */ jsx(CheckIcon$1, { size: 14 })
             },
             "checkmark"
           ),
@@ -3122,7 +3122,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
   return /* @__PURE__ */ jsxs("div", { className: "mb-2 flex w-full flex-col gap-3 rounded-lg border py-3 text-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
-      /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx(CheckIcon$1, { className: "size-4" }),
       /* @__PURE__ */ jsxs("p", { className: "", children: [
         "Used tool: ",
         /* @__PURE__ */ jsx("b", { children: toolName })
@@ -3182,7 +3182,7 @@ const AssistantActionBar = () => {
       autohideFloat: "single-branch",
       className: "text-muted-foreground flex gap-1 col-start-3 row-start-2 -ml-1",
       children: /* @__PURE__ */ jsx(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs(TooltipIconButton, { tooltip: "Copy", children: [
-        /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsx(CheckIcon$1, {}) }),
         /* @__PURE__ */ jsx(MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsx(CopyIcon, {}) })
       ] }) })
     }
@@ -3496,7 +3496,8 @@ function MastraRuntimeProvider({
   threadId,
   baseUrl,
   refreshThreadList,
-  modelSettings = {}
+  modelSettings = {},
+  chatWithGenerate
 }) {
   const [isRunning, setIsRunning] = useState(false);
   const [messages, setMessages] = useState([]);
@@ -3536,75 +3537,178 @@ function MastraRuntimeProvider({
     setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
     setIsRunning(true);
     try {
-      let updater = function() {
-        setMessages((currentConversation) => {
-          const message2 = {
-            role: "assistant",
-            content: [{ type: "text", text: content }]
-          };
-          if (!assistantMessageAdded) {
-            assistantMessageAdded = true;
-            return [...currentConversation, message2];
-          }
-          return [...currentConversation.slice(0, -1), message2];
+      if (chatWithGenerate) {
+        const generateResponse = await agent.generate({
+          messages: [
+            {
+              role: "user",
+              content: input
+            }
+          ],
+          runId: agentId,
+          frequencyPenalty,
+          presencePenalty,
+          maxRetries,
+          maxSteps,
+          maxTokens,
+          temperature,
+          topK,
+          topP,
+          instructions,
+          ...memory ? { threadId, resourceId: agentId } : {}
         });
-      };
-      const response = await agent.stream({
-        messages: [
-          {
-            role: "user",
-            content: input
-          }
-        ],
-        runId: agentId,
-        frequencyPenalty,
-        presencePenalty,
-        maxRetries,
-        maxSteps,
-        maxTokens,
-        temperature,
-        topK,
-        topP,
-        instructions,
-        ...memory ? { threadId, resourceId: agentId } : {}
-      });
-      if (!response.body) {
-        throw new Error("No response body");
-      }
-      const parts = [];
-      let content = "";
-      let currentTextPart = null;
-      let assistantMessageAdded = false;
-      await response.processDataStream({
-        onTextPart(value) {
-          if (currentTextPart == null) {
-            currentTextPart = {
-              type: "text",
-              text: value
-            };
-            parts.push(currentTextPart);
-          } else {
-            currentTextPart.text += value;
-          }
-          content += value;
-          updater();
-        },
-        async onToolCallPart(value) {
+        if (generateResponse.response) {
+          const latestMessage = generateResponse.response.messages.reduce(
+            (acc, message2) => {
+              const _content = Array.isArray(acc.content) ? acc.content : [];
+              if (typeof message2.content === "string") {
+                return {
+                  ...acc,
+                  content: [
+                    ..._content,
+                    {
+                      type: "text",
+                      text: message2.content
+                    }
+                  ]
+                };
+              }
+              if (message2.role === "assistant") {
+                const toolCallContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-call") : void 0;
+                if (toolCallContent) {
+                  const newContent = _content.map((c) => {
+                    if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
+                      return { ...c, ...toolCallContent };
+                    }
+                    return c;
+                  });
+                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                  return {
+                    ...acc,
+                    content: containsToolCall ? newContent : [..._content, toolCallContent]
+                  };
+                }
+                const textContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "text" && content.text) : void 0;
+                if (textContent) {
+                  return {
+                    ...acc,
+                    content: [..._content, textContent]
+                  };
+                }
+              }
+              if (message2.role === "tool") {
+                const toolResult = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-result") : void 0;
+                if (toolResult) {
+                  const newContent = _content.map((c) => {
+                    if (c.type === "tool-call" && c.toolCallId === toolResult?.toolCallId) {
+                      return { ...c, result: toolResult.result };
+                    }
+                    return c;
+                  });
+                  const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                  return {
+                    ...acc,
+                    content: containsToolCall ? newContent : [
+                      ..._content,
+                      { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.result }
+                    ]
+                  };
+                }
+                return {
+                  ...acc,
+                  content: [..._content, toolResult]
+                };
+              }
+              return acc;
+            },
+            { role: "assistant", content: [] }
+          );
+          setMessages((currentConversation) => [...currentConversation, latestMessage]);
+        }
+      } else {
+        let updater = function() {
           setMessages((currentConversation) => {
-            const lastMessage = currentConversation[currentConversation.length - 1];
-            if (lastMessage && lastMessage.role === "assistant") {
-              const updatedMessage = {
-                ...lastMessage,
-                content: Array.isArray(lastMessage.content) ? [
-                  ...lastMessage.content,
-                  {
-                    type: "tool-call",
-                    toolCallId: value.toolCallId,
-                    toolName: value.toolName,
-                    args: value.args
-                  }
-                ] : [
-                  ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+            const message2 = {
+              role: "assistant",
+              content: [{ type: "text", text: content }]
+            };
+            if (!assistantMessageAdded) {
+              assistantMessageAdded = true;
+              return [...currentConversation, message2];
+            }
+            return [...currentConversation.slice(0, -1), message2];
+          });
+        };
+        const response = await agent.stream({
+          messages: [
+            {
+              role: "user",
+              content: input
+            }
+          ],
+          runId: agentId,
+          frequencyPenalty,
+          presencePenalty,
+          maxRetries,
+          maxSteps,
+          maxTokens,
+          temperature,
+          topK,
+          topP,
+          instructions,
+          ...memory ? { threadId, resourceId: agentId } : {}
+        });
+        if (!response.body) {
+          throw new Error("No response body");
+        }
+        const parts = [];
+        let content = "";
+        let currentTextPart = null;
+        let assistantMessageAdded = false;
+        await response.processDataStream({
+          onTextPart(value) {
+            if (currentTextPart == null) {
+              currentTextPart = {
+                type: "text",
+                text: value
+              };
+              parts.push(currentTextPart);
+            } else {
+              currentTextPart.text += value;
+            }
+            content += value;
+            updater();
+          },
+          async onToolCallPart(value) {
+            setMessages((currentConversation) => {
+              const lastMessage = currentConversation[currentConversation.length - 1];
+              if (lastMessage && lastMessage.role === "assistant") {
+                const updatedMessage = {
+                  ...lastMessage,
+                  content: Array.isArray(lastMessage.content) ? [
+                    ...lastMessage.content,
+                    {
+                      type: "tool-call",
+                      toolCallId: value.toolCallId,
+                      toolName: value.toolName,
+                      args: value.args
+                    }
+                  ] : [
+                    ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+                    {
+                      type: "tool-call",
+                      toolCallId: value.toolCallId,
+                      toolName: value.toolName,
+                      args: value.args
+                    }
+                  ]
+                };
+                return [...currentConversation.slice(0, -1), updatedMessage];
+              }
+              const newMessage = {
+                role: "assistant",
+                content: [
+                  { type: "text", text: content },
                   {
                     type: "tool-call",
                     toolCallId: value.toolCallId,
@@ -3613,49 +3717,36 @@ function MastraRuntimeProvider({
                   }
                 ]
               };
-              return [...currentConversation.slice(0, -1), updatedMessage];
-            }
-            const newMessage = {
-              role: "assistant",
-              content: [
-                { type: "text", text: content },
-                {
-                  type: "tool-call",
-                  toolCallId: value.toolCallId,
-                  toolName: value.toolName,
-                  args: value.args
-                }
-              ]
-            };
-            return [...currentConversation, newMessage];
-          });
-        },
-        async onToolResultPart(value) {
-          setMessages((currentConversation) => {
-            const lastMessage = currentConversation[currentConversation.length - 1];
-            if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-              const updatedContent = lastMessage.content.map((part) => {
-                if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === value.toolCallId) {
-                  return {
-                    ...part,
-                    result: value.result
-                  };
-                }
-                return part;
-              });
-              const updatedMessage = {
-                ...lastMessage,
-                content: updatedContent
-              };
-              return [...currentConversation.slice(0, -1), updatedMessage];
-            }
-            return currentConversation;
-          });
-        },
-        onErrorPart(error) {
-          throw new Error(error);
-        }
-      });
+              return [...currentConversation, newMessage];
+            });
+          },
+          async onToolResultPart(value) {
+            setMessages((currentConversation) => {
+              const lastMessage = currentConversation[currentConversation.length - 1];
+              if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                const updatedContent = lastMessage.content.map((part) => {
+                  if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === value.toolCallId) {
+                    return {
+                      ...part,
+                      result: value.result
+                    };
+                  }
+                  return part;
+                });
+                const updatedMessage = {
+                  ...lastMessage,
+                  content: updatedContent
+                };
+                return [...currentConversation.slice(0, -1), updatedMessage];
+              }
+              return currentConversation;
+            });
+          },
+          onErrorPart(error) {
+            throw new Error(error);
+          }
+        });
+      }
       setIsRunning(false);
       setTimeout(() => {
         refreshThreadList?.();
@@ -3691,6 +3782,7 @@ const defaultModelSettings = {
 const AgentContext = createContext({});
 function AgentProvider({ children }) {
   const [modelSettings, setModelSettings] = useState(defaultModelSettings);
+  const [chatWithGenerate, setChatWithGenerate] = useState(false);
   const resetModelSettings = () => {
     setModelSettings(defaultModelSettings);
   };
@@ -3700,7 +3792,9 @@ function AgentProvider({ children }) {
       value: {
         modelSettings,
         setModelSettings,
-        resetModelSettings
+        resetModelSettings,
+        chatWithGenerate,
+        setChatWithGenerate
       },
       children
     }
@@ -3716,7 +3810,7 @@ const AgentChat = ({
   baseUrl,
   refreshThreadList
 }) => {
-  const { modelSettings } = useContext(AgentContext);
+  const { modelSettings, chatWithGenerate } = useContext(AgentContext);
   return /* @__PURE__ */ jsx(
     MastraRuntimeProvider,
     {
@@ -3728,6 +3822,7 @@ const AgentChat = ({
       baseUrl,
       refreshThreadList,
       modelSettings,
+      chatWithGenerate,
       children: /* @__PURE__ */ jsx(Thread, { memory })
     }
   );
@@ -4180,183 +4275,170 @@ function EvalTable({ evals, isCIMode = false }) {
   }
 }
 
-const useResizeColumn = ({
-  defaultWidth,
-  minimumWidth,
-  maximumWidth,
-  setCurrentWidth
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
-  const containerRef = useRef(null);
-  const dragStartXRef = useRef(0);
-  const initialWidthRef = useRef(0);
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    dragStartXRef.current = e.clientX;
-    initialWidthRef.current = sidebarWidth;
+const TraceContext = createContext({});
+function TraceProvider({ children }) {
+  const [open, setOpen] = useState(false);
+  const [trace, setTrace] = useState(null);
+  const [traces, setTraces] = useState([]);
+  const [currentTraceIndex, setCurrentTraceIndex] = useState(0);
+  const [span, setSpan] = useState(null);
+  const [openDetail, setOpenDetail] = useState(false);
+  const nextTrace = () => {
+    if (currentTraceIndex < traces.length - 1) {
+      const nextIndex = currentTraceIndex + 1;
+      setCurrentTraceIndex(nextIndex);
+      const nextTrace2 = traces[nextIndex].trace;
+      setTrace(nextTrace2);
+      const parentSpan = nextTrace2.find((span2) => span2.parentSpanId === null) || nextTrace2[0];
+      setSpan(parentSpan);
+    }
   };
-  useEffect(() => {
-    setSidebarWidth(defaultWidth);
-    setCurrentWidth?.(defaultWidth);
-  }, [defaultWidth]);
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const deltaX = dragStartXRef.current - e.clientX;
-      const deltaPercentage = deltaX / containerWidth * 100;
-      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaPercentage, minimumWidth), maximumWidth);
-      setSidebarWidth(newWidth);
-      setCurrentWidth?.(newWidth);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-    if (isDragging) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
+  const prevTrace = () => {
+    if (currentTraceIndex > 0) {
+      const prevIndex = currentTraceIndex - 1;
+      setCurrentTraceIndex(prevIndex);
+      const prevTrace2 = traces[prevIndex].trace;
+      setTrace(prevTrace2);
+      const parentSpan = prevTrace2.find((span2) => span2.parentSpanId === null) || prevTrace2[0];
+      setSpan(parentSpan);
     }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
-  return { sidebarWidth, isDragging, handleMouseDown, containerRef };
-};
+  };
+  const clearData = () => {
+    setOpen(false);
+    setTrace(null);
+    setSpan(null);
+    setOpenDetail(false);
+  };
+  return /* @__PURE__ */ jsx(
+    TraceContext.Provider,
+    {
+      value: {
+        isOpen: open,
+        setIsOpen: setOpen,
+        trace,
+        setTrace,
+        traces,
+        setTraces,
+        currentTraceIndex,
+        setCurrentTraceIndex,
+        nextTrace,
+        prevTrace,
+        span,
+        setSpan,
+        openDetail,
+        setOpenDetail,
+        clearData
+      },
+      children
+    }
+  );
+}
 
-const MastraResizablePanel = ({
-  children,
-  defaultWidth,
-  minimumWidth,
-  maximumWidth,
-  className,
-  disabled = false,
-  setCurrentWidth,
-  dividerPosition = "left"
-}) => {
-  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
-    defaultWidth: disabled ? 100 : defaultWidth,
-    minimumWidth,
-    maximumWidth,
-    setCurrentWidth
-  });
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full h-full relative", className), ref: containerRef, style: { width: `${sidebarWidth}%` }, children: [
-    !disabled && dividerPosition === "left" ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
+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);
+        }
       }
-    ) : null,
-    children,
-    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
+    },
+    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
+  );
+  const refetch = useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
+      } else {
+        executePoll(false);
       }
-    ) : null
-  ] });
-};
-
-const ScrollArea = React.forwardRef(
-  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
-    const areaRef = React.useRef(null);
-    useAutoscroll(areaRef, { enabled: autoScroll });
-    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
-      /* @__PURE__ */ jsx(
-        ScrollAreaPrimitive.Viewport,
-        {
-          ref: areaRef,
-          className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
-          style: maxHeight ? { maxHeight } : void 0,
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-    ] });
-  }
-);
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-const TraceContext = createContext({});
-function TraceProvider({ children }) {
-  const [open, setOpen] = useState(false);
-  const [trace, setTrace] = useState(null);
-  const [traces, setTraces] = useState([]);
-  const [currentTraceIndex, setCurrentTraceIndex] = useState(0);
-  const [span, setSpan] = useState(null);
-  const [openDetail, setOpenDetail] = useState(false);
-  const nextTrace = () => {
-    if (currentTraceIndex < traces.length - 1) {
-      const nextIndex = currentTraceIndex + 1;
-      setCurrentTraceIndex(nextIndex);
-      const nextTrace2 = traces[nextIndex].trace;
-      setTrace(nextTrace2);
-      const parentSpan = nextTrace2.find((span2) => span2.parentSpanId === null) || nextTrace2[0];
-      setSpan(parentSpan);
+      setError(null);
+    },
+    [executePoll]
+  );
+  useEffect(() => {
+    mountedRef.current = true;
+    if (enabled && isPolling) {
+      executePoll(true);
     }
-  };
-  const prevTrace = () => {
-    if (currentTraceIndex > 0) {
-      const prevIndex = currentTraceIndex - 1;
-      setCurrentTraceIndex(prevIndex);
-      const prevTrace2 = traces[prevIndex].trace;
-      setTrace(prevTrace2);
-      const parentSpan = prevTrace2.find((span2) => span2.parentSpanId === null) || prevTrace2[0];
-      setSpan(parentSpan);
+    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 clearData = () => {
-    setOpen(false);
-    setTrace(null);
-    setSpan(null);
-    setOpenDetail(false);
-  };
-  return /* @__PURE__ */ jsx(
-    TraceContext.Provider,
-    {
-      value: {
-        isOpen: open,
-        setIsOpen: setOpen,
-        trace,
-        setTrace,
-        traces,
-        setTraces,
-        currentTraceIndex,
-        setCurrentTraceIndex,
-        nextTrace,
-        prevTrace,
-        span,
-        setSpan,
-        openDetail,
-        setOpenDetail,
-        clearData
-      },
-      children
-    }
-  );
 }
 
 function formatDuration(duration, fixedPoint = 2) {
@@ -4454,68 +4536,187 @@ const allowedAiSpanAttributes = [
   "ai.usage.completionTokens"
 ];
 
-function Traces({ traces }) {
-  const { trace: currentTrace } = useContext(TraceContext);
-  const [prevTracesId, setPrevTracesId] = useState(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    if (!prevTracesId.size && traces) {
-      setPrevTracesId(new Set(traces.map((trace) => trace.traceId)));
+const useTraces = (componentName, baseUrl, isWorkflow = false) => {
+  const [traces, setTraces] = useState([]);
+  const { setTraces: setTraceContextTraces } = useContext(TraceContext);
+  const client = useMemo(
+    () => new MastraClient({
+      baseUrl: 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;
     }
-  }, [traces]);
-  const isNew = (traceId) => {
-    if (!prevTracesId.size) return false;
-    return !prevTracesId.has(traceId);
-  };
-  const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", style: { outline: "1px solid 0_0%_20.4%" }, children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-      /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
-      /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-        /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-        " Trace Id"
-      ] }),
-      /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-    ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: !traces.length ? /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: "No traces found" }) }) : traces.map((trace, index) => /* @__PURE__ */ jsxs(
-      TableRow,
-      {
-        className: cn(
-          "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]",
-          isNew(trace.traceId) ? "animate-fade-in" : "not-new",
-          {
-            "bg-muted/50": currentTraceParentSpan?.traceId === trace.traceId
-          }
-        ),
-        children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
-            TraceButton,
-            {
-              trace: trace.trace,
-              name: trace.serviceName,
-              traceIndex: index,
-              status: trace.status
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-5", children: trace.traceId }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-5 text-sm", children: formatOtelTimestamp(trace.started) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-[#F1CA5E]", children: [
-            /* @__PURE__ */ jsx(Clock1, { className: "h-3 w-3" }),
-            formatDuration(trace.duration, 3),
-            "ms"
-          ] }) })
-        ]
-      },
-      trace.traceId
-    )) })
-  ] }) }) });
-}
-function TraceButton({
-  trace,
-  name,
-  traceIndex,
-  status
-}) {
+  }, [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"
+};
+const Table = ({ className, children, size = "default" }) => {
+  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
+};
+const Thead = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
+};
+const Th = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: clsx("text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5", className),
+      ...props,
+      children
+    }
+  );
+};
+const Tbody = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
+};
+const Row = ({ className, children, selected = false }) => {
+  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
+};
+
+const sizes = {
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(sizes[size], className), ...props, children });
+};
+
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const formatDateCell = (date) => {
+  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
+  const day = date.getDate();
+  const formattedDay = `${month} ${day}`;
+  const time = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+    // Use 24-hour format
+  }).format(date);
+  return { day: formattedDay, time };
+};
+
+const Cell = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx("td", { className: clsx("text-icon5 first:pl-5 last:pr-5", className), ...props, children: /* @__PURE__ */ jsx("div", { className: clsx("flex h-full w-full shrink-0 items-center"), children }) });
+};
+const TxtCell = ({ className, children }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full truncate", children }) });
+};
+const UnitCell = ({ className, children, unit }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full truncate", children: unit })
+  ] }) });
+};
+const DateTimeCell = ({ dateTime, ...props }) => {
+  const { day, time } = formatDateCell(dateTime);
+  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3", children: day }),
+    " ",
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
+  ] }) });
+};
+const EntryCell = ({ name, description, icon, meta, ...props }) => {
+  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[14px]", children: [
+    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
+      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
+    ] }),
+    meta
+  ] }) });
+};
+
+const variantClasses = {
+  default: "text-icon3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent3"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
+        icon ? "pl-md pr-1.5" : "px-1.5",
+        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
+const SpanIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "15", height: "8", viewBox: "0 0 15 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.17473 0.385409C5.45323 0.663917 5.45323 1.11547 5.17473 1.39397L3.62152 2.94718C3.49553 3.07317 3.58476 3.2886 3.76294 3.2886L11.2361 3.2886C11.4142 3.2886 11.5035 3.07317 11.3775 2.94718L9.82428 1.39397C9.54577 1.11547 9.54577 0.663917 9.82428 0.385409C10.1028 0.106902 10.5543 0.106902 10.8328 0.385409L14.0956 3.64821C14.2909 3.84347 14.2909 4.16006 14.0956 4.35532L10.8363 7.61462C10.5578 7.89313 10.1063 7.89313 9.82778 7.61462C9.54927 7.33611 9.54927 6.88456 9.82778 6.60605L11.3775 5.05635C11.5035 4.93036 11.4142 4.71493 11.2361 4.71493L3.76294 4.71493C3.58476 4.71493 3.49553 4.93036 3.62152 5.05635L5.17123 6.60605C5.44973 6.88456 5.44973 7.33611 5.17123 7.61462C4.89272 7.89313 4.44117 7.89313 4.16266 7.61462L0.903358 4.35532C0.708096 4.16006 0.708096 3.84347 0.903358 3.64821L4.16616 0.385409C4.44467 0.106902 4.89622 0.106902 5.17473 0.385409Z",
+    fill: "currentColor"
+  }
+) });
+
+const useOpenTrace = () => {
   const {
     setTrace,
     isOpen: open,
@@ -4525,53 +4726,136 @@ function TraceButton({
     setOpenDetail,
     setCurrentTraceIndex
   } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs(
-    Button$1,
-    {
-      variant: "ghost",
-      className: "flex h-0 items-center gap-2 p-0",
-      onClick: () => {
-        setTrace(trace);
-        const parentSpan = trace.find((span) => span.parentSpanId === null) || trace[0];
-        setSpan(parentSpan);
-        setCurrentTraceIndex(traceIndex);
-        if (open && currentTrace?.[0]?.id !== trace[0].id) return;
-        setOpen((prev) => !prev);
-        setOpenDetail((prev) => !prev);
-      },
-      children: [
-        status.code === 0 ? /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "h-3 w-3",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "13",
-            height: "12",
-            viewBox: "0 0 13 12",
-            fill: "none",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M6.37695 12C9.69067 12 12.377 9.31371 12.377 6C12.377 2.68629 9.69067 0 6.37695 0C3.06325 0 0.376953 2.68629 0.376953 6C0.376953 9.31371 3.06325 12 6.37695 12ZM9.62004 4.65344C9.87907 4.36036 9.8651 3.90005 9.58884 3.6253C9.3125 3.35055 8.87861 3.3654 8.61958 3.65847L5.6477 7.02105L4.08967 5.55197C3.80661 5.28508 3.37319 5.31213 3.12159 5.61237C2.87 5.91262 2.89549 6.37239 3.17854 6.63927L4.90294 8.26517C5.36588 8.70171 6.07235 8.6676 6.49598 8.18829L9.62004 4.65344Z",
-                fill: "#6CD063"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#FF4500", width: "13", height: "12", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z",
-            clipRule: "evenodd"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: name })
-      ]
+  const openTrace = (trace, traceIndex) => {
+    setTrace(trace);
+    const parentSpan = trace.find((span) => span.parentSpanId === null) || trace[0];
+    setSpan(parentSpan);
+    setCurrentTraceIndex(traceIndex);
+    if (open && currentTrace?.[0]?.id !== trace[0].id) return;
+    setOpen((prev) => !prev);
+    setOpenDetail((prev) => !prev);
+  };
+  return { openTrace };
+};
+
+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)) }) });
+};
+const TracesTableEmpty = ({ colsCount }) => {
+  return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsx(Txt, { children: "No traces found" }) }) }) });
+};
+const TracesTableError = ({ error, colsCount }) => {
+  return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsx(Txt, { children: error.message }) }) }) });
+};
+const TraceRow = ({ trace, index }) => {
+  const { openTrace } = useOpenTrace();
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
+    /* @__PURE__ */ jsx(TxtCell, { children: trace.traceId }),
+    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: trace.duration }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxs(Badge, { icon: /* @__PURE__ */ jsx(SpanIcon, {}), children: [
+      trace.trace.length,
+      " span",
+      trace.trace.length > 1 ? "s" : ""
+    ] }) }) })
+  ] });
+};
+const TracesTable = ({ traces, isLoading, error }) => {
+  const hasNoTraces = !traces || traces.length === 0;
+  const colsCount = 4;
+  return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+    /* @__PURE__ */ jsxs(Thead, { children: [
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Time" }),
+      /* @__PURE__ */ jsx(Th, { width: "auto", children: "Trace Id" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Duration" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Spans" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsx(TraceRow, { trace, index }, trace.traceId)) })
+  ] });
+};
+
+const useResizeColumn = ({
+  defaultWidth,
+  minimumWidth,
+  maximumWidth,
+  setCurrentWidth
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+  const containerRef = useRef(null);
+  const dragStartXRef = useRef(0);
+  const initialWidthRef = useRef(0);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    dragStartXRef.current = e.clientX;
+    initialWidthRef.current = sidebarWidth;
+  };
+  useEffect(() => {
+    setSidebarWidth(defaultWidth);
+    setCurrentWidth?.(defaultWidth);
+  }, [defaultWidth]);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const deltaX = dragStartXRef.current - e.clientX;
+      const deltaPercentage = deltaX / containerWidth * 100;
+      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaPercentage, minimumWidth), maximumWidth);
+      setSidebarWidth(newWidth);
+      setCurrentWidth?.(newWidth);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
     }
-  );
-}
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+  return { sidebarWidth, isDragging, handleMouseDown, containerRef };
+};
+
+const MastraResizablePanel = ({
+  children,
+  defaultWidth,
+  minimumWidth,
+  maximumWidth,
+  className,
+  disabled = false,
+  setCurrentWidth,
+  dividerPosition = "left"
+}) => {
+  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
+    defaultWidth: disabled ? 100 : defaultWidth,
+    minimumWidth,
+    maximumWidth,
+    setCurrentWidth
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full h-full relative", className), ref: containerRef, style: { width: `${sidebarWidth}%` }, children: [
+    !disabled && dividerPosition === "left" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
+          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
+      }
+    ) : null,
+    children,
+    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
+          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
+      }
+    ) : null
+  ] });
+};
 
 function TreeNode({ node, depth = 0 }) {
   const [isExpanded, setIsExpanded] = useState(true);
@@ -4851,274 +5135,58 @@ function AttributesValues({
   }
   if (typeof attributes === "string") {
     try {
-      const attr = JSON.parse(attributes);
-      if (typeof attr === "object" || Array.isArray(attr)) {
-        return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: attr });
-      }
-    } catch {
-      const val = attributes ? cleanString(attributes.toString()) : "N/A";
-      if (keyName === "Input" && val === "[Not Serializable]") {
-        return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "No input" });
-      }
-      return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: attributes ? cleanString(attributes.toString()) : "N/A" });
-    }
-  }
-  const processedValue = attributes;
-  if (Array.isArray(processedValue)) {
-    if (processedValue.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1 gap-3", children: processedValue.map((item, index) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx(AttributesValues, { attributes: item, depth: depth + 1 }, index) }, index)) }) });
-  }
-  if (typeof processedValue === "object") {
-    const entries = Object.entries(processedValue);
-    if (entries.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 pl-0", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm capitalize text-mastra-el-3", children: transformKey(key) }),
-      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1, keyName: transformKey(key) })
-    ] }, key)) }) });
-  }
-  if (typeof processedValue === "boolean")
-    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() || "N/A" });
-  if (typeof processedValue === "number") return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() });
-  if (typeof processedValue === "string")
-    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue ? cleanString(processedValue.toString()) : "N/A" });
-  return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: String(processedValue) });
-}
-
-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(
-    () => new MastraClient({
-      baseUrl: 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 };
-};
-
-function AgentTraces({
-  agentName,
-  baseUrl,
-  sidebarChild
-}) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, sidebarChild }) });
-}
-function AgentTracesInner({
-  agentName,
-  baseUrl,
-  sidebarChild
-}) {
-  const { traces, error, firstCallLoading } = useTraces(agentName, baseUrl);
-  const { isOpen: open } = useContext(TraceContext);
-  if (firstCallLoading) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
-    ] });
+      const attr = JSON.parse(attributes);
+      if (typeof attr === "object" || Array.isArray(attr)) {
+        return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: attr });
+      }
+    } catch {
+      const val = attributes ? cleanString(attributes.toString()) : "N/A";
+      if (keyName === "Input" && val === "[Not Serializable]") {
+        return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "No input" });
+      }
+      return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: attributes ? cleanString(attributes.toString()) : "N/A" });
+    }
   }
-  if (!traces || traces.length === 0) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
-    ] });
+  const processedValue = attributes;
+  if (Array.isArray(processedValue)) {
+    if (processedValue.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1 gap-3", children: processedValue.map((item, index) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx(AttributesValues, { attributes: item, depth: depth + 1 }, index) }, index)) }) });
   }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]") })
-  ] });
+  if (typeof processedValue === "object") {
+    const entries = Object.entries(processedValue);
+    if (entries.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 pl-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm capitalize text-mastra-el-3", children: transformKey(key) }),
+      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1, keyName: transformKey(key) })
+    ] }, key)) }) });
+  }
+  if (typeof processedValue === "boolean")
+    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() || "N/A" });
+  if (typeof processedValue === "number") return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() });
+  if (typeof processedValue === "string")
+    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue ? cleanString(processedValue.toString()) : "N/A" });
+  return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: String(processedValue) });
 }
-function SidebarItems$1({ sidebarChild, className }) {
+
+const TracesSidebar = ({ className, onResize, width, children }) => {
   const { openDetail, isOpen: open } = useContext(TraceContext);
-  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
   return /* @__PURE__ */ jsxs(
     MastraResizablePanel,
     {
       className: cn(
-        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
+        "absolute top-0 bottom-0 right-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      defaultWidth: open ? 60 : 20,
-      minimumWidth: open ? 50 : 20,
-      maximumWidth: open ? 90 : 60,
+      defaultWidth: open ? 50 : 30,
+      minimumWidth: open ? 50 : 30,
+      maximumWidth: open ? 90 : 50,
+      setCurrentWidth: onResize,
       children: [
         open && /* @__PURE__ */ jsx(
           "div",
           {
             className: "h-full overflow-x-scroll px-0 absolute left-0 top-0 min-w-[50%] bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${100 - rightSidebarWidth}%` },
+            style: { width: `${width}%` },
             children: /* @__PURE__ */ jsx(TraceDetails, {})
           }
         ),
@@ -5133,42 +5201,7 @@ function SidebarItems$1({ sidebarChild, className }) {
               "unset-position": !open
             }),
             disabled: !open,
-            setCurrentWidth: setRightSidebarWidth,
-            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
-          }
-        )
-      ]
-    }
-  );
-}
-
-const AgentIcon = ({ className }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "13",
-      height: "13",
-      viewBox: "0 0 13 13",
-      fill: "none",
-      className,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M6.75 11.4875C9.50452 11.4875 11.7375 9.25452 11.7375 6.5C11.7375 3.74548 9.50452 1.5125 6.75 1.5125C3.99548 1.5125 1.7625 3.74548 1.7625 6.5C1.7625 9.25452 3.99548 11.4875 6.75 11.4875ZM6.75 12.625C10.1327 12.625 12.875 9.88274 12.875 6.5C12.875 3.11726 10.1327 0.375 6.75 0.375C3.36726 0.375 0.625 3.11726 0.625 6.5C0.625 9.88274 3.36726 12.625 6.75 12.625Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M12.4851 8.45587C11.668 10.7366 9.4873 12.3682 6.92552 12.3682C6.88211 12.3682 6.83881 12.3677 6.79563 12.3668C6.20679 10.9554 5.94996 9.47004 6.16613 7.85695C6.24097 7.58925 6.34464 7.19828 6.32806 6.8443C6.32047 6.68231 6.14275 6.70194 6.09813 6.85785C6.04374 7.04794 5.96784 7.24722 5.87163 7.42336C5.76132 7.44142 5.62051 7.45405 5.44307 7.44362C4.88421 7.41074 4.47225 7.11911 4.38425 7.02482C4.22438 7.09725 4.21437 7.15094 4.20478 7.2023C4.19876 7.2346 4.1929 7.26597 4.15006 7.30052L4.1369 7.31126C4.0592 7.37515 4.0024 7.42185 3.82397 7.15106C3.66346 6.8363 3.54511 6.37667 4.02775 5.8823C4.31486 5.5882 4.88893 5.34805 4.97072 5.33548C4.97072 4.87028 5.33534 4.03169 6.37911 3.7382C7.48025 3.42859 8.75139 3.74318 9.48574 4.81665C9.94707 5.49103 9.99232 5.88068 10.0269 6.17804C10.0629 6.48794 10.0872 6.69759 10.5588 7.02482C10.6891 7.11521 10.8199 7.20344 10.9519 7.2924C11.4398 7.62134 11.9426 7.96033 12.4851 8.45587ZM6.72628 5.39078C6.90062 5.39078 7.04195 5.24945 7.04195 5.07511C7.04195 4.90077 6.90062 4.75944 6.72628 4.75944C6.55194 4.75944 6.41061 4.90077 6.41061 5.07511C6.41061 5.24945 6.55194 5.39078 6.72628 5.39078Z",
-            fill: "currentColor"
+            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? children : /* @__PURE__ */ jsx(SpanDetail, {}) })
           }
         )
       ]
@@ -5176,132 +5209,26 @@ const AgentIcon = ({ className }) => {
   );
 };
 
-const DataTable = ({
-  icon,
-  withoutBorder = false,
-  columns,
-  data,
-  className,
-  pagination,
-  gotoNextPage,
-  gotoPreviousPage,
-  withoutRadius = false,
-  disabledFlex,
-  emptyStateHeight,
-  getRowId,
-  selectedRowId,
-  isLoading,
-  emptyText
-}) => {
-  const [sorting, setSorting] = useState([]);
-  const [{ pageIndex, pageSize }, setPagination] = useState({
-    pageIndex: pagination ? Math.floor(pagination.offset / pagination.limit) : 0,
-    pageSize: pagination?.limit ?? 10
-  });
-  const [rowSelection, setRowSelection] = useState({});
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: pagination ? Math.ceil(pagination.total / pagination.limit) : -1,
-    state: {
-      sorting,
-      pagination: {
-        pageIndex,
-        pageSize
-      },
-      rowSelection
-    },
-    getRowId,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    enableRowSelection: true,
-    enableMultiRowSelection: false,
-    onRowSelectionChange: setRowSelection
-  });
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", disabledFlex ? "block" : ""), children: [
-    /* @__PURE__ */ jsx("div", { className: cn("border", !withoutRadius && "rounded-md", className), children: /* @__PURE__ */ jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { className: cn("z-50 bg-[#0f0f0f]", "hover:bg-transparent"), children: [
-        icon ? /* @__PURE__ */ jsx(TableHead, { className: "w-9 rounded-tl-md" }) : null,
-        headerGroup.headers.map((header) => {
-          return /* @__PURE__ */ jsx(
-            TableHead,
-            {
-              className: cn(
-                "last:pr-3",
-                !icon && "first:pl-3",
-                !withoutBorder && "border-r last:border-r-0",
-                !withoutRadius && "last:rounded-tr-md",
-                !withoutRadius && !icon && "first:rounded-tl-md"
-              ),
-              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-            },
-            header.id
-          );
-        })
-      ] }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx(TableCell, { className: "p-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "p-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "p-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
-      ] }, index)) }) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected", children: [
-        icon && /* @__PURE__ */ jsx(TableCell, { className: "w-9 first:pl-3", children: icon }),
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
-          TableCell,
-          {
-            className: cn(
-              "p-0 last:pr-3",
-              !icon && "first:pl-3",
-              !withoutBorder && "border-r last:border-r-0"
-            ),
-            children: flexRender(cell.column.columnDef.cell, cell.getContext())
-          },
-          cell.id
-        ))
-      ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan: columns.length, className: cn("h-24 text-center w-full", emptyStateHeight), children: [
-        "No ",
-        emptyText || "results"
-      ] }) }) })
-    ] }) }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-sm", children: [
-        "Showing ",
-        pagination.offset + 1,
-        " to ",
-        Math.min(pagination.offset + data.length, pagination.total),
-        " of",
-        " ",
-        pagination.total,
-        " results"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-6 lg:space-x-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoPreviousPage, disabled: !pagination.offset, children: "Previous" }),
-        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoNextPage, disabled: !pagination.hasMore, children: "Next" })
-      ] }) })
-    ] })
+function AgentTraces({ agentName, baseUrl, sidebarChild }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, sidebarChild }) });
+}
+function AgentTracesInner({ agentName, baseUrl, sidebarChild }) {
+  const [sidebarWidth, setSidebarWidth] = useState(30);
+  const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
+  const { isOpen: open } = useContext(TraceContext);
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 block mr-[30%]", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx(
+      TracesSidebar,
+      {
+        className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"),
+        width: 100 - sidebarWidth,
+        onResize: setSidebarWidth,
+        children: sidebarChild
+      }
+    )
   ] });
-};
-
-const AgentsTable = ({
-  agentsList,
-  columns,
-  isLoading
-}) => {
-  return /* @__PURE__ */ jsx(
-    DataTable,
-    {
-      emptyText: "Agents",
-      isLoading,
-      withoutBorder: true,
-      withoutRadius: true,
-      icon: /* @__PURE__ */ jsx(AgentIcon, { className: "h-4 w-4" }),
-      columns,
-      data: agentsList,
-      className: "!border-t-0 border-[0.5px] border-x-0"
-    }
-  );
-};
+}
 
 const convertMessage = (message) => {
   return message;
@@ -5672,7 +5599,7 @@ const ToolFallback = (props) => {
           onClick: () => toggleAgent(agentId),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("flex h-6 w-6 items-center justify-center rounded-full", purpleClasses.bg), children: status?.type === "running" ? /* @__PURE__ */ jsx(LoaderCircle, { className: cn("h-4 w-4 animate-spin", purpleClasses.text) }) : /* @__PURE__ */ jsx(CheckIcon, { className: cn("h-4 w-4", purpleClasses.text) }) }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex h-6 w-6 items-center justify-center rounded-full", purpleClasses.bg), children: status?.type === "running" ? /* @__PURE__ */ jsx(LoaderCircle, { className: cn("h-4 w-4 animate-spin", purpleClasses.text) }) : /* @__PURE__ */ jsx(CheckIcon$1, { className: cn("h-4 w-4", purpleClasses.text) }) }),
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-gray-100", children: action.agent?.replaceAll("_", " ") }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -5731,105 +5658,26 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, children: /* @__PURE__ */ jsx(Thread, { memory, ToolFallback }) });
 };
 
-function WorkflowTraces({
-  workflowName,
-  baseUrl,
-  sidebarChild
-}) {
+function WorkflowTraces({ workflowName, baseUrl, sidebarChild }) {
   return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(WorkflowTracesInner, { workflowName, baseUrl, sidebarChild }) });
 }
-function WorkflowTracesInner({
-  workflowName,
-  baseUrl,
-  sidebarChild
-}) {
+function WorkflowTracesInner({ workflowName, baseUrl, sidebarChild }) {
+  const [sidebarWidth, setSidebarWidth] = useState(30);
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = useContext(TraceContext);
-  if (firstCallLoading) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
-    ] });
-  }
-  if (!traces || traces.length === 0) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"), sidebarChild })
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 block mr-[30%]", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx(
+      TracesSidebar,
+      {
+        className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"),
+        width: 100 - sidebarWidth,
+        onResize: setSidebarWidth,
+        children: sidebarChild
+      }
+    )
   ] });
 }
-function SidebarItems({ sidebarChild, className }) {
-  const { openDetail, isOpen: open } = useContext(TraceContext);
-  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
-  return /* @__PURE__ */ jsxs(
-    MastraResizablePanel,
-    {
-      className: cn(
-        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
-        className
-      ),
-      defaultWidth: open ? 60 : 20,
-      minimumWidth: open ? 50 : 20,
-      maximumWidth: open ? 90 : 60,
-      children: [
-        open && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "h-full overflow-x-scroll px-0 absolute left-0 top-0 min-w-[50%] bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${100 - rightSidebarWidth}%` },
-            children: /* @__PURE__ */ jsx(TraceDetails, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MastraResizablePanel,
-          {
-            defaultWidth: 50,
-            minimumWidth: 30,
-            maximumWidth: 80,
-            className: cn("h-full overflow-y-hidden border-l-[0.5px] right-0 top-0 z-20 bg-mastra-bg-1 bg-[#121212]", {
-              absolute: open,
-              "unset-position": !open
-            }),
-            disabled: !open,
-            setCurrentWidth: setRightSidebarWidth,
-            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
-          }
-        )
-      ]
-    }
-  );
-}
 
 const useWorkflow = (workflowId, baseUrl) => {
   const [workflow, setWorkflow] = useState(null);
@@ -6426,6 +6274,43 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+const ScrollArea = React.forwardRef(
+  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
+    const areaRef = React.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
+    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Viewport,
+        {
+          ref: areaRef,
+          className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
+          style: maxHeight ? { maxHeight } : void 0,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ] });
+  }
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
 function WorkflowConditionNode({ data }) {
   const { conditions } = data;
   const [open, setOpen] = useState(true);
@@ -6763,56 +6648,13 @@ function WorkflowGraph({ workflowId, baseUrl }) {
       /* @__PURE__ */ jsx(AlertCircleIcon, {}),
       /* @__PURE__ */ jsxs("div", { children: [
         "We couldn't find ",
-        lodashTitleCase(workflowId),
-        " workflow."
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow }) }) });
-}
-
-const AutomationIcon = ({ className }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      className,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M5.34375 1.52812C5.34375 1.14153 5.65715 0.828125 6.04375 0.828125H9.45625C9.84282 0.828125 10.1562 1.14153 10.1562 1.52812V3.84687C10.1562 4.23348 9.84282 4.54688 9.45625 4.54688H8.625V6.81161L9.35414 8.80852C9.24863 8.78166 9.13761 8.7546 9.0215 8.72661L8.95218 8.70993C8.60891 8.62742 8.20123 8.52943 7.8784 8.4013C7.83782 8.3852 7.79469 8.36718 7.75 8.3469C7.70531 8.36718 7.66218 8.3852 7.6216 8.4013C7.29877 8.52943 6.89109 8.62742 6.54782 8.70993L6.4785 8.72661C6.36239 8.7546 6.25137 8.78166 6.14583 8.80852L6.875 6.81161V4.54688H6.04375C5.65715 4.54688 5.34375 4.23348 5.34375 3.84687V1.52812ZM6.14583 8.80852C6.14583 8.80852 6.14584 8.80852 6.14583 8.80852L5.54531 10.4531H5.95625C6.34285 10.4531 6.65625 10.7666 6.65625 11.1531V13.4719C6.65625 13.8584 6.34285 14.1719 5.95625 14.1719H2.54375C2.15715 14.1719 1.84375 13.8584 1.84375 13.4719V11.1531C1.84375 10.7666 2.15715 10.4531 2.54375 10.4531H3.23402C3.26169 10.1309 3.29979 9.79285 3.35272 9.47531C3.41692 9.09013 3.51527 8.65353 3.68612 8.31182C3.95256 7.77895 4.49413 7.51868 4.84581 7.3804C5.24023 7.2253 5.69736 7.11478 6.06837 7.02535C6.4139 6.94205 6.67918 6.87786 6.875 6.81161L6.14583 8.80852ZM5.54531 10.4531L6.14583 8.80852C5.89267 8.87296 5.67101 8.93634 5.48623 9.00901C5.32663 9.07176 5.25672 9.11838 5.23318 9.13484C5.18762 9.24554 5.13062 9.45274 5.07891 9.76301C5.04306 9.97818 5.01422 10.2137 4.99122 10.4531H5.54531ZM9.35414 8.80852L8.625 6.81161C8.82082 6.87786 9.0861 6.94205 9.43166 7.02535C9.80266 7.11478 10.2598 7.2253 10.6542 7.3804C11.0059 7.51868 11.5474 7.77895 11.8138 8.31182C11.9847 8.65353 12.0831 9.09013 12.1473 9.47531C12.2002 9.79285 12.2383 10.1309 12.266 10.4531H12.9563C13.3428 10.4531 13.6562 10.7666 13.6562 11.1531V13.4719C13.6562 13.8584 13.3428 14.1719 12.9563 14.1719H9.54375C9.15715 14.1719 8.84375 13.8584 8.84375 13.4719V11.1531C8.84375 10.7666 9.15715 10.4531 9.54375 10.4531H9.95474L9.35414 8.80852ZM9.35414 8.80852L9.95474 10.4531H10.5088C10.4858 10.2137 10.457 9.97818 10.4211 9.76301C10.3694 9.45274 10.3124 9.24554 10.2668 9.13484C10.2433 9.11838 10.1734 9.07176 10.0138 9.00901C9.829 8.93634 9.60736 8.87296 9.35414 8.80852Z",
-          fill: "currentColor"
-        }
-      )
-    }
-  );
-};
-
-const WorkflowsTable = ({
-  workflowsList,
-  columns,
-  isLoading
-}) => {
-  return /* @__PURE__ */ jsx(
-    DataTable,
-    {
-      emptyText: "Workflows",
-      withoutBorder: true,
-      withoutRadius: true,
-      isLoading,
-      icon: /* @__PURE__ */ jsx(AutomationIcon, { className: "h-4 w-4" }),
-      columns,
-      data: workflowsList,
-      className: "border-t-0' border-[0.5px] border-x-0"
-    }
-  );
-};
+        lodashTitleCase(workflowId),
+        " workflow."
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow }) }) });
+}
 
 const Form = React__default.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
@@ -7259,7 +7101,7 @@ const SelectField = ({ field, inputProps, error, id }) => {
         const syntheticEvent = {
           target: {
             value,
-            name: field.key
+            name: inputProps.name
           }
         };
         props.onChange(syntheticEvent);
@@ -7685,7 +7527,7 @@ function WorkflowTrigger({
       /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
         return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
           const status = pathStatus === "completed" ? "Completed" : stepId === path ? pathStatus.charAt(0).toUpperCase() + pathStatus.slice(1) : "Completed";
-          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
+          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : status === "Failed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
           return /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-hidden border", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between p-3`, children: [
             /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: path.charAt(0).toUpperCase() + path.slice(1) }),
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
@@ -7696,33 +7538,37 @@ function WorkflowTrigger({
         }) });
       }) })
     ] }),
-    isSuspendedSteps && suspendedSteps?.map((step) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
-      step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        CodeBlockDemo,
-        {
-          className: "w-full overflow-x-auto p-2",
-          code: JSON.stringify(step.suspendPayload, null, 2),
-          language: "json"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        DynamicForm,
-        {
-          schema: z.record(z.string(), z.any()),
-          isSubmitLoading: isResumingWorkflow,
-          submitButtonLabel: "Resume",
-          onSubmit: (data) => {
-            handleResumeWorkflow({
-              stepId: step.stepId,
-              runId: step.runId,
-              suspendPayload: step.suspendPayload,
-              context: data
-            });
+    isSuspendedSteps && suspendedSteps?.map((step) => {
+      const stepDefinition = workflow.steps[step.stepId];
+      const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.inputSchema))) : z.record(z.string(), z.any());
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
+        step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          CodeBlockDemo,
+          {
+            className: "w-full overflow-x-auto p-2",
+            code: JSON.stringify(step.suspendPayload, null, 2),
+            language: "json"
           }
-        }
-      )
-    ] })),
+        ) }),
+        /* @__PURE__ */ jsx(
+          DynamicForm,
+          {
+            schema: stepSchema,
+            isSubmitLoading: isResumingWorkflow,
+            submitButtonLabel: "Resume",
+            onSubmit: (data) => {
+              handleResumeWorkflow({
+                stepId: step.stepId,
+                runId: step.runId,
+                suspendPayload: step.suspendPayload,
+                context: data
+              });
+            }
+          }
+        )
+      ] });
+    }),
     result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col group relative", children: [
       /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
@@ -7744,109 +7590,263 @@ function WorkflowTrigger({
   ] }) });
 }
 
-const sizes = {
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(sizes[size], className), ...props, children });
+const DataTable = ({
+  columns,
+  data,
+  pagination,
+  gotoNextPage,
+  gotoPreviousPage,
+  getRowId,
+  selectedRowId,
+  isLoading,
+  emptyText
+}) => {
+  const [sorting, setSorting] = useState([]);
+  const [{ pageIndex, pageSize }, setPagination] = useState({
+    pageIndex: pagination ? Math.floor(pagination.offset / pagination.limit) : 0,
+    pageSize: pagination?.limit ?? 10
+  });
+  const [rowSelection, setRowSelection] = useState({});
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: pagination ? Math.ceil(pagination.total / pagination.limit) : -1,
+    state: {
+      sorting,
+      pagination: {
+        pageIndex,
+        pageSize
+      },
+      rowSelection
+    },
+    getRowId,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    enableRowSelection: true,
+    enableMultiRowSelection: false,
+    onRowSelectionChange: setRowSelection
+  });
+  const emptyNode = /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: columns.length, children: /* @__PURE__ */ jsxs("div", { className: "py-12 text-center w-full", children: [
+    "No ",
+    emptyText || "results"
+  ] }) }) });
+  const ths = table.getHeaderGroups()[0];
+  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) => {
+        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);
+      }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsx(Row, { children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsx(Row, { "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected", children: row.getVisibleCells().map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext())) }, row.id)) : emptyNode })
+    ] }),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-sm", children: [
+        "Showing ",
+        pagination.offset + 1,
+        " to ",
+        Math.min(pagination.offset + data.length, pagination.total),
+        " of",
+        " ",
+        pagination.total,
+        " results"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-6 lg:space-x-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoPreviousPage, disabled: !pagination.offset, children: "Previous" }),
+        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoNextPage, disabled: !pagination.hasMore, children: "Next" })
+      ] }) })
+    ] })
+  ] });
 };
 
-const variantClasses = {
-  default: "text-icon3",
-  success: "text-accent1",
-  error: "text-accent2",
-  info: "text-accent3"
-};
-const Badge = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
+const Button = ({ className, as, ...props }) => {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(
+    Component,
     {
       className: clsx(
-        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
-        icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
+        "bg-surface2 border-sm border-border1 px-lg h-button-default text-ui-md text-icon3 gap-md inline-flex items-center rounded-md border",
+        "hover:bg-surface4 hover:text-white",
         className
       ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
-        children
-      ]
+      ...props
     }
   );
 };
 
-const Button = ({ className, as, ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(
-    Component,
+const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label }) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
+};
+const Crumb = ({ className, as, isCurrent, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("li", { className: "flex h-full items-center", children: /* @__PURE__ */ jsx(
+      Root,
+      {
+        "aria-current": isCurrent ? "page" : void 0,
+        className: clsx("text-ui-lg leading-ui-lg font-medium", isCurrent ? "text-white" : "text-icon3", className),
+        ...props
+      }
+    ) }),
+    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+const Header = ({ children }) => {
+  return /* @__PURE__ */ jsx("header", { className: "h-header-default bg-surface2 border-b-sm border-border1 z-50 flex w-full items-center gap-[18px] px-5", children });
+};
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
+};
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
+};
+const HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
+};
+
+const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "black" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M49.9996 13.1627C29.6549 13.1627 13.1622 29.6553 13.1622 50.0001C13.1622 70.3449 29.6549 86.8375 49.9996 86.8375C70.3444 86.8375 86.8371 70.3449 86.8371 50.0001C86.8371 29.6553 70.3444 13.1627 49.9996 13.1627ZM10 50.0001C10 27.9089 27.9084 10.0005 49.9996 10.0005C72.0908 10.0005 89.9992 27.9089 89.9992 50.0001C89.9992 72.0913 72.0908 89.9997 49.9996 89.9997C27.9084 89.9997 10 72.0913 10 50.0001Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M43.3709 19.4582C35.493 17.9055 28.4985 19.4076 23.954 23.9521C19.4094 28.4967 17.9073 35.4911 19.46 43.3691C21.0103 51.235 25.5889 59.7924 32.8993 67.1028C40.2097 74.4132 48.7671 78.9918 56.633 80.5421C64.511 82.0948 71.5054 80.5927 76.05 76.0481C80.5945 71.5036 82.0966 64.5091 80.5439 56.6312C78.9936 48.7653 74.415 40.2079 67.1046 32.8975C59.7942 25.5871 51.2368 21.0085 43.3709 19.4582ZM43.9824 16.3557C52.5432 18.043 61.6476 22.9685 69.3406 30.6615C77.0336 38.3545 81.9591 47.4589 83.6464 56.0197C85.3313 64.5685 83.8044 72.7657 78.286 78.2841C72.7675 83.8026 64.5704 85.3295 56.0216 83.6446C47.4607 81.9573 38.3563 77.0317 30.6633 69.3388C22.9704 61.6458 18.0448 52.5414 16.3575 43.9805C14.6726 35.4317 16.1995 27.2346 21.718 21.7161C27.2364 16.1977 35.4336 14.6708 43.9824 16.3557Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M65.8864 51.719H34.314V48.5568H65.8864V51.719Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M59.2351 43.2352L43.194 59.2763L40.958 57.0403L56.9991 40.9992L59.2351 43.2352Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M43.1969 40.9992L59.2379 57.0403L57.002 59.2763L40.9609 43.2352L43.1969 40.9992Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.7151 33.0924C17.0466 37.565 13.1629 43.573 13.1629 49.9999C13.1629 56.4269 17.0466 62.4349 23.7151 66.9075C30.3734 71.3733 39.662 74.1867 50.0004 74.1867C60.3388 74.1867 69.6274 71.3733 76.2857 66.9075C82.9541 62.4349 86.8378 56.4269 86.8378 49.9999C86.8378 43.573 82.9541 37.565 76.2857 33.0924C69.6274 28.6266 60.3388 25.8132 50.0004 25.8132C39.662 25.8132 30.3734 28.6266 23.7151 33.0924ZM21.9537 30.4662C29.2002 25.6059 39.1209 22.651 50.0004 22.651C60.8799 22.651 70.8006 25.6059 78.0471 30.4662C85.2834 35.3197 90 42.1957 90 49.9999C90 57.8042 85.2834 64.6802 78.0471 69.5337C70.8006 74.394 60.8799 77.3489 50.0004 77.3489C39.1209 77.3489 29.2002 74.394 21.9537 69.5337C14.7174 64.6802 10.0008 57.8042 10.0008 49.9999C10.0008 42.1957 14.7174 35.3197 21.9537 30.4662Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const AgentIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8.5 15C10.3565 15 12.137 14.2625 13.4497 12.9497C14.7625 11.637 15.5 9.85652 15.5 8C15.5 6.14348 14.7625 4.36301 13.4497 3.05025C12.137 1.7375 10.3565 1 8.5 1C6.64348 1 4.86301 1.7375 3.55025 3.05025C2.2375 4.36301 1.5 6.14348 1.5 8C1.5 9.85652 2.2375 11.637 3.55025 12.9497C4.86301 14.2625 6.64348 15 8.5 15ZM5.621 10.879L4.611 11.889C3.84179 11.1198 3.31794 10.1398 3.1057 9.07291C2.89346 8.00601 3.00236 6.90013 3.41864 5.89512C3.83491 4.89012 4.53986 4.03112 5.44434 3.42676C6.34881 2.8224 7.41219 2.49983 8.5 2.49983C9.58781 2.49983 10.6512 2.8224 11.5557 3.42676C12.4601 4.03112 13.1651 4.89012 13.5814 5.89512C13.9976 6.90013 14.1065 8.00601 13.8943 9.07291C13.6821 10.1398 13.1582 11.1198 12.389 11.889L11.379 10.879C11.1004 10.6003 10.7696 10.3792 10.4055 10.2284C10.0414 10.0776 9.6511 9.99995 9.257 10H7.743C7.3489 9.99995 6.95865 10.0776 6.59455 10.2284C6.23045 10.3792 5.89963 10.6003 5.621 10.879Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8.5 4C7.96957 4 7.46086 4.21071 7.08579 4.58579C6.71071 4.96086 6.5 5.46957 6.5 6V6.5C6.5 7.03043 6.71071 7.53914 7.08579 7.91421C7.46086 8.28929 7.96957 8.5 8.5 8.5C9.03043 8.5 9.53914 8.28929 9.91421 7.91421C10.2893 7.53914 10.5 7.03043 10.5 6.5V6C10.5 5.46957 10.2893 4.96086 9.91421 4.58579C9.53914 4.21071 9.03043 4 8.5 4Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const AiIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.31445 3.16083C3.78402 3.16083 3.27531 3.37154 2.90024 3.74661C2.52517 4.12169 2.31445 4.63039 2.31445 5.16083V5.66083C2.31445 6.19126 2.52517 6.69997 2.90024 7.07504C3.27531 7.45011 3.78402 7.66083 4.31445 7.66083C4.84489 7.66083 5.35359 7.45011 5.72867 7.07504C6.10374 6.69997 6.31445 6.19126 6.31445 5.66083V5.16083C6.31445 4.63039 6.10374 4.12169 5.72867 3.74661C5.35359 3.37154 4.84489 3.16083 4.31445 3.16083Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.76666 9.50235C6.57678 9.28532 6.30244 9.16083 6.01407 9.16083H4.50201C4.10791 9.16078 3.71766 9.23838 3.35356 9.38921C3.11733 9.48706 2.8951 9.6145 2.69205 9.76806C2.48056 9.928 2.38001 10.1888 2.38001 10.454V13.0642C2.38001 13.6165 2.82773 14.0642 3.38001 14.0642H8.55436C9.4135 14.0642 9.87269 13.0523 9.30695 12.4057L6.76666 9.50235Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12.0686 2.26107C12.0686 2.17635 11.9999 2.10767 11.9152 2.10767H10.9948C10.91 2.10767 10.8414 2.17635 10.8414 2.26107V3.85184C10.8414 3.95606 10.7397 4.02994 10.6406 3.99773L9.12775 3.50619C9.04718 3.48001 8.96063 3.52411 8.93445 3.60468L8.65003 4.48004C8.62385 4.56062 8.66795 4.64716 8.74852 4.67334L10.2611 5.1648C10.3602 5.19701 10.399 5.31655 10.3378 5.40086L9.40289 6.68765C9.35309 6.75619 9.36829 6.85212 9.43683 6.90192L10.1815 7.44292C10.25 7.49272 10.3459 7.47752 10.3957 7.40898L11.3309 6.12181C11.3922 6.03749 11.5179 6.03749 11.5791 6.12181L12.5143 7.40904C12.5641 7.47758 12.6601 7.49278 12.7286 7.44298L13.4732 6.90198C13.5418 6.85218 13.557 6.75625 13.5072 6.68771L12.5723 5.40091C12.511 5.3166 12.5499 5.19705 12.649 5.16485L14.1615 4.67338C14.2421 4.6472 14.2862 4.56066 14.26 4.48009L13.9756 3.60473C13.9494 3.52415 13.8629 3.48006 13.7823 3.50624L12.2694 3.99782C12.1703 4.03003 12.0686 3.95615 12.0686 3.85193V2.26107Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const ApiIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M11.0313 7.97578C11.0313 9.34436 9.92183 10.4538 8.55324 10.4538C7.18466 10.4538 6.0752 9.34436 6.0752 7.97578C6.0752 6.60719 7.18466 5.49773 8.55324 5.49773C9.92183 5.49773 11.0313 6.60719 11.0313 7.97578ZM11.0313 7.97578H14.573",
+      stroke: "currentColor",
+      strokeWidth: "1.33333",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
     {
-      className: clsx(
-        "bg-surface2 border-sm border-border1 px-lg h-button-default text-ui-md text-icon3 gap-md inline-flex items-center rounded-md border",
-        "hover:bg-surface4 hover:text-white",
-        className
-      ),
-      ...props
+      d: "M12.967 4.46154C11.9273 3.14431 10.3165 2.29883 8.50814 2.29883C5.37277 2.29883 2.83105 4.84055 2.83105 7.97591C2.83105 11.1113 5.37277 13.653 8.50814 13.653C10.3165 13.653 11.9273 12.8075 12.967 11.4903",
+      stroke: "currentColor",
+      strokeWidth: "1.33333",
+      strokeLinecap: "round"
     }
-  );
-};
-
-const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
-
-const Breadcrumb = ({ children, label }) => {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
-};
-const Crumb = ({ className, as, isCurrent, ...props }) => {
-  const Root = as || "span";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("li", { className: "flex h-full items-center", children: /* @__PURE__ */ jsx(
-      Root,
-      {
-        "aria-current": isCurrent ? "page" : void 0,
-        className: clsx("text-ui-lg leading-ui-lg font-medium", isCurrent ? "text-white" : "text-icon3", className),
-        ...props
-      }
-    ) }),
-    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
-  ] });
-};
-
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
+  )
+] });
 
-const Header = ({ children }) => {
-  return /* @__PURE__ */ jsx("header", { className: "h-header-default bg-surface2 border-b-sm border-border1 z-50 flex w-full items-center gap-[18px] px-5", children });
-};
-const HeaderTitle = ({ children }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
-};
-const HeaderAction = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
-};
-const HeaderGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
-};
+const BranchIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8.57129", cy: "8.08496", r: "2.27832", stroke: "currentColor" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.89692 8.08203H2.45312", stroke: "currentColor" }),
+  /* @__PURE__ */ jsx("path", { d: "M14.5454 8.08203H11.1016", stroke: "currentColor" })
+] });
 
-const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "black" }),
+const CheckIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx(
     "path",
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M49.9996 13.1627C29.6549 13.1627 13.1622 29.6553 13.1622 50.0001C13.1622 70.3449 29.6549 86.8375 49.9996 86.8375C70.3444 86.8375 86.8371 70.3449 86.8371 50.0001C86.8371 29.6553 70.3444 13.1627 49.9996 13.1627ZM10 50.0001C10 27.9089 27.9084 10.0005 49.9996 10.0005C72.0908 10.0005 89.9992 27.9089 89.9992 50.0001C89.9992 72.0913 72.0908 89.9997 49.9996 89.9997C27.9084 89.9997 10 72.0913 10 50.0001Z",
+      d: "M5.99982 2.0625C3.8252 2.0625 2.06232 3.82538 2.06232 6C2.06232 8.17462 3.8252 9.9375 5.99982 9.9375C8.17444 9.9375 9.93732 8.17462 9.93732 6C9.93732 3.82538 8.17444 2.0625 5.99982 2.0625ZM0.937317 6C0.937317 3.20406 3.20388 0.9375 5.99982 0.9375C8.79576 0.9375 11.0623 3.20406 11.0623 6C11.0623 8.79594 8.79576 11.0625 5.99982 11.0625C3.20388 11.0625 0.937317 8.79594 0.937317 6Z",
       fill: "currentColor"
     }
   ),
@@ -7855,7 +7855,29 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M43.3709 19.4582C35.493 17.9055 28.4985 19.4076 23.954 23.9521C19.4094 28.4967 17.9073 35.4911 19.46 43.3691C21.0103 51.235 25.5889 59.7924 32.8993 67.1028C40.2097 74.4132 48.7671 78.9918 56.633 80.5421C64.511 82.0948 71.5054 80.5927 76.05 76.0481C80.5945 71.5036 82.0966 64.5091 80.5439 56.6312C78.9936 48.7653 74.415 40.2079 67.1046 32.8975C59.7942 25.5871 51.2368 21.0085 43.3709 19.4582ZM43.9824 16.3557C52.5432 18.043 61.6476 22.9685 69.3406 30.6615C77.0336 38.3545 81.9591 47.4589 83.6464 56.0197C85.3313 64.5685 83.8044 72.7657 78.286 78.2841C72.7675 83.8026 64.5704 85.3295 56.0216 83.6446C47.4607 81.9573 38.3563 77.0317 30.6633 69.3388C22.9704 61.6458 18.0448 52.5414 16.3575 43.9805C14.6726 35.4317 16.1995 27.2346 21.718 21.7161C27.2364 16.1977 35.4336 14.6708 43.9824 16.3557Z",
+      d: "M7.97865 4.57004C8.22604 4.75795 8.27426 5.11082 8.08635 5.35821L6.05486 8.03279C5.94873 8.17251 5.78348 8.25471 5.60803 8.25505C5.43257 8.2554 5.267 8.17385 5.16032 8.03454L3.80937 6.27034C3.6205 6.02369 3.66733 5.67063 3.91398 5.48176C4.16063 5.29288 4.51369 5.33972 4.70257 5.58637L5.6051 6.76498L7.19048 4.67774C7.37839 4.43036 7.73126 4.38213 7.97865 4.57004Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const CommitIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.46484 7.18262H3.29529C3.55505 8.46829 4.69121 9.43628 6.05347 9.43628C7.41572 9.43628 8.55188 8.46829 8.81165 7.18262L10.534 7.18262C10.8447 7.18262 11.0965 6.93078 11.0965 6.62012C11.0965 6.30946 10.8447 6.05762 10.534 6.05762L8.81075 6.05762C8.54929 4.77414 7.41417 3.80835 6.05347 3.80835C4.69277 3.80835 3.55764 4.77414 3.29618 6.05762H1.46484C1.15418 6.05762 0.902344 6.30946 0.902344 6.62012C0.902344 6.93078 1.15418 7.18262 1.46484 7.18262ZM6.05347 4.93335C5.12068 4.93335 4.3645 5.68952 4.3645 6.62231C4.3645 7.5551 5.12068 8.31128 6.05347 8.31128C6.98626 8.31128 7.74243 7.5551 7.74243 6.62231C7.74243 5.68952 6.98626 4.93335 6.05347 4.93335Z",
+    fill: "currentColor"
+  }
+) });
+
+const CrossIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5.99982 2.0625C3.8252 2.0625 2.06232 3.82538 2.06232 6C2.06232 8.17462 3.8252 9.9375 5.99982 9.9375C8.17444 9.9375 9.93732 8.17462 9.93732 6C9.93732 3.82538 8.17444 2.0625 5.99982 2.0625ZM0.937317 6C0.937317 3.20406 3.20388 0.9375 5.99982 0.9375C8.79576 0.9375 11.0623 3.20406 11.0623 6C11.0623 8.79594 8.79576 11.0625 5.99982 11.0625C3.20388 11.0625 0.937317 8.79594 0.937317 6Z",
       fill: "currentColor"
     }
   ),
@@ -7864,7 +7886,35 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M65.8864 51.719H34.314V48.5568H65.8864V51.719Z",
+      d: "M7.89741 4.10293C8.11707 4.32261 8.11706 4.67877 7.89738 4.89843L6.79517 6.00058L7.8962 7.10155C8.11588 7.32122 8.11589 7.67737 7.89623 7.89705C7.67656 8.11673 7.32041 8.11674 7.10073 7.89707L5.99965 6.79605L4.89856 7.89707C4.67889 8.11673 4.32273 8.11672 4.10307 7.89704C3.88341 7.67737 3.88342 7.32121 4.10309 7.10155L5.20413 6.00058L4.10191 4.89843C3.88224 4.67877 3.88223 4.32262 4.10189 4.10294C4.32155 3.88326 4.67771 3.88325 4.89738 4.10292L5.99965 5.20511L7.10191 4.10291C7.32159 3.88325 7.67774 3.88326 7.89741 4.10293Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const DbIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "57", height: "56", viewBox: "0 0 57 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.5 23.5V24.5C22.5 25.0628 22.9463 25.5822 23.6996 26C23.7548 26.0306 23.8117 26.0607 23.8701 26.0902C24.9706 26.6459 26.636 27 28.5 27C30.463 27 32.2058 26.6072 33.3004 26C34.0537 25.5822 34.5 25.0628 34.5 24.5V23.5C34.5 22.1193 31.8137 21 28.5 21C25.1863 21 22.5 22.1193 22.5 23.5ZM22.5854 27.0773C22.5293 27.2147 22.5 27.3559 22.5 27.5V28.5C22.5 29.0628 22.9463 29.5822 23.6996 30C24.7942 30.6072 26.537 31 28.5 31C30.364 31 32.0294 30.6459 33.1299 30.0902C33.1884 30.0607 33.2452 30.0306 33.3004 30C34.0537 29.5822 34.5 29.0628 34.5 28.5V27.5C34.5 27.3559 34.4707 27.2147 34.4146 27.0773C34.0739 27.3035 33.7012 27.4934 33.3196 27.6524C32.0102 28.1979 30.3054 28.5 28.5 28.5C26.6946 28.5 24.9898 28.1979 23.6804 27.6524C23.2988 27.4934 22.9261 27.3035 22.5854 27.0773ZM22.5854 31.0773C22.5293 31.2147 22.5 31.3559 22.5 31.5V32.5C22.5 33.8807 25.1863 35 28.5 35C31.8137 35 34.5 33.8807 34.5 32.5V31.5C34.5 31.3559 34.4707 31.2147 34.4146 31.0773C34.0739 31.3035 33.7012 31.4934 33.3196 31.6524C32.0102 32.1979 30.3054 32.5 28.5 32.5C26.6946 32.5 24.9898 32.1979 23.6804 31.6524C23.2988 31.4934 22.9261 31.3035 22.5854 31.0773Z",
+    fill: "currentColor"
+  }
+) });
+
+const DebugIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M6.14934 2.26085C5.88284 2.57794 5.92385 3.05104 6.24094 3.31754L7.05702 4.00343C6.51911 4.24774 6.05679 4.62747 5.72304 5.10093L4.31451 3.91711C3.99742 3.65061 3.52432 3.69162 3.25781 4.00871C2.99131 4.3258 3.03232 4.7989 3.34941 5.06541L5.1711 6.59647C5.16257 6.69009 5.1582 6.78504 5.1582 6.88115V8.02254H3.36523C2.95102 8.02254 2.61523 8.35833 2.61523 8.77254C2.61523 9.18675 2.95102 9.52254 3.36523 9.52254H5.1582V11.0692L3.38248 12.7049C3.07782 12.9856 3.05836 13.4601 3.339 13.7647C3.61965 14.0694 4.09412 14.0888 4.39877 13.8082L10.2843 8.38652V10.5302C10.2843 11.4231 9.5099 12.2129 8.47123 12.2129C8.28703 12.2129 8.11062 12.1876 7.94518 12.1411C7.54642 12.029 7.13229 12.2614 7.02021 12.6601C6.90812 13.0589 7.14051 13.473 7.53927 13.5851C7.83596 13.6685 8.14892 13.7129 8.47123 13.7129C9.71498 13.7129 10.8279 13.0443 11.3927 12.0355L13.0897 13.4618C13.4068 13.7283 13.8799 13.6873 14.1464 13.3702C14.4129 13.0531 14.3719 12.58 14.0548 12.3135L11.7843 10.4052V9.52254H13.634C14.0482 9.52254 14.384 9.18675 14.384 8.77254C14.384 8.35833 14.0482 8.02254 13.634 8.02254H11.7843V7.00473L13.9182 5.039C14.2228 4.75836 14.2423 4.28389 13.9616 3.97923C13.681 3.67458 13.2065 3.65512 12.9019 3.93576L6.6582 9.68737V6.88115C6.6582 5.98821 7.43256 5.19844 8.47123 5.19844L8.4789 5.19846L8.50782 5.22276L8.53124 5.19934C8.72739 5.20523 8.91424 5.23987 9.08781 5.29818C9.48045 5.43009 9.90569 5.21873 10.0376 4.82608C10.146 4.50351 10.0227 4.15895 9.75749 3.97309L10.4258 3.30474C10.7187 3.01185 10.7187 2.53698 10.4258 2.24408C10.1329 1.95119 9.65807 1.95119 9.36518 2.24408L8.41985 3.18941L7.20604 2.16925C6.88895 1.90274 6.41585 1.94375 6.14934 2.26085Z",
+    fill: "currentColor"
+  }
+) });
+
+const DeploymentIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "13", height: "14", viewBox: "0 0 13 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.83531 7.0062C6.64515 7.35069 6.15 7.35069 5.95984 7.0062L2.99029 1.62664C2.7855 1.25565 3.10614 0.814077 3.5223 0.893977L6.30195 1.42765C6.36421 1.43961 6.42818 1.43961 6.49044 1.42766L9.27301 0.893806C9.68915 0.813965 10.0097 1.25552 9.80495 1.62648L6.83531 7.0062Z",
       fill: "currentColor"
     }
   ),
@@ -7873,7 +7923,7 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M59.2351 43.2352L43.194 59.2763L40.958 57.0403L56.9991 40.9992L59.2351 43.2352Z",
+      d: "M4.77553 6.93249C4.70399 6.80288 4.52254 6.79459 4.4558 6.92674C4.30167 7.23196 4.21484 7.57697 4.21484 7.94226C4.21484 9.18814 5.22483 10.1981 6.4707 10.1981C7.71658 10.1981 8.72656 9.18814 8.72656 7.94226C8.72656 7.51818 8.60954 7.12143 8.40603 6.78254C8.33262 6.66031 8.15949 6.67411 8.09059 6.79894L7.70941 7.48947C7.13892 8.52294 5.65347 8.52293 5.08299 7.48947L4.77553 6.93249ZM5.56313 5.8764C5.46196 5.92091 5.42707 6.04354 5.48048 6.1403L5.95846 7.0062C6.14862 7.35069 6.64377 7.35069 6.83393 7.0062L7.33905 6.09115C7.39467 5.99039 7.35417 5.86275 7.2461 5.8232C7.00431 5.7347 6.74315 5.6864 6.4707 5.6864C6.14785 5.6864 5.84083 5.75423 5.56313 5.8764Z",
       fill: "currentColor"
     }
   ),
@@ -7882,7 +7932,71 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M43.1969 40.9992L59.2379 57.0403L57.002 59.2763L40.9609 43.2352L43.1969 40.9992Z",
+      d: "M4.01974 3.49407C4.17993 3.78426 4.54405 3.88541 4.85312 3.76562C5.35484 3.57118 5.90031 3.46453 6.4707 3.46453C7.0005 3.46453 7.50881 3.55654 7.98052 3.72545C8.28711 3.83523 8.64168 3.73133 8.79906 3.44623C8.96234 3.15043 8.85109 2.77497 8.5364 2.652C7.89621 2.40184 7.19949 2.26453 6.4707 2.26453C5.69013 2.26453 4.94634 2.42205 4.2694 2.70703C3.96395 2.83562 3.85958 3.20392 4.01974 3.49407ZM9.9461 4.47216C9.81565 4.70848 9.85645 4.99948 10.0211 5.21339C10.6026 5.96887 10.9484 6.91518 10.9484 7.94226C10.9484 10.4152 8.94369 12.42 6.4707 12.42C3.99772 12.42 1.99297 10.4152 1.99297 7.94226C1.99297 6.96004 2.30923 6.05168 2.84547 5.31345C3.0006 5.09989 3.03605 4.81591 2.90848 4.58482C2.70986 4.22501 2.22216 4.15342 1.97124 4.47893C1.2324 5.43738 0.792968 6.6385 0.792968 7.94226C0.792969 11.078 3.33498 13.62 6.4707 13.62C9.60643 13.62 12.1484 11.078 12.1484 7.94226C12.1484 6.58193 11.67 5.33333 10.8723 4.35553C10.6173 4.04298 10.141 4.11901 9.9461 4.47216Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const DividerIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8.5 3V13", stroke: "currentColor", strokeWidth: "0.5" }) });
+
+const DocsIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.1747 3.18598L7.02554 1.95209C7.11557 1.89207 7.31087 1.87106 7.41016 1.90924L12.4139 3.83377C12.4683 3.85467 12.546 3.96798 12.546 4.03118V13.0167C12.546 13.265 12.7473 13.4663 12.9956 13.4663C13.2439 13.4663 13.4452 13.265 13.4452 13.0167V4.03118C13.4452 3.59605 13.1384 3.14906 12.7367 2.99456L7.73293 1.07004C7.36225 0.927472 6.86056 0.981451 6.52679 1.20396L4.20445 2.75219L3.90419 2.95236L3.90647 2.95824C3.69329 3.05449 3.55469 3.27599 3.55469 3.57581V11.7119C3.55469 12.2084 3.93067 12.7499 4.39251 12.9206L9.89804 14.955C10.3608 15.126 10.7359 14.8596 10.7359 14.3659V5.83295C10.7359 5.33662 10.3498 4.81289 9.88389 4.66643L5.1747 3.18598Z",
+    fill: "currentColor"
+  }
+) });
+
+const EnvIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("rect", { x: "2.74902", y: "1.89307", width: "11.8252", height: "11.8252", rx: "1.5", stroke: "currentColor" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.74512 5.43539L8.13964 7.83011L5.86867 10.1011M9.32711 10.1753H11.7465",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    }
+  )
+] });
+
+const FiltersIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.00001 12.5C6.00001 11.948 6.44401 11.5 7.00001 11.5H10C10.552 11.5 11 11.944 11 12.5C11 13.052 10.556 13.5 10 13.5H7.00001C6.44801 13.5 6.00001 13.056 6.00001 12.5ZM4.00001 8.5C4.00001 7.948 4.44601 7.5 4.99801 7.5H12.002C12.553 7.5 13 7.944 13 8.5C13 9.052 12.554 9.5 12.002 9.5H4.99801C4.86671 9.50026 4.73665 9.47457 4.61531 9.42438C4.49398 9.37419 4.38377 9.30051 4.29102 9.20757C4.19827 9.11464 4.12481 9.00428 4.07486 8.88284C4.02492 8.76141 3.99948 8.6313 4.00001 8.5ZM1.50001 4C1.50001 3.172 2.17501 2.5 2.99801 2.5H14.002C14.829 2.5 15.5 3.166 15.5 4C15.5 4.828 14.825 5.5 14.002 5.5H2.99801C2.80101 5.5004 2.60587 5.46185 2.42382 5.38659C2.24176 5.31132 2.07638 5.20082 1.93717 5.06142C1.79796 4.92203 1.68768 4.7565 1.61265 4.57434C1.53763 4.39219 1.49935 4.197 1.50001 4Z",
+    fill: "currentColor"
+  }
+) });
+
+const HomeIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "13", height: "14", viewBox: "0 0 13 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.84766 10.1444H9.11328", stroke: "currentColor", strokeWidth: "1.33333", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M11.1395 12.9536L1.82388 12.9535C1.4557 12.9535 1.15723 12.655 1.15723 12.2868V5.69147C1.15723 5.49041 1.24796 5.30009 1.40417 5.17351L6.07746 1.38658C6.32202 1.18841 6.67185 1.18829 6.91654 1.38629L11.5589 5.14286C11.7153 5.26944 11.8062 5.45989 11.8062 5.66111V12.287C11.8062 12.6552 11.5077 12.9536 11.1395 12.9536Z",
+      stroke: "currentColor",
+      strokeWidth: "1.33333",
+      strokeLinecap: "round"
+    }
+  )
+] });
+
+const InfoIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.07303 7.39921C6.65882 7.39921 6.32303 7.735 6.32303 8.14921C6.32303 8.56343 6.65882 8.89921 7.07303 8.89921H7.75V10.6187C7.75 11.0329 8.08579 11.3687 8.5 11.3687C8.91421 11.3687 9.25 11.0329 9.25 10.6187V8.14921C9.25 7.735 8.91421 7.39921 8.5 7.39921H7.07303Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8.50309 4.72995C7.9971 4.72995 7.58691 5.14014 7.58691 5.64613C7.58691 6.15212 7.9971 6.56231 8.50309 6.56231C9.00908 6.56231 9.41927 6.15212 9.41927 5.64613C9.41927 5.14014 9.00908 4.72995 8.50309 4.72995Z",
       fill: "currentColor"
     }
   ),
@@ -7891,82 +8005,153 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M23.7151 33.0924C17.0466 37.565 13.1629 43.573 13.1629 49.9999C13.1629 56.4269 17.0466 62.4349 23.7151 66.9075C30.3734 71.3733 39.662 74.1867 50.0004 74.1867C60.3388 74.1867 69.6274 71.3733 76.2857 66.9075C82.9541 62.4349 86.8378 56.4269 86.8378 49.9999C86.8378 43.573 82.9541 37.565 76.2857 33.0924C69.6274 28.6266 60.3388 25.8132 50.0004 25.8132C39.662 25.8132 30.3734 28.6266 23.7151 33.0924ZM21.9537 30.4662C29.2002 25.6059 39.1209 22.651 50.0004 22.651C60.8799 22.651 70.8006 25.6059 78.0471 30.4662C85.2834 35.3197 90 42.1957 90 49.9999C90 57.8042 85.2834 64.6802 78.0471 69.5337C70.8006 74.394 60.8799 77.3489 50.0004 77.3489C39.1209 77.3489 29.2002 74.394 21.9537 69.5337C14.7174 64.6802 10.0008 57.8042 10.0008 49.9999C10.0008 42.1957 14.7174 35.3197 21.9537 30.4662Z",
+      d: "M8.5 1.75293C5.04984 1.75293 2.25293 4.54984 2.25293 8C2.25293 11.4502 5.04984 14.2471 8.5 14.2471C11.9502 14.2471 14.7471 11.4502 14.7471 8C14.7471 4.54984 11.9502 1.75293 8.5 1.75293ZM3.75293 8C3.75293 5.37827 5.87827 3.25293 8.5 3.25293C11.1218 3.25293 13.2471 5.37826 13.2471 8C13.2471 10.6218 11.1218 12.7471 8.5 12.7471C5.87826 12.7471 3.75293 10.6218 3.75293 8Z",
       fill: "currentColor"
     }
   )
 ] });
 
-const rowSize = {
-  default: "[&>tbody>tr]:h-table-row",
-  small: "[&>tbody>tr]:h-table-row-small"
-};
-const Table = ({ className, children, size = "default" }) => {
-  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
-};
-const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
-};
-const Th = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(
-    "th",
+const JudgeIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
     {
-      className: clsx("text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5", className),
-      children
+      d: "M4.31445 3.16083C3.78402 3.16083 3.27531 3.37154 2.90024 3.74661C2.52517 4.12169 2.31445 4.63039 2.31445 5.16083V5.66083C2.31445 6.19126 2.52517 6.69997 2.90024 7.07504C3.27531 7.45011 3.78402 7.66083 4.31445 7.66083C4.84489 7.66083 5.35359 7.45011 5.72867 7.07504C6.10374 6.69997 6.31445 6.19126 6.31445 5.66083V5.16083C6.31445 4.63039 6.10374 4.12169 5.72867 3.74661C5.35359 3.37154 4.84489 3.16083 4.31445 3.16083Z",
+      fill: "currentColor"
     }
-  );
-};
-const Tbody = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
-};
-const Row = ({ className, children, selected = false }) => {
-  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
-};
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.76666 9.50235C6.57678 9.28532 6.30244 9.16083 6.01407 9.16083H4.50201C4.10791 9.16078 3.71766 9.23838 3.35356 9.38921C3.11733 9.48706 2.8951 9.6145 2.69205 9.76806C2.48056 9.928 2.38001 10.1888 2.38001 10.454V13.0642C2.38001 13.6165 2.82773 14.0642 3.38001 14.0642H8.55436C9.4135 14.0642 9.87269 13.0523 9.30695 12.4057L6.76666 9.50235Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { x: "7.92188", y: "6.46759", width: "1.41089", height: "1.56773", rx: "0.705445", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("rect", { x: "10.4258", y: "4.35107", width: "1.41089", height: "3.72998", rx: "0.705445", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("rect", { x: "12.9287", y: "2.23419", width: "1.41089", height: "5.75781", rx: "0.705445", fill: "currentColor" })
+] });
 
-const formatDateCell = (date) => {
-  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
-  const day = date.getDate();
-  const formattedDay = `${month} ${day}`;
-  const time = new Intl.DateTimeFormat("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-    // Use 24-hour format
-  }).format(date);
-  return { day: formattedDay, time };
-};
+const LogsIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.46094 8.01825L13.6348 8.01825", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.46094 3.49384L13.6348 3.49384", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.46094 12.5427L13.6348 12.5427", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] });
 
-const Cell = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("td", { className: "text-icon5 first:pl-5 last:pr-5", children: /* @__PURE__ */ jsx("div", { className: clsx("flex h-full items-center", className), children }) });
-};
-const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full max-w-[330px] truncate", children }) });
-};
-const UnitCell = ({ className, children, unit }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full max-w-[200px] truncate", children: unit })
-  ] }) });
-};
-const DateTimeCell = ({ className, dateTime }) => {
-  const { day, time } = formatDateCell(dateTime);
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "w-28 shrink-0", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3", children: day }),
-    " ",
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
-  ] }) });
-};
-const EntryCell = ({ className, name, description, icon, meta }) => {
-  return /* @__PURE__ */ jsxs(Cell, { className: clsx("!gap-[14px]", className), children: [
-    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
-      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
-    ] }),
-    meta
-  ] });
-};
+const MemoryIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M3.8674 9.19968L4.14554 10.8649C4.23965 11.4283 4.75254 11.8237 5.32137 11.7713L5.58252 11.7472C6.56555 11.6567 7.43309 12.3868 7.51181 13.3708L7.59308 14.3867C7.60422 14.5259 7.71868 14.6342 7.85825 14.6376L9.91053 14.6876C10.1066 14.6924 10.2434 14.4948 10.17 14.3129L8.90452 11.1782C8.80956 10.9429 8.65085 10.7389 8.44626 10.5889L7.90134 10.1895C7.70604 10.0464 7.55223 9.85411 7.45759 9.63124C7.15011 8.90712 6.6579 7.71234 6.37054 6.88944C6.19204 6.3783 5.79931 6.29158 5.45492 6.21553C4.98179 6.11106 4.5999 6.02673 4.99001 4.88985C5.66408 2.92541 8.06015 2.07904 10.6601 3.33088C12.6488 4.2884 13.1187 6.35416 13.0328 7.58237C13.0297 7.62768 13.0214 7.67186 13.0094 7.71566C12.8829 8.17534 12.368 8.40491 11.9415 8.19169L10.3022 7.37201C10.2069 7.32439 10.0927 7.33657 10.0096 7.40322L8.64809 8.49559C8.55405 8.57104 8.52072 8.69931 8.56615 8.811L10.8995 14.5478C10.9404 14.6483 11.0369 14.715 11.1454 14.7177L12.0572 14.7399C12.2581 14.7448 12.3951 14.5382 12.3124 14.3551L11.8681 13.3706C11.4211 12.3803 11.6047 11.2192 12.3354 10.4151L13.4616 9.17575C13.7473 8.86125 13.9224 8.46187 13.9599 8.03858L13.9763 7.85359C14.2866 4.35298 11.377 1.41272 7.87336 1.68639C6.03919 1.82965 4.45399 3.02228 3.80807 4.74492L3.70275 5.02579C3.5828 5.34571 3.62741 5.70411 3.82213 5.98485L3.88946 6.08192C4.12183 6.41695 4.0958 6.86726 3.82637 7.17328L3.06705 8.03572C2.96261 8.15435 2.98058 8.33664 3.10617 8.43259L3.66059 8.85617C3.77064 8.94026 3.84458 9.06307 3.8674 9.19968Z",
+    fill: "currentColor"
+  }
+) });
+
+const OpenAIIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M10.1266 5.67745C10.3409 5.0225 10.2695 4.2961 9.92413 3.70069C9.40017 2.78376 8.34034 2.31934 7.30433 2.53369C6.85182 2.02164 6.18496 1.73584 5.49428 1.73584C4.43445 1.73584 3.50561 2.41461 3.17218 3.4149C2.49342 3.55779 1.90992 3.97458 1.56458 4.5819C1.04062 5.49883 1.1597 6.64202 1.86228 7.42796C1.64793 8.09482 1.73129 8.80931 2.07663 9.40472C2.60059 10.3217 3.66042 10.798 4.69643 10.5717C5.16085 11.0838 5.8158 11.3815 6.50648 11.3815C7.56631 11.3815 8.49515 10.7027 8.82858 9.70243C9.50735 9.55953 10.0908 9.14274 10.4362 8.53542C10.9601 7.61849 10.8411 6.46339 10.1266 5.67745ZM6.50648 10.7503C6.07778 10.7503 5.67291 10.6074 5.35138 10.3336C5.36329 10.3217 5.39902 10.3097 5.41093 10.2978L7.32815 9.19037C7.42341 9.13083 7.48295 9.03557 7.48295 8.91648V6.21332L8.29271 6.67774C8.30462 6.67774 8.30462 6.68965 8.30462 6.70156V8.9403C8.31653 9.94059 7.50677 10.7503 6.50648 10.7503ZM2.62441 9.09511C2.41006 8.72595 2.33861 8.29726 2.41006 7.88047C2.42197 7.89238 2.44578 7.90429 2.4696 7.91619L4.38682 9.02366C4.48209 9.0832 4.60117 9.0832 4.69643 9.02366L7.04235 7.66612V8.60687C7.04235 8.61878 7.04235 8.63069 7.03044 8.63069L5.0894 9.75006C4.23201 10.2502 3.12455 9.9525 2.62441 9.09511ZM2.12426 4.90342C2.33861 4.53427 2.67204 4.26038 3.06501 4.10557V6.39195C3.06501 6.49912 3.12455 6.60629 3.21982 6.66583L5.56573 8.02337L4.75597 8.48779C4.74407 8.48779 4.73216 8.4997 4.73216 8.48779L2.79112 7.36842C1.90992 6.86827 1.62412 5.76081 2.12426 4.90342ZM8.79285 6.45149L6.44694 5.09395L7.2567 4.62953C7.2686 4.62953 7.28051 4.61762 7.28051 4.62953L9.22155 5.7489C10.0908 6.24905 10.3766 7.35651 9.8765 8.2139C9.66215 8.58305 9.32872 8.85694 8.93575 8.99984V6.72538C8.94766 6.6182 8.88812 6.51103 8.79285 6.45149ZM9.5907 5.23685C9.5788 5.22494 9.55498 5.21303 9.53116 5.20113L7.61394 4.09366C7.51868 4.03412 7.39959 4.03412 7.30433 4.09366L4.95841 5.4512V4.51045C4.95841 4.49854 4.95841 4.48663 4.97032 4.48663L6.91136 3.36726C7.78066 2.86712 8.87621 3.16482 9.37636 4.03412C9.5907 4.39137 9.66215 4.82006 9.5907 5.23685ZM4.51781 6.904L3.70805 6.43958C3.69615 6.43958 3.69615 6.42767 3.69615 6.41576V4.17702C3.69615 3.17673 4.5059 2.36697 5.50619 2.36697C5.93489 2.36697 6.33977 2.50987 6.66129 2.78376C6.64938 2.79567 6.62556 2.80758 6.60175 2.81949L4.68453 3.92695C4.58926 3.98649 4.52972 4.08176 4.52972 4.20084V6.904H4.51781ZM4.95841 5.95134L6.00634 5.34402L7.05426 5.95134V7.15407L6.00634 7.76139L4.95841 7.15407V5.95134Z",
+    fill: "currentColor"
+  }
+) });
+
+const PromptIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.8341 11.2099H12.4915C13.598 11.2099 14.5 10.3156 14.5 9.21251V4.20729C14.5 3.10576 13.6007 2.2099 12.4915 2.2099H4.50853C3.40195 2.2099 2.5 3.10416 2.5 4.20729V9.21251C2.5 10.3112 3.39464 11.2053 4.5 11.2099V13.2005C4.5 13.7665 4.87069 13.9533 5.32796 13.6368L8.8341 11.2099Z",
+    fill: "currentColor"
+  }
+) });
+
+const ScoreIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 12V11C3 10.6022 3.15804 10.2206 3.43934 9.93934C3.72064 9.65804 4.10218 9.5 4.5 9.5C4.89782 9.5 5.27936 9.65804 5.56066 9.93934C5.84196 10.2206 6 10.6022 6 11V12C6 12.3978 5.84196 12.7794 5.56066 13.0607C5.27936 13.342 4.89782 13.5 4.5 13.5C4.10218 13.5 3.72064 13.342 3.43934 13.0607C3.15804 12.7794 3 12.3978 3 12ZM7 12V8.5C7 8.10218 7.15804 7.72064 7.43934 7.43934C7.72064 7.15804 8.10218 7 8.5 7C8.89782 7 9.27936 7.15804 9.56066 7.43934C9.84196 7.72064 10 8.10218 10 8.5V12C10 12.3978 9.84196 12.7794 9.56066 13.0607C9.27936 13.342 8.89782 13.5 8.5 13.5C8.10218 13.5 7.72064 13.342 7.43934 13.0607C7.15804 12.7794 7 12.3978 7 12ZM11 12V4C11 3.60218 11.158 3.22064 11.4393 2.93934C11.7206 2.65804 12.1022 2.5 12.5 2.5C12.8978 2.5 13.2794 2.65804 13.5607 2.93934C13.842 3.22064 14 3.60218 14 4V12C14 12.3978 13.842 12.7794 13.5607 13.0607C13.2794 13.342 12.8978 13.5 12.5 13.5C12.1022 13.5 11.7206 13.342 11.4393 13.0607C11.158 12.7794 11 12.3978 11 12Z",
+    fill: "currentColor"
+  }
+) });
+
+const SettingsIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.40864 11.9983C7.58064 11.9733 6.84164 11.6153 6.31564 11.0563C6.31464 11.0563 6.31464 11.0553 6.31464 11.0553C5.78864 10.4963 5.47564 9.73633 5.50064 8.90833C5.52564 8.08033 5.88464 7.34133 6.44364 6.81533C7.00264 6.28833 7.76264 5.97633 8.59064 6.00133C9.41864 6.02633 10.1576 6.38433 10.6836 6.94333H10.6846C11.2106 7.50333 11.5236 8.26233 11.4986 9.09033C11.4726 9.91833 11.1146 10.6583 10.5556 11.1843C9.99664 11.7103 9.23664 12.0233 8.40864 11.9983ZM16.1266 8.15033L14.3606 7.74033C14.2316 7.14133 14.0146 6.57633 13.7216 6.05733L14.7726 4.57933C14.9116 4.38533 14.8926 4.12033 14.7296 3.94633L13.9206 3.08733C13.7576 2.91333 13.4946 2.87933 13.2916 3.00533L11.7526 3.96533C11.2526 3.64133 10.7016 3.39033 10.1116 3.22633L9.80964 1.43833C9.76964 1.20333 9.56964 1.02833 9.33164 1.02133L8.15264 0.985326C7.91364 0.978326 7.70364 1.14033 7.64964 1.37233L7.24064 3.13933C6.64164 3.26733 6.07664 3.48433 5.55664 3.77733L4.07864 2.72633C3.88464 2.58833 3.61964 2.60633 3.44664 2.76933L2.58664 3.57833C2.41364 3.74133 2.37964 4.00533 2.50564 4.20733L3.46564 5.74633C3.14164 6.24633 2.89064 6.79833 2.72564 7.38833L0.937635 7.68933C0.702635 7.72933 0.528635 7.92933 0.520635 8.16733L0.485635 9.34733C0.477635 9.58533 0.639635 9.79533 0.872635 9.84933L2.63864 10.2583C2.76764 10.8573 2.98464 11.4233 3.27764 11.9423L2.22564 13.4203C2.08764 13.6143 2.10564 13.8793 2.26964 14.0523L3.07864 14.9123C3.24164 15.0853 3.50464 15.1203 3.70664 14.9933L5.24564 14.0333C5.74663 14.3583 6.29764 14.6093 6.88764 14.7733L7.18964 16.5613C7.22864 16.7963 7.42864 16.9713 7.66764 16.9783L8.84663 17.0143C9.08564 17.0213 9.29564 16.8593 9.34964 16.6273L9.75864 14.8603C10.3576 14.7323 10.9226 14.5153 11.4416 14.2213L12.9206 15.2733C13.1146 15.4113 13.3786 15.3933 13.5526 15.2293L14.4116 14.4213C14.5856 14.2573 14.6196 13.9943 14.4936 13.7923L13.5336 12.2533C13.8576 11.7523 14.1086 11.2013 14.2726 10.6113L16.0616 10.3103C16.2966 10.2703 16.4706 10.0703 16.4776 9.83233L16.5136 8.65233C16.5206 8.41433 16.3586 8.20433 16.1266 8.15033Z",
+    fill: "currentColor"
+  }
+) });
+
+const ToolsIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.5605 1.42351C8.0791 0.904904 8.92215 0.906157 9.4395 1.42351L10.6922 2.67617C11.2108 3.19477 11.2095 4.03782 10.6922 4.55517L9.4395 5.80783C8.9209 6.32643 8.07785 6.32518 7.5605 5.80783L6.30784 4.55517C5.78923 4.03656 5.79049 3.19352 6.30784 2.67617L7.5605 1.42351ZM3.17618 5.80783C3.69478 5.28923 4.53782 5.29048 5.05517 5.80783L6.30784 7.0605C6.82644 7.5791 6.82519 8.42214 6.30784 8.93949L5.05517 10.1922C4.53657 10.7108 3.69353 10.7095 3.17618 10.1922L1.92351 8.93949C1.40491 8.42089 1.40616 7.57785 1.92351 7.0605L3.17618 5.80783ZM11.9448 5.80783C12.4634 5.28923 13.3065 5.29048 13.8238 5.80783L15.0765 7.0605C15.5951 7.5791 15.5938 8.42214 15.0765 8.93949L13.8238 10.1922C13.3052 10.7108 12.4622 10.7095 11.9448 10.1922L10.6922 8.93949C10.1736 8.42089 10.1748 7.57785 10.6922 7.0605L11.9448 5.80783ZM7.5605 10.1922C8.0791 9.67355 8.92215 9.67481 9.4395 10.1922L10.6922 11.4448C11.2108 11.9634 11.2095 12.8065 10.6922 13.3238L9.4395 14.5765C8.9209 15.0951 8.07785 15.0938 7.5605 14.5765L6.30784 13.3238C5.78923 12.8052 5.79049 11.9622 6.30784 11.4448L7.5605 10.1922Z",
+    fill: "currentColor"
+  }
+) });
+
+const TraceIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3.0498 3.17139V7.95137M6.91346 12.8737L4.04984 12.8738C3.49754 12.8738 3.0498 12.4261 3.0498 11.8738V7.95137M3.0498 7.95137L6.85968 7.95125",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M6.59668 3.12631L13.9507 3.12631", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.293 7.95099L13.8072 7.95099", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.293 12.8025L13.8072 12.8025", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] });
+
+const TsIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("rect", { x: "2.74902", y: "1.89307", width: "11.8252", height: "11.8252", rx: "1.5", stroke: "currentColor" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.64062 7.98265V7.29806H8.86605V7.98265H7.66371V11.2253H6.84297V7.98265H5.64062Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M11.5277 8.42754C11.5124 8.27285 11.4465 8.15268 11.3302 8.06703C11.2138 7.98137 11.056 7.93855 10.8565 7.93855C10.721 7.93855 10.6066 7.95772 10.5133 7.99607C10.42 8.03315 10.3484 8.08492 10.2985 8.1514C10.2499 8.21788 10.2256 8.2933 10.2256 8.37768C10.2231 8.44799 10.2378 8.50936 10.2697 8.56177C10.303 8.61418 10.3484 8.65957 10.4059 8.69792C10.4634 8.73499 10.5299 8.76759 10.6053 8.79572C10.6808 8.82257 10.7613 8.84558 10.8469 8.86475L11.1998 8.94913C11.3711 8.98748 11.5283 9.03862 11.6715 9.10254C11.8147 9.16646 11.9387 9.24508 12.0435 9.3384C12.1484 9.43173 12.2295 9.54167 12.2871 9.66823C12.3459 9.7948 12.3759 9.9399 12.3772 10.1035C12.3759 10.3439 12.3146 10.5523 12.1931 10.7287C12.0729 10.9038 11.8991 11.04 11.6715 11.1371C11.4452 11.233 11.1723 11.2809 10.8527 11.2809C10.5357 11.2809 10.2595 11.2324 10.0243 11.1352C9.79034 11.038 9.60753 10.8942 9.47585 10.7037C9.34545 10.512 9.27706 10.2748 9.27067 9.99231H10.0741C10.0831 10.124 10.1208 10.2339 10.1873 10.3221C10.255 10.4091 10.3452 10.4749 10.4577 10.5197C10.5714 10.5631 10.6999 10.5849 10.8431 10.5849C10.9837 10.5849 11.1058 10.5644 11.2094 10.5235C11.3142 10.4826 11.3954 10.4257 11.4529 10.3528C11.5104 10.28 11.5392 10.1962 11.5392 10.1016C11.5392 10.0134 11.513 9.93926 11.4606 9.87917C11.4094 9.81909 11.334 9.76795 11.2343 9.72576C11.1359 9.68357 11.0151 9.64522 10.8719 9.6107L10.4442 9.50332C10.1131 9.42278 9.8517 9.29686 9.65994 9.12555C9.46818 8.95424 9.37294 8.72349 9.37422 8.43329C9.37294 8.19551 9.43622 7.98776 9.56406 7.81007C9.69318 7.63237 9.87024 7.49366 10.0952 7.39394C10.3202 7.29423 10.5759 7.24437 10.8623 7.24437C11.1538 7.24437 11.4082 7.29423 11.6255 7.39394C11.8441 7.49366 12.0141 7.63237 12.1356 7.81007C12.257 7.98776 12.3197 8.19359 12.3235 8.42754H11.5277Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const VariablesIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15.4997 7.97482V8.6501C15.0469 8.6501 14.7307 8.75585 14.5512 8.96735C14.3717 9.17885 14.2819 9.52631 14.2819 10.0097V11.315C14.2819 11.7773 14.235 12.1655 14.1413 12.4797C14.0502 12.797 13.9095 13.0508 13.7193 13.2411C13.529 13.4315 13.2879 13.5689 12.9958 13.6535C12.7038 13.7381 12.3594 13.7804 11.9629 13.7804V12.7063C12.2737 12.7063 12.5162 12.6535 12.6904 12.5477C12.8645 12.445 12.9851 12.2848 13.0521 12.0673C13.1217 11.8528 13.1566 11.5794 13.1566 11.247V9.59731C13.1566 9.36467 13.1874 9.15015 13.249 8.95376C13.3106 8.75434 13.4245 8.58212 13.5906 8.4371C13.7568 8.28905 13.9939 8.17575 14.302 8.09719C14.6102 8.01561 15.0094 7.97482 15.4997 7.97482ZM11.9629 2.21906C12.3594 2.21906 12.7038 2.26135 12.9958 2.34595C13.2879 2.43055 13.529 2.56803 13.7193 2.75837C13.9095 2.94872 14.0502 3.20252 14.1413 3.51977C14.235 3.83399 14.2819 4.22224 14.2819 4.68452V5.98523C14.2819 6.47168 14.3717 6.82065 14.5512 7.03214C14.7307 7.24062 15.0469 7.34486 15.4997 7.34486V8.02467C15.0094 8.02467 14.6102 7.98389 14.302 7.90231C13.9939 7.82073 13.7568 7.70743 13.5906 7.5624C13.4245 7.41737 13.3106 7.24666 13.249 7.05027C13.1874 6.85086 13.1566 6.63483 13.1566 6.40218V4.7525C13.1566 4.41712 13.1217 4.14218 13.0521 3.92766C12.9851 3.71012 12.8645 3.54998 12.6904 3.44725C12.5162 3.34453 12.2737 3.29316 11.9629 3.29316V2.21906ZM15.4997 7.34486V8.6501H14.3864V7.34486H15.4997Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.14024 4.97928L8.50273 7.33122L9.87728 4.97928H11.1915L9.26637 7.99983L11.2076 11.0204H9.89335L8.50273 8.76283L7.11613 11.0204H5.79785L7.719 7.99983L5.82197 4.97928H7.14024Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M1.5 8.02467V7.34486C1.95282 7.34486 2.269 7.24062 2.44852 7.03214C2.62804 6.82065 2.7178 6.47168 2.7178 5.98523V4.68452C2.7178 4.22224 2.76335 3.83399 2.85445 3.51977C2.94823 3.20252 3.09024 2.94872 3.28048 2.75837C3.47072 2.56803 3.71187 2.43055 4.00392 2.34595C4.29598 2.26135 4.64029 2.21906 5.03684 2.21906V3.29316C4.72603 3.29316 4.48354 3.34453 4.30938 3.44725C4.13522 3.54998 4.0133 3.71012 3.94364 3.92766C3.87665 4.14218 3.84316 4.41712 3.84316 4.7525V6.40218C3.84316 6.63483 3.81234 6.85086 3.75072 7.05027C3.68909 7.24666 3.57522 7.41737 3.40909 7.5624C3.24297 7.70743 3.00584 7.82073 2.6977 7.90231C2.38957 7.98389 1.99033 8.02467 1.5 8.02467ZM5.03684 13.7804C4.64029 13.7804 4.29598 13.7381 4.00392 13.6535C3.71187 13.5689 3.47072 13.4315 3.28048 13.2411C3.09024 13.0508 2.94823 12.797 2.85445 12.4797C2.76335 12.1655 2.7178 11.7773 2.7178 11.315V10.0097C2.7178 9.52631 2.62804 9.17885 2.44852 8.96735C2.269 8.75585 1.95282 8.6501 1.5 8.6501V7.97482C1.99033 7.97482 2.38957 8.01561 2.6977 8.09719C3.00584 8.17575 3.24297 8.28905 3.40909 8.4371C3.57522 8.58212 3.68909 8.75434 3.75072 8.95376C3.81234 9.15015 3.84316 9.36467 3.84316 9.59731V11.247C3.84316 11.5794 3.87665 11.8528 3.94364 12.0673C4.0133 12.2848 4.13522 12.445 4.30938 12.5477C4.48354 12.6535 4.72603 12.7063 5.03684 12.7063V13.7804ZM1.5 8.6501V7.34486H2.6133V8.6501H1.5Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const WorkflowIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.24388 2.4018C6.24388 2.0394 6.53767 1.74561 6.90008 1.74561H10.0991C10.4614 1.74561 10.7553 2.0394 10.7553 2.4018V4.57546C10.7553 4.93787 10.4614 5.23166 10.0991 5.23166H9.31982V7.35469L10.0033 9.22664C9.90442 9.20146 9.80035 9.1761 9.6915 9.14986L9.62652 9.13422C9.30473 9.05687 8.92256 8.96501 8.61993 8.84491C8.5819 8.82981 8.54147 8.81292 8.49957 8.79391C8.45767 8.81292 8.41724 8.82981 8.3792 8.84491C8.07657 8.96501 7.6944 9.05687 7.37261 9.13422L7.30763 9.14986C7.19879 9.1761 7.09471 9.20146 6.99577 9.22664L7.67932 7.35469V5.23166H6.90008C6.53767 5.23166 6.24388 4.93787 6.24388 4.57546V2.4018ZM6.99577 9.22664C6.99577 9.22664 6.99578 9.22664 6.99577 9.22664L6.43283 10.7683H6.81806C7.18047 10.7683 7.47426 11.0622 7.47426 11.4245V13.5982C7.47426 13.9606 7.18047 14.2544 6.81806 14.2544H3.61909C3.25668 14.2544 2.96289 13.9606 2.96289 13.5982V11.4245C2.96289 11.0622 3.25668 10.7683 3.61909 10.7683H4.26617C4.2921 10.4663 4.32783 10.1494 4.37744 9.85171C4.43762 9.49063 4.52982 9.08135 4.68998 8.76102C4.93975 8.2615 5.44743 8.01751 5.7771 7.88788C6.14684 7.74249 6.57537 7.63889 6.92317 7.55505C7.24707 7.47696 7.49576 7.41679 7.67932 7.35469L6.99577 9.22664ZM6.43283 10.7683L6.99577 9.22664C6.75846 9.28705 6.55067 9.34646 6.37745 9.41458C6.22784 9.47341 6.1623 9.51712 6.14023 9.53254C6.09752 9.63631 6.04409 9.83055 5.99562 10.1214C5.96201 10.3231 5.93498 10.5439 5.91341 10.7683H6.43283ZM10.0033 9.22664L9.31982 7.35469C9.50338 7.41679 9.75206 7.47696 10.076 7.55505C10.4238 7.63889 10.8523 7.74249 11.2221 7.88788C11.5517 8.01751 12.0594 8.2615 12.3091 8.76102C12.4693 9.08135 12.5615 9.49063 12.6217 9.85171C12.6713 10.1494 12.707 10.4663 12.733 10.7683H13.38C13.7424 10.7683 14.0362 11.0622 14.0362 11.4245V13.5982C14.0362 13.9606 13.7424 14.2544 13.38 14.2544H10.1811C9.81867 14.2544 9.52488 13.9606 9.52488 13.5982V11.4245C9.52488 11.0622 9.81867 10.7683 10.1811 10.7683H10.5663L10.0033 9.22664ZM10.0033 9.22664L10.5663 10.7683H11.0857C11.0642 10.5439 11.0372 10.3231 11.0035 10.1214C10.9551 9.83055 10.9016 9.63631 10.8589 9.53254C10.8369 9.51712 10.7713 9.47341 10.6217 9.41458C10.4485 9.34646 10.2407 9.28705 10.0033 9.22664Z",
+    fill: "white"
+  }
+) });
 
-export { AgentChat, AgentContext, AgentEvals, AgentProvider, AgentTraces, AgentsTable, Badge, Breadcrumb, Button, Cell, Crumb, DarkLogo, DateTimeCell, DynamicForm, EntryCell, Header, HeaderAction, HeaderGroup, HeaderTitle, MastraResizablePanel, NetworkChat, Row, Table, Tbody, Th, Thead, Txt, TxtCell, UnitCell, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EntryCell, EnvIcon, FiltersIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, OpenAIIcon, PromptIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
 //# sourceMappingURL=index.es.js.map