@mastra/playground-ui 6.1.0 → 6.1.1-alpha.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Fragment as Fragment$1, Suspense, useId, startTransition } from 'react';
+import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Fragment as Fragment$1, Suspense, useId, startTransition, isValidElement } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, EditIcon, LoaderCircle, ExternalLinkIcon, Users, Brain, NetworkIcon, SearchIcon, TriangleAlertIcon, XIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, ArrowRightIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, EditIcon, LoaderCircle, ExternalLinkIcon, Users, Brain, NetworkIcon, SearchIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, HashIcon, PanelLeftIcon } 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';
@@ -13,10 +13,10 @@ import '@assistant-ui/react-markdown/styles/dot.css';
 import remarkGfm from 'remark-gfm';
 import { makePrismAsyncLightSyntaxHighlighter } from '@assistant-ui/react-syntax-highlighter';
 import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { jsonLanguage } from '@codemirror/lang-json';
+import { jsonLanguage, json } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { toast } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
@@ -57,8 +57,10 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/runtime-context';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import { VisuallyHidden as VisuallyHidden$1 } from '@radix-ui/react-visually-hidden';
 import * as HoverCard from '@radix-ui/react-hover-card';
+import { format as format$1 } from 'date-fns/format';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 
@@ -4308,7 +4310,7 @@ function CopyButton({ content, copyMessage, className }) {
   );
 }
 
-const useCodemirrorTheme$1 = () => {
+const useCodemirrorTheme$2 = () => {
   return useMemo(
     () => draculaInit({
       settings: {
@@ -4326,7 +4328,7 @@ const useCodemirrorTheme$1 = () => {
 };
 const SyntaxHighlighter$2 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
     /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2" }),
     /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
@@ -5577,7 +5579,7 @@ const Button$1 = ({ className, as, size = "md", variant = "default", ...props })
   );
 };
 
-const useCodemirrorTheme = () => {
+const useCodemirrorTheme$1 = () => {
   return useMemo(
     () => draculaInit({
       settings: {
@@ -5595,12 +5597,12 @@ const useCodemirrorTheme = () => {
 };
 const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
 };
 
 const CodeDialogContent = ({ data }) => {
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   if (typeof data !== "string") {
     return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
@@ -5658,7 +5660,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
   const [eventData, setEventData] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: eventData });
   const handleSendEvent = async () => {
     let data;
@@ -6522,7 +6524,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-const DatePicker = ({
+const DatePicker$1 = ({
   value,
   setValue,
   children,
@@ -6688,7 +6690,7 @@ const DateField = ({ inputProps, field, error, id }) => {
     }
   }, [field]);
   return /* @__PURE__ */ jsx(
-    DatePicker,
+    DatePicker$1,
     {
       id,
       className: error ? "border-destructive" : "",
@@ -6707,7 +6709,7 @@ const DateField = ({ inputProps, field, error, id }) => {
   );
 };
 
-const Select = SelectPrimitive.Root;
+const Select$1 = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
@@ -6769,7 +6771,7 @@ SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectField$1 = ({ field, inputProps, error, id, value }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxs(
-    Select,
+    Select$1,
     {
       ...props,
       onValueChange: (value2) => {
@@ -7807,7 +7809,7 @@ const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel,
   ] });
 };
 const SyntaxHighlighter = ({ data, onChange }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   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 })
@@ -10690,7 +10692,7 @@ const AgentAdvancedSettings = () => {
   const [providerOptionsValue, setProviderOptionsValue] = useState("");
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState(null);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: providerOptionsValue });
   const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
   useEffect(() => {
@@ -11530,7 +11532,7 @@ const EmptyAgentsTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-f
 const RuntimeContext = () => {
   const { runtimeContext, setRuntimeContext } = usePlaygroundStore();
   const [runtimeContextValue, setRuntimeContextValue] = useState("");
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: runtimeContextValue });
   const runtimeContextStr = JSON.stringify(runtimeContext);
   useEffect(() => {
@@ -11999,7 +12001,7 @@ const AgentMetadataModelSwitcher = ({
   const filteredModels = allModels.filter((model2) => model2.model.includes(selectedModel));
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsxs(
-      Select,
+      Select$1,
       {
         value: model?.provider ?? selectedProvider,
         onValueChange: setSelectedProvider,
@@ -14034,7 +14036,7 @@ function InputField({
   ...props
 }) {
   const LabelWrapper = ({ children }) => {
-    return labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children }) : children;
+    return labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden$1, { children }) : children;
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -14067,10 +14069,11 @@ function InputField({
             value,
             className: cn(
               "flex grow items-center cursor-pointer text-[0.875rem] text-[rgba(255,255,255,0.8)] border border-[rgba(255,255,255,0.15)] leading-none rounded-lg bg-transparent min-h-[2.5rem] px-[0.75rem] py-[0.5rem] w-full",
+              "focus:outline-none focus:shadow-[inset_0_0_0_1px_#18fb6f]",
               "placeholder:text-icon3 placeholder:text-[.8125rem]",
               {
                 "cursor-not-allowed opacity-50": disabled,
-                "border-red-800": error || errorMsg
+                "border-red-800 focus:border-[rgba(255,255,255,0.15)]": error || errorMsg
               }
             ),
             "data-testid": testId,
@@ -14124,6 +14127,7 @@ function TextareaField({
           {
             className: cn(
               "flex w-full items-center leading-[1.6] text-[0.875rem] text-[rgba(255,255,255,0.7)] border border-[rgba(255,255,255,0.15)] rounded-lg bg-transparent py-[0.5rem] px-[0.75rem] min-h-[6rem]",
+              "focus:outline-none focus:shadow-[inset_0_0_0_1px_#18fb6f]",
               { "cursor-not-allowed opacity-50": disabled }
             ),
             "data-testid": testId,
@@ -14137,28 +14141,32 @@ function TextareaField({
   );
 }
 
-const Button = ({ className, as, variant = "outline", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: cn(
-        "text-[.875rem] inline-flex items-center justify-center rounded-lg px-[1rem] gap-[.75rem] leading-0 border bg-transparent text-[rgba(255,255,255,0.7)]",
-        "[&:not(:disabled):hover]:border-[rgba(255,255,255,0.25)] [&:not(:disabled):hover]:text-[rgba(255,255,255,0.9)]",
-        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:mx-[-0.3em] [&>svg]:opacity-70",
-        className,
-        {
-          "cursor-not-allowed opacity-50": props.disabled,
-          "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
-          "min-h-[2rem]": variant === "ghost",
-          "min-h-[2.5rem]": variant !== "ghost",
-          "border-[rgba(255,255,255,0.15)]": variant === "outline"
-        }
-      ),
-      ...props
-    }
-  );
-};
+const Button = React__default.forwardRef(
+  ({ className, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          "text-[.875rem] inline-flex items-center justify-center rounded-lg px-[1rem] gap-[.75rem] leading-0 border bg-transparent text-[rgba(255,255,255,0.7)] whitespace-nowrap",
+          "[&:not(:disabled):hover]:border-[rgba(255,255,255,0.25)] [&:not(:disabled):hover]:text-[rgba(255,255,255,0.9)]",
+          "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:mx-[-0.3em] [&>svg]:opacity-70 [&>svg]:shrink-0",
+          "focus:outline-none focus:shadow-[inset_0_0_0_1px_rgba(24,251,111,0.75)]",
+          className,
+          {
+            "cursor-not-allowed opacity-50": props.disabled,
+            "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
+            "min-h-[2rem]": variant === "ghost",
+            "min-h-[2.5rem]": variant !== "ghost",
+            "border-[rgba(255,255,255,0.15)]": variant === "outline"
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 
 function FormActions({
   children,
@@ -14206,7 +14214,7 @@ function SelectField({
     "div",
     {
       className: cn(
-        "flex gap-[.5rem]",
+        "flex gap-[.5rem] items-center",
         {
           "grid-rows-[auto_1fr]": label,
           "grid-rows-[auto_1fr_auto]": helpMsg
@@ -14218,18 +14226,19 @@ function SelectField({
           label,
           required && /* @__PURE__ */ jsx("i", { className: "text-icon2", children: "(required)" })
         ] }),
-        /* @__PURE__ */ jsxs(Select, { name, value, onValueChange, disabled, children: [
+        /* @__PURE__ */ jsxs(Select$1, { name, value, onValueChange, disabled, children: [
           /* @__PURE__ */ jsx(
             SelectTrigger,
             {
               id: "select-dataset",
               className: cn(
-                "w-full border border-[rgba(255,255,255,0.15)] rounded-lg min-h-[2.5rem] min-w-[5rem] gap-[0.5rem]"
+                "w-full border border-[rgba(255,255,255,0.15)] rounded-lg min-h-[2.5rem] min-w-[5rem] gap-[0.5rem]",
+                "focus:outline-none focus:shadow-[inset_0_0_0_1px_rgba(24,251,111,0.75)]"
               ),
               children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
             }
           ),
-          /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.label)) })
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap truncate block", children: option.label }) }, option.label)) })
         ] }),
         helpMsg && /* @__PURE__ */ jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg })
       ]
@@ -14276,7 +14285,7 @@ function SliderField({
               ...props,
               children: [
                 /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-[4px] w-full grow overflow-hidden rounded-full bg-gray-600", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-gray-400" }) }),
-                /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full bg-gray-400 shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+                /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full bg-gray-400 shadow transition-colors focus:outline-none focus:bg-[#18fb6f] disabled:pointer-events-none disabled:opacity-50" })
               ]
             }
           ),
@@ -14356,7 +14365,7 @@ function RadioGroupField({
                       /* @__PURE__ */ jsx(
                         RadioGroupPrimitive.Item,
                         {
-                          className: "aspect-square h-4 w-4 rounded-full border border-primary text-primary disabled:cursor-not-allowed disabled:opacity-50 ",
+                          className: "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 ",
                           value: option.value,
                           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" }) })
                         }
@@ -14392,7 +14401,7 @@ function RadioGroupField({
 function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoading }) {
   const { Link } = useLinkComponent();
   const LabelWrapper = ({ children }) => {
-    return labelsAreHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children }) : children;
+    return labelsAreHidden ? /* @__PURE__ */ jsx(VisuallyHidden$1, { children }) : children;
   };
   if (!data || data.length === 0) {
     return null;
@@ -14433,7 +14442,8 @@ function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoadi
           className: cn(
             "flex flex-wrap gap-[.5rem] py-[0.25rem] min-h-[2.25rem] text-[0.875rem] items-center text-icon5 text-wrap",
             "[&>a]:text-icon5 [&>a]:max-w-full [&>a]:w-auto truncate [&>a]:bg-[#222] [&>a]:transition-colors [&>a]:flex [&>a]:items-center [&>a]:gap-[0.5rem] [&>a]:pt-[0.15rem] [&>a]:pb-[0.2rem] [&>a]:px-[.5rem] [&>a]:rounded-md [&>a]:text-[0.875rem] [&>a]:min-h-[1.75rem] [&>a]:leading-0 ",
-            "[&>a:hover]:text-icon6 [&>a:hover]:bg-surface6"
+            "[&>a:hover]:text-icon6 [&>a:hover]:bg-surface6",
+            "[&>a>svg]:w-[1em] [&>a>svg]:h-[1em] [&>a>svg]:text-icon3 [&>a>svg]:ml-[-0.5em]"
           ),
           children: isLoading ? /* @__PURE__ */ jsx(
             "span",
@@ -14443,7 +14453,11 @@ function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoadi
               children: " "
             }
           ) : /* @__PURE__ */ jsx(Fragment, { children: isValueItemArray ? value?.map((item) => {
-            return item.path ? /* @__PURE__ */ jsx(RelationWrapper, { description: item.description, children: /* @__PURE__ */ jsx(Link, { href: item.path, children: item?.name }) }, item.id) : /* @__PURE__ */ jsx("span", { children: item?.name }, item.id);
+            return item.path ? /* @__PURE__ */ jsx(RelationWrapper, { description: item.description, children: /* @__PURE__ */ jsxs(Link, { href: item.path, children: [
+              item?.name,
+              " ",
+              /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            ] }) }, item.id) : /* @__PURE__ */ jsx("span", { children: item?.name }, item.id);
           }) : /* @__PURE__ */ jsx(Fragment, { children: value ? value : /* @__PURE__ */ jsx("span", { className: "text-icon3 text-[0.75rem]", children: "n/a" }) }) })
         }
       )
@@ -14468,784 +14482,1659 @@ function RelationWrapper({ description, children }) {
   ] }) : children;
 }
 
-function TemplatesTools({
-  tagOptions,
-  selectedTag,
-  providerOptions,
-  selectedProvider,
-  onTagChange,
-  onProviderChange,
-  searchTerm,
-  onSearchChange,
-  onReset,
-  className,
-  isLoading
-}) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs(
+function EntryListTextCell({ children, isLoading }) {
+  const randomWidth = useMemo(() => {
+    return Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
+      style: { width: `${randomWidth}%` }
+    }
+  ) : children });
+}
+function EntryListStatusCell({ status }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
+    status ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(
-          "h-[6.5rem] flex items-center gap-[2rem]",
-          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsx("div", {})
-        ]
+        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
+          "bg-green-600": status === "success",
+          "bg-red-700": status === "failed"
+        })
       }
-    );
+    ) : /* @__PURE__ */ jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
+    /* @__PURE__ */ jsxs(VisuallyHidden$1, { children: [
+      "Status: ",
+      status ? status : "not provided"
+    ] })
+  ] });
+}
+
+function getColumnTemplate(columns) {
+  if (!columns || columns.length === 0) {
+    return "";
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
-    /* @__PURE__ */ jsx(
-      SearchField,
-      {
-        label: "Search templates",
-        value: searchTerm,
-        onChange: (e) => onSearchChange?.(e.target.value),
-        placeholder: "Search Template"
-      }
-    ),
-    /* @__PURE__ */ jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
-    /* @__PURE__ */ jsx(
-      SelectField,
+  return columns?.map((column) => {
+    return column.size;
+  }).join(" ");
+}
+
+function EntryListItem({
+  item,
+  selectedItemId,
+  onClick,
+  children,
+  columns,
+  isLoading
+}) {
+  const isSelected = selectedItemId === item.id;
+  const handleClick = () => {
+    return onClick && onClick(item?.id);
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cn("border-b text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]", {
+        "bg-surface5": isSelected
+      }),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClick,
+          className: cn("grid w-full px-[1.5rem] gap-[2rem] text-left items-center min-h-[3rem]", {
+            "hover:bg-surface5": !isLoading
+          }),
+          style: { gridTemplateColumns: getColumnTemplate(columns) },
+          disabled: isLoading,
+          children
+        }
+      )
+    }
+  );
+}
+
+function EntryList({
+  items: dataItems,
+  selectedItemId,
+  onItemClick,
+  isLoading,
+  isLoadingNextPage,
+  total,
+  page,
+  hasMore,
+  onNextPage,
+  onPrevPage,
+  perPage,
+  columns,
+  searchTerm,
+  setEndOfListElement
+}) {
+  const loadingItems = Array.from({ length: 3 }).map((_, index) => {
+    return {
+      id: `loading-${index + 1}`,
+      ...(columns || []).reduce(
+        (acc, col) => {
+          acc[col.name] = `...`;
+          return acc;
+        },
+        {}
+      )
+    };
+  });
+  const items = isLoading ? loadingItems : dataItems;
+  return /* @__PURE__ */ jsxs("div", { className: "grid mb-[3rem]", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg border border-border1  px-[1.5rem]"), children: /* @__PURE__ */ jsx(
+      "div",
       {
-        label: "Filter by provider",
-        value: selectedProvider,
-        onValueChange: onProviderChange,
-        options: providerOptions
+        className: cn("grid gap-[2rem] text-left uppercase py-[.75rem] text-icon3 text-[0.75rem]"),
+        style: { gridTemplateColumns: getColumnTemplate(columns) },
+        children: columns?.map((col) => /* @__PURE__ */ jsx("span", { children: col.label || col.name }, col.name))
       }
-    ),
-    onReset && /* @__PURE__ */ jsxs(Button, { onClick: onReset, children: [
-      "Reset ",
-      /* @__PURE__ */ jsx(XIcon, {})
+    ) }),
+    !isLoading && items?.length === 0 && /* @__PURE__ */ jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsx("p", { className: "text-icon3 text-[0.875rem] text-center h-[3.5rem] items-center flex justify-center", children: searchTerm ? `No results found for "${searchTerm}"` : "No entries found" }) }),
+    items?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("ul", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none overflow-y-auto", children: items.map((item) => {
+        return /* @__PURE__ */ jsx(
+          EntryListItem,
+          {
+            item,
+            selectedItemId,
+            onClick: isLoading ? void 0 : onItemClick,
+            columns,
+            isLoading,
+            children: (columns || []).map((col) => {
+              const isValidReactElement = isValidElement(item?.[col.name]);
+              return isValidReactElement ? item?.[col.name] : /* @__PURE__ */ jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, col.name);
+            })
+          },
+          item.id
+        );
+      }) }),
+      setEndOfListElement && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setEndOfListElement,
+          className: "text-[0.875rem] text-icon3 opacity-50 flex mt-[2rem] justify-center",
+          children: [
+            isLoadingNextPage && "Loading...",
+            !hasMore && !isLoadingNextPage && !isLoading && "No more data to load"
+          ]
+        }
+      ),
+      typeof page === "number" && typeof perPage === "number" && typeof total === "number" && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center text-icon3 text-[0.875rem] gap-[2rem]"), children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Page ",
+          page ? page + 1 : "1"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex gap-[1rem]",
+              "[&>button]:flex [&>button]:items-center [&>button]:gap-[0.5rem] [&>button]:text-icon4 [&>button:hover]:text-icon5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-[0.25rem] [&>button]:px-[0.5rem] [&>button]:rounded-md",
+              " [&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
+            ),
+            children: [
+              typeof page === "number" && page > 0 && /* @__PURE__ */ jsxs("button", { onClick: onPrevPage, disabled: page === 0, children: [
+                /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+                "Previous"
+              ] }),
+              hasMore && /* @__PURE__ */ jsxs("button", { onClick: onNextPage, disabled: !hasMore, children: [
+                "Next",
+                /* @__PURE__ */ jsx(ArrowRightIcon, {})
+              ] })
+            ]
+          }
+        )
+      ] })
     ] })
   ] });
 }
 
-function getRepoName(githubUrl) {
-  return githubUrl.replace(/\/$/, "").split("/").pop();
-}
-function Container({ children, className }) {
+function EntryListToolbar({ children, className }) {
   return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex justify-between bg-surface4 z-[1] mt-[1rem] mb-[1rem] rounded-lg px-[1.5rem] ", className),
+      children
+    }
+  );
+}
+
+function EntryListPageHeader({ title, description, icon, children }) {
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
-        className
+        "grid z-[1] top-0 gap-y-[0.5rem] text-icon4 bg-surface2 py-[3rem]",
+        "3xl:h-full 3xl:content-start 3xl:grid-rows-[auto_1fr] h-full 3xl:overflow-y-auto"
       ),
-      children
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-[1rem] w", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[.75em] items-center", "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:text-icon4"), children: [
+            icon,
+            /* @__PURE__ */ jsx("h1", { className: "text-icon6 text-[1.25rem]", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-[0.875rem]", children: description })
+        ] }),
+        children
+      ]
     }
   );
 }
 
-function TemplatesList({ templates, linkComponent, className, isLoading }) {
-  const LinkComponent = linkComponent || "a";
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
-    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
-    return /* @__PURE__ */ jsxs(
-      "article",
+function SideDialog({
+  dialogTitle,
+  dialogDescription,
+  isOpen,
+  onClose,
+  children,
+  variant = "default",
+  hasCloseButton = true,
+  className
+}) {
+  const isConfirmation = variant === "confirmation";
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    !isConfirmation && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-[0.25]") }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
       {
         className: cn(
-          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+          "fixed top-0 bottom-0 right-0 border-l border-border1 z-50 bg-surface4",
+          "w-[calc(100vw-20rem)] max-w-[50rem]",
+          "3xl:max-w-[60rem]",
+          "4xl:max-w-[50%]",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          {
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4": !isConfirmation,
+            "bg-surface2/70": isConfirmation
+          },
+          className
         ),
         children: [
-          /* @__PURE__ */ jsxs(
-            LinkComponent,
+          /* @__PURE__ */ jsxs(VisuallyHidden.Root, { children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { children: dialogTitle }),
+            /* @__PURE__ */ jsx(DialogPrimitive.Description, { children: dialogDescription })
+          ] }),
+          !isConfirmation && hasCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
             {
-              to: `/templates/${template.slug}`,
-              className: cn("grid [&:hover_p]:text-icon5", {
-                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
+              className: cn(
+                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute too-0 left-[-3.5rem] bg-surface4 text-icon4 border-l border-b border-border1",
+                "hover:surface5 hover:text-icon5"
+              ),
+              "aria-label": "Close",
+              children: isConfirmation ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("grid h-full", {
+                "grid-rows-[auto_1fr]": !isConfirmation
               }),
-              children: [
-                template.imageURL && /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden"), children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
-                    style: {
-                      backgroundImage: `url(${template.imageURL})`
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
-                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
-                      /* @__PURE__ */ jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
-                        hasMetaInfo && /* @__PURE__ */ jsxs(
-                          "ul",
-                          {
-                            className: cn(
-                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
-                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
-                            ),
-                            children: [
-                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
-                                /* @__PURE__ */ jsx(AgentIcon, {}),
-                                " ",
-                                template.agents.length
-                              ] }),
-                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
-                                /* @__PURE__ */ jsx(ToolsIcon, {}),
-                                " ",
-                                template.tools.length
-                              ] }),
-                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
-                                /* @__PURE__ */ jsx(NetworkIcon, {}),
-                                " ",
-                                template.networks.length
-                              ] }),
-                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
-                                /* @__PURE__ */ jsx(WorkflowIcon$1, {}),
-                                " ",
-                                template.workflows.length
-                              ] }),
-                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
-                                /* @__PURE__ */ jsx(McpServerIcon, {}),
-                                " ",
-                                template.mcp.length
-                              ] })
-                            ]
-                          }
-                        ),
-                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsx("small", { children: "|" }),
-                        /* @__PURE__ */ jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsx("span", { className: "", children: provider }, provider)) })
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: template.githubUrl,
-              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[0.5rem]  px-[0.5rem] py-[0.25rem] rounded bg-surface1 group-hover:bg-surface2 text-icon3 transition-colors group-hover:text-icon5 ", children: [
-                /* @__PURE__ */ jsx(GithubIcon, {}),
-                " ",
-                getRepoName(template.githubUrl)
-              ] })
+              children
             }
           )
         ]
-      },
-      template.slug
-    );
-  }) });
+      }
+    )
+  ] }) });
 }
 
-function TemplateInfo({
-  title,
-  description,
-  imageURL,
-  githubUrl,
-  isLoading,
-  infoData,
-  templateSlug
-}) {
-  const branchName = templateSlug ? `feat/install-template-${templateSlug}` : "feat/install-template-[slug]";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] lg:min-h-[4rem] items-center "), children: [
-      /* @__PURE__ */ jsxs(
-        "div",
+function SideDialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+}
+
+function SideDialogFooter({ children, onNext, onPrevious, showInnerNav }) {
+  const handleOnNext = () => {
+    onNext?.();
+  };
+  const handleOnPrevious = () => {
+    onPrevious?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-end gap-[1rem] px-[1.5rem] py-[1rem] min-h-[4rem] border-t border-border1",
         {
-          className: cn(
-            "text-[1.5rem] flex items-center gap-[0.75rem] ",
-            "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
-            {
-              "[&>svg]:opacity-20": isLoading
-            }
-          ),
-          children: [
-            /* @__PURE__ */ jsx(PackageIcon, {}),
-            /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn({
-                  "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
-                }),
-                children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : title
-              }
-            )
-          ]
+          "justify-between": showInnerNav
         }
       ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "w-full h-full bg-cover bg-center transition-scale duration-150 rounded-lg overflow-hidden min-h-[2rem] mt-[2rem] lg:mt-0",
-          style: {
-            backgroundImage: `url(${imageURL})`
-          }
-        }
-      )
+      children: [
+        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[1rem]"), children: [
+          /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            "Close"
+          ] }) }),
+          /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+            "Next",
+            /* @__PURE__ */ jsx(ArrowUpIcon, {})
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+            /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+            "Previous"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children })
+      ]
+    }
+  );
+}
+function SideDialogFooterGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-[1rem]", children });
+}
+
+function SideDialogContent({ children, className, isCentered, isFullHeight, variant }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-[3rem] py-[2rem] overflow-y-scroll", className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-[2rem] max-w-[50rem] w-full mx-auto pb-[1rem] ", {
+        "items-center justify-center h-full content-center": isCentered,
+        "min-h-full": isFullHeight,
+        "content-start": !isFullHeight && !isCentered
+      }),
+      children
+    }
+  ) });
+}
+function SideDialogSection({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid text-[0.875rem] text-icon5 gap-[1rem] justify-items-start",
+        "[&>h3]:text-icon3 [&>h3]:text-[1rem] [&>h3]:font-semibold [&>h3]:border-b [&>h3]:border-border1 [&>h3]:pb-[1rem] [&>h3]:pr-[1rem] [&>h3]:inline-flex [&>h3]:gap-[.5rem] [&>h3]:items-center",
+        "[&>h3>svg]:w-[1em] [&>h3>svg]:h-[1em] [&>h3>svg]:text-icon3"
+      ),
+      children
+    }
+  );
+}
+function SideDialogKeyValueList({ items, className }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-[2rem] gap-y-[.5rem] text-[0.875rem] content-start", className), children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("dt", { className: "text-icon3", children: [
+      item.key,
+      ":"
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] ", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid", children: [
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
-              "bg-surface4 rounded-lg ": isLoading
-            }),
-            children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : description
-          }
-        ),
-        !isLoading && templateSlug && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
-              "flex items-start gap-[0.75rem]"
-            ),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsx(InfoIcon$1, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
-                  /* @__PURE__ */ jsx(GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
+    /* @__PURE__ */ jsx("dd", { className: "text-icon4", children: item.value })
+  ] })) });
+}
+
+function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }) {
+  const handleOnNext = () => {
+    onNext?.();
+  };
+  const handleOnPrevious = () => {
+    onPrevious?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(`flex justify-between h-[3.5rem] items-center  text-icon5 text-[.875rem] pl-[1.5rem]`, className),
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-[2rem]", "[&_svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon3"), children: [
+        children,
+        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "|" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex gap-[1rem] items-baseline"
+                // '[&>button]:text-[0.875rem] [&>button]:flex [&>button]:items-center [&>button]:px-[0.5rem] [&>button]:py-[0.8rem] [&>button]:leading-[1]',
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+                  "Previous",
+                  /* @__PURE__ */ jsx(ArrowUpIcon, {})
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Branch name:" }),
-                    " ",
-                    /* @__PURE__ */ jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
+                /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+                  "Next",
+                  /* @__PURE__ */ jsx(ArrowDownIcon, {})
                 ] })
-              ] })
-            ]
-          }
-        ),
-        githubUrl && /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: githubUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex items-center gap-[.5rem] mt-auto text-icon3 text-[0.875rem] hover:text-icon5",
-            children: [
-              /* @__PURE__ */ jsx(GithubIcon, {}),
-              githubUrl?.split("/")?.pop()
-            ]
-          }
-        )
-      ] }),
-      infoData && /* @__PURE__ */ jsx(KeyValueList, { data: infoData, LinkComponent: Link, labelsAreHidden: true, isLoading })
-    ] })
-  ] });
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 }
 
-function TemplateForm({
-  providerOptions,
-  selectedProvider,
-  onProviderChange,
-  variables,
-  errors,
-  handleInstallTemplate,
-  handleVariableChange,
-  isLoadingEnvVars,
-  defaultModelProvider,
-  defaultModelId,
-  onModelUpdate
-}) {
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
-    /* @__PURE__ */ jsxs(
-      "h2",
-      {
-        className: cn(
-          "text-icon5 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
-          "[&>svg]:w-[1.2em] [&_svg]:h-[1.2em] [&_svg]:opacity-70 "
-        ),
-        children: [
-          "Install Template ",
-          /* @__PURE__ */ jsx(PackageOpenIcon, {})
-        ]
-      }
-    ),
+const useCodemirrorTheme = () => {
+  return useMemo(
+    () => draculaInit({
+      settings: {
+        fontFamily: "var(--geist-mono)",
+        fontSize: "0.8125rem",
+        lineHighlight: "transparent",
+        gutterBackground: "transparent",
+        gutterForeground: "#939393",
+        background: "transparent"
+      },
+      styles: [{ tag: [tags.className, tags.propertyName] }]
+    }),
+    []
+  );
+};
+function SideDialogCodeSection({ codeStr = "", title }) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = useState(false);
+  const hasMultilineText = useMemo(() => {
+    try {
+      const parsed = JSON.parse(codeStr);
+      return containsInnerNewline(parsed || "");
+    } catch {
+      return false;
+    }
+  }, [codeStr]);
+  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  return /* @__PURE__ */ jsx("section", { className: "border border-border1 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "border-b border-border1 last:border-b-0 grid", children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-[1rem] px-[1.5rem] border-b border-border1 grid grid-cols-[1fr_auto]", children: [
+      /* @__PURE__ */ jsx("h3", { children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end", children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content" }),
+        hasMultilineText && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {}) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(
-      SelectField,
+      "div",
       {
-        options: providerOptions,
-        label: "Provider",
-        onValueChange: onProviderChange,
-        value: selectedProvider,
-        placeholder: "Select a provider"
-      }
-    ),
-    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-[0.5rem]", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem] font-medium", children: "Select AI Model for Template Installation *" }),
-        /* @__PURE__ */ jsx("p", { className: "text-icon4 text-[0.75rem]", children: "This model will be used by the workflow to process and install the template" }),
-        /* @__PURE__ */ jsx(
-          AgentMetadataModelSwitcher,
-          {
-            defaultProvider: defaultModelProvider || "",
-            defaultModel: defaultModelId || "",
-            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
-            closeEditor: () => {
-            },
-            modelProviders: ["openai", "anthropic", "google", "xai", "groq"]
-          }
-        ),
-        (!defaultModelProvider || !defaultModelId) && /* @__PURE__ */ jsx("p", { className: "text-red-500 text-[0.75rem]", children: "Please select an AI model to continue" })
-      ] }),
-      /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center justify-center col-span-2 text-icon3 text-[0.75rem] gap-[1rem]",
-            "[&_svg]:opacity-50 [&_svg]:w-[1.1em] [&_svg]:h-[1.1em]",
-            "animate-in fade-in duration-300"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Spinner, {}),
-            " Loading variables..."
-          ]
-        }
-      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(
-          InputField,
-          {
-            name: `env-${key}`,
-            labelIsHidden: true,
-            label: "Key",
-            value: key,
-            disabled: true,
-            className: "w-full"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InputField,
-          {
-            name: key,
-            labelIsHidden: true,
-            label: "Value",
-            value,
-            onChange: handleVariableChange,
-            errorMsg: errors.includes(key) ? `Value is required.` : "",
-            autoComplete: "off",
-            className: "w-full"
-          }
-        )
-      ] }, key)) })
-    ] }),
-    selectedProvider && !isLoadingEnvVars && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: cn(
-          "flex items-center gap-[0.5rem] justify-center text-[0.875rem] w-full bg-surface5 min-h-[2.5rem] rounded-lg text-icon5 hover:bg-surface6 transition-colors",
-          "[&>svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon5"
-        ),
-        onClick: handleInstallTemplate,
-        disabled: !selectedProvider || !defaultModelProvider || !defaultModelId || errors.length > 0,
-        children: [
-          "Install ",
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ]
+        className: cn("bg-surface3 p-[1rem] overflow-auto text-icon4 text-[0.875rem] [&>div]:border-none break-all"),
+        children: codeStr && /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView.lineWrapping], theme, value: finalCodeStr })
       }
     )
   ] }) });
 }
-
-function getStatusIcon(status) {
-  switch (status) {
-    case "running":
-      return /* @__PURE__ */ jsx(Spinner, {});
-    case "success":
-      return /* @__PURE__ */ jsx(CheckIcon$1, {});
-    case "failed":
-      return /* @__PURE__ */ jsx(XIcon, {});
-    default:
-      return null;
+function containsInnerNewline(obj) {
+  if (typeof obj === "string") {
+    const idx = obj.indexOf("\n");
+    return idx !== -1 && idx !== obj.length - 1;
+  } else if (Array.isArray(obj)) {
+    return obj.some((item) => containsInnerNewline(item));
+  } else if (obj && typeof obj === "object") {
+    return Object.values(obj).some((value) => containsInnerNewline(value));
   }
+  return false;
 }
 
-function ProcessStepListItem({ stepId, step, isActive, position }) {
-  const formatStepTitle = (stepId2) => {
-    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
-  };
+function SideDialogHeading({ children, className, as = "h1" }) {
+  const HeadingTag = as;
+  return /* @__PURE__ */ jsx(
+    HeadingTag,
+    {
+      className: cn(
+        "flex items-start text-icon4 text-[1.125rem] font-semibold gap-[1rem]",
+        "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em]",
+        {
+          "text-[1.125rem]": as === "h1",
+          "text-[1rem]": as === "h2"
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function EntityMainHeader({
+  title,
+  description,
+  icon,
+  children,
+  isLoading,
+  className,
+  placement = "page"
+}) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "header",
     {
-      className: cn("grid gap-[1.5rem] grid-cols-[1fr_auto] py-[.75rem] px-[1rem] rounded-lg", {
-        "border border-dashed border-gray-500": isActive
-      }),
+      className: cn(
+        "grid gap-[.5rem]",
+        "[&>h1]:text-icon6 [&>h1]:text-[1.25rem] [&>h1]:font-normal [&>h1]:flex [&>h1]:items-center [&>h1]:gap-[0.5rem]",
+        "[&_svg]:w-[1.4rem] [&_svg]:h-[1.4rem] [&_svg]:text-icon3",
+        "[&>p]:text-icon4 [&>p]:text-[0.875rem] [&>p]:m-0",
+        { "pt-[2rem] pb-[2rem]": placement === "page" },
+        { "pt-[1.5em] pb-[1rem]": placement === "sidebar" },
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-[.5rem]", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-[0.875rem] text-icon5 min-w-[1.5rem] flex justify-end", children: [
-            position,
-            "."
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h4", { className: "text-[0.875rem] text-icon5", children: formatStepTitle(stepId) }),
-            step.description && /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] -mt-[0.125rem]", children: step.description })
-          ] })
+        /* @__PURE__ */ jsxs("h1", { children: [
+          icon && icon,
+          " ",
+          title
         ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center", {
-              "border border-gray-500 border-dashed": step.status === "pending",
-              "[&>svg]:text-white [&>svg]:w-[1rem] [&>svg]:h-[1rem]": step.status !== "running",
-              "w-[1.75rem] h-[1.75rem]": step.status === "running",
-              "bg-green-900": step.status === "success",
-              "bg-red-900": step.status === "failed"
-            }),
-            children: getStatusIcon(step.status)
-          }
-        )
+        description && /* @__PURE__ */ jsx("p", { children: description })
       ]
     }
   );
 }
 
-function ProcessStepList({ currentStep, steps = [], className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(
-    ProcessStepListItem,
+function PageHeader({ title, description, icon, className }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
     {
-      stepId: step.id,
-      step,
-      isActive: currentStep?.id === step.id,
-      position: idx + 1
-    },
-    step.id
-  )) });
+      className: cn(
+        "grid gap-[.5rem] pt-[2rem] pb-[2rem]",
+        "[&>h1]:text-icon6 [&>h1]:text-[1.25rem] [&>h1]:font-normal [&>h1]:flex [&>h1]:items-center [&>h1]:gap-[0.5rem]",
+        "[&_svg]:w-[1.4rem] [&_svg]:h-[1.4rem] [&_svg]:text-icon3",
+        "[&>p]:text-icon4 [&>p]:text-[0.875rem] [&>p]:m-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("h1", { children: [
+          icon && icon,
+          " ",
+          title
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { children: description })
+      ]
+    }
+  );
 }
 
-function ProcessStepProgressBar({ steps }) {
-  const totalSteps = steps.length;
-  const completedSteps = steps.filter((step) => step.status === "success").length;
-  return /* @__PURE__ */ jsxs("div", { className: "flex justify-center flex-col gap-[1rem] content-center w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex justify-end items-center relative h-[2rem] ", {
-            "bg-green-900": step.status === "success" && steps?.[idx - 1]?.status === "success"
-          }),
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-icon3 font-bold text-[0.75rem]",
-                {
-                  "border border-gray-500 border-dashed": step.status === "pending",
-                  "[&>svg]:text-surface4 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
-                  "bg-green-900 text-white": step.status === "success",
-                  "bg-red-900 text-white": step.status === "failed"
-                }
-              ),
-              children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1
-            }
-          )
-        },
-        step.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-xs text-icon3 text-center", children: [
-      completedSteps,
-      " of ",
-      totalSteps,
-      " steps completed"
-    ] })
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-[0.75rem] ",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-text font-medium ",
+        nav: "flex items-center",
+        nav_button_previous: cn(
+          "flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_next: cn("flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: cn(
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "!bg-primary/50 !text-primary-foreground hover:bg-primary rounded-md hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-primary/10 text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        head_cell: "text-[0.625rem] text-muted-foreground",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+
+function Select({ name, onChange, defaultValue, value, options, placeholder }) {
+  return /* @__PURE__ */ jsxs(Select$1, { name, onValueChange: onChange, value, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select..." }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: (options || []).map((option, idx) => /* @__PURE__ */ jsx(SelectItem, { value: `${idx}`, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[0.5rem] [&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:text-icon3", children: option }) }, option)) })
   ] });
 }
 
-function TemplateInstallation({ name, streamResult, runId, workflowInfo }) {
-  const phase = streamResult?.phase || "initializing";
-  const workflowState = streamResult?.payload?.workflowState;
-  const currentStep = streamResult?.payload?.currentStep;
-  const error = streamResult?.error;
-  const workflowSteps = workflowState?.steps || {};
-  const hasSteps = Object.keys(workflowSteps).length > 0;
-  const isUserVisibleStep = (stepId) => {
-    if (stepId === "input" || stepId.endsWith(".input")) return false;
-    if (stepId.startsWith("Mapping_") && /[0-9a-f]{8}/.test(stepId)) return false;
-    if (/[0-9a-f]{8,}/.test(stepId)) return false;
-    if (workflowInfo?.allSteps) {
-      return stepId in workflowInfo.allSteps;
+const hourOptions = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
+const minuteOptions = ["00", "15", "30", "45", "59"];
+const timePeriodOptions = ["AM", "PM"];
+function TimePicker({ defaultValue, onValueChange, className }) {
+  const [hour, setHour] = useState("12");
+  const [minute, setMinute] = useState("00");
+  const [timePeriod, setTimePeriod] = useState("AM");
+  useEffect(() => {
+    if (defaultValue) {
+      const timeRegex = /^(\d{1,2}):(\d{2})(?::\d{2})?\s*(AM|PM|am|pm)?$/;
+      const match = defaultValue.match(timeRegex);
+      if (match) {
+        let parsedHour = parseInt(match[1], 10);
+        const parsedMinute = parseInt(match[2], 10);
+        const period = match[3]?.toUpperCase();
+        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {
+          setHour(parsedHour.toString());
+          setMinute(parsedMinute === 0 ? "00" : parsedMinute.toString());
+          setTimePeriod(period || "AM");
+        }
+      }
     }
-    return true;
+  }, [defaultValue]);
+  const handleHourChange = (val) => {
+    setHour(val);
+    onValueChange(`${hourOptions[+val]}:${minute} ${timePeriod}`.trim());
   };
-  const visibleSteps = Object.entries(workflowSteps).filter(([stepId, _]) => isUserVisibleStep(stepId));
-  const totalSteps = visibleSteps.length;
-  const getPhaseMessage = () => {
-    switch (phase) {
-      case "initializing":
-        return "Preparing template installation...";
-      case "processing":
-        return `Installing ${name} template`;
-      case "completed":
-        return "Template installation completed!";
-      case "error":
-        return "Template installation failed";
-      default:
-        return "Installing template...";
-    }
+  const handleMinuteChange = (val) => {
+    setMinute(minuteOptions[+val]);
+    onValueChange(`${hour}:${minuteOptions[+val]} ${timePeriod}`.trim());
   };
-  const steps = visibleSteps.map(([stepId, stepData]) => ({
-    id: stepId,
-    status: stepData?.status,
-    description: stepData?.description,
-    title: stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, " "),
-    isActive: currentStep?.id === stepId
-  }));
-  return /* @__PURE__ */ jsxs(Container, { className: "space-y-6 text-icon3 mb-[2rem] content-center", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-icon5", children: getPhaseMessage() }),
-      streamResult?.runId && /* @__PURE__ */ jsxs("div", { className: "mt-[0.5rem] text-[0.75rem] text-icon3", children: [
-        "Run ID: ",
-        streamResult.runId
-      ] })
-    ] }),
-    hasSteps && totalSteps > 0 && !["error"].includes(phase) && /* @__PURE__ */ jsx("div", { className: "max-w-[30rem] w-full mx-auto px-[1.5rem]", children: /* @__PURE__ */ jsx(ProcessStepProgressBar, { steps }) }),
-    error && phase === "error" && /* @__PURE__ */ jsxs(
-      "div",
+  const handleTimePeriodChange = (val) => {
+    setTimePeriod(timePeriodOptions[+val]);
+    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[0.5rem] items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      Select,
       {
-        className: cn(
-          "rounded-lg text-icon5 p-[1.5rem] flex items-center gap-[.75rem] text-[0.875rem] bg-red-500/10",
-          "[&>svg]:w-[1.5rem] [&>svg]:h-[1.5rem] [&>svg]:opacity-70 [&>svg]:text-red-500"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(OctagonXIcon, {}),
-          error || "Something went wrong"
-        ]
+        name: "hour",
+        value: hourOptions.indexOf(hour).toString(),
+        onChange: handleHourChange,
+        options: hourOptions
       }
     ),
-    hasSteps && /* @__PURE__ */ jsx(ProcessStepList, { steps, currentStep, className: "pb-[1rem]" }),
-    !hasSteps && phase === "initializing" && /* @__PURE__ */ jsxs("div", { className: "text-center text-sm text-icon3 grid gap-[1rem] justify-items-center", children: [
-      /* @__PURE__ */ jsx(Spinner, {}),
-      /* @__PURE__ */ jsx("p", { children: "This may take some time..." })
-    ] })
+    ":",
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        name: "minute",
+        value: minuteOptions.indexOf(minute).toString(),
+        onChange: handleMinuteChange,
+        options: minuteOptions
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        name: "period",
+        value: timePeriodOptions.indexOf(timePeriod).toString(),
+        onChange: handleTimePeriodChange,
+        options: timePeriodOptions
+      }
+    )
   ] });
 }
 
-function TemplateSuccess({ name, installedEntities, linkComponent }) {
-  const LinkComponent = linkComponent || "a";
+const DateTimePicker = ({
+  value,
+  minValue,
+  maxValue,
+  defaultTimeStrValue,
+  onValueChange,
+  children,
+  className,
+  placeholder,
+  ...props
+}) => {
+  const [openPopover, setOpenPopover] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ? children : /* @__PURE__ */ jsx(
+      DefaultTrigger,
+      {
+        value,
+        placeholder,
+        className,
+        "data-testid": "datepicker-button"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "backdrop-blur-4xl w-auto p-0 bg-surface4 max-w-[16.5rem]",
+        align: "start",
+        "data-testid": "datepicker-calendar",
+        children: /* @__PURE__ */ jsx(
+          DateTimePickerContent,
+          {
+            value,
+            minValue,
+            maxValue,
+            onValueChange,
+            setOpenPopover,
+            defaultTimeStrValue,
+            ...props
+          }
+        )
+      }
+    )
+  ] });
+};
+function getCompoundDate({ date, timeStr = "" }) {
+  if (!isValid(date)) {
+    return null;
+  }
+  if (timeStr) {
+    const dateStr = format(date, "yyyy-MM-dd");
+    const newDate = /* @__PURE__ */ new Date(`${dateStr} ${timeStr}`);
+    if (isValid(newDate)) {
+      return newDate;
+    }
+  }
+  return date;
+}
+const DateTimePickerContent = ({
+  value,
+  minValue,
+  maxValue,
+  onValueChange,
+  setOpenPopover,
+  placeholder,
+  className,
+  defaultTimeStrValue,
+  ...props
+}) => {
+  const [localErrorMsg, setLocalErrorMsg] = React.useState(null);
+  const [dateInputValue, setDateInputValue] = React.useState(
+    value ? format(getCompoundDate({ date: value, timeStr: defaultTimeStrValue }) || "", "PP p") : ""
+  );
+  const [timeStrValue, setTimeStrValue] = React.useState(defaultTimeStrValue || "");
+  const [selected, setSelected] = React.useState(value ? new Date(value) : void 0);
+  const debouncedDateUpdate = useDebouncedCallback((date) => {
+    if (isValid(date)) {
+      setSelected(date);
+      onValueChange?.(date);
+      setOpenPopover?.(false);
+    }
+  }, 500);
+  const handleInputChange = (e) => {
+    setDateInputValue(e.currentTarget.value);
+    const date = new Date(e.currentTarget.value);
+    debouncedDateUpdate(date);
+  };
+  const updateInputValue = (date) => {
+    if (isValid(date)) {
+      if (maxValue && date > maxValue) {
+        setLocalErrorMsg(`The selected date should be before ${format(maxValue, "PP p")}`);
+        setDateInputValue("");
+      } else if (minValue && date < minValue) {
+        setLocalErrorMsg(`The selected date should be after ${format(minValue, "PP p")}`);
+        setDateInputValue("");
+      } else {
+        setDateInputValue(format(date, "PP p"));
+        setLocalErrorMsg("");
+      }
+    } else {
+      setDateInputValue("");
+      setLocalErrorMsg("");
+    }
+  };
+  const dateInputValueDate = new Date(dateInputValue);
+  const dateInputValueIsValid = isValid(dateInputValueDate);
+  const newValueDefined = dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const newDate = getCompoundDate({ date, timeStr: timeStrValue });
+      updateInputValue(newDate || "");
+    } else {
+      updateInputValue("");
+    }
+  };
+  const handleMonthSelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const newDate = getCompoundDate({ date, timeStr: timeStrValue });
+      updateInputValue(newDate || "");
+    } else {
+      updateInputValue("");
+    }
+  };
+  const handleTimeStrChange = (val) => {
+    setTimeStrValue(val);
+    if (dateInputValueIsValid) {
+      const newDate = getCompoundDate({ date: dateInputValueDate, timeStr: val });
+      updateInputValue(newDate || "");
+    }
+  };
+  const handleCancel = () => {
+    setOpenPopover?.(false);
+  };
+  const handleApply = () => {
+    if (isValid(dateInputValueDate)) {
+      onValueChange(dateInputValueDate);
+    }
+    setOpenPopover?.(false);
+  };
+  const handleClear = () => {
+    onValueChange(void 0);
+    setSelected(void 0);
+    setDateInputValue("");
+    setTimeStrValue("");
+    setOpenPopover?.(false);
+  };
   return /* @__PURE__ */ jsxs(
-    Container,
+    "div",
     {
-      className: cn(
-        "grid items-center justify-items-center gap-[1rem] content-center",
-        "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
-      ),
+      "aria-label": "Choose date",
+      className: cn("relative mt-2 flex flex-col ", className),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          setOpenPopover?.(false);
+        }
+      },
       children: [
-        /* @__PURE__ */ jsx(PackageOpenIcon, {}),
-        /* @__PURE__ */ jsx("h2", { className: "text-[1.25rem ]", children: "Done!" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-[0.875rem] text-center text-icon3 ", children: [
-          "The ",
-          /* @__PURE__ */ jsx("b", { className: "text-icon4", children: name }),
-          " template has been successfully installed.",
-          installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("br", {}),
-            " Installed entities are listed below."
-          ] })
-        ] }),
-        installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsx(KeyValueList, { data: installedEntities, LinkComponent })
+        /* @__PURE__ */ jsx(
+          InputField,
+          {
+            type: "text",
+            value: dateInputValue,
+            onChange: handleInputChange,
+            placeholder,
+            className: "m-4 mb-0 !w-auto"
+          }
+        ),
+        localErrorMsg && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "text-[0.875rem] m-[1rem] mb-0 text-icon3",
+              "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mt-[0.2em] [&>svg]:text-red-500 [&>svg]:float-left [&>svg]:mr-[0.5rem]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CircleAlertIcon, {}),
+              " ",
+              localErrorMsg
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            mode: "single",
+            month: selected,
+            selected,
+            onMonthChange: handleMonthSelect,
+            onSelect: handleDaySelect,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            onValueChange: handleTimeStrChange,
+            className: "m-4 mt-0 w-auto",
+            defaultValue: value ? formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-[0.5rem] m-4 mt-0", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              tabIndex: 0,
+              onClick: () => {
+                dateInputValueIsValid ? handleApply() : handleCancel();
+              },
+              children: newValueDefined ? `Apply` : `Cancel`
+            }
+          ),
+          newValueDefined && /* @__PURE__ */ jsx(Button, { variant: "outline", tabIndex: 0, onClick: handleClear, children: "Clear" })
+        ] })
       ]
     }
   );
-}
+};
+const DefaultTrigger = React.forwardRef(
+  ({ value, placeholder, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
+      /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
+      value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP p") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+    ] });
+  }
+);
 
-function TemplateFailure({ errorMsg, validationErrors }) {
-  const isSchemaError = errorMsg?.includes("Invalid schema for function");
-  const isValidationError = errorMsg?.includes("validation issue") || validationErrors && validationErrors.length > 0;
-  const getUserFriendlyMessage = () => {
-    if (isValidationError) {
-      return "Template installation completed but some validation issues remain. The template may still be functional, but you should review and fix these issues.";
-    }
-    if (isSchemaError) {
-      return "There was an issue with the AI model configuration. This may be related to the selected model or AI SDK version compatibility.";
-    }
-    return "An unexpected error occurred during template installation.";
-  };
-  const getIconAndTitle = () => {
-    if (isValidationError) {
-      return {
-        icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "text-yellow-500" }),
-        title: "Template Installed with Warnings"
-      };
+function TextAndIcon({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-[0.25rem] text-icon4 text-[0.875rem]",
+        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+        className
+      ),
+      children
     }
-    return {
-      icon: /* @__PURE__ */ jsx(FrownIcon, {}),
-      title: "Template Installation Failed"
-    };
-  };
-  const { icon, title } = getIconAndTitle();
-  return /* @__PURE__ */ jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center max-w-2xl mx-auto", children: [
-    /* @__PURE__ */ jsxs(
+  );
+}
+
+function getShortId(id) {
+  if (!id) return void 0;
+  return id.slice(0, 8);
+}
+
+function TemplatesTools({
+  tagOptions,
+  selectedTag,
+  providerOptions,
+  selectedProvider,
+  onTagChange,
+  onProviderChange,
+  searchTerm,
+  onSearchChange,
+  onReset,
+  className,
+  isLoading
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "grid items-center justify-items-center gap-[1rem] content-center",
-          "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
+          "h-[6.5rem] flex items-center gap-[2rem]",
+          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
+          className
         ),
         children: [
-          icon,
-          /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] font-medium text-icon5", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-icon3", children: getUserFriendlyMessage() })
-          ] })
+          /* @__PURE__ */ jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsx("div", {})
         ]
       }
-    ),
-    validationErrors && validationErrors.length > 0 && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: [
-        "Show Validation Issues (",
-        validationErrors.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto max-h-60 text-left space-y-2", children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-red-400 pl-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: error.type === "typescript" ? "🔴 TypeScript Error" : "⚠️ Lint Error" }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-gray-700 dark:text-gray-300 mt-1 whitespace-pre-wrap break-words", children: error.message })
-      ] }, index)) })
-    ] }),
-    errorMsg && !isValidationError && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
-      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: "Show Details" }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
+    /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        label: "Search templates",
+        value: searchTerm,
+        onChange: (e) => onSearchChange?.(e.target.value),
+        placeholder: "Search Template"
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        label: "Filter by provider",
+        value: selectedProvider,
+        onValueChange: onProviderChange,
+        options: providerOptions
+      }
+    ),
+    onReset && /* @__PURE__ */ jsxs(Button, { onClick: onReset, children: [
+      "Reset ",
+      /* @__PURE__ */ jsx(XIcon, {})
     ] })
   ] });
 }
 
-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);
-  };
+function getRepoName(githubUrl) {
+  return githubUrl.replace(/\/$/, "").split("/").pop();
+}
+function Container({ children, className }) {
   return /* @__PURE__ */ jsx(
-    TraceContext.Provider,
+    "div",
     {
-      value: {
-        isOpen: open,
-        setIsOpen: setOpen,
-        trace,
-        setTrace,
-        traces,
-        currentTraceIndex,
-        setCurrentTraceIndex,
-        nextTrace,
-        prevTrace,
-        span,
-        setSpan,
-        clearData
-      },
+      className: cn(
+        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
+        className
+      ),
       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 === 2);
-  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$1, { 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,
+function TemplatesList({ templates, linkComponent, className, isLoading }) {
+  const LinkComponent = linkComponent || "a";
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
+    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
+    return /* @__PURE__ */ jsxs(
+      "article",
       {
-        trace,
-        index,
-        isActive: index === currentTraceIndex
+        className: cn(
+          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              to: `/templates/${template.slug}`,
+              className: cn("grid [&:hover_p]:text-icon5", {
+                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
+              }),
+              children: [
+                template.imageURL && /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden"), children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
+                    style: {
+                      backgroundImage: `url(${template.imageURL})`
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
+                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
+                      /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
+                      /* @__PURE__ */ jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
+                        hasMetaInfo && /* @__PURE__ */ jsxs(
+                          "ul",
+                          {
+                            className: cn(
+                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
+                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
+                            ),
+                            children: [
+                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                                /* @__PURE__ */ jsx(AgentIcon, {}),
+                                " ",
+                                template.agents.length
+                              ] }),
+                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                                /* @__PURE__ */ jsx(ToolsIcon, {}),
+                                " ",
+                                template.tools.length
+                              ] }),
+                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                                /* @__PURE__ */ jsx(NetworkIcon, {}),
+                                " ",
+                                template.networks.length
+                              ] }),
+                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                                /* @__PURE__ */ jsx(WorkflowIcon$1, {}),
+                                " ",
+                                template.workflows.length
+                              ] }),
+                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                                /* @__PURE__ */ jsx(McpServerIcon, {}),
+                                " ",
+                                template.mcp.length
+                              ] })
+                            ]
+                          }
+                        ),
+                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsx("small", { children: "|" }),
+                        /* @__PURE__ */ jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsx("span", { className: "", children: provider }, provider)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: template.githubUrl,
+              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[0.5rem]  px-[0.5rem] py-[0.25rem] rounded bg-surface1 group-hover:bg-surface2 text-icon3 transition-colors group-hover:text-icon5 ", children: [
+                /* @__PURE__ */ jsx(GithubIcon, {}),
+                " ",
+                getRepoName(template.githubUrl)
+              ] })
+            }
+          )
+        ]
       },
-      trace.traceId + index
-    )) }) })
-  ] });
-};
-
+      template.slug
+    );
+  }) });
+}
+
+function TemplateInfo({
+  title,
+  description,
+  imageURL,
+  githubUrl,
+  isLoading,
+  infoData,
+  templateSlug
+}) {
+  const branchName = templateSlug ? `feat/install-template-${templateSlug}` : "feat/install-template-[slug]";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] lg:min-h-[4rem] items-center "), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "text-[1.5rem] flex items-center gap-[0.75rem] ",
+            "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+            {
+              "[&>svg]:opacity-20": isLoading
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(PackageIcon, {}),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn({
+                  "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
+                }),
+                children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : title
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full h-full bg-cover bg-center transition-scale duration-150 rounded-lg overflow-hidden min-h-[2rem] mt-[2rem] lg:mt-0",
+          style: {
+            backgroundImage: `url(${imageURL})`
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] ", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid", children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
+              "bg-surface4 rounded-lg ": isLoading
+            }),
+            children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : description
+          }
+        ),
+        !isLoading && templateSlug && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
+              "flex items-start gap-[0.75rem]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsx(InfoIcon$1, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
+                  /* @__PURE__ */ jsx(GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Branch name:" }),
+                    " ",
+                    /* @__PURE__ */ jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        githubUrl && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: githubUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex items-center gap-[.5rem] mt-auto text-icon3 text-[0.875rem] hover:text-icon5",
+            children: [
+              /* @__PURE__ */ jsx(GithubIcon, {}),
+              githubUrl?.split("/")?.pop()
+            ]
+          }
+        )
+      ] }),
+      infoData && /* @__PURE__ */ jsx(KeyValueList, { data: infoData, LinkComponent: Link, labelsAreHidden: true, isLoading })
+    ] })
+  ] });
+}
+
+function TemplateForm({
+  providerOptions,
+  selectedProvider,
+  onProviderChange,
+  variables,
+  errors,
+  handleInstallTemplate,
+  handleVariableChange,
+  isLoadingEnvVars,
+  defaultModelProvider,
+  defaultModelId,
+  onModelUpdate
+}) {
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
+    /* @__PURE__ */ jsxs(
+      "h2",
+      {
+        className: cn(
+          "text-icon5 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
+          "[&>svg]:w-[1.2em] [&_svg]:h-[1.2em] [&_svg]:opacity-70 "
+        ),
+        children: [
+          "Install Template ",
+          /* @__PURE__ */ jsx(PackageOpenIcon, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        options: providerOptions,
+        label: "Provider",
+        onValueChange: onProviderChange,
+        value: selectedProvider,
+        placeholder: "Select a provider"
+      }
+    ),
+    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-[0.5rem]", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem] font-medium", children: "Select AI Model for Template Installation *" }),
+        /* @__PURE__ */ jsx("p", { className: "text-icon4 text-[0.75rem]", children: "This model will be used by the workflow to process and install the template" }),
+        /* @__PURE__ */ jsx(
+          AgentMetadataModelSwitcher,
+          {
+            defaultProvider: defaultModelProvider || "",
+            defaultModel: defaultModelId || "",
+            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
+            closeEditor: () => {
+            },
+            modelProviders: ["openai", "anthropic", "google", "xai", "groq"]
+          }
+        ),
+        (!defaultModelProvider || !defaultModelId) && /* @__PURE__ */ jsx("p", { className: "text-red-500 text-[0.75rem]", children: "Please select an AI model to continue" })
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center col-span-2 text-icon3 text-[0.75rem] gap-[1rem]",
+            "[&_svg]:opacity-50 [&_svg]:w-[1.1em] [&_svg]:h-[1.1em]",
+            "animate-in fade-in duration-300"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Spinner, {}),
+            " Loading variables..."
+          ]
+        }
+      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(
+          InputField,
+          {
+            name: `env-${key}`,
+            labelIsHidden: true,
+            label: "Key",
+            value: key,
+            disabled: true,
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputField,
+          {
+            name: key,
+            labelIsHidden: true,
+            label: "Value",
+            value,
+            onChange: handleVariableChange,
+            errorMsg: errors.includes(key) ? `Value is required.` : "",
+            autoComplete: "off",
+            className: "w-full"
+          }
+        )
+      ] }, key)) })
+    ] }),
+    selectedProvider && !isLoadingEnvVars && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "flex items-center gap-[0.5rem] justify-center text-[0.875rem] w-full bg-surface5 min-h-[2.5rem] rounded-lg text-icon5 hover:bg-surface6 transition-colors",
+          "[&>svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon5"
+        ),
+        onClick: handleInstallTemplate,
+        disabled: !selectedProvider || !defaultModelProvider || !defaultModelId || errors.length > 0,
+        children: [
+          "Install ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        ]
+      }
+    )
+  ] }) });
+}
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsx(Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsx(CheckIcon$1, {});
+    case "failed":
+      return /* @__PURE__ */ jsx(XIcon, {});
+    default:
+      return null;
+  }
+}
+
+function ProcessStepListItem({ stepId, step, isActive, position }) {
+  const formatStepTitle = (stepId2) => {
+    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("grid gap-[1.5rem] grid-cols-[1fr_auto] py-[.75rem] px-[1rem] rounded-lg", {
+        "border border-dashed border-gray-500": isActive
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-[.5rem]", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[0.875rem] text-icon5 min-w-[1.5rem] flex justify-end", children: [
+            position,
+            "."
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-[0.875rem] text-icon5", children: formatStepTitle(stepId) }),
+            step.description && /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] -mt-[0.125rem]", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center", {
+              "border border-gray-500 border-dashed": step.status === "pending",
+              "[&>svg]:text-white [&>svg]:w-[1rem] [&>svg]:h-[1rem]": step.status !== "running",
+              "w-[1.75rem] h-[1.75rem]": step.status === "running",
+              "bg-green-900": step.status === "success",
+              "bg-red-900": step.status === "failed"
+            }),
+            children: getStatusIcon(step.status)
+          }
+        )
+      ]
+    }
+  );
+}
+
+function ProcessStepList({ currentStep, steps = [], className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(
+    ProcessStepListItem,
+    {
+      stepId: step.id,
+      step,
+      isActive: currentStep?.id === step.id,
+      position: idx + 1
+    },
+    step.id
+  )) });
+}
+
+function ProcessStepProgressBar({ steps }) {
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((step) => step.status === "success").length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-center flex-col gap-[1rem] content-center w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("flex justify-end items-center relative h-[2rem] ", {
+            "bg-green-900": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-icon3 font-bold text-[0.75rem]",
+                {
+                  "border border-gray-500 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface4 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-green-900 text-white": step.status === "success",
+                  "bg-red-900 text-white": step.status === "failed"
+                }
+              ),
+              children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-xs text-icon3 text-center", children: [
+      completedSteps,
+      " of ",
+      totalSteps,
+      " steps completed"
+    ] })
+  ] });
+}
+
+function TemplateInstallation({ name, streamResult, runId, workflowInfo }) {
+  const phase = streamResult?.phase || "initializing";
+  const workflowState = streamResult?.payload?.workflowState;
+  const currentStep = streamResult?.payload?.currentStep;
+  const error = streamResult?.error;
+  const workflowSteps = workflowState?.steps || {};
+  const hasSteps = Object.keys(workflowSteps).length > 0;
+  const isUserVisibleStep = (stepId) => {
+    if (stepId === "input" || stepId.endsWith(".input")) return false;
+    if (stepId.startsWith("Mapping_") && /[0-9a-f]{8}/.test(stepId)) return false;
+    if (/[0-9a-f]{8,}/.test(stepId)) return false;
+    if (workflowInfo?.allSteps) {
+      return stepId in workflowInfo.allSteps;
+    }
+    return true;
+  };
+  const visibleSteps = Object.entries(workflowSteps).filter(([stepId, _]) => isUserVisibleStep(stepId));
+  const totalSteps = visibleSteps.length;
+  const getPhaseMessage = () => {
+    switch (phase) {
+      case "initializing":
+        return "Preparing template installation...";
+      case "processing":
+        return `Installing ${name} template`;
+      case "completed":
+        return "Template installation completed!";
+      case "error":
+        return "Template installation failed";
+      default:
+        return "Installing template...";
+    }
+  };
+  const steps = visibleSteps.map(([stepId, stepData]) => ({
+    id: stepId,
+    status: stepData?.status,
+    description: stepData?.description,
+    title: stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, " "),
+    isActive: currentStep?.id === stepId
+  }));
+  return /* @__PURE__ */ jsxs(Container, { className: "space-y-6 text-icon3 mb-[2rem] content-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-icon5", children: getPhaseMessage() }),
+      streamResult?.runId && /* @__PURE__ */ jsxs("div", { className: "mt-[0.5rem] text-[0.75rem] text-icon3", children: [
+        "Run ID: ",
+        streamResult.runId
+      ] })
+    ] }),
+    hasSteps && totalSteps > 0 && !["error"].includes(phase) && /* @__PURE__ */ jsx("div", { className: "max-w-[30rem] w-full mx-auto px-[1.5rem]", children: /* @__PURE__ */ jsx(ProcessStepProgressBar, { steps }) }),
+    error && phase === "error" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-lg text-icon5 p-[1.5rem] flex items-center gap-[.75rem] text-[0.875rem] bg-red-500/10",
+          "[&>svg]:w-[1.5rem] [&>svg]:h-[1.5rem] [&>svg]:opacity-70 [&>svg]:text-red-500"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(OctagonXIcon, {}),
+          error || "Something went wrong"
+        ]
+      }
+    ),
+    hasSteps && /* @__PURE__ */ jsx(ProcessStepList, { steps, currentStep, className: "pb-[1rem]" }),
+    !hasSteps && phase === "initializing" && /* @__PURE__ */ jsxs("div", { className: "text-center text-sm text-icon3 grid gap-[1rem] justify-items-center", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      /* @__PURE__ */ jsx("p", { children: "This may take some time..." })
+    ] })
+  ] });
+}
+
+function TemplateSuccess({ name, installedEntities, linkComponent }) {
+  const LinkComponent = linkComponent || "a";
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      className: cn(
+        "grid items-center justify-items-center gap-[1rem] content-center",
+        "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(PackageOpenIcon, {}),
+        /* @__PURE__ */ jsx("h2", { className: "text-[1.25rem ]", children: "Done!" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-[0.875rem] text-center text-icon3 ", children: [
+          "The ",
+          /* @__PURE__ */ jsx("b", { className: "text-icon4", children: name }),
+          " template has been successfully installed.",
+          installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            " Installed entities are listed below."
+          ] })
+        ] }),
+        installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsx(KeyValueList, { data: installedEntities, LinkComponent })
+      ]
+    }
+  );
+}
+
+function TemplateFailure({ errorMsg, validationErrors }) {
+  const isSchemaError = errorMsg?.includes("Invalid schema for function");
+  const isValidationError = errorMsg?.includes("validation issue") || validationErrors && validationErrors.length > 0;
+  const getUserFriendlyMessage = () => {
+    if (isValidationError) {
+      return "Template installation completed but some validation issues remain. The template may still be functional, but you should review and fix these issues.";
+    }
+    if (isSchemaError) {
+      return "There was an issue with the AI model configuration. This may be related to the selected model or AI SDK version compatibility.";
+    }
+    return "An unexpected error occurred during template installation.";
+  };
+  const getIconAndTitle = () => {
+    if (isValidationError) {
+      return {
+        icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "text-yellow-500" }),
+        title: "Template Installed with Warnings"
+      };
+    }
+    return {
+      icon: /* @__PURE__ */ jsx(FrownIcon, {}),
+      title: "Template Installation Failed"
+    };
+  };
+  const { icon, title } = getIconAndTitle();
+  return /* @__PURE__ */ jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid items-center justify-items-center gap-[1rem] content-center",
+          "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
+        ),
+        children: [
+          icon,
+          /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] font-medium text-icon5", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-icon3", children: getUserFriendlyMessage() })
+          ] })
+        ]
+      }
+    ),
+    validationErrors && validationErrors.length > 0 && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: [
+        "Show Validation Issues (",
+        validationErrors.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto max-h-60 text-left space-y-2", children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-red-400 pl-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: error.type === "typescript" ? "🔴 TypeScript Error" : "⚠️ Lint Error" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-gray-700 dark:text-gray-300 mt-1 whitespace-pre-wrap break-words", children: error.message })
+      ] }, index)) })
+    ] }),
+    errorMsg && !isValidationError && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: "Show Details" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono overflow-auto max-h-60 text-left", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+    ] })
+  ] });
+}
+
+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 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 === 2);
+  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$1, { 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,
@@ -15333,518 +16222,1362 @@ const TraceTree = ({ children }) => {
   return /* @__PURE__ */ jsx("ol", { children });
 };
 
-const variantClasses = {
-  agent: "bg-accent1"
+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 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 HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
 };
-
-const spanIconMap = {
-  tool: ToolsIcon,
-  agent: AgentIcon,
-  workflow: WorkflowIcon,
-  memory: MemoryIcon,
-  rag: TraceIcon,
-  storage: DbIcon,
-  eval: ScoreIcon,
-  other: TraceIcon
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
 };
-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 HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
 };
-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",
+
+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 === 2);
+  return /* @__PURE__ */ jsxs("aside", { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Button$1, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsx(
+          Button$1,
           {
-            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 }) }) })
+            className: "bg-transparent border-none",
+            onClick: nextTrace,
+            disabled: currentTraceIndex === traces.length - 1,
+            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
           }
-        ) : /* @__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__ */ 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" })
+      ] })
     ] }),
-    isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
+    /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
+  ] });
+}
+
+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 (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 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]);
+    }
+  };
+  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$1, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsx(Button$1, { 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$1, { 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 === 2 ? /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
+        "Failed in ",
+        toSigFigs(span.duration, 3),
+        "ms"
+      ] }) : /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
+        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 Spans = ({ children }) => {
-  return /* @__PURE__ */ jsx("ol", { children });
-};
-
-const Trace = ({
-  name,
-  spans,
-  durationMs,
-  tokenCount,
-  onClick,
-  variant,
-  isActive,
-  totalDurationMs
-}) => {
+const TracesSidebar = ({ onResize }) => {
   return /* @__PURE__ */ jsx(
-    Span,
+    MastraResizablePanel,
     {
-      isRoot: true,
-      durationMs,
-      variant,
-      spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
-      onClick,
-      isActive,
-      offsetMs: 0,
-      totalDurationMs,
-      children: name
+      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, {}) })
+      ] })
     }
   );
 };
 
-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";
+function TracesView({
+  isLoading,
+  error,
+  traces,
+  runId,
+  stepName,
+  className,
+  setEndOfListElement
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(TracesViewSkeleton, {});
   }
-  return "other";
+  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(
+    TracesViewInner,
+    {
+      traces,
+      error,
+      runId,
+      stepName,
+      className,
+      setEndOfListElement
+    }
+  ) });
+}
+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" }) }) });
 };
 
-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 formatHierarchicalSpans = (spans) => {
+  if (!spans || spans.length === 0) {
+    return [];
+  }
+  const spanMap = /* @__PURE__ */ new Map();
+  const rootSpans = [];
+  spans.forEach((spanRecord) => {
+    const startDate = new Date(spanRecord.startedAt);
+    const endDate = spanRecord.endedAt ? new Date(spanRecord.endedAt) : void 0;
+    const uiSpan = {
+      id: spanRecord.spanId,
+      name: spanRecord.name,
+      type: spanRecord.spanType,
+      latency: endDate ? endDate.getTime() - startDate.getTime() : 0,
+      startTime: startDate.toISOString(),
+      endTime: endDate ? endDate.toISOString() : void 0,
+      spans: []
     };
+    spanMap.set(spanRecord.spanId, uiSpan);
+  });
+  spans.forEach((spanRecord) => {
+    const uiSpan = spanMap.get(spanRecord.spanId);
+    if (spanRecord?.parentSpanId === null) {
+      rootSpans.push(uiSpan);
+    } else {
+      const parent = spanMap.get(spanRecord.parentSpanId);
+      if (parent) {
+        parent.spans.push(uiSpan);
+      } else {
+        rootSpans.push(uiSpan);
+      }
+    }
   });
+  const sortSpansByStartTime = (spans2) => {
+    return spans2.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+  };
+  const sortedRootSpans = sortSpansByStartTime(rootSpans);
+  const sortNestedSpans = (spans2) => {
+    spans2.forEach((span) => {
+      if (span.spans && span.spans.length > 0) {
+        span.spans = sortSpansByStartTime(span.spans);
+        sortNestedSpans(span.spans);
+      }
+    });
+  };
+  sortNestedSpans(sortedRootSpans);
+  return sortedRootSpans;
+};
+
+const spanTypePrefixes = ["agent", "workflow", "llm", "tool"];
+function getSpanTypeUi(type) {
+  const typePrefix = type?.toLowerCase().split("_")[0];
+  const spanTypeToUiElements = {
+    agent: {
+      icon: /* @__PURE__ */ jsx(AgentIcon, {}),
+      color: "oklch(0.75 0.15 250)",
+      label: "Agent"
+    },
+    workflow: {
+      icon: /* @__PURE__ */ jsx(WorkflowIcon, {}),
+      color: "oklch(0.75 0.15 200)",
+      label: "Workflow"
+    },
+    llm: {
+      icon: /* @__PURE__ */ jsx(BrainIcon, {}),
+      color: "oklch(0.75 0.15 320)",
+      label: "LLM"
+    },
+    tool: {
+      icon: /* @__PURE__ */ jsx(ToolsIcon, {}),
+      color: "oklch(0.75 0.15 100)",
+      label: "Tool"
+    }
+  };
+  if (typePrefix in spanTypeToUiElements) {
+    return spanTypeToUiElements[typePrefix];
+  }
+  return null;
+}
+
+function TraceTimelineSpan({
+  span,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  overallLatency,
+  overallStartTime
+}) {
+  const { Link } = useLinkComponent();
+  const [isHovered, setIsHovered] = useState(false);
+  const hasChildren = span.spans && span.spans.length > 0;
+  const isRootSpan = depth === 0;
+  const percentageSpanLatency = overallLatency ? Math.ceil(span.latency / overallLatency * 100) : 0;
+  const overallStartTimeDate = overallStartTime ? new Date(overallStartTime) : null;
+  const spanStartTimeDate = span.startTime ? new Date(span.startTime) : null;
+  const spanStartTimeShift = spanStartTimeDate && overallStartTimeDate ? spanStartTimeDate.getTime() - overallStartTimeDate.getTime() : 0;
+  const percentageSpanStartTime = overallLatency && Math.floor(spanStartTimeShift / overallLatency * 100);
+  const spanUI = getSpanTypeUi(span?.type);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onSpanClick?.(span.id),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        type: "button",
+        "aria-label": `View details for span ${span.name}`,
+        className: cn(
+          "rounded-md transition-colors cursor-pointer flex py-[0.5rem] opacity-80 min-h-[3.5rem]",
+          "mt-[1rem] xl:mt-0",
+          {
+            "bg-icon1/30 text-white": selectedSpanId === span.id,
+            "bg-icon1/10 opacity-100": isHovered
+          }
+        ),
+        style: { paddingLeft: `${depth * 1.4}rem` },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] w-full", children: [
+          !isRootSpan && /* @__PURE__ */ jsx(TreePositionMark, { isLastChild, hasChildren: Boolean(hasChildren) }),
+          /* @__PURE__ */ jsxs("div", { className: cn("text-[0.875rem] flex items-center text-left break-all gap-[0.5rem] text-[#fff]  w-full"), children: [
+            spanUI?.icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0", style: { color: spanUI?.color }, children: spanUI?.icon }),
+            span.name
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(HoverCard.Root, { openDelay: 250, children: [
+      /* @__PURE__ */ jsxs(
+        HoverCard.Trigger,
+        {
+          className: cn(
+            "rounded-md transition-colors content-center cursor-help grid min-h-[3.5rem] opacity-80 px-[2.5rem] items-center relative",
+            "bg-surface2 xl:bg-surface3",
+            'xl:last-of-type:before:content-[""] last-of-type:before:absolute last-of-type:before:bottom-[-1rem] last-of-type:before:h-[1rem] last-of-type:before:w-full last-of-type:before:bg-surface3',
+            'xl:first-of-type:before:content-[""] first-of-type:before:absolute first-of-type:before:top-[-1rem] first-of-type:before:h-[1rem] first-of-type:before:w-full first-of-type:before:bg-surface3',
+            {
+              "bg-icon1/10 xl:bg-icon1/10 opacity-100": isHovered
+            }
+          ),
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] ", children: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "absolute flex pt-[0.1rem] items-center gap-[0.5rem] text-icon5",
+                  "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50 mb-[0.1em] [&>svg]:mb-[0.1rem]"
+                ),
+                style: { width: `${percentageSpanLatency}%`, left: `${percentageSpanStartTime}%` },
+                children: [
+                  /* @__PURE__ */ jsx(ChevronsLeftRight, {}),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        transform: percentageSpanStartTime && percentageSpanStartTime > 70 ? "translateX(calc((100% + 2rem) * -1))" : "none"
+                      },
+                      children: [
+                        (span.latency / 1e3).toFixed(2),
+                        " s"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "relative w-full bg-surface5  h-[3px] ", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("bg-icon1 h-full absolute rounded-full"),
+                style: {
+                  width: `${percentageSpanLatency}%`,
+                  left: `${percentageSpanStartTime}%`,
+                  backgroundColor: spanUI?.color
+                }
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsxs(
+        HoverCard.Content,
+        {
+          className: "z-[100] w-auto max-w-[25rem] rounded-md bg-[#222] p-[.5rem] px-[1rem] pr-[1.5rem] text-[.75rem] text-icon5 text-center border border-border1",
+          sideOffset: 5,
+          side: "top",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "text-[0.875rem] flex items-center gap-[0.5rem] mb-[1rem]",
+                  "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(TimerIcon, {}),
+                  " Span Timing"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              KeyValueList,
+              {
+                className: " [&>dd]:text-[0.875rem] [&>dt]:text-[0.875rem] [&>dt]:min-h-0 [&>dd]:min-h-0",
+                data: [
+                  {
+                    key: "Latency",
+                    label: "Latency",
+                    value: `${span.latency} ms`,
+                    icon: /* @__PURE__ */ jsx(ChevronsLeftRightIcon, {})
+                  },
+                  {
+                    key: "startTime",
+                    label: "Started at",
+                    value: span.startTime ? format$1(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
+                    icon: /* @__PURE__ */ jsx(ChevronFirstIcon, {})
+                  },
+                  {
+                    key: "endTime",
+                    label: "Ended at",
+                    value: span.endTime ? format$1(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
+                    icon: /* @__PURE__ */ jsx(ChevronLastIcon, {})
+                  },
+                  {
+                    key: "startShift",
+                    label: "Start Shift",
+                    value: `${spanStartTimeShift}ms`,
+                    icon: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+                  }
+                ],
+                LinkComponent: Link
+              }
+            ),
+            /* @__PURE__ */ jsx(HoverCard.Arrow, { className: "fill-surface5" })
+          ]
+        }
+      ) })
+    ] }),
+    hasChildren && span.spans?.map((childSpan, idx, array) => {
+      const isLastChild2 = idx === array.length - 1;
+      return /* @__PURE__ */ jsx(
+        TraceTimelineSpan,
+        {
+          span: childSpan,
+          depth: depth + 1,
+          onSpanClick,
+          selectedSpanId,
+          isLastChild: isLastChild2,
+          overallLatency,
+          overallStartTime
+        },
+        childSpan.id
+      );
+    })
+  ] });
 }
-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,
+function TreePositionMark({ isLastChild, hasChildren = false }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      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)
+      className: cn(
+        "w-[1.5rem] h-[2.2rem] relative opacity-50 ",
+        'after:content-[""] after:absolute after:left-0 after:top-0 after:bottom-0 after:w-[0px] after:border-r-[0.5px] after:border-white after:border-dashed',
+        'before:content-[""] before:absolute before:left-0  before:top-[50%] before:w-full before:h-[0px] before:border-b-[0.5px] before:border-white before:border-dashed',
+        {
+          "after:bottom-[50%]": isLastChild
+        }
+      ),
+      children: hasChildren && /* @__PURE__ */ jsx("div", { className: "absolute -right-[1px] top-[50%] bottom-0 w-[0px]  border-r-[0.5px] border-white border-dashed" })
     }
-  )) });
+  );
 }
 
-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
-    }
+function TraceTimelineLegend({ spans = [] }) {
+  const activeSpanTypes = spanTypePrefixes.filter(
+    (typePrefix) => spans.some((span) => span?.spanType?.startsWith(typePrefix))
   );
-};
-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 });
-};
+  return /* @__PURE__ */ jsx("div", { className: cn("flex justify-start gap-[2rem] mb-2 text-[0.75rem] opacity-90"), children: activeSpanTypes.map((item) => {
+    const spanUI = getSpanTypeUi(item);
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-[.5rem]"), children: [
+      /* @__PURE__ */ jsx("span", { className: cn("[&>svg]:w-[1.2em] [&>svg]:h-[1.2em]"), style: { color: spanUI?.color }, children: spanUI?.icon && spanUI.icon }),
+      spanUI?.label
+    ] }, item);
+  }) });
+}
 
-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 === 2);
-  return /* @__PURE__ */ jsxs("aside", { children: [
-    /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Button$1, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            className: "bg-transparent border-none",
-            onClick: nextTrace,
-            disabled: currentTraceIndex === traces.length - 1,
-            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-          }
-        )
+function TraceTimeline({
+  spans = [],
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  className
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
+      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
+        /* @__PURE__ */ jsx(ListTreeIcon, {}),
+        " Timeline"
       ] }),
-      /* @__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(TraceTimelineLegend, { spans })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
+    isLoading ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center text-[0.875rem] gap-[1rem] bg-surface3/50 rounded-md p-[1.5rem] mr-[1.5rem] justify-center text-icon3 mt-[.5rem]",
+          "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Spinner, {}),
+          " Loading Trace Timeline ..."
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "overflow-y-auto grid items-start content-start gap-y-[2px] xl:py-[1rem]",
+          "xl:grid-cols-[3fr_2fr] xl:gap-x-[1rem]"
+        ),
+        children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsx(
+          TraceTimelineSpan,
+          {
+            span,
+            onSpanClick,
+            selectedSpanId,
+            overallLatency,
+            overallStartTime
+          },
+          span.id
+        ))
+      }
+    )
   ] });
 }
 
-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`;
+function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
+  if (!traceUsage && !spanUsage) {
+    console.warn("No usage data available");
+    return null;
   }
-  if (key.includes(".result")) {
-    return "Output";
+  if (traceUsage && spanUsage) {
+    console.warn("Only one of traceUsage or spanUsage should be provided");
+    return null;
   }
-  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]);
-    }
-  };
-  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$1, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsx(Button$1, { 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$1, { 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 === 2 ? /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
-        "Failed in ",
-        toSigFigs(span.duration, 3),
-        "ms"
-      ] }) : /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
-        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 })
-    ] })
-  ] });
+  const generationSpans = traceSpans.filter((span) => span.spanType === "llm_generation");
+  const tokensByProvider = generationSpans.reduce(
+    (acc, span) => {
+      const spanUsage2 = span.attributes?.usage || {};
+      const model = span?.attributes?.model || "";
+      const provider = span?.attributes?.provider || "";
+      const spanModelProvider = `${provider}${provider && model ? " / " : ""}${model}`;
+      if (!acc?.[spanModelProvider]) {
+        acc[spanModelProvider] = { promptTokens: 0, completionTokens: 0, totalTokens: 0 };
+      }
+      acc[spanModelProvider].promptTokens += spanUsage2.promptTokens || 0;
+      acc[spanModelProvider].completionTokens += spanUsage2.completionTokens || 0;
+      acc[spanModelProvider].totalTokens += (spanUsage2.promptTokens || 0) + (spanUsage2.completionTokens || 0);
+      return acc;
+    },
+    {}
+  );
+  const traceTokensBasedOnSpans = Object.keys(
+    tokensByProvider
+  ).reduce(
+    (acc, provider) => {
+      const { promptTokens, completionTokens, totalTokens } = tokensByProvider[provider];
+      acc.promptTokens += promptTokens;
+      acc.completionTokens += completionTokens;
+      acc.totalTokens += totalTokens;
+      return acc;
+    },
+    { promptTokens: 0, completionTokens: 0, totalTokens: 0 }
+  );
+  const tokensByProviderValid = JSON.stringify(traceUsage) === JSON.stringify(traceTokensBasedOnSpans);
+  const tokenPresentations = {
+    totalTokens: {
+      label: "Total LLM Tokens",
+      icon: /* @__PURE__ */ jsx(CoinsIcon, {})
+    },
+    promptTokens: {
+      label: "Prompt Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+    },
+    completionTokens: {
+      label: "Completion Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    }
+  };
+  const usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-[1.5rem]",
+        {
+          "xl:grid-cols-3": usageAsArray.length === 3,
+          "xl:grid-cols-2": usageAsArray.length === 2
+        },
+        className
+      ),
+      children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("bg-white/5 p-[1rem] px-[1.25rem] rounded-lg text-[0.875rem]", {
+            "min-h-[5.5rem]": traceUsage
+          }),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
+                  "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
+                ),
+                children: [
+                  tokenPresentations?.[key]?.icon,
+                  /* @__PURE__ */ jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+                  /* @__PURE__ */ jsx("b", { className: "text-[1rem]", children: value })
+                ]
+              }
+            ),
+            tokensByProviderValid && /* @__PURE__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem] ", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxs(
+              "dl",
+              {
+                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+                children: [
+                  /* @__PURE__ */ jsx("dt", { children: provider }),
+                  /* @__PURE__ */ jsx("dd", { children: providerTokens?.[key] })
+                ]
+              },
+              provider
+            )) })
+          ]
+        },
+        key
+      ))
+    }
+  );
 }
-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);
-  }) });
+
+function getTraceInfo(trace) {
+  if (!trace) {
+    return [];
+  }
+  return [
+    {
+      key: "entityId",
+      label: "Entity Id",
+      value: [
+        {
+          id: trace?.metadata?.resourceId,
+          name: trace?.attributes?.agentId || trace?.attributes?.workflowId || "-",
+          path: trace?.attributes?.agentId ? `/agents/${trace?.metadata?.resourceId}` : trace?.attributes?.workflowId ? `/workflows/${trace?.metadata?.resourceId}` : void 0
+        }
+      ]
+    },
+    {
+      key: "entityType",
+      label: "Entity Type",
+      value: [
+        {
+          id: trace?.attributes?.agentId || trace?.attributes?.workflowId,
+          name: trace?.attributes?.agentId ? "Agent" : trace?.attributes?.workflowId ? "Workflow" : "-",
+          path: trace?.attributes?.agentId ? `/agents` : trace?.attributes?.workflowId ? `/workflows` : void 0
+        }
+      ]
+    },
+    {
+      key: "status",
+      label: "Status",
+      value: trace?.attributes?.status || "-"
+    },
+    {
+      key: "createdAt",
+      label: "Created at",
+      value: trace?.createdAt ? format(new Date(trace?.createdAt), "PPpp") : "-"
+    }
+  ];
 }
-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) });
+function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
+  if (!span) {
+    return [];
   }
-  if (typeof value === "object") {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: value });
+  const baseInfo = [
+    {
+      key: "spanType",
+      label: "Span Type",
+      value: span?.spanType
+    },
+    {
+      key: "createdAt",
+      label: "Created at",
+      value: span?.createdAt ? format(new Date(span?.createdAt), "MMM dd, HH:mm:ss.SSS") : "-"
+    },
+    {
+      key: "startedAt",
+      label: "Started At",
+      value: span?.startedAt ? format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") : "-"
+    },
+    {
+      key: "endedAt",
+      label: "Ended At",
+      value: span?.endedAt ? format(new Date(span.endedAt), "MMM dd, HH:mm:ss.SSS") : "-"
+    }
+  ];
+  if (withTraceId) {
+    baseInfo.unshift({
+      key: "traceId",
+      label: "Trace Id",
+      value: span?.traceId
+    });
   }
-  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) });
+  if (withSpanId) {
+    baseInfo.unshift({
+      key: "spanId",
+      label: "Span Id",
+      value: span?.spanId
+    });
   }
-};
-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);
-    })
+  return baseInfo;
+}
+
+function SpanDetails({ span }) {
+  if (!span) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
+    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
+    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
+    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
+    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) })
   ] });
 }
 
-const TracesSidebar = ({ onResize }) => {
-  return /* @__PURE__ */ jsx(
-    MastraResizablePanel,
+function SpanDialog({
+  span,
+  isOpen,
+  onClose,
+  onNext,
+  onPrevious,
+  onViewToggle,
+  spanInfo = []
+}) {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs(
+    SideDialog,
     {
-      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, {}) })
-      ] })
+      dialogTitle: "Observability Span",
+      dialogDescription: "View and analyze span details",
+      isOpen,
+      onClose,
+      hasCloseButton: true,
+      className: cn("w-[calc(100vw-20rem)] max-w-[60%]", "3xl:max-w-[50rem]", "4xl:max-w-[40%]"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
+          /* @__PURE__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(EyeIcon, {}),
+              " ",
+              getShortId(span?.traceId)
+            ] }),
+            "›",
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+              getShortId(span?.spanId)
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsx(PanelTopIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
+          /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+            /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
+              /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+              " ",
+              span?.name
+            ] }),
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(HashIcon, {}),
+              " ",
+              span?.spanId
+            ] })
+          ] }),
+          span?.attributes?.usage && /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
+          /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
+          /* @__PURE__ */ jsx(SpanDetails, { span })
+        ] })
+      ]
     }
   );
-};
+}
 
-function TracesView({
-  isLoading,
-  error,
-  traces,
-  runId,
-  stepName,
-  className,
-  setEndOfListElement
+function TraceDialog({
+  traceId,
+  traceSpans = [],
+  traceDetails,
+  isOpen,
+  onClose,
+  onNext,
+  onPrevious,
+  isLoadingSpans
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(TracesViewSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsx(
-    TracesViewInner,
-    {
-      traces,
-      error,
-      runId,
-      stepName,
-      className,
-      setEndOfListElement
+  const { Link } = useLinkComponent();
+  const [dialogIsOpen, setDialogIsOpen] = useState(false);
+  const [selectedSpanId, setSelectedSpanId] = useState(void 0);
+  const [combinedView, setCombinedView] = useState(false);
+  const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
+  const hierarchicalSpans = useMemo(() => {
+    return formatHierarchicalSpans(traceSpans);
+  }, [traceSpans]);
+  const flatSpans = useMemo(() => {
+    const flattenSpans = (spans) => {
+      const result = [];
+      const traverse = (span) => {
+        result.push(span);
+        if (span.spans && span.spans.length > 0) {
+          span.spans.forEach(traverse);
+        }
+      };
+      spans.forEach(traverse);
+      return result;
+    };
+    return flattenSpans(hierarchicalSpans);
+  }, [hierarchicalSpans]);
+  const handleSpanClick = (id) => {
+    setSelectedSpanId(id);
+    setDialogIsOpen(true);
+  };
+  const toNextSpan = () => {
+    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
+    const nextItem = flatSpans[currentIndex + 1];
+    if (nextItem) {
+      setSelectedSpanId(nextItem.id);
     }
-  ) });
+  };
+  const toPreviousSpan = () => {
+    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
+    const previousItem = flatSpans[currentIndex - 1];
+    if (previousItem) {
+      setSelectedSpanId(previousItem.id);
+    }
+  };
+  const thereIsNextSpan = () => {
+    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
+    return currentIndex < flatSpans.length - 1;
+  };
+  const thereIsPreviousSpan = () => {
+    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
+    return currentIndex > 0;
+  };
+  const traceInfo = getTraceInfo(traceDetails);
+  const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      SideDialog,
+      {
+        dialogTitle: "Observability Trace",
+        dialogDescription: "View and analyze trace details",
+        isOpen,
+        onClose,
+        hasCloseButton: !dialogIsOpen || combinedView,
+        className: cn("w-[calc(100vw-20rem)] max-w-[75%]", "3xl:max-w-[60rem]", "4xl:max-w-[60%]"),
+        children: [
+          /* @__PURE__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsx(EyeIcon, {}),
+            " ",
+            getShortId(traceId)
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("pt-[1.5rem] pl-[2.5rem] grid-rows-[auto_1fr] grid h-full overflow-y-auto", {
+                "grid-rows-[auto_1fr_1fr]": selectedSpan && combinedView
+              }),
+              children: [
+                /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+                  /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
+                    /* @__PURE__ */ jsx(EyeIcon, {}),
+                    " ",
+                    traceDetails?.name
+                  ] }),
+                  /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                    /* @__PURE__ */ jsx(HashIcon, {}),
+                    " ",
+                    traceId
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto pb-[2.5rem]", children: [
+                  traceDetails?.metadata?.usage && /* @__PURE__ */ jsx(
+                    TraceSpanUsage,
+                    {
+                      traceUsage: traceDetails?.metadata?.usage,
+                      traceSpans,
+                      className: "mt-[2rem] pr-[1.5rem]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(KeyValueList, { data: traceInfo, LinkComponent: Link, className: "mt-[2rem]" }),
+                  /* @__PURE__ */ jsx(
+                    TraceTimeline,
+                    {
+                      hierarchicalSpans,
+                      spans: traceSpans,
+                      onSpanClick: handleSpanClick,
+                      selectedSpanId,
+                      isLoading: isLoadingSpans,
+                      className: "pr-[2.5rem] pt-[2.5rem]"
+                    }
+                  )
+                ] }),
+                selectedSpan && combinedView && /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
+                  /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-[.5rem] pt-[1rem] border-b border-border1 pr-[2.5rem]", children: [
+                    /* @__PURE__ */ jsx(
+                      SideDialogTop,
+                      {
+                        onNext: thereIsNextSpan() ? toNextSpan : void 0,
+                        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
+                        showInnerNav: true,
+                        className: "pl-0",
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
+                          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                            /* @__PURE__ */ jsx(EyeIcon, {}),
+                            " ",
+                            getShortId(traceId)
+                          ] }),
+                          "›",
+                          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                            /* @__PURE__ */ jsx(EyeIcon, {}),
+                            " ",
+                            getShortId(selectedSpanId)
+                          ] })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[1rem]", children: /* @__PURE__ */ jsx("button", { className: "flex items-center gap-1", onClick: () => setCombinedView(false), children: /* @__PURE__ */ jsx(PanelLeftIcon, {}) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
+                      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
+                        /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+                        " ",
+                        selectedSpan?.name
+                      ] }),
+                      selectedSpan?.attributes?.usage && /* @__PURE__ */ jsx(
+                        TraceSpanUsage,
+                        {
+                          spanUsage: selectedSpan.attributes.usage,
+                          className: "xl:grid-cols-1 xl:gap-[1rem]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsx(SpanDetails, { span: selectedSpan }) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SpanDialog,
+      {
+        span: selectedSpan,
+        isOpen: Boolean(dialogIsOpen && selectedSpanId && !combinedView),
+        onClose: () => setDialogIsOpen(false),
+        onNext: thereIsNextSpan() ? toNextSpan : void 0,
+        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
+        onViewToggle: () => setCombinedView(!combinedView),
+        spanInfo: selectedSpanInfo
+      }
+    )
+  ] });
 }
-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 })
+
+function TracesTools({
+  onEntityChange,
+  onReset,
+  selectedEntity,
+  entityOptions,
+  onDateChange,
+  selectedDateFrom,
+  selectedDateTo,
+  isLoading
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-x-[2rem] gap-y-[1rem]"), children: [
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        label: "Filter by Entity",
+        name: "select-entity",
+        placeholder: "Select...",
+        options: entityOptions || [],
+        onValueChange: (val) => {
+          const entity = entityOptions?.find((entity2) => entity2.value === val);
+          if (entity) {
+            onEntityChange(entity);
+          }
+        },
+        value: selectedEntity?.value || "",
+        className: "min-w-[20rem]",
+        disabled: isLoading
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex gap-[1rem] items-center flex-wrap mr-auto"), children: [
+      /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-[0.875rem] text-icon3"), children: "Filter by Date & time range" }),
+      /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          placeholder: "From",
+          value: selectedDateFrom,
+          maxValue: selectedDateTo,
+          onValueChange: (date) => onDateChange?.(date, "from"),
+          className: "min-w-[15rem]",
+          defaultTimeStrValue: "12:00 AM",
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          placeholder: "To",
+          value: selectedDateTo,
+          minValue: selectedDateFrom,
+          onValueChange: (date) => onDateChange?.(date, "to"),
+          className: "min-w-[15rem]",
+          defaultTimeStrValue: "11:59 PM",
+          disabled: isLoading
+        }
+      )
     ] }),
-    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+    /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: onReset, disabled: isLoading, children: [
+      "Reset ",
+      /* @__PURE__ */ jsx(XIcon, {})
+    ] })
   ] });
 }
-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,
@@ -16448,5 +18181,5 @@ const MemorySearch = ({
   ] });
 };
 
-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$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, 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, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextareaField, 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 };
+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$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map