@mastra/playground-ui 5.1.14-alpha.0 → 5.1.14-alpha.2

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, Braces, SaveIcon, RefreshCw, ExternalLink, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, Plus, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -24,9 +24,8 @@ import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/di';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { AnimatePresence } from 'motion/react';
-import { C as Colors } from './colors-B25-HzLf.js';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -34,7 +33,9 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
+import { C as Colors } from './colors-DrbbnW3f.js';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, MiniMap, Background, BackgroundVariant, ReactFlowProvider, Controls } from '@xyflow/react';
@@ -55,8 +56,10 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import './index.css';export * from '@tanstack/react-query';
 
-import './index.css';const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
+const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new MastraClient({
     baseUrl: baseUrl || "",
     // only add the header if the baseUrl is not provided i.e it's a local dev environment
@@ -4369,8 +4372,9 @@ const Reasoning = ({ text }) => {
 
 const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = useMessage();
+  const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
-  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
@@ -4570,7 +4574,9 @@ const UserMessageAttachments = () => {
   return /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
 const UserMessage = () => {
-  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
+  const message = useMessage();
+  const messageId = message?.id;
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
@@ -4831,7 +4837,7 @@ const ComposerAttachments = () => {
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
-const Thread = ({ ToolFallback, agentName, hasMemory }) => {
+const Thread = ({ ToolFallback, agentName, hasMemory, onInputChange }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -4852,7 +4858,7 @@ const Thread = ({ ToolFallback, agentName, hasMemory }) => {
       ) }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer$1, { hasMemory })
+    /* @__PURE__ */ jsx(Composer$1, { hasMemory, onInputChange })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
@@ -4874,7 +4880,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer$1 = ({ hasMemory }) => {
+const Composer$1 = ({ hasMemory, onInputChange }) => {
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
@@ -4886,7 +4892,8 @@ const Composer$1 = ({ hasMemory }) => {
             autoFocus: true,
             placeholder: "Enter your message...",
             name: "",
-            id: ""
+            id: "",
+            onChange: (e) => onInputChange?.(e.target.value)
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -5162,6 +5169,7 @@ function MastraRuntimeProvider({
   const [messages, setMessages] = useState([]);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
+  const abortControllerRef = useRef(null);
   const {
     frequencyPenalty,
     presencePenalty,
@@ -5213,8 +5221,7 @@ function MastraRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory]);
-  const mastra = useMastraClient();
-  const agent = mastra.getAgent(agentId);
+  const baseClient = useMastraClient();
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
@@ -5224,6 +5231,13 @@ function MastraRuntimeProvider({
       { role: "user", content: input, attachments: message.attachments }
     ]);
     setIsRunning(true);
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    const clientWithAbort = new MastraClient({
+      ...baseClient.options,
+      abortSignal: controller.signal
+    });
+    const agent = clientWithAbort.getAgent(agentId);
     try {
       if (chatWithGenerate) {
         const generateResponse = await agent.generate({
@@ -5248,7 +5262,7 @@ function MastraRuntimeProvider({
           ...memory ? { threadId, resourceId: agentId } : {},
           providerOptions
         });
-        if (generateResponse.response) {
+        if (generateResponse.response && "messages" in generateResponse.response) {
           const latestMessage = generateResponse.response.messages.reduce(
             (acc, message2) => {
               const _content = Array.isArray(acc.content) ? acc.content : [];
@@ -5502,10 +5516,22 @@ function MastraRuntimeProvider({
     } catch (error) {
       console.error("Error occurred in MastraRuntimeProvider", error);
       setIsRunning(false);
+      if (error.name === "AbortError") {
+        return;
+      }
       setMessages((currentConversation) => [
         ...currentConversation,
         { role: "assistant", content: [{ type: "text", text: `${error}` }] }
       ]);
+    } finally {
+      abortControllerRef.current = null;
+    }
+  };
+  const onCancel = async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsRunning(false);
     }
   };
   const runtime = useExternalStoreRuntime({
@@ -5513,6 +5539,7 @@ function MastraRuntimeProvider({
     messages,
     convertMessage: convertMessage$2,
     onNew,
+    onCancel,
     adapters: {
       attachments: new CompositeAttachmentAdapter([
         new SimpleImageAttachmentAdapter(),
@@ -5599,7 +5626,15 @@ const usePlaygroundStore = create()(
   )
 );
 
-const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refreshThreadList }) => {
+const AgentChat = ({
+  agentId,
+  agentName,
+  threadId,
+  initialMessages,
+  memory,
+  refreshThreadList,
+  onInputChange
+}) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsx(
@@ -5613,7 +5648,7 @@ const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refr
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory })
+      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, onInputChange })
     }
   );
 };
@@ -5767,16 +5802,33 @@ const TableCaption = React.forwardRef(
 TableCaption.displayName = "TableCaption";
 
 const Tabs = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, { ref, className: cn(className), ...props }));
+const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: clsx("bg-muted text-muted-foreground inline-flex items-center bg-transparent", className),
+    ...props
+  }
+));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ref, className: cn(className), ...props }));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap focus-visible:outline-none text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -5784,6 +5836,43 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
+const PlaygroundTabs = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange
+}) => {
+  const [internalTab, setInternalTab] = useState(defaultTab);
+  const isControlled = value !== void 0 && onValueChange !== void 0;
+  const currentTab = isControlled ? value : internalTab;
+  const handleTabChange = (newValue) => {
+    const typedValue = newValue;
+    if (isControlled) {
+      onValueChange(typedValue);
+    } else {
+      setInternalTab(typedValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children });
+};
+const TabList = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx(TabsList, { className: "border-b-sm border-border1 flex min-w-full shrink-0", children }) });
+};
+const Tab = ({ children, value, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    TabsTrigger,
+    {
+      value,
+      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0",
+      onClick,
+      children
+    }
+  );
+};
+const TabContent = ({ children, value }) => {
+  return /* @__PURE__ */ jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
+};
+
 const scrollableContentClass = cn(
   "relative overflow-y-auto overflow-x-hidden invisible hover:visible focus:visible",
   "[&::-webkit-scrollbar]:w-1",
@@ -5792,35 +5881,27 @@ const scrollableContentClass = cn(
   "[&::-webkit-scrollbar-thumb]:bg-mastra-border/20",
   "[&>*]:visible"
 );
-const tabIndicatorClass = cn(
+cn(
   "px-4 py-2 text-sm transition-all border-b-2 border-transparent",
   "data-[state=active]:border-white data-[state=active]:text-white font-medium",
   "data-[state=inactive]:text-mastra-el-4 hover:data-[state=inactive]:text-mastra-el-2",
   "focus-visible:outline-none"
 );
-const tabContentClass = cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
+cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
 function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }) {
   const [activeTab, setActiveTab] = useState("live");
   function handleRefresh() {
     if (activeTab === "live") return onRefetchLiveEvals();
     return onRefetchCiEvals();
   }
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: activeTab,
-      onValueChange: (value) => setActiveTab(value),
-      className: "grid grid-rows-[auto_1fr] h-full min-h-0 pb-2",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b border-mastra-border/10", children: /* @__PURE__ */ jsxs(TabsList, { className: "bg-transparent border-0 h-auto mx-4", children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "live", className: tabIndicatorClass, children: "Live" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "ci", className: tabIndicatorClass, children: "CI" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "live", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "ci", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "live", children: [
+    /* @__PURE__ */ jsxs(TabList, { children: [
+      /* @__PURE__ */ jsx(Tab, { value: "live", children: "Live" }),
+      /* @__PURE__ */ jsx(Tab, { value: "ci", children: "CI" })
+    ] }),
+    /* @__PURE__ */ jsx(TabContent, { value: "live", children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+    /* @__PURE__ */ jsx(TabContent, { value: "ci", children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
+  ] });
 }
 function EvalTable({ evals, isCIMode = false, onRefresh }) {
   const [expandedMetrics, setExpandedMetrics] = useState(/* @__PURE__ */ new Set());
@@ -6009,907 +6090,170 @@ function EvalTable({ evals, isCIMode = false, onRefresh }) {
   }
 }
 
-const TraceContext = createContext({});
-function TraceProvider({
-  children,
-  initialTraces: traces = []
-}) {
-  const [open, setOpen] = useState(false);
-  const [trace, setTrace] = useState(null);
-  const [currentTraceIndex, setCurrentTraceIndex] = useState(0);
-  const [span, setSpan] = useState(null);
-  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);
-    }
-  };
-  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);
-    }
-  };
-  const clearData = () => {
-    setOpen(false);
-    setTrace(null);
-    setSpan(null);
-  };
-  return /* @__PURE__ */ jsx(
-    TraceContext.Provider,
-    {
-      value: {
-        isOpen: open,
-        setIsOpen: setOpen,
-        trace,
-        setTrace,
-        traces,
-        currentTraceIndex,
-        setCurrentTraceIndex,
-        nextTrace,
-        prevTrace,
-        span,
-        setSpan,
-        clearData
-      },
-      children
-    }
-  );
-}
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-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 }) => {
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    "th",
+    RadioGroupPrimitive.Item,
     {
-      className: clsx(
-        "text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5 whitespace-nowrap",
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
     }
   );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+const Entry = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon3", children: label }),
+    children
+  ] });
 };
-const Tbody = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
+
+const sizeClasses = {
+  md: "h-button-md gap-md",
+  lg: "h-button-lg gap-lg"
 };
-const Row = ({ className, children, selected = false, onClick }) => {
+const variantClasses$1 = {
+  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
+  light: "bg-surface3 hover:bg-surface5 text-icon6"
+};
+const Button = ({ className, as, size = "md", variant = "default", ...props }) => {
+  const Component = as || "button";
   return /* @__PURE__ */ jsx(
-    "tr",
+    Component,
     {
       className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3",
-        selected && "bg-surface4",
-        onClick && "cursor-pointer",
-        className
+        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
+        variantClasses$1[variant],
+        sizeClasses[size],
+        className,
+        {
+          "cursor-not-allowed": props.disabled
+        }
       ),
-      onClick,
-      children
+      ...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 Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-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 formatJSON = async (code) => {
+  const formatted = await prettier.format(code, {
+    semi: false,
+    parser: "json",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
 };
-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 isValidJson = (str) => {
+  try {
+    const obj = JSON.parse(str);
+    return !!obj && typeof obj === "object";
+  } catch (e) {
+    return false;
+  }
 };
 
-const useOpenTrace = () => {
-  const {
-    setTrace,
-    isOpen: open,
-    setIsOpen: setOpen,
-    trace: currentTrace,
-    setSpan,
-    setCurrentTraceIndex
-  } = useContext(TraceContext);
-  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);
-  };
-  return { openTrace };
-};
-
-const toSigFigs = (num, sigFigs) => {
-  return Number(num.toPrecision(sigFigs));
-};
-
-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, isActive }) => {
-  const { openTrace } = useOpenTrace();
-  const hasFailure = trace.trace.some((span) => span.status.code !== 0);
-  return /* @__PURE__ */ jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
-    /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
-    /* @__PURE__ */ jsxs(TxtCell, { title: trace.traceId, children: [
-      trace.traceId.substring(0, 7),
-      "..."
-    ] }),
-    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
-    /* @__PURE__ */ jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" }) : /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(Check, {}), variant: "success", children: "Success" }) })
-  ] });
+const useCodemirrorTheme = () => {
+  return useMemo(
+    () => draculaInit({
+      settings: {
+        fontFamily: "var(--geist-mono)",
+        fontSize: "0.8rem",
+        lineHighlight: "transparent",
+        gutterBackground: "transparent",
+        gutterForeground: Colors.surface3,
+        background: "transparent"
+      },
+      styles: [{ tag: [tags.className, tags.propertyName] }]
+    }),
+    []
+  );
 };
-const TracesTable = ({ traces, error }) => {
-  const hasNoTraces = !traces || traces.length === 0;
-  const { currentTraceIndex } = useContext(TraceContext);
-  const colsCount = 4;
-  return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
-    /* @__PURE__ */ jsxs(Thead, { children: [
-      /* @__PURE__ */ jsx(Th, { width: 120, children: "Time" }),
-      /* @__PURE__ */ jsx(Th, { width: "auto", children: "Trace Id" }),
-      /* @__PURE__ */ jsx(Th, { width: 120, children: "Duration" }),
-      /* @__PURE__ */ jsx(Th, { width: 120, children: "Spans" }),
-      /* @__PURE__ */ jsx(Th, { width: 120, children: "Status" })
-    ] }),
-    error ? /* @__PURE__ */ jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) }) })
-  ] });
+const SyntaxHighlighter$1 = ({ data }) => {
+  const formattedCode = JSON.stringify(data, null, 2);
+  const theme = useCodemirrorTheme();
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
 };
 
-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]);
+const AgentAdvancedSettings = () => {
+  const { settings, setSettings } = useAgentSettings();
+  const [isOpen, setIsOpen] = useState(false);
+  const [providerOptionsValue, setProviderOptionsValue] = useState("");
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  const theme = useCodemirrorTheme();
+  const { handleCopy } = useCopyToClipboard({ text: providerOptionsValue });
+  const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
   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);
+    const run = async () => {
+      if (!isValidJson(providerOptionsStr)) {
+        setError("Invalid JSON");
+        return;
+      }
+      const formatted = await formatJSON(providerOptionsStr);
+      setProviderOptionsValue(formatted);
     };
-    if (isDragging) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
+    run();
+  }, [providerOptionsStr]);
+  const formatProviderOptions = async () => {
+    setError(null);
+    if (!isValidJson(providerOptionsValue)) {
+      setError("Invalid JSON");
+      return;
     }
-    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-px bg-border1 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 z-10
-          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
-      }
-    ) : null,
-    children,
-    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `w-px bg-border1 h-full cursor-col-resize hover:w-1.5 hover:bg-border2 active:bg-border3 transition-colors absolute inset-y-0 z-10
-          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
-        onMouseDown: handleMouseDown
-      }
-    ) : null
-  ] });
-};
-
-const sizeClasses = {
-  md: "h-button-md gap-md",
-  lg: "h-button-lg gap-lg"
-};
-const variantClasses$1 = {
-  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
-  light: "bg-surface3 hover:bg-surface5 text-icon6"
-};
-const Button = ({ className, as, size = "md", variant = "default", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: clsx(
-        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses$1[variant],
-        sizeClasses[size],
-        className,
-        {
-          "cursor-not-allowed": props.disabled
+    const formatted = await formatJSON(providerOptionsValue);
+    setProviderOptionsValue(formatted);
+  };
+  const saveProviderOptions = async () => {
+    try {
+      setError(null);
+      const parsedContext = JSON.parse(providerOptionsValue);
+      setSettings({
+        ...settings,
+        modelSettings: {
+          ...settings?.modelSettings,
+          providerOptions: parsedContext
         }
-      ),
-      ...props
-    }
-  );
-};
-
-const TraceTree = ({ children }) => {
-  return /* @__PURE__ */ jsx("ol", { children });
-};
-
-const variantClasses = {
-  agent: "bg-accent1"
-};
-const Time = ({ durationMs, tokenCount, variant, progressPercent, offsetPercent }) => {
-  const variantClass = variant ? variantClasses[variant] : "bg-accent3";
-  const percent = Math.min(100, progressPercent);
-  return /* @__PURE__ */ jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx("absolute h-1 rounded-full", variantClass),
-        style: { width: `${percent}%`, left: `${offsetPercent}%` }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
-      /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        toSigFigs(durationMs, 3),
-        "ms"
-      ] }),
-      tokenCount && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        tokenCount,
-        "t"
-      ] })
-    ] })
-  ] });
-};
-
-const spanIconMap = {
-  tool: ToolsIcon,
-  agent: AgentIcon,
-  workflow: WorkflowIcon,
-  memory: MemoryIcon,
-  rag: TraceIcon,
-  storage: DbIcon,
-  eval: ScoreIcon,
-  other: TraceIcon
-};
-const spanVariantClasses = {
-  tool: "text-[#ECB047]",
-  agent: "text-accent1",
-  workflow: "text-accent3",
-  memory: "text-accent2",
-  rag: "text-accent2",
-  storage: "text-accent2",
-  eval: "text-accent4",
-  other: "text-icon6"
-};
-const Span = ({
-  children,
-  durationMs,
-  variant,
-  tokenCount,
-  spans,
-  isRoot,
-  onClick,
-  isActive,
-  offsetMs,
-  totalDurationMs
-}) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const VariantIcon = spanIconMap[variant];
-  const variantClass = spanVariantClasses[variant];
-  const progressPercent = durationMs / totalDurationMs * 100;
-  const offsetPercent = offsetMs / totalDurationMs * 100;
-  const TextEl = onClick ? "button" : "div";
-  return /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
-        spans ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": isExpanded ? "Collapse span" : "Expand span",
-            "aria-expanded": isExpanded,
-            className: "text-icon3 flex h-4 w-4",
-            onClick: () => setIsExpanded(!isExpanded),
-            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronIcon, { className: clsx("transition-transform -rotate-90", { "rotate-0": isExpanded }) }) })
-          }
-        ) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-full w-4", children: !isRoot && /* @__PURE__ */ jsx("div", { className: "ml-[7px] h-full w-px rounded-full" }) }),
-        /* @__PURE__ */ jsxs(TextEl, { className: "flex items-center gap-2 min-w-0", onClick, children: [
-          /* @__PURE__ */ jsx("div", { className: clsx("bg-surface4 flex items-center justify-center rounded-md p-[3px]", variantClass), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(VariantIcon, {}) }) }),
-          /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 truncate", children })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Time,
-        {
-          durationMs,
-          tokenCount,
-          variant: variant === "agent" ? "agent" : void 0,
-          progressPercent,
-          offsetPercent
-        }
-      )
-    ] }),
-    isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
-  ] });
-};
-
-const Spans = ({ children }) => {
-  return /* @__PURE__ */ jsx("ol", { children });
-};
-
-const Trace = ({
-  name,
-  spans,
-  durationMs,
-  tokenCount,
-  onClick,
-  variant,
-  isActive,
-  totalDurationMs
-}) => {
-  return /* @__PURE__ */ jsx(
-    Span,
-    {
-      isRoot: true,
-      durationMs,
-      variant,
-      spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
-      onClick,
-      isActive,
-      offsetMs: 0,
-      totalDurationMs,
-      children: name
-    }
-  );
-};
-
-const getSpanVariant = (span) => {
-  const attributes = Object.keys(span.attributes || {}).map((k) => k.toLowerCase());
-  const lowerCaseName = span.name.toLowerCase();
-  const isAiSpan = lowerCaseName.startsWith("ai.");
-  if (isAiSpan) {
-    const isAiAboutTool = lowerCaseName.includes("tool");
-    if (isAiAboutTool) return "tool";
-    return "other";
-  }
-  const hasMemoryRelatedAttributes = attributes.some((key) => key.includes("memory") || key.includes("storage"));
-  if (hasMemoryRelatedAttributes) return "memory";
-  const hasToolRelatedAttributes = attributes.some((key) => key.includes("tool"));
-  if (hasToolRelatedAttributes) return "tool";
-  const hasAgentRelatedAttributes = attributes.some((key) => key.includes("agent."));
-  if (hasAgentRelatedAttributes) return "agent";
-  if (lowerCaseName.includes(".insert")) {
-    const evalRelatedAttribute = attributes.find((key) => String(span.attributes?.[key])?.includes("mastra_evals"));
-    if (evalRelatedAttribute) return "eval";
-  }
-  return "other";
-};
-
-function buildTree(spans, minStartTime, totalDurationMs, parentSpanId = null) {
-  return spans.filter((span) => span.parentSpanId === parentSpanId).map((span) => {
-    return {
-      ...span,
-      children: buildTree(spans, minStartTime, totalDurationMs, span.id),
-      offset: (span.startTime - minStartTime) / 1e3,
-      // ns to ms
-      duration: span.duration / 1e3,
-      totalDurationMs
-    };
-  });
-}
-const createSpanTree = (spans) => {
-  if (spans.length === 0) return [];
-  let minStartTime;
-  let maxEndTime;
-  const orderedTree = [];
-  const listSize = spans.length;
-  for (let i = listSize - 1; i >= 0; i--) {
-    const span = spans[i];
-    if (!minStartTime || span.startTime < minStartTime) {
-      minStartTime = span.startTime;
-    }
-    if (!maxEndTime || span.endTime > maxEndTime) {
-      maxEndTime = span.endTime;
-    }
-    if (span.name !== ".insert" && span.name !== "mastra.getStorage") {
-      orderedTree.push(span);
-    }
-  }
-  if (!minStartTime || !maxEndTime) return [];
-  const totalDurationMs = (maxEndTime - minStartTime) / 1e3;
-  return buildTree(orderedTree, minStartTime, totalDurationMs);
-};
-
-const NestedSpans = ({ spanNodes }) => {
-  const { span: activeSpan, setSpan } = useContext(TraceContext);
-  return /* @__PURE__ */ jsx(Spans, { children: spanNodes.map((spanNode) => {
-    const isActive = spanNode.id === activeSpan?.id;
-    return /* @__PURE__ */ jsx(
-      Span,
-      {
-        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spanNodes: spanNode.children }),
-        durationMs: spanNode.duration,
-        offsetMs: spanNode.offset,
-        variant: getSpanVariant(spanNode),
-        isActive,
-        onClick: () => setSpan(spanNode),
-        totalDurationMs: spanNode.totalDurationMs,
-        children: spanNode.name
-      },
-      spanNode.id
-    );
-  }) });
-};
-function SpanView({ trace }) {
-  const { span: activeSpan, setSpan } = useContext(TraceContext);
-  const tree = createSpanTree(trace);
-  return /* @__PURE__ */ jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsx(
-    Trace,
-    {
-      name: node.name,
-      durationMs: node.duration,
-      totalDurationMs: node.totalDurationMs,
-      spans: /* @__PURE__ */ jsx(NestedSpans, { spanNodes: node.children }),
-      variant: getSpanVariant(node),
-      isActive: node.id === activeSpan?.id,
-      onClick: () => setSpan(node)
-    }
-  )) });
-}
-
-const Header = ({ children, border = true }) => {
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      className: clsx("h-header-default z-50 flex w-full items-center gap-[18px] bg-transparent px-5", {
-        "border-b-sm border-border1": border
-      }),
-      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 });
-};
-
-function TraceDetails() {
-  const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = useContext(TraceContext);
-  const actualTrace = traces[currentTraceIndex];
-  if (!actualTrace || !trace) return null;
-  const hasFailure = trace.some((span) => span.status.code !== 0);
-  return /* @__PURE__ */ jsxs("aside", { children: [
-    /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: "bg-transparent border-none",
-            onClick: nextTrace,
-            disabled: currentTraceIndex === traces.length - 1,
-            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
-        /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
-          "Trace ",
-          /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
-        ] }),
-        hasFailure && /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
-  ] });
-}
-
-const useCodemirrorTheme = () => {
-  return useMemo(
-    () => draculaInit({
-      settings: {
-        fontFamily: "var(--geist-mono)",
-        fontSize: "0.8rem",
-        lineHighlight: "transparent",
-        gutterBackground: "transparent",
-        gutterForeground: Colors.surface3,
-        background: "transparent"
-      },
-      styles: [{ tag: [tags.className, tags.propertyName] }]
-    }),
-    []
-  );
-};
-const SyntaxHighlighter$1 = ({ data }) => {
-  const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme();
-  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
-};
-
-function formatOtelTimestamp(otelTimestamp) {
-  const date = new Date(otelTimestamp / 1e3);
-  return new Intl.DateTimeFormat("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hour12: true
-  }).format(date);
-}
-function formatOtelTimestamp2(otelTimestamp) {
-  const date = new Date(otelTimestamp / 1e6);
-  return new Intl.DateTimeFormat("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hour12: true
-  }).format(date);
-}
-function transformKey(key) {
-  if (key.includes(".argument.")) {
-    return `Input`;
-  }
-  if (key.includes(".result")) {
-    return "Output";
-  }
-  const newKey = key.split(".").join(" ").split("_").join(" ").replaceAll("ai", "AI");
-  return newKey.substring(0, 1).toUpperCase() + newKey.substring(1);
-}
-
-function SpanDetail() {
-  const { span, setSpan, trace, setIsOpen } = useContext(TraceContext);
-  if (!span || !trace) return null;
-  const prevSpan = () => {
-    const currentIndex = trace.findIndex((t) => t.id === span.id);
-    if (currentIndex !== -1 && currentIndex < trace.length - 1) {
-      setSpan(trace[currentIndex + 1]);
-    }
-  };
-  const nextSpan = () => {
-    const currentIndex = trace.findIndex((t) => t.id === span.id);
-    if (currentIndex !== -1 && currentIndex > 0) {
-      setSpan(trace[currentIndex - 1]);
-    }
-  };
-  const SpanIcon = spanIconMap[getSpanVariant(span)];
-  const variantClass = spanVariantClasses[getSpanVariant(span)];
-  return /* @__PURE__ */ jsxs("aside", { children: [
-    /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: nextSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
-        "Span ",
-        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, {}) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-      /* @__PURE__ */ jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
-        /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsx(SpanIcon, { className: variantClass }) }),
-        span.name
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
-        toSigFigs(span.duration, 3),
-        "ms"
-      ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
-        "Failed in ",
-        toSigFigs(span.duration, 3),
-        "ms"
-      ] }) }),
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "ID" }),
-        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.id }),
-        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Created at" }),
-        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.startTime ? formatOtelTimestamp(span.startTime) : "" })
-      ] }),
-      span.attributes && /* @__PURE__ */ jsx(Attributes, { attributes: span.attributes }),
-      span.events?.length > 0 && /* @__PURE__ */ jsx(Events, { span })
-    ] })
-  ] });
-}
-function Attributes({ attributes }) {
-  if (!attributes) return null;
-  const entries = Object.entries(attributes);
-  if (entries.length === 0) return null;
-  const keysToHide = ["http.request_id", "componentName"];
-  return /* @__PURE__ */ jsx("div", { children: entries.filter(([key]) => !keysToHide.includes(key)).map(([key, val]) => {
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(key) }),
-      /* @__PURE__ */ jsx(AttributeValue, { value: val })
-    ] }, key);
-  }) });
-}
-const AttributeValue = ({ value }) => {
-  if (!value)
-    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: "N/A" });
-  if (typeof value === "number" || typeof value === "boolean") {
-    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
-  }
-  if (typeof value === "object") {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: value });
-  }
-  try {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
-  } catch {
-    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
-  }
-};
-function Events({ span }) {
-  if (!span.events) return null;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6 pb-2", children: "Events" }),
-    span.events.map((event) => {
-      const isLast = event === span.events[span.events.length - 1];
-      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2 pb-2", children: [
-            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Name" }),
-            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.name }),
-            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Time" }),
-            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "N/A" })
-          ] }),
-          event.attributes?.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: event.attributes.filter((attribute) => attribute !== null).map((attribute) => /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(attribute.key) }),
-            /* @__PURE__ */ jsx(AttributeValue, { value: attribute.value })
-          ] }, attribute.key)) }) : null
-        ] }, event.name),
-        !isLast && /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" })
-      ] }, event.name);
-    })
-  ] });
-}
-
-const TracesSidebar = ({ onResize }) => {
-  return /* @__PURE__ */ jsx(
-    MastraResizablePanel,
-    {
-      className: "h-full absolute right-0 inset-y-0 bg-surface2",
-      defaultWidth: 80,
-      minimumWidth: 50,
-      maximumWidth: 80,
-      setCurrentWidth: onResize,
-      children: /* @__PURE__ */ jsxs("div", { className: "h-full grid grid-cols-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsx(TraceDetails, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-40px)] overflow-x-scroll w-full border-l border-border1", children: /* @__PURE__ */ jsx(SpanDetail, {}) })
-      ] })
-    }
-  );
-};
-
-function AgentTraces({ className, traces, error }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(AgentTracesInner, { className, traces, error }) });
-}
-function AgentTracesInner({ className, traces, error }) {
-  const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { isOpen: open } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, error }) }),
-    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
-  ] });
-}
-
-const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-    }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-const Entry = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon3", children: label }),
-    children
-  ] });
-};
-
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-const formatJSON = async (code) => {
-  const formatted = await prettier.format(code, {
-    semi: false,
-    parser: "json",
-    printWidth: 80,
-    tabWidth: 2,
-    plugins: [prettierPluginBabel, prettierPluginEstree]
-  });
-  return formatted;
-};
-const isValidJson = (str) => {
-  try {
-    const obj = JSON.parse(str);
-    return !!obj && typeof obj === "object";
-  } catch (e) {
-    return false;
-  }
-};
-
-const AgentAdvancedSettings = () => {
-  const { settings, setSettings } = useAgentSettings();
-  const [isOpen, setIsOpen] = useState(false);
-  const [providerOptionsValue, setProviderOptionsValue] = useState("");
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState(null);
-  const theme = useCodemirrorTheme();
-  const { handleCopy } = useCopyToClipboard({ text: providerOptionsValue });
-  const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
-  useEffect(() => {
-    const run = async () => {
-      if (!isValidJson(providerOptionsStr)) {
-        setError("Invalid JSON");
-        return;
-      }
-      const formatted = await formatJSON(providerOptionsStr);
-      setProviderOptionsValue(formatted);
-    };
-    run();
-  }, [providerOptionsStr]);
-  const formatProviderOptions = async () => {
-    setError(null);
-    if (!isValidJson(providerOptionsValue)) {
-      setError("Invalid JSON");
-      return;
-    }
-    const formatted = await formatJSON(providerOptionsValue);
-    setProviderOptionsValue(formatted);
-  };
-  const saveProviderOptions = async () => {
-    try {
-      setError(null);
-      const parsedContext = JSON.parse(providerOptionsValue);
-      setSettings({
-        ...settings,
-        modelSettings: {
-          ...settings?.modelSettings,
-          providerOptions: parsedContext
-        }
-      });
-      setSaved(true);
-      setTimeout(() => {
-        setSaved(false);
-      }, 1e3);
-    } catch (error2) {
-      console.error("error", error2);
-      setError("Invalid JSON");
+      });
+      setSaved(true);
+      setTimeout(() => {
+        setSaved(false);
+      }, 1e3);
+    } catch (error2) {
+      console.error("error", error2);
+      setError("Invalid JSON");
     }
   };
   const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
@@ -7148,6 +6492,93 @@ const EmptyState = ({
   ] });
 };
 
+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 whitespace-nowrap",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+const Tbody = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
+};
+const Row = ({ className, children, selected = false, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3",
+        selected && "bg-surface4",
+        onClick && "cursor-pointer",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+
+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 INDICATOR_WIDTH = 40;
 const INDICATOR_HEIGHT = 150;
 const INDICATOR_SPACE = 10;
@@ -7774,6 +7205,7 @@ const columns$2 = [
         {
           variant: "default",
           icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsx(OpenAIIcon, {}),
+          className: "truncate",
           children: row.original.modelId || "N/A"
         }
       ) });
@@ -7899,49 +7331,540 @@ const RuntimeContext = () => {
       toast.error("Invalid JSON");
       return;
     }
-    const formatted = await formatJSON(runtimeContextValue);
-    setRuntimeContextValue(formatted);
-  };
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Runtime Context (JSON)" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: formatRuntimeContext, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, {}) }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: "Format the Runtime Context JSON" })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Runtime Context" })
-        ] })
+    const formatted = await formatJSON(runtimeContextValue);
+    setRuntimeContextValue(formatted);
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Runtime Context (JSON)" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: formatRuntimeContext, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, {}) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Format the Runtime Context JSON" })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Runtime Context" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        value: runtimeContextValue,
+        onChange: setRuntimeContextValue,
+        theme,
+        extensions: [jsonLanguage],
+        className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveRuntimeContext, children: "Save" }) })
+  ] }) });
+};
+const RuntimeContextWrapper = ({ children }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl p-5 overflow-y-scroll h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg p-4 pb-5 bg-surface4 shadow-md space-y-3 border border-border1 mb-5", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon3", children: "Mastra provides runtime context, which is a system based on dependency injection that enables you to configure your agents and tools with runtime variables. If you find yourself creating several different agents that do very similar things, runtime context allows you to combine them into one agent." }),
+      /* @__PURE__ */ jsxs(Button, { as: Link, to: "https://mastra.ai/en/docs/agents/runtime-variables", target: "_blank", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ExternalLink, {}) }),
+        "See documentation"
+      ] })
+    ] }),
+    children
+  ] });
+};
+
+const AgentMetadataSection = ({ title, children, hint }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2 pb-7 last:pb-0", children: [
+    /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-md", className: "text-icon3 flex items-center gap-1", children: [
+      title,
+      hint && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsx(InfoIcon$1, {}) }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: hint.title })
+      ] }) })
+    ] }),
+    children
+  ] });
+};
+
+const AgentMetadataList = ({ children }) => {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children });
+};
+const AgentMetadataListItem = ({ children }) => {
+  return /* @__PURE__ */ jsx("li", { className: "shrink-0 font-medium", children });
+};
+const AgentMetadataListEmpty = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children });
+};
+
+const AgentMetadataWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "py-2 overflow-y-auto h-full px-5", children });
+};
+
+const useScoresByEntityId = (entityId, entityType, page = 0) => {
+  const client = useMastraClient();
+  const [scores, setScores] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByEntityId({
+          entityId,
+          entityType,
+          page: page || 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [entityId, entityType, page]);
+  return { scores, isLoading };
+};
+const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
+  const client = useMastraClient();
+  const [scores, setScores] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByScorerId({
+          scorerId,
+          page: page || 0,
+          entityId: entityId || void 0,
+          entityType: entityType || void 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [scorerId, page, entityId, entityType]);
+  return { scores, isLoading };
+};
+const useScorer = (scorerId) => {
+  const client = useMastraClient();
+  const [scorer, setScorer] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScorer = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorer(scorerId);
+        setScorer(res);
+      } catch (error) {
+        setScorer(null);
+        console.error("Error fetching scorer", error);
+        toast.error("Error fetching scorer");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorer();
+  }, [scorerId]);
+  return { scorer, isLoading };
+};
+const useScorers = () => {
+  const client = useMastraClient();
+  const [scorers, setScorers] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScorers = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorers();
+        setScorers(res);
+      } catch (error) {
+        setScorers({});
+        console.error("Error fetching agents", error);
+        toast.error("Error fetching agents");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorers();
+  }, []);
+  return { scorers, isLoading };
+};
+
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
+const ScorerList = ({ entityId, entityType }) => {
+  const { scorers, isLoading } = useScorers();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ScorerSkeleton, {});
+  }
+  const scorerList = Object.keys(scorers).filter((scorerKey) => {
+    const scorer = scorers[scorerKey];
+    if (entityType === "AGENT") {
+      return scorer.agentIds.includes(entityId);
+    }
+    return scorer.workflowIds.includes(entityId);
+  }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
+  if (scorerList.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyScorerList, {});
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: scorerList.map((scorer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ScorerEntity, { scorer }) }, scorer.id)) });
+};
+const EmptyScorerList = () => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon6", children: "No scorers were attached to this agent." });
+};
+const ScorerSkeleton = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+  ] });
+};
+const ScorerEntity = ({ scorer }) => {
+  const { Link } = useLinkComponent();
+  const linkRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(GaugeIcon, { className: "group-hover/entity:text-accent3" }) }),
+    /* @__PURE__ */ jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.name }) }),
+      /* @__PURE__ */ jsx(EntityDescription, { children: scorer.scorer.description }),
+      scorer.sampling?.type === "ratio" && /* @__PURE__ */ jsxs(Badge$1, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "Sample rate:" }),
+        /* @__PURE__ */ jsx("span", { className: "text-icon6", children: scorer.sampling.rate })
       ] })
-    ] }),
+    ] })
+  ] });
+};
+
+const AgentMetadata = ({
+  agent,
+  promptSlot,
+  hasMemoryEnabled,
+  computeToolLink,
+  computeWorkflowLink
+}) => {
+  const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
+  const agentTools = agent.tools ?? {};
+  const tools = Object.keys(agentTools).map((key) => agentTools[key]);
+  const agentWorkflows = agent.workflows ?? {};
+  const workflows = Object.keys(agentWorkflows).map((key) => agentWorkflows[key]);
+  return /* @__PURE__ */ jsxs(AgentMetadataWrapper, { children: [
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }) }),
     /* @__PURE__ */ jsx(
-      CodeMirror,
+      AgentMetadataSection,
       {
-        value: runtimeContextValue,
-        onChange: setRuntimeContextValue,
-        theme,
-        extensions: [jsonLanguage],
-        className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+        title: "Memory",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/agent-memory",
+          title: "Agent Memory documentation"
+        },
+        children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(MemoryIcon, {}), variant: hasMemoryEnabled ? "success" : "error", className: "font-medium", children: hasMemoryEnabled ? "On" : "Off" })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveRuntimeContext, children: "Save" }) })
-  ] }) });
+    /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Tools",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+          title: "Using Tools and MCP documentation"
+        },
+        children: /* @__PURE__ */ jsx(AgentMetadataToolList, { tools, computeToolLink })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Workflows",
+        hint: {
+          link: "https://mastra.ai/en/docs/workflows/overview",
+          title: "Workflows documentation"
+        },
+        children: /* @__PURE__ */ jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
+      }
+    ),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(AgentMetadataScorerList, { entityId: agent.name }) }),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "System Prompt", children: promptSlot })
+  ] });
 };
-const RuntimeContextWrapper = ({ children }) => {
+const AgentMetadataToolList = ({ tools, computeToolLink }) => {
   const { Link } = useLinkComponent();
-  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl p-5 overflow-y-scroll h-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "rounded-lg p-4 pb-5 bg-surface4 shadow-md space-y-3 border border-border1 mb-5", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon3", children: "Mastra provides runtime context, which is a system based on dependency injection that enables you to configure your agents and tools with runtime variables. If you find yourself creating several different agents that do very similar things, runtime context allows you to combine them into one agent." }),
-      /* @__PURE__ */ jsxs(Button, { as: Link, to: "https://mastra.ai/en/docs/agents/runtime-variables", target: "_blank", children: [
-        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ExternalLink, {}) }),
-        "See documentation"
-      ] })
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeToolLink(tool), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+};
+const AgentMetadataScorerList = ({ entityId }) => {
+  return /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx(ScorerList, { entityId, entityType: "AGENT" }) });
+};
+const AgentMetadataWorkflowList = ({ workflows, computeWorkflowLink }) => {
+  const { Link } = useLinkComponent();
+  if (workflows.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No workflows" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeWorkflowLink(workflow), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.name)) });
+};
+
+const AgentMetadataPrompt = ({ prompt }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "bg-surface4 text-icon6 whitespace-pre-wrap rounded-lg px-2 py-1.5 text-sm", children: prompt });
+};
+
+const EntityHeader = ({ icon, title, isLoading, children }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
+      isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
     ] }),
-    children
+    children && /* @__PURE__ */ jsx("div", { className: "pt-2", children })
+  ] });
+};
+
+const AgentEntityHeader = ({ agentId, isLoading, agentName }) => {
+  const { handleCopy } = useCopyToClipboard({ text: agentId });
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EntityHeader, { icon: /* @__PURE__ */ jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), variant: "default", children: agentId }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
+  ] }) }) });
+};
+
+const Threads = ({ children }) => {
+  return /* @__PURE__ */ jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
+};
+const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      href,
+      prefetch,
+      to,
+      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
+      children
+    }
+  );
+};
+const ThreadList = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+const ThreadItem = ({ children, isActive }) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
+        isActive && "bg-surface4"
+      ),
+      children
+    }
+  );
+};
+const ThreadDeleteButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
+      onClick,
+      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-icon3" }) })
+    }
+  );
+};
+
+const AlertDialogRoot = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialog({
+  open,
+  onOpenChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange, children });
+}
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-[#141414] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+AlertDialog.Trigger = AlertDialogTrigger;
+AlertDialog.Portal = AlertDialogPortal;
+AlertDialog.Overlay = AlertDialogOverlay;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = AlertDialogHeader;
+AlertDialog.Footer = AlertDialogFooter;
+AlertDialog.Title = AlertDialogTitle;
+AlertDialog.Description = AlertDialogDescription;
+AlertDialog.Action = AlertDialogAction;
+AlertDialog.Cancel = AlertDialogCancel;
+
+const ChatThreads = ({
+  computeNewThreadLink,
+  computeThreadLink,
+  threads,
+  isLoading,
+  threadId,
+  onDelete
+}) => {
+  const { Link } = useLinkComponent();
+  const [deleteId, setDeleteId] = useState(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ChatThreadSkeleton, {});
+  }
+  const reverseThreads = [...threads].reverse();
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
+    /* @__PURE__ */ jsx(Threads, { children: /* @__PURE__ */ jsxs(ThreadList, { children: [
+      /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: computeNewThreadLink(), children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
+        "New Chat"
+      ] }) }) }),
+      reverseThreads.length === 0 && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5 max-w-[12rem]", children: "Your conversations will appear here once you start chatting!" }),
+      reverseThreads.map((thread) => {
+        const isActive = thread.id === threadId;
+        return /* @__PURE__ */ jsxs(ThreadItem, { isActive, children: [
+          /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: computeThreadLink(thread.id), children: [
+            /* @__PURE__ */ jsx(ThreadTitle, { title: thread.title }),
+            /* @__PURE__ */ jsx("span", { children: formatDay(thread.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsx(ThreadDeleteButton, { onClick: () => setDeleteId(thread.id) })
+        ] }, thread.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DeleteThreadDialog,
+      {
+        open: !!deleteId,
+        onOpenChange: () => setDeleteId(null),
+        onDelete: () => {
+          if (deleteId) {
+            onDelete(deleteId);
+          }
+        }
+      }
+    )
   ] });
 };
+const DeleteThreadDialog = ({ open, onOpenChange, onDelete }) => {
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
+    /* @__PURE__ */ jsxs(AlertDialog.Header, { children: [
+      /* @__PURE__ */ jsx(AlertDialog.Title, { children: "Are you absolutely sure?" }),
+      /* @__PURE__ */ jsx(AlertDialog.Description, { children: "This action cannot be undone. This will permanently delete your chat and remove it from our servers." })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [
+      /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsx(AlertDialog.Action, { onClick: onDelete, children: "Continue" })
+    ] })
+  ] }) });
+};
+const ChatThreadSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "p-4 w-full h-full space-y-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }) }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" })
+] });
+function isDefaultThreadName(name) {
+  const defaultPattern = /^New Thread \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z$/;
+  return defaultPattern.test(name);
+}
+function ThreadTitle({ title }) {
+  if (!title) {
+    return null;
+  }
+  if (isDefaultThreadName(title)) {
+    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Chat from" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "truncate max-w-[14rem]", children: title });
+}
+const formatDay = (date) => {
+  const options = {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  };
+  return new Date(date).toLocaleString("en-us", options).replace(",", " at");
+};
 
 const convertMessage$1 = (message) => {
   return message;
@@ -8407,6 +8330,10 @@ const useVNextNetworkChat = () => {
   return context;
 };
 
+const toSigFigs = (num, sigFigs) => {
+  return Number(num.toPrecision(sigFigs));
+};
+
 const Clock = ({ startedAt, endedAt }) => {
   const [time, setTime] = useState(startedAt);
   useEffect(() => {
@@ -9385,7 +9312,8 @@ const WorkflowStepActionBar = ({
   onShowTrace,
   onShowNestedGraph,
   onSendEvent,
-  runId
+  runId,
+  status
 }) => {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
@@ -9396,71 +9324,84 @@ const WorkflowStepActionBar = ({
   const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
   const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
   const showEventForm = event && onSendEvent && runId;
-  return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showEventForm) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
-    onShowNestedGraph && /* @__PURE__ */ jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
-    mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          stepName,
-          " map config"
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
-      ] }) })
-    ] }),
-    input && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          stepName,
-          " input"
+  return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showEventForm) && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg",
+        status === "success" && "bg-accent1Dark",
+        status === "failed" && "bg-accent2Dark",
+        status === "suspended" && "bg-accent3Dark",
+        status === "waiting" && "bg-accent5Dark",
+        status === "running" && "bg-accent6Dark"
+      ),
+      children: [
+        onShowNestedGraph && /* @__PURE__ */ jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
+        mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              stepName,
+              " map config"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: input }) })
-      ] }) })
-    ] }),
-    resumeData && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isResumeDataOpen, onOpenChange: setIsResumeDataOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          stepName,
-          " resume data"
+        input && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              stepName,
+              " input"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: input }) })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: resumeData }) })
-      ] }) })
-    ] }),
-    output && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          stepName,
-          " output"
+        resumeData && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isResumeDataOpen, onOpenChange: setIsResumeDataOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              stepName,
+              " resume data"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: resumeData }) })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: output }) })
-      ] }) })
-    ] }),
-    error && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          stepName,
-          " error"
+        output && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              stepName,
+              " output"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: output }) })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: error }) })
-      ] }) })
-    ] }),
-    onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
-    showEventForm && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { className: "ring-1 ring-accent5 !text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
-      /* @__PURE__ */ jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-          "Send ",
-          event,
-          " event"
+        error && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              stepName,
+              " error"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: error }) })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(WorkflowRunEventForm, { event, runId, onSendEvent }) })
-      ] }) })
-    ] })
-  ] }) });
+        onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
+        showEventForm && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { className: "ring-1 ring-accent5 !text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
+          /* @__PURE__ */ jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+            /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+              "Send ",
+              event,
+              " event"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(WorkflowRunEventForm, { event, runId, onSendEvent }) })
+          ] }) })
+        ] })
+      ]
+    }
+  ) });
 };
 
 function WorkflowConditionNode({ data }) {
@@ -9479,8 +9420,8 @@ function WorkflowConditionNode({ data }) {
       {
         className: cn(
           "bg-surface3 rounded-lg w-[300px] border-sm border-border1",
-          previousStep?.status === "success" && nextStep && "ring-2 ring-accent1",
-          previousStep?.status === "failed" && nextStep && "ring-2 ring-accent2"
+          previousStep?.status === "success" && nextStep && "ring-2 ring-accent1 bg-accent1Darker",
+          previousStep?.status === "failed" && nextStep && "ring-2 ring-accent2 bg-accent2Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs(
@@ -9509,7 +9450,12 @@ function WorkflowConditionNode({ data }) {
                     /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
                       "pre",
                       {
-                        className: `${className} relative font-mono p-3 w-full cursor-pointer rounded-lg text-xs !bg-surface4 overflow-scroll`,
+                        className: cn(
+                          "relative font-mono p-3 w-full cursor-pointer rounded-lg text-xs !bg-surface4 overflow-scroll",
+                          className,
+                          previousStep?.status === "success" && nextStep && "!bg-accent1Dark",
+                          previousStep?.status === "failed" && nextStep && "!bg-accent2Dark"
+                        ),
                         onClick: () => setOpenDialog(true),
                         style,
                         children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
@@ -9558,7 +9504,15 @@ function WorkflowConditionNode({ data }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(WorkflowStepActionBar, { stepName: nextStepId, input: previousStep?.output, mapConfig: data.mapConfig })
+          /* @__PURE__ */ jsx(
+            WorkflowStepActionBar,
+            {
+              stepName: nextStepId,
+              input: previousStep?.output,
+              mapConfig: data.mapConfig,
+              status: nextStep ? previousStep?.status : void 0
+            }
+          )
         ]
       }
     ),
@@ -9583,11 +9537,11 @@ function WorkflowDefaultNode({
       {
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "ring-2 ring-accent1",
-          step?.status === "failed" && "ring-2 ring-accent2",
-          step?.status === "suspended" && "ring-2 ring-accent3",
-          step?.status === "waiting" && "ring-2 ring-accent5",
-          step?.status === "running" && "ring-2 ring-accent6"
+          step?.status === "success" && "ring-2 ring-accent1 bg-accent1Darker",
+          step?.status === "failed" && "ring-2 ring-accent2 bg-accent2Darker",
+          step?.status === "suspended" && "ring-2 ring-accent3 bg-accent3Darker",
+          step?.status === "waiting" && "ring-2 ring-accent5 bg-accent5Darker",
+          step?.status === "running" && "ring-2 ring-accent6 bg-accent6Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9633,7 +9587,8 @@ function WorkflowDefaultNode({
               event: step?.status === "waiting" ? event : void 0,
               onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
               runId,
-              onSendEvent
+              onSendEvent,
+              status: step?.status
             }
           )
         ]
@@ -9886,11 +9841,11 @@ function WorkflowNestedNode({
       {
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "ring-2 ring-accent1",
-          step?.status === "failed" && "ring-2 ring-accent2",
-          step?.status === "suspended" && "ring-2 ring-accent3",
-          step?.status === "waiting" && "ring-2 ring-accent5",
-          step?.status === "running" && "ring-2 ring-accent6"
+          step?.status === "success" && "ring-2 ring-accent1 bg-accent1Darker",
+          step?.status === "failed" && "ring-2 ring-accent2 bg-accent2Darker",
+          step?.status === "suspended" && "ring-2 ring-accent3 bg-accent3Darker",
+          step?.status === "waiting" && "ring-2 ring-accent5 bg-accent5Darker",
+          step?.status === "running" && "ring-2 ring-accent6 bg-accent6Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -9922,7 +9877,8 @@ function WorkflowNestedNode({
               onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
               onSendEvent,
               event: step?.status === "waiting" ? event : void 0,
-              runId
+              runId,
+              status: step?.status
             }
           )
         ]
@@ -11123,7 +11079,7 @@ const columns$1 = [
   {
     id: "model",
     header: "Routing Models",
-    cell: ({ row }) => /* @__PURE__ */ jsxs(Cell, { children: [
+    cell: ({ row }) => /* @__PURE__ */ jsxs(Cell, { className: "truncate", children: [
       /* @__PURE__ */ jsx(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsx(Brain, {}), children: row.original.routingModel }),
       row.original.isVNext ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-accent1 ml-2", children: "vNext" }) : null
     ] })
@@ -11212,46 +11168,11 @@ const NetworkTableSkeleton = () => {
     /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
       /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
       /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
-    ] }, index)) })
-  ] });
-};
-
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: (e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      className: clsx(
-        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
-        onClick && "cursor-pointer hover:bg-surface4 transition-all",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
-const EntityIcon = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className, children });
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+      /* @__PURE__ */ jsx(Cell, { width: 160, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+    ] }, index)) })
+  ] });
 };
 
 const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
@@ -11388,31 +11309,6 @@ const prepareAgents = (tools, agents) => {
   return Array.from(toolsWithAgents.values());
 };
 
-function WorkflowTraces({ traces, error, runId, stepName }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
-}
-function WorkflowTracesInner({ traces, error, runId, stepName }) {
-  const hasRunRef = useRef(false);
-  const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { isOpen: open, setTrace, setIsOpen, setSpan } = useContext(TraceContext);
-  useEffect(() => {
-    if (hasRunRef.current) return;
-    if (!runId || !stepName) return;
-    const matchingTrace = traces.find((trace) => trace.runId === runId);
-    if (!matchingTrace) return;
-    const matchingSpan = matchingTrace.trace.find((span) => span.name.includes(stepName));
-    if (!matchingSpan) return;
-    setTrace(matchingTrace.trace);
-    setSpan(matchingSpan);
-    setIsOpen(true);
-    hasRunRef.current = true;
-  }, [runId, traces, setTrace]);
-  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, error }) }),
-    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
-  ] });
-}
-
 function LegacyWorkflowNestedGraph({
   stepGraph,
   stepSubscriberGraph,
@@ -11810,7 +11706,7 @@ const DatePicker = ({
           DatePickerOnly,
           {
             value,
-            setValue: (v) => setValue(v ? /* @__PURE__ */ new Date(`${v}z`) : null),
+            setValue,
             clearable: props.clearable,
             setOpenPopover,
             ...props
@@ -12442,31 +12338,280 @@ const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
   );
 };
 
-function LegacyWorkflowTrigger({
+function LegacyWorkflowTrigger({
+  workflowId,
+  setRunId
+}) {
+  const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = useContext(WorkflowRunContext);
+  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId);
+  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow();
+  const {
+    watchLegacyWorkflow: watchWorkflow,
+    legacyWatchResult: watchResult,
+    isWatchingLegacyWorkflow: isWatchingWorkflow
+  } = useWatchWorkflow();
+  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow();
+  const [suspendedSteps, setSuspendedSteps] = useState([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const triggerSchema = workflow?.triggerSchema;
+  const handleExecuteWorkflow = async (data) => {
+    try {
+      if (!workflow) return;
+      setIsRunning(true);
+      setResult(null);
+      const { runId } = await createWorkflowRun({ workflowId });
+      setRunId?.(runId);
+      watchWorkflow({ workflowId, runId });
+      startWorkflowRun({ workflowId, runId, input: data });
+    } catch (err) {
+      setIsRunning(false);
+      toast.error("Error executing workflow");
+    }
+  };
+  const handleResumeWorkflow = async (step) => {
+    if (!workflow) return;
+    const { stepId, runId: prevRunId, context } = step;
+    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
+    watchWorkflow({ workflowId, runId });
+    await resumeWorkflow({
+      stepId,
+      runId,
+      context,
+      workflowId
+    });
+  };
+  const watchResultToUse = result ?? watchResult;
+  const workflowActivePaths = watchResultToUse?.activePaths ?? {};
+  useEffect(() => {
+    setIsRunning(isWatchingWorkflow);
+  }, [isWatchingWorkflow]);
+  useEffect(() => {
+    if (!watchResultToUse?.activePaths || !result?.runId) return;
+    const suspended = Object.entries(watchResultToUse.activePaths).filter(([_, { status }]) => status === "suspended").map(([stepId, { suspendPayload }]) => ({
+      stepId,
+      runId: result.runId,
+      suspendPayload
+    }));
+    setSuspendedSteps(suspended);
+  }, [watchResultToUse, result]);
+  useEffect(() => {
+    if (watchResult) {
+      setResult(watchResult);
+    }
+  }, [watchResult]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
+    ] }) });
+  }
+  if (!workflow) return null;
+  const isSuspendedSteps = suspendedSteps.length > 0;
+  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
+  const { sanitizedOutput, ...restResult } = result ?? {};
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
+      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
+    ] }),
+    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema: zodInputSchema,
+        defaultValues: payload,
+        isSubmitLoading: isWatchingWorkflow,
+        submitButtonLabel: "Run",
+        onSubmit: (data) => {
+          setPayload(data);
+          handleExecuteWorkflow(data);
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "w-full",
+        variant: "light",
+        disabled: isRunning,
+        onClick: () => handleExecuteWorkflow(null),
+        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+      }
+    ) }),
+    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
+              });
+            }
+          }
+        )
+      ] });
+    }),
+    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx("div", { className: "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) => {
+          return /* @__PURE__ */ jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
+        }) }, stepId);
+      }) })
+    ] }),
+    result && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
+    ] })
+  ] }) });
+}
+
+const WorkflowStatus = ({ stepId, status, result }) => {
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
+          status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
+          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
+        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
+      ] })
+    }
+  );
+};
+
+const WorkflowInputData = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit
+}) => {
+  const [type, setType] = useState("form");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+      ] })
+    ] }) }),
+    type === "form" ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    ) : /* @__PURE__ */ jsx(
+      JSONInput,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    )
+  ] });
+};
+const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+  const [errors, setErrors] = useState([]);
+  const [inputData, setInputData] = useState(JSON.stringify(defaultValues ?? {}, null, 2));
+  const handleSubmit = () => {
+    setErrors([]);
+    try {
+      const result = schema.safeParse(JSON.parse(inputData));
+      if (!result.success) {
+        setErrors(result.error.issues.map((e) => `[${e.path.join(".")}] ${e.message}`));
+      } else {
+        onSubmit(result.data);
+      }
+    } catch (e) {
+      setErrors(["Invalid JSON provided"]);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
+const SyntaxHighlighter = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+    /* @__PURE__ */ jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
+    /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [jsonLanguage], onChange })
+  ] });
+};
+
+function WorkflowTrigger({
   workflowId,
-  setRunId
+  setRunId,
+  workflow,
+  isLoading,
+  createWorkflowRun,
+  resumeWorkflow,
+  streamWorkflow,
+  isStreamingWorkflow,
+  streamResult,
+  isResumingWorkflow,
+  isCancellingWorkflowRun,
+  cancelWorkflowRun
 }) {
-  const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId);
-  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow();
-  const {
-    watchLegacyWorkflow: watchWorkflow,
-    legacyWatchResult: watchResult,
-    isWatchingLegacyWorkflow: isWatchingWorkflow
-  } = useWatchWorkflow();
-  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow();
+  const { runtimeContext } = usePlaygroundStore();
+  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
-  const triggerSchema = workflow?.triggerSchema;
+  const [innerRunId, setInnerRunId] = useState("");
+  const [cancelResponse, setCancelResponse] = useState(null);
+  const triggerSchema = workflow?.inputSchema;
   const handleExecuteWorkflow = async (data) => {
     try {
       if (!workflow) return;
       setIsRunning(true);
+      setCancelResponse(null);
       setResult(null);
       const { runId } = await createWorkflowRun({ workflowId });
       setRunId?.(runId);
-      watchWorkflow({ workflowId, runId });
-      startWorkflowRun({ workflowId, runId, input: data });
+      setInnerRunId(runId);
+      streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
       toast.error("Error executing workflow");
@@ -12474,533 +12619,1004 @@ function LegacyWorkflowTrigger({
   };
   const handleResumeWorkflow = async (step) => {
     if (!workflow) return;
-    const { stepId, runId: prevRunId, context } = step;
+    setCancelResponse(null);
+    const { stepId, runId: prevRunId, resumeData } = step;
     const { runId } = await createWorkflowRun({ workflowId, prevRunId });
-    watchWorkflow({ workflowId, runId });
     await resumeWorkflow({
-      stepId,
+      step: stepId,
       runId,
-      context,
-      workflowId
+      resumeData,
+      workflowId,
+      runtimeContext
     });
   };
-  const watchResultToUse = result ?? watchResult;
-  const workflowActivePaths = watchResultToUse?.activePaths ?? {};
+  const handleCancelWorkflowRun = async () => {
+    const response = await cancelWorkflowRun({ workflowId, runId: innerRunId });
+    setCancelResponse(response);
+  };
+  const streamResultToUse = result ?? streamResult;
   useEffect(() => {
-    setIsRunning(isWatchingWorkflow);
-  }, [isWatchingWorkflow]);
+    setIsRunning(isStreamingWorkflow);
+  }, [isStreamingWorkflow]);
   useEffect(() => {
-    if (!watchResultToUse?.activePaths || !result?.runId) return;
-    const suspended = Object.entries(watchResultToUse.activePaths).filter(([_, { status }]) => status === "suspended").map(([stepId, { suspendPayload }]) => ({
+    if (!streamResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
+    const suspended = Object.entries(streamResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
       stepId,
       runId: result.runId,
-      suspendPayload
+      suspendPayload: payload2,
+      isLoading: false
     }));
     setSuspendedSteps(suspended);
-  }, [watchResultToUse, result]);
+  }, [streamResultToUse, result]);
   useEffect(() => {
-    if (watchResult) {
-      setResult(watchResult);
+    if (streamResult) {
+      setResult(streamResult);
     }
-  }, [watchResult]);
+  }, [streamResult]);
   if (isLoading) {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
     ] }) });
   }
-  if (!workflow) return null;
-  const isSuspendedSteps = suspendedSteps.length > 0;
-  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result ?? {};
-  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
-  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
-      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
-    ] }),
-    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-      DynamicForm,
-      {
-        schema: zodInputSchema,
-        defaultValues: payload,
-        isSubmitLoading: isWatchingWorkflow,
-        submitButtonLabel: "Run",
-        onSubmit: (data) => {
-          setPayload(data);
-          handleExecuteWorkflow(data);
-        }
-      }
-    ) : /* @__PURE__ */ jsx(
+  if (!workflow) return null;
+  const isSuspendedSteps = suspendedSteps.length > 0;
+  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
+  const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  const doneStatuses = ["success", "failed", "canceled"];
+  return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
+      (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
+        /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
+      ] }),
+      !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+        WorkflowInputData,
+        {
+          schema: zodInputSchema,
+          defaultValues: payload,
+          isSubmitLoading: isStreamingWorkflow,
+          submitButtonLabel: "Run",
+          onSubmit: (data) => {
+            setPayload(data);
+            handleExecuteWorkflow(data);
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "w-full",
+          variant: "light",
+          disabled: isRunning,
+          onClick: () => handleExecuteWorkflow(null),
+          children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+        }
+      ) }),
+      !isStreamingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
+        const stepDefinition = workflow.allSteps[step.stepId];
+        if (!stepDefinition || stepDefinition.isWorkflow) return null;
+        const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : 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(
+            WorkflowInputData,
+            {
+              schema: stepSchema,
+              isSubmitLoading: isResumingWorkflow,
+              submitButtonLabel: "Resume",
+              onSubmit: (data) => {
+                const stepIds = step.stepId?.split(".");
+                handleResumeWorkflow({
+                  stepId: stepIds,
+                  runId: step.runId,
+                  suspendPayload: step.suspendPayload,
+                  resumeData: data});
+              }
+            }
+          )
+        ] }, step.stepId);
+      }),
+      result?.runId && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "light",
+          className: "w-full",
+          size: "lg",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun || result?.payload?.workflowState?.status && doneStatuses.includes(result?.payload?.workflowState?.status),
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
+      hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
+          /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, { status, output }]) => {
+            return /* @__PURE__ */ jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
+          }) })
+        ] })
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsx(WorkflowJsonDialog, { result }) })
+  ] });
+}
+const WorkflowJsonDialog = ({ result }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "light", onClick: () => setOpen(true), className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, { className: "text-icon3" }) }),
+      "Open Workflow Execution (JSON)"
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
+    ] }) }) })
+  ] });
+};
+
+const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  if (runs.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 text-center", children: "No previous run" }) });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "pb-10", children: runs.map((run) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onPressRun({ workflowId, runId: run.runId }),
+      className: clsx("px-3 py-2 border-b-sm border-border1 block w-full hover:bg-surface4 text-left", {
+        "bg-surface4": run.runId === runId
+      }),
+      children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run.runId }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+      ]
+    }
+  ) }, run.runId)) });
+};
+
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    cell: ({ row }) => {
+      const { Link } = useLinkComponent();
+      return /* @__PURE__ */ jsx(
+        EntryCell,
+        {
+          icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
+          name: /* @__PURE__ */ jsx(Link, { href: row.original.link, children: row.original.name }),
+          description: void 0,
+          meta: void 0
+        }
+      );
+    },
+    meta: {
+      width: "auto"
+    }
+  },
+  {
+    id: "stepsCount",
+    header: "Steps",
+    size: 300,
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(Footprints, {}), className: "!h-button-md", children: [
+        row.original.stepsCount,
+        " step",
+        row.original.stepsCount > 1 ? "s" : ""
+      ] }),
+      row.original.isLegacy ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-foreground/80 !h-button-md", children: "Legacy" }) : null
+    ] }) })
+  }
+];
+
+function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
+  const { navigate } = useLinkComponent();
+  const workflowData = useMemo(() => {
+    const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
+      const workflow = workflows?.[key];
+      return {
+        id: key,
+        name: workflow?.name || "N/A",
+        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
+        isLegacy: false,
+        link: computeLink(key)
+      };
+    });
+    const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
+      const workflow = legacyWorkflows?.[key];
+      return {
+        id: key,
+        name: workflow?.name || "N/A",
+        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
+        isLegacy: true,
+        link: computeLink(key)
+      };
+    });
+    return [..._workflowsData, ...legacyWorkflowsData];
+  }, [workflows, legacyWorkflows]);
+  const table = useReactTable({
+    data: workflowData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (isLoading) return /* @__PURE__ */ jsx(WorkflowTableSkeleton, {});
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyWorkflowsTable, {});
+  }
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+  ] }) });
+}
+const WorkflowTableSkeleton = () => /* @__PURE__ */ jsxs(Table, { children: [
+  /* @__PURE__ */ jsxs(Thead, { children: [
+    /* @__PURE__ */ jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsx(Th, { width: 300, children: "Steps" })
+  ] }),
+  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsx(Cell, { width: 300, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsx(WorkflowCoinIcon, {}),
+    titleSlot: "Configure Workflows",
+    descriptionSlot: "Mastra workflows are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxs(
       Button,
       {
+        size: "lg",
         className: "w-full",
         variant: "light",
-        disabled: isRunning,
-        onClick: () => handleExecuteWorkflow(null),
-        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+        as: "a",
+        href: "https://mastra.ai/en/docs/workflows/overview",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(WorkflowIcon, {}) }),
+          "Docs"
+        ]
       }
-    ) }),
-    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
-              });
-            }
-          }
-        )
-      ] });
-    }),
-    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx("div", { className: "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) => {
-          return /* @__PURE__ */ jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
-        }) }, stepId);
-      }) })
-    ] }),
-    result && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
-    ] })
-  ] }) });
-}
+    )
+  }
+) });
 
-const WorkflowStatus = ({ stepId, status, result }) => {
+const TraceContext = createContext({});
+function TraceProvider({
+  children,
+  initialTraces: traces = []
+}) {
+  const [open, setOpen] = useState(false);
+  const [trace, setTrace] = useState(null);
+  const [currentTraceIndex, setCurrentTraceIndex] = useState(0);
+  const [span, setSpan] = useState(null);
+  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);
+    }
+  };
+  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);
+    }
+  };
+  const clearData = () => {
+    setOpen(false);
+    setTrace(null);
+    setSpan(null);
+  };
   return /* @__PURE__ */ jsx(
-    WorkflowCard,
+    TraceContext.Provider,
     {
-      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs(Icon, { children: [
-          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
-          status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" })
-        ] }),
-        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
-      ] }),
-      children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
-        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
-      ] })
+      value: {
+        isOpen: open,
+        setIsOpen: setOpen,
+        trace,
+        setTrace,
+        traces,
+        currentTraceIndex,
+        setCurrentTraceIndex,
+        nextTrace,
+        prevTrace,
+        span,
+        setSpan,
+        clearData
+      },
+      children
+    }
+  );
+}
+
+const useOpenTrace = () => {
+  const {
+    setTrace,
+    isOpen: open,
+    setIsOpen: setOpen,
+    trace: currentTrace,
+    setSpan,
+    setCurrentTraceIndex
+  } = useContext(TraceContext);
+  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);
+  };
+  return { openTrace };
+};
+
+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, isActive }) => {
+  const { openTrace } = useOpenTrace();
+  const hasFailure = trace.trace.some((span) => span.status.code !== 0);
+  return /* @__PURE__ */ jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
+    /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
+    /* @__PURE__ */ jsxs(TxtCell, { title: trace.traceId, children: [
+      trace.traceId.substring(0, 7),
+      "..."
+    ] }),
+    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
+    /* @__PURE__ */ jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" }) : /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(Check, {}), variant: "success", children: "Success" }) })
+  ] });
+};
+const TracesTable = ({ traces, error }) => {
+  const hasNoTraces = !traces || traces.length === 0;
+  const { currentTraceIndex } = useContext(TraceContext);
+  const colsCount = 4;
+  return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+    /* @__PURE__ */ jsxs(Thead, { children: [
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Time" }),
+      /* @__PURE__ */ jsx(Th, { width: "auto", children: "Trace Id" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Duration" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Spans" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Status" })
+    ] }),
+    error ? /* @__PURE__ */ jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsx(
+      TraceRow,
+      {
+        trace,
+        index,
+        isActive: index === currentTraceIndex
+      },
+      trace.traceId + index
+    )) }) })
+  ] });
+};
+
+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 WorkflowInputData = ({
-  schema,
-  defaultValues,
-  isSubmitLoading,
-  submitButtonLabel,
-  onSubmit
+const MastraResizablePanel = ({
+  children,
+  defaultWidth,
+  minimumWidth,
+  maximumWidth,
+  className,
+  disabled = false,
+  setCurrentWidth,
+  dividerPosition = "left"
 }) => {
-  const [type, setType] = useState("form");
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
-        /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
-      ] })
-    ] }) }),
-    type === "form" ? /* @__PURE__ */ jsx(
-      DynamicForm,
+  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",
       {
-        schema,
-        defaultValues,
-        isSubmitLoading,
-        submitButtonLabel,
-        onSubmit
+        className: `w-px bg-border1 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 z-10
+          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
       }
-    ) : /* @__PURE__ */ jsx(
-      JSONInput,
+    ) : null,
+    children,
+    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsx(
+      "div",
       {
-        schema,
-        defaultValues,
-        isSubmitLoading,
-        submitButtonLabel,
-        onSubmit
+        className: `w-px bg-border1 h-full cursor-col-resize hover:w-1.5 hover:bg-border2 active:bg-border3 transition-colors absolute inset-y-0 z-10
+          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
       }
-    )
+    ) : null
   ] });
 };
-const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
-  const [errors, setErrors] = useState([]);
-  const [inputData, setInputData] = useState(JSON.stringify(defaultValues ?? {}, null, 2));
-  const handleSubmit = () => {
-    setErrors([]);
-    try {
-      const result = schema.safeParse(JSON.parse(inputData));
-      if (!result.success) {
-        setErrors(result.error.issues.map((e) => `[${e.path.join(".")}] ${e.message}`));
-      } else {
-        onSubmit(result.data);
+
+const TraceTree = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+
+const variantClasses = {
+  agent: "bg-accent1"
+};
+const Time = ({ durationMs, tokenCount, variant, progressPercent, offsetPercent }) => {
+  const variantClass = variant ? variantClasses[variant] : "bg-accent3";
+  const percent = Math.min(100, progressPercent);
+  return /* @__PURE__ */ jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("absolute h-1 rounded-full", variantClass),
+        style: { width: `${percent}%`, left: `${offsetPercent}%` }
       }
-    } catch (e) {
-      setErrors(["Invalid JSON provided"]);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
-      /* @__PURE__ */ jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
-        errors.length,
-        " errors found"
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
+      /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
+        toSigFigs(durationMs, 3),
+        "ms"
       ] }),
-      /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+      tokenCount && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
+        tokenCount,
+        "t"
+      ] })
+    ] })
+  ] });
+};
+
+const spanIconMap = {
+  tool: ToolsIcon,
+  agent: AgentIcon,
+  workflow: WorkflowIcon,
+  memory: MemoryIcon,
+  rag: TraceIcon,
+  storage: DbIcon,
+  eval: ScoreIcon,
+  other: TraceIcon
+};
+const spanVariantClasses = {
+  tool: "text-[#ECB047]",
+  agent: "text-accent1",
+  workflow: "text-accent3",
+  memory: "text-accent2",
+  rag: "text-accent2",
+  storage: "text-accent2",
+  eval: "text-accent4",
+  other: "text-icon6"
+};
+const Span = ({
+  children,
+  durationMs,
+  variant,
+  tokenCount,
+  spans,
+  isRoot,
+  onClick,
+  isActive,
+  offsetMs,
+  totalDurationMs
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const VariantIcon = spanIconMap[variant];
+  const variantClass = spanVariantClasses[variant];
+  const progressPercent = durationMs / totalDurationMs * 100;
+  const offsetPercent = offsetMs / totalDurationMs * 100;
+  const TextEl = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
+        spans ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": isExpanded ? "Collapse span" : "Expand span",
+            "aria-expanded": isExpanded,
+            className: "text-icon3 flex h-4 w-4",
+            onClick: () => setIsExpanded(!isExpanded),
+            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronIcon, { className: clsx("transition-transform -rotate-90", { "rotate-0": isExpanded }) }) })
+          }
+        ) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-full w-4", children: !isRoot && /* @__PURE__ */ jsx("div", { className: "ml-[7px] h-full w-px rounded-full" }) }),
+        /* @__PURE__ */ jsxs(TextEl, { className: "flex items-center gap-2 min-w-0", onClick, children: [
+          /* @__PURE__ */ jsx("div", { className: clsx("bg-surface4 flex items-center justify-center rounded-md p-[3px]", variantClass), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(VariantIcon, {}) }) }),
+          /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 truncate", children })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Time,
+        {
+          durationMs,
+          tokenCount,
+          variant: variant === "agent" ? "agent" : void 0,
+          progressPercent,
+          offsetPercent
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
-    /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
+    isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
   ] });
 };
-const SyntaxHighlighter = ({ data, onChange }) => {
-  const theme = useCodemirrorTheme$1();
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
-    /* @__PURE__ */ jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
-    /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [jsonLanguage], onChange })
-  ] });
+
+const Spans = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+
+const Trace = ({
+  name,
+  spans,
+  durationMs,
+  tokenCount,
+  onClick,
+  variant,
+  isActive,
+  totalDurationMs
+}) => {
+  return /* @__PURE__ */ jsx(
+    Span,
+    {
+      isRoot: true,
+      durationMs,
+      variant,
+      spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
+      onClick,
+      isActive,
+      offsetMs: 0,
+      totalDurationMs,
+      children: name
+    }
+  );
+};
+
+const getSpanVariant = (span) => {
+  const attributes = Object.keys(span.attributes || {}).map((k) => k.toLowerCase());
+  const lowerCaseName = span.name.toLowerCase();
+  const isAiSpan = lowerCaseName.startsWith("ai.");
+  if (isAiSpan) {
+    const isAiAboutTool = lowerCaseName.includes("tool");
+    if (isAiAboutTool) return "tool";
+    return "other";
+  }
+  const hasMemoryRelatedAttributes = attributes.some((key) => key.includes("memory") || key.includes("storage"));
+  if (hasMemoryRelatedAttributes) return "memory";
+  const hasToolRelatedAttributes = attributes.some((key) => key.includes("tool"));
+  if (hasToolRelatedAttributes) return "tool";
+  const hasAgentRelatedAttributes = attributes.some((key) => key.includes("agent."));
+  if (hasAgentRelatedAttributes) return "agent";
+  if (lowerCaseName.includes(".insert")) {
+    const evalRelatedAttribute = attributes.find((key) => String(span.attributes?.[key])?.includes("mastra_evals"));
+    if (evalRelatedAttribute) return "eval";
+  }
+  return "other";
 };
 
-function WorkflowTrigger({
-  workflowId,
-  setRunId,
-  workflow,
-  isLoading,
-  createWorkflowRun,
-  resumeWorkflow,
-  streamWorkflow,
-  isStreamingWorkflow,
-  streamResult,
-  isResumingWorkflow,
-  isCancellingWorkflowRun,
-  cancelWorkflowRun
-}) {
-  const { runtimeContext } = usePlaygroundStore();
-  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const [suspendedSteps, setSuspendedSteps] = useState([]);
-  const [isRunning, setIsRunning] = useState(false);
-  const [innerRunId, setInnerRunId] = useState("");
-  const [cancelResponse, setCancelResponse] = useState(null);
-  const triggerSchema = workflow?.inputSchema;
-  const handleExecuteWorkflow = async (data) => {
-    try {
-      if (!workflow) return;
-      setIsRunning(true);
-      setCancelResponse(null);
-      setResult(null);
-      const { runId } = await createWorkflowRun({ workflowId });
-      setRunId?.(runId);
-      setInnerRunId(runId);
-      streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
-    } catch (err) {
-      setIsRunning(false);
-      toast.error("Error executing workflow");
+function buildTree(spans, minStartTime, totalDurationMs, parentSpanId = null) {
+  return spans.filter((span) => span.parentSpanId === parentSpanId).map((span) => {
+    return {
+      ...span,
+      children: buildTree(spans, minStartTime, totalDurationMs, span.id),
+      offset: (span.startTime - minStartTime) / 1e3,
+      // ns to ms
+      duration: span.duration / 1e3,
+      totalDurationMs
+    };
+  });
+}
+const createSpanTree = (spans) => {
+  if (spans.length === 0) return [];
+  let minStartTime;
+  let maxEndTime;
+  const orderedTree = [];
+  const listSize = spans.length;
+  for (let i = listSize - 1; i >= 0; i--) {
+    const span = spans[i];
+    if (!minStartTime || span.startTime < minStartTime) {
+      minStartTime = span.startTime;
     }
-  };
-  const handleResumeWorkflow = async (step) => {
-    if (!workflow) return;
-    setCancelResponse(null);
-    const { stepId, runId: prevRunId, resumeData } = step;
-    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
-    await resumeWorkflow({
-      step: stepId,
-      runId,
-      resumeData,
-      workflowId,
-      runtimeContext
-    });
-  };
-  const handleCancelWorkflowRun = async () => {
-    const response = await cancelWorkflowRun({ workflowId, runId: innerRunId });
-    setCancelResponse(response);
-  };
-  const streamResultToUse = result ?? streamResult;
-  useEffect(() => {
-    setIsRunning(isStreamingWorkflow);
-  }, [isStreamingWorkflow]);
-  useEffect(() => {
-    if (!streamResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
-    const suspended = Object.entries(streamResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
-      stepId,
-      runId: result.runId,
-      suspendPayload: payload2,
-      isLoading: false
-    }));
-    setSuspendedSteps(suspended);
-  }, [streamResultToUse, result]);
-  useEffect(() => {
-    if (streamResult) {
-      setResult(streamResult);
+    if (!maxEndTime || span.endTime > maxEndTime) {
+      maxEndTime = span.endTime;
+    }
+    if (span.name !== ".insert" && span.name !== "mastra.getStorage") {
+      orderedTree.push(span);
     }
-  }, [streamResult]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
-    ] }) });
   }
-  if (!workflow) return null;
-  const isSuspendedSteps = suspendedSteps.length > 0;
-  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
-  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
-  const doneStatuses = ["success", "failed", "canceled"];
-  return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
-        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
-        /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
-      ] }),
-      !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-        WorkflowInputData,
-        {
-          schema: zodInputSchema,
-          defaultValues: payload,
-          isSubmitLoading: isStreamingWorkflow,
-          submitButtonLabel: "Run",
-          onSubmit: (data) => {
-            setPayload(data);
-            handleExecuteWorkflow(data);
-          }
-        }
-      ) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          className: "w-full",
-          variant: "light",
-          disabled: isRunning,
-          onClick: () => handleExecuteWorkflow(null),
-          children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
-        }
-      ) }),
-      !isStreamingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
-        const stepDefinition = workflow.allSteps[step.stepId];
-        if (!stepDefinition || stepDefinition.isWorkflow) return null;
-        const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : 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(
-            WorkflowInputData,
-            {
-              schema: stepSchema,
-              isSubmitLoading: isResumingWorkflow,
-              submitButtonLabel: "Resume",
-              onSubmit: (data) => {
-                const stepIds = step.stepId?.split(".");
-                handleResumeWorkflow({
-                  stepId: stepIds,
-                  runId: step.runId,
-                  suspendPayload: step.suspendPayload,
-                  resumeData: data});
-              }
-            }
-          )
-        ] }, step.stepId);
-      }),
-      result?.runId && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "light",
-          className: "w-full",
-          size: "lg",
-          onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun || result?.payload?.workflowState?.status && doneStatuses.includes(result?.payload?.workflowState?.status),
-          children: [
-            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
-            cancelResponse?.message || "Cancel Workflow Run"
-          ]
-        }
-      ),
-      hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-          /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, { status, output }]) => {
-            return /* @__PURE__ */ jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
-          }) })
-        ] })
+  if (!minStartTime || !maxEndTime) return [];
+  const totalDurationMs = (maxEndTime - minStartTime) / 1e3;
+  return buildTree(orderedTree, minStartTime, totalDurationMs);
+};
+
+const NestedSpans = ({ spanNodes }) => {
+  const { span: activeSpan, setSpan } = useContext(TraceContext);
+  return /* @__PURE__ */ jsx(Spans, { children: spanNodes.map((spanNode) => {
+    const isActive = spanNode.id === activeSpan?.id;
+    return /* @__PURE__ */ jsx(
+      Span,
+      {
+        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spanNodes: spanNode.children }),
+        durationMs: spanNode.duration,
+        offsetMs: spanNode.offset,
+        variant: getSpanVariant(spanNode),
+        isActive,
+        onClick: () => setSpan(spanNode),
+        totalDurationMs: spanNode.totalDurationMs,
+        children: spanNode.name
+      },
+      spanNode.id
+    );
+  }) });
+};
+function SpanView({ trace }) {
+  const { span: activeSpan, setSpan } = useContext(TraceContext);
+  const tree = createSpanTree(trace);
+  return /* @__PURE__ */ jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsx(
+    Trace,
+    {
+      name: node.name,
+      durationMs: node.duration,
+      totalDurationMs: node.totalDurationMs,
+      spans: /* @__PURE__ */ jsx(NestedSpans, { spanNodes: node.children }),
+      variant: getSpanVariant(node),
+      isActive: node.id === activeSpan?.id,
+      onClick: () => setSpan(node)
+    }
+  )) });
+}
+
+const Header = ({ children, border = true }) => {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: clsx("h-header-default z-50 flex w-full items-center gap-[18px] bg-transparent px-5", {
+        "border-b-sm border-border1": border
+      }),
+      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 });
+};
+
+function TraceDetails() {
+  const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = useContext(TraceContext);
+  const actualTrace = traces[currentTraceIndex];
+  if (!actualTrace || !trace) return null;
+  const hasFailure = trace.some((span) => span.status.code !== 0);
+  return /* @__PURE__ */ jsxs("aside", { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "bg-transparent border-none",
+            onClick: nextTrace,
+            disabled: currentTraceIndex === traces.length - 1,
+            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
+        /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
+          "Trace ",
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
+        ] }),
+        hasFailure && /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" })
       ] })
     ] }),
-    result && /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsx(WorkflowJsonDialog, { result }) })
+    /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
   ] });
 }
-const WorkflowJsonDialog = ({ result }) => {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Button, { variant: "light", onClick: () => setOpen(true), className: "w-full", size: "lg", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, { className: "text-icon3" }) }),
-      "Open Workflow Execution (JSON)"
-    ] }),
-    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
-    ] }) }) })
-  ] });
-};
 
-const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+function formatDuration(duration, fixedPoint = 2) {
+  const durationInSecs = duration / 1e3;
+  return durationInSecs.toFixed(fixedPoint);
+}
+function formatOtelTimestamp(otelTimestamp) {
+  const date = new Date(otelTimestamp / 1e3);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  }).format(date);
+}
+function formatOtelTimestamp2(otelTimestamp) {
+  const date = new Date(otelTimestamp / 1e6);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  }).format(date);
+}
+function transformKey(key) {
+  if (key.includes(".argument.")) {
+    return `Input`;
   }
-  if (runs.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 text-center", children: "No previous run" }) });
+  if (key.includes(".result")) {
+    return "Output";
   }
-  return /* @__PURE__ */ jsx("ol", { className: "pb-10", children: runs.map((run) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: () => onPressRun({ workflowId, runId: run.runId }),
-      className: clsx("px-3 py-2 border-b-sm border-border1 block w-full hover:bg-surface4 text-left", {
-        "bg-surface4": run.runId === runId
-      }),
-      children: [
-        /* @__PURE__ */ jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run.runId }),
-        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
-      ]
+  const newKey = key.split(".").join(" ").split("_").join(" ").replaceAll("ai", "AI");
+  return newKey.substring(0, 1).toUpperCase() + newKey.substring(1);
+}
+function cleanString(string) {
+  return string.replace(/\\n/g, "").replace(/\n/g, "").replace(/\s+/g, " ").trim();
+}
+const allowedAiSpanAttributes = [
+  "operation.name",
+  "ai.operationId",
+  "ai.model.provider",
+  "ai.model.id",
+  "ai.prompt.format",
+  "ai.prompt.messages",
+  "ai.prompt.tools",
+  "ai.prompt.toolChoice",
+  "ai.settings.toolChoice",
+  "ai.schema",
+  "ai.settings.output",
+  "ai.response.object",
+  "ai.response.text",
+  "ai.response.timestamp",
+  "componentName",
+  "ai.usage.promptTokens",
+  "ai.usage.completionTokens"
+];
+
+function SpanDetail() {
+  const { span, setSpan, trace, setIsOpen } = useContext(TraceContext);
+  if (!span || !trace) return null;
+  const prevSpan = () => {
+    const currentIndex = trace.findIndex((t) => t.id === span.id);
+    if (currentIndex !== -1 && currentIndex < trace.length - 1) {
+      setSpan(trace[currentIndex + 1]);
     }
-  ) }, run.runId)) });
+  };
+  const nextSpan = () => {
+    const currentIndex = trace.findIndex((t) => t.id === span.id);
+    if (currentIndex !== -1 && currentIndex > 0) {
+      setSpan(trace[currentIndex - 1]);
+    }
+  };
+  const SpanIcon = spanIconMap[getSpanVariant(span)];
+  const variantClass = spanVariantClasses[getSpanVariant(span)];
+  return /* @__PURE__ */ jsxs("aside", { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: nextSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
+        "Span ",
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, {}) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+      /* @__PURE__ */ jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsx(SpanIcon, { className: variantClass }) }),
+        span.name
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
+        toSigFigs(span.duration, 3),
+        "ms"
+      ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
+        "Failed in ",
+        toSigFigs(span.duration, 3),
+        "ms"
+      ] }) }),
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.id }),
+        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Created at" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.startTime ? formatOtelTimestamp(span.startTime) : "" })
+      ] }),
+      span.attributes && /* @__PURE__ */ jsx(Attributes, { attributes: span.attributes }),
+      span.events?.length > 0 && /* @__PURE__ */ jsx(Events, { span })
+    ] })
+  ] });
+}
+function Attributes({ attributes }) {
+  if (!attributes) return null;
+  const entries = Object.entries(attributes);
+  if (entries.length === 0) return null;
+  const keysToHide = ["http.request_id", "componentName"];
+  return /* @__PURE__ */ jsx("div", { children: entries.filter(([key]) => !keysToHide.includes(key)).map(([key, val]) => {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(key) }),
+      /* @__PURE__ */ jsx(AttributeValue, { value: val })
+    ] }, key);
+  }) });
+}
+const AttributeValue = ({ value }) => {
+  if (!value)
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: "N/A" });
+  if (typeof value === "number" || typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
+  if (typeof value === "object") {
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: value });
+  }
+  try {
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
+  } catch {
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
 };
+function Events({ span }) {
+  if (!span.events) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6 pb-2", children: "Events" }),
+    span.events.map((event) => {
+      const isLast = event === span.events[span.events.length - 1];
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2 pb-2", children: [
+            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Name" }),
+            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.name }),
+            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Time" }),
+            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "N/A" })
+          ] }),
+          event.attributes?.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: event.attributes.filter((attribute) => attribute !== null).map((attribute) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(attribute.key) }),
+            /* @__PURE__ */ jsx(AttributeValue, { value: attribute.value })
+          ] }, attribute.key)) }) : null
+        ] }, event.name),
+        !isLast && /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" })
+      ] }, event.name);
+    })
+  ] });
+}
 
-const columns = [
-  {
-    id: "name",
-    header: "Name",
-    cell: ({ row }) => {
-      const { Link } = useLinkComponent();
-      return /* @__PURE__ */ jsx(
-        EntryCell,
-        {
-          icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
-          name: /* @__PURE__ */ jsx(Link, { href: row.original.link, children: row.original.name }),
-          description: void 0,
-          meta: void 0
-        }
-      );
-    },
-    meta: {
-      width: "auto"
+const TracesSidebar = ({ onResize }) => {
+  return /* @__PURE__ */ jsx(
+    MastraResizablePanel,
+    {
+      className: "h-full absolute right-0 inset-y-0 bg-surface2",
+      defaultWidth: 80,
+      minimumWidth: 50,
+      maximumWidth: 80,
+      setCurrentWidth: onResize,
+      children: /* @__PURE__ */ jsxs("div", { className: "h-full grid grid-cols-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsx(TraceDetails, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-40px)] overflow-x-scroll w-full border-l border-border1", children: /* @__PURE__ */ jsx(SpanDetail, {}) })
+      ] })
     }
-  },
-  {
-    id: "stepsCount",
-    header: "Steps",
-    size: 300,
-    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
-      /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(Footprints, {}), className: "!h-button-md", children: [
-        row.original.stepsCount,
-        " step",
-        row.original.stepsCount > 1 ? "s" : ""
-      ] }),
-      row.original.isLegacy ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-foreground/80 !h-button-md", children: "Legacy" }) : null
-    ] }) })
-  }
-];
+  );
+};
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }) {
-  const { navigate } = useLinkComponent();
-  const workflowData = useMemo(() => {
-    const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
-      const workflow = workflows?.[key];
-      return {
-        id: key,
-        name: workflow?.name || "N/A",
-        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
-        isLegacy: false,
-        link: computeLink(key)
-      };
-    });
-    const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
-      const workflow = legacyWorkflows?.[key];
-      return {
-        id: key,
-        name: workflow?.name || "N/A",
-        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
-        isLegacy: true,
-        link: computeLink(key)
-      };
-    });
-    return [..._workflowsData, ...legacyWorkflowsData];
-  }, [workflows, legacyWorkflows]);
-  const table = useReactTable({
-    data: workflowData,
-    columns,
-    getCoreRowModel: getCoreRowModel()
-  });
-  if (isLoading) return /* @__PURE__ */ jsx(WorkflowTableSkeleton, {});
-  const ths = table.getHeaderGroups()[0];
-  const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0) {
-    return /* @__PURE__ */ jsx(EmptyWorkflowsTable, {});
+function TracesView({
+  isLoading,
+  error,
+  traces,
+  runId,
+  stepName,
+  className,
+  setEndOfListElement
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(TracesViewSkeleton, {});
   }
-  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) });
+  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(
+    TracesViewInner,
+    {
+      traces,
+      error,
+      runId,
+      stepName,
+      className,
+      setEndOfListElement
+    }
+  ) });
 }
-const WorkflowTableSkeleton = () => /* @__PURE__ */ jsxs(Table, { children: [
-  /* @__PURE__ */ jsxs(Thead, { children: [
-    /* @__PURE__ */ jsx(Th, { children: "Name" }),
-    /* @__PURE__ */ jsx(Th, { width: 300, children: "Steps" })
-  ] }),
-  /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsx(Cell, { width: 300, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) })
-  ] }, index)) })
-] });
-const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
-  EmptyState,
-  {
-    iconSlot: /* @__PURE__ */ jsx(WorkflowCoinIcon, {}),
-    titleSlot: "Configure Workflows",
-    descriptionSlot: "Mastra workflows are not configured yet. You can find more information in the documentation.",
-    actionSlot: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        size: "lg",
-        className: "w-full",
-        variant: "light",
-        as: "a",
-        href: "https://mastra.ai/en/docs/workflows/overview",
-        target: "_blank",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(WorkflowIcon, {}) }),
-          "Docs"
-        ]
-      }
-    )
-  }
-) });
+function TracesViewInner({ traces, error, runId, stepName, className, setEndOfListElement }) {
+  const hasRunRef = useRef(false);
+  const [sidebarWidth, setSidebarWidth] = useState(100);
+  const { isOpen: open, setTrace, setIsOpen, setSpan } = useContext(TraceContext);
+  useEffect(() => {
+    if (hasRunRef.current) return;
+    if (!runId || !stepName) return;
+    const matchingTrace = traces.find((trace) => trace.runId === runId);
+    if (!matchingTrace) return;
+    const matchingSpan = matchingTrace.trace.find((span) => span.name.includes(stepName));
+    if (!matchingSpan) return;
+    setTrace(matchingTrace.trace);
+    setSpan(matchingSpan);
+    setIsOpen(true);
+    hasRunRef.current = true;
+  }, [runId, traces, setTrace]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-scroll w-full", children: [
+      /* @__PURE__ */ jsx(TracesTable, { traces, error }),
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, ref: setEndOfListElement })
+    ] }),
+    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+  ] });
+}
+const TracesViewSkeleton = () => {
+  return /* @__PURE__ */ jsx("div", { className: "h-full relative overflow-hidden flex", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }) }) });
+};
 
 const DataTable = ({
   columns,
@@ -13140,47 +13756,6 @@ function devUIStyleRequested(name) {
   }
 }
 
-const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
-};
-const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      href,
-      prefetch,
-      to,
-      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
-      children
-    }
-  );
-};
-const ThreadList = ({ children }) => {
-  return /* @__PURE__ */ jsx("ol", { children });
-};
-const ThreadItem = ({ children, isActive }) => {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
-        isActive && "bg-surface4"
-      ),
-      children
-    }
-  );
-};
-const ThreadDeleteButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
-      onClick,
-      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-icon3" }) })
-    }
-  );
-};
-
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -13363,5 +13938,287 @@ function usePolling({
   };
 }
 
-export { AgentChat, AgentCoinIcon, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentTraces, AgentsTable, AgentsTableSkeleton, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTraces, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, providerMapToIcon, useAgentSettings, useCurrentRun, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useWorkingMemory };
+const useInView = () => {
+  const [inView, setInView] = useState(false);
+  const setRef = useCallback((node) => {
+    if (node) {
+      const observer = new IntersectionObserver(([entry]) => {
+        setInView(entry.isIntersecting);
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+  }, []);
+  return { inView, setRef };
+};
+
+const PlaygroundQueryClient = ({ children }) => {
+  const queryClient = new QueryClient();
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
+};
+
+const formatRelativeTime = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
+  return date.toLocaleDateString();
+};
+const MemorySearch = ({
+  searchMemory,
+  onResultClick,
+  className,
+  currentThreadId,
+  chatInputValue
+}) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [error, setError] = useState(null);
+  const searchTimeoutRef = useRef(void 0);
+  const dropdownRef = useRef(null);
+  const prevThreadIdRef = useRef(currentThreadId);
+  const lastSearchTimeRef = useRef(0);
+  const pendingSearchRef = useRef(null);
+  const handleSearch = useCallback(
+    async (searchQuery) => {
+      if (!searchQuery.trim()) {
+        setError(null);
+        return;
+      }
+      setIsSearching(true);
+      setError(null);
+      try {
+        const response = await searchMemory(searchQuery);
+        setResults(response.results);
+        setIsOpen((prev) => prev || response.results.length > 0);
+      } catch (err) {
+        setError("Failed to search memory");
+        console.error("Memory search error:", err);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchMemory]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      setQuery(value);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (value.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(value);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = value;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    },
+    [handleSearch]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+        }
+        handleSearch(query);
+      }
+    },
+    [query, handleSearch]
+  );
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
+      handleSearch(query);
+    }
+    prevThreadIdRef.current = currentThreadId;
+  }, [currentThreadId, query, handleSearch]);
+  useEffect(() => {
+    if (chatInputValue !== void 0 && chatInputValue !== query) {
+      setQuery(chatInputValue);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (chatInputValue.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(chatInputValue);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = chatInputValue;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    }
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [chatInputValue]);
+  const handleResultClick = (messageId, threadId) => {
+    onResultClick?.(messageId, threadId);
+  };
+  const clearSearch = () => {
+    setQuery("");
+    setResults([]);
+    setIsOpen(false);
+    setError(null);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+  };
+  const truncateContent = (content, maxLength = 100) => {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + "...";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: query,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Search memory...",
+          className: "pl-10 pr-10 bg-surface3 border-border1"
+        }
+      ),
+      query && /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          onClick: clearSearch,
+          variant: "ghost",
+          size: "sm",
+          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
+      'No results found for "',
+      query,
+      '"'
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => handleResultClick(result.id, result.threadId),
+        className: cn(
+          "w-full px-4 py-3 hover:bg-surface4 transition-colors duration-150 text-left border-b border-border1 last:border-b-0",
+          result.threadId !== currentThreadId && "border-l-2 border-l-blue-400"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs font-medium px-2 py-0.5 rounded",
+                    result.role === "user" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400"
+                  ),
+                  children: result.role
+                }
+              ),
+              /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
+              result.threadTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  Txt,
+                  {
+                    variant: "ui-xs",
+                    className: cn(
+                      "truncate max-w-[150px]",
+                      result.threadId !== currentThreadId ? "text-blue-400 font-medium" : "text-icon3"
+                    ),
+                    title: result.threadTitle,
+                    children: [
+                      "• ",
+                      result.threadTitle
+                    ]
+                  }
+                ),
+                result.threadId !== currentThreadId && /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-blue-400" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
+          ] }) }),
+          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) })
+        ] })
+      },
+      result.id
+    )) }) })
+  ] });
+};
+
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, ChatThreads, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SettingsIcon, SlashIcon, Tab, TabContent, TabList, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatOtelTimestamp, formatOtelTimestamp2, providerMapToIcon, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map