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

package/dist/index.cjs.js

@@ -59,8 +59,9 @@ const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
 const runtimeContext = require('@mastra/core/runtime-context');
-const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const HoverCard = require('@radix-ui/react-hover-card');
+const format = require('date-fns/format');
 const reactQuery = require('@tanstack/react-query');
 
 function _interopNamespaceDefault(e) {
@@ -94,6 +95,7 @@ const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderP
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
+const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
@@ -4342,7 +4344,7 @@ function CopyButton({ content, copyMessage, className }) {
   );
 }
 
-const useCodemirrorTheme$1 = () => {
+const useCodemirrorTheme$2 = () => {
   return React.useMemo(
     () => codemirrorThemeDracula.draculaInit({
       settings: {
@@ -4360,7 +4362,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__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
@@ -5611,7 +5613,7 @@ const Button$1 = ({ className, as, size = "md", variant = "default", ...props })
   );
 };
 
-const useCodemirrorTheme = () => {
+const useCodemirrorTheme$1 = () => {
   return React.useMemo(
     () => codemirrorThemeDracula.draculaInit({
       settings: {
@@ -5629,12 +5631,12 @@ const useCodemirrorTheme = () => {
 };
 const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] }) });
 };
 
 const CodeDialogContent = ({ data }) => {
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   if (typeof data !== "string") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
@@ -5692,7 +5694,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
   const [eventData, setEventData] = React.useState("");
   const [isLoading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: eventData });
   const handleSendEvent = async () => {
     let data;
@@ -6556,7 +6558,7 @@ const PopoverContent = React__namespace.forwardRef(({ className, align = "center
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 
-const DatePicker = ({
+const DatePicker$1 = ({
   value,
   setValue,
   children,
@@ -6722,7 +6724,7 @@ const DateField = ({ inputProps, field, error, id }) => {
     }
   }, [field]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DatePicker,
+    DatePicker$1,
     {
       id,
       className: error ? "border-destructive" : "",
@@ -6741,7 +6743,7 @@ const DateField = ({ inputProps, field, error, id }) => {
   );
 };
 
-const Select = SelectPrimitive__namespace.Root;
+const Select$1 = SelectPrimitive__namespace.Root;
 const SelectValue = SelectPrimitive__namespace.Value;
 const SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
@@ -6803,7 +6805,7 @@ SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 const SelectField$1 = ({ field, inputProps, error, id, value }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Select,
+    Select$1,
     {
       ...props,
       onValueChange: (value2) => {
@@ -7841,7 +7843,7 @@ const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel,
   ] });
 };
 const SyntaxHighlighter = ({ data, onChange }) => {
-  const theme = useCodemirrorTheme$1();
+  const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
     /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: data, theme, extensions: [langJson.jsonLanguage], onChange })
@@ -10724,7 +10726,7 @@ const AgentAdvancedSettings = () => {
   const [providerOptionsValue, setProviderOptionsValue] = React.useState("");
   const [saved, setSaved] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: providerOptionsValue });
   const providerOptionsStr = JSON.stringify(settings?.modelSettings?.providerOptions ?? {});
   React.useEffect(() => {
@@ -11564,7 +11566,7 @@ const EmptyAgentsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className
 const RuntimeContext = () => {
   const { runtimeContext, setRuntimeContext } = usePlaygroundStore();
   const [runtimeContextValue, setRuntimeContextValue] = React.useState("");
-  const theme = useCodemirrorTheme();
+  const theme = useCodemirrorTheme$1();
   const { handleCopy } = useCopyToClipboard({ text: runtimeContextValue });
   const runtimeContextStr = JSON.stringify(runtimeContext);
   React.useEffect(() => {
@@ -12033,7 +12035,7 @@ const AgentMetadataModelSwitcher = ({
   const filteredModels = allModels.filter((model2) => model2.model.includes(selectedModel));
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      Select,
+      Select$1,
       {
         value: model?.provider ?? selectedProvider,
         onValueChange: setSelectedProvider,
@@ -14068,7 +14070,7 @@ function InputField({
   ...props
 }) {
   const LabelWrapper = ({ children }) => {
-    return labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children }) : children;
+    return labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children }) : children;
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -14101,10 +14103,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,
@@ -14158,6 +14161,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,
@@ -14171,28 +14175,32 @@ function TextareaField({
   );
 }
 
-const Button = ({ className, as, variant = "outline", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsxRuntime.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.forwardRef(
+  ({ className, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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,
@@ -14240,7 +14248,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
@@ -14252,18 +14260,19 @@ function SelectField({
           label,
           required && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "text-icon2", children: "(required)" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Select, { name, value, onValueChange, disabled, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Select$1, { name, value, onValueChange, disabled, children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectValue, { placeholder })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.label)) })
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap truncate block", children: option.label }) }, option.label)) })
         ] }),
         helpMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.75rem]", children: helpMsg })
       ]
@@ -14310,7 +14319,7 @@ function SliderField({
               ...props,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-[4px] w-full grow overflow-hidden rounded-full bg-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-gray-400" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-4 w-4 rounded-full bg-gray-400 shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+                /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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" })
               ]
             }
           ),
@@ -14390,7 +14399,7 @@ function RadioGroupField({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         RadioGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
                         }
@@ -14426,7 +14435,7 @@ function RadioGroupField({
 function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoading }) {
   const { Link } = useLinkComponent();
   const LabelWrapper = ({ children }) => {
-    return labelsAreHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children }) : children;
+    return labelsAreHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children }) : children;
   };
   if (!data || data.length === 0) {
     return null;
@@ -14467,7 +14476,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__ */ jsxRuntime.jsx(
             "span",
@@ -14477,7 +14487,11 @@ function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoadi
               children: " "
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isValueItemArray ? value?.map((item) => {
-            return item.path ? /* @__PURE__ */ jsxRuntime.jsx(RelationWrapper, { description: item.description, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: item.path, children: item?.name }) }, item.id) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item?.name }, item.id);
+            return item.path ? /* @__PURE__ */ jsxRuntime.jsx(RelationWrapper, { description: item.description, children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: item.path, children: [
+              item?.name,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
+            ] }) }, item.id) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item?.name }, item.id);
           }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value ? value : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3 text-[0.75rem]", children: "n/a" }) }) })
         }
       )
@@ -14502,784 +14516,1659 @@ function RelationWrapper({ description, children }) {
   ] }) : children;
 }
 
-function TemplatesTools({
-  tagOptions,
-  selectedTag,
-  providerOptions,
-  selectedProvider,
-  onTagChange,
-  onProviderChange,
-  searchTerm,
-  onSearchChange,
-  onReset,
-  className,
-  isLoading
-}) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+function EntryListTextCell({ children, isLoading }) {
+  const randomWidth = React.useMemo(() => {
+    return Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
+      style: { width: `${randomWidth}%` }
+    }
+  ) : children });
+}
+function EntryListStatusCell({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
+    status ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {})
-        ]
+        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
+          "bg-green-600": status === "success",
+          "bg-red-700": status === "failed"
+        })
       }
-    );
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
+      "Status: ",
+      status ? status : "not provided"
+    ] })
+  ] });
+}
+
+function getColumnTemplate(columns) {
+  if (!columns || columns.length === 0) {
+    return "";
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SearchField,
-      {
-        label: "Search templates",
-        value: searchTerm,
-        onChange: (e) => onSearchChange?.(e.target.value),
-        placeholder: "Search Template"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "li",
+    {
+      className: cn("border-b text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]", {
+        "bg-surface5": isSelected
+      }),
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid mb-[3rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg border border-border1  px-[1.5rem]"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
       }
-    ),
-    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
-      "Reset ",
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    ) }),
+    !isLoading && items?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          EntryListItem,
+          {
+            item,
+            selectedItemId,
+            onClick: isLoading ? void 0 : onItemClick,
+            columns,
+            isLoading,
+            children: (columns || []).map((col) => {
+              const isValidReactElement = React.isValidElement(item?.[col.name]);
+              return isValidReactElement ? item?.[col.name] : /* @__PURE__ */ jsxRuntime.jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, col.name);
+            })
+          },
+          item.id
+        );
+      }) }),
+      setEndOfListElement && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center text-icon3 text-[0.875rem] gap-[2rem]"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Page ",
+          page ? page + 1 : "1"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, disabled: page === 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
+                "Previous"
+              ] }),
+              hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, disabled: !hasMore, children: [
+                "Next",
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+              ] })
+            ]
+          }
+        )
+      ] })
     ] })
   ] });
 }
 
-function getRepoName(githubUrl) {
-  return githubUrl.replace(/\/$/, "").split("/").pop();
-}
-function Container({ children, className }) {
+function EntryListToolbar({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1rem] w", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[.75em] items-center", "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:text-icon4"), children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-icon6 text-[1.25rem]", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
-  }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-      "article",
+function SideDialog({
+  dialogTitle,
+  dialogDescription,
+  isOpen,
+  onClose,
+  children,
+  variant = "default",
+  hasCloseButton = true,
+  className
+}) {
+  const isConfirmation = variant === "confirmation";
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-[0.25]") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(
-            LinkComponent,
+          /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden__namespace.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: dialogTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: dialogDescription })
+          ] }),
+          !isConfirmation && hasCloseButton && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("grid h-full", {
+                "grid-rows-[auto_1fr]": !isConfirmation
               }),
-              children: [
-                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
-                    style: {
-                      backgroundImage: `url(${template.imageURL})`
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
-                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
-                                " ",
-                                template.agents.length
-                              ] }),
-                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
-                                " ",
-                                template.tools.length
-                              ] }),
-                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
-                                " ",
-                                template.networks.length
-                              ] }),
-                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
-                                " ",
-                                template.workflows.length
-                              ] }),
-                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
-                                " ",
-                                template.mcp.length
-                              ] })
-                            ]
-                          }
-                        ),
-                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] lg:min-h-[4rem] items-center "), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+function SideDialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PackageIcon, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                className: cn({
-                  "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
-                }),
-                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : title
-              }
-            )
-          ]
+          "justify-between": showInnerNav
         }
       ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem]"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+            "Close"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+            "Next",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}),
+            "Previous"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+      ]
+    }
+  );
+}
+function SideDialogFooterGroup({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-[1rem]", children });
+}
+
+function SideDialogContent({ children, className, isCentered, isFullHeight, variant }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-[3rem] py-[2rem] overflow-y-scroll", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-icon3", children: [
+      item.key,
+      ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] ", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
-              "bg-surface4 rounded-lg ": isLoading
-            }),
-            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
-          }
-        ),
-        !isLoading && templateSlug && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
-              "flex items-start gap-[0.75rem]"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-icon4", children: item.value })
+  ] })) });
+}
+
+function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }) {
+  const handleOnNext = () => {
+    onNext?.();
+  };
+  const handleOnPrevious = () => {
+    onPrevious?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(`flex justify-between h-[3.5rem] items-center  text-icon5 text-[.875rem] pl-[1.5rem]`, className),
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+                  "Previous",
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Branch name:" }),
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
+                /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+                  "Next",
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
                 ] })
-              ] })
-            ]
-          }
-        ),
-        githubUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GithubIcon, {}),
-              githubUrl?.split("/")?.pop()
-            ]
-          }
-        )
-      ] }),
-      infoData && /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: infoData, LinkComponent: lucideReact.Link, labelsAreHidden: true, isLoading })
-    ] })
-  ] });
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 }
 
-function TemplateForm({
-  providerOptions,
-  selectedProvider,
-  onProviderChange,
-  variables,
-  errors,
-  handleInstallTemplate,
-  handleVariableChange,
-  isLoadingEnvVars,
-  defaultModelProvider,
-  defaultModelId,
-  onModelUpdate
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {})
-        ]
-      }
-    ),
+const useCodemirrorTheme = () => {
+  return React.useMemo(
+    () => codemirrorThemeDracula.draculaInit({
+      settings: {
+        fontFamily: "var(--geist-mono)",
+        fontSize: "0.8125rem",
+        lineHighlight: "transparent",
+        gutterBackground: "transparent",
+        gutterForeground: "#939393",
+        background: "transparent"
+      },
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
+    }),
+    []
+  );
+};
+function SideDialogCodeSection({ codeStr = "", title }) {
+  const theme = useCodemirrorTheme();
+  const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
+  const hasMultilineText = React.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__ */ jsxRuntime.jsx("section", { className: "border border-border1 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border1 last:border-b-0 grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1rem] px-[1.5rem] border-b border-border1 grid grid-cols-[1fr_auto]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content" }),
+        hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {}) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      SelectField,
+      "div",
       {
-        options: providerOptions,
-        label: "Provider",
-        onValueChange: onProviderChange,
-        value: selectedProvider,
-        placeholder: "Select a provider"
-      }
-    ),
-    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-[0.5rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem] font-medium", children: "Select AI Model for Template Installation *" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon4 text-[0.75rem]", children: "This model will be used by the workflow to process and install the template" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AgentMetadataModelSwitcher,
-          {
-            defaultProvider: defaultModelProvider || "",
-            defaultModel: defaultModelId || "",
-            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
-            closeEditor: () => {
-            },
-            modelProviders: ["openai", "anthropic", "google", "xai", "groq"]
-          }
-        ),
-        (!defaultModelProvider || !defaultModelId) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-[0.75rem]", children: "Please select an AI model to continue" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, {}),
-            " Loading variables..."
-          ]
-        }
-      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          InputField,
-          {
-            name: `env-${key}`,
-            labelIsHidden: true,
-            label: "Key",
-            value: key,
-            disabled: true,
-            className: "w-full"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-        ]
+        className: cn("bg-surface3 p-[1rem] overflow-auto text-icon4 text-[0.875rem] [&>div]:border-none break-all"),
+        children: codeStr && /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping], theme, value: finalCodeStr })
       }
     )
   ] }) });
 }
-
-function getStatusIcon(status) {
-  switch (status) {
-    case "running":
-      return /* @__PURE__ */ jsxRuntime.jsx(Spinner, {});
-    case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {});
-    case "failed":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-[.5rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[0.875rem] text-icon5 min-w-[1.5rem] flex justify-end", children: [
-            position,
-            "."
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[0.875rem] text-icon5", children: formatStepTitle(stepId) }),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] -mt-[0.125rem]", children: step.description })
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("h1", { children: [
+          icon && icon,
+          " ",
+          title
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { children: description })
       ]
     }
   );
 }
 
-function ProcessStepList({ currentStep, steps = [], className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-    ProcessStepListItem,
+function PageHeader({ title, description, icon, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("h1", { children: [
+          icon && icon,
+          " ",
+          title
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
+      ]
+    }
+  );
 }
 
-function ProcessStepProgressBar({ steps }) {
-  const totalSteps = steps.length;
-  const completedSteps = steps.filter((step) => step.status === "success").length;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center flex-col gap-[1rem] content-center w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, {}) : idx + 1
-            }
-          )
-        },
-        step.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-icon3 text-center", children: [
-      completedSteps,
-      " of ",
-      totalSteps,
-      " steps completed"
-    ] })
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.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__ */ jsxRuntime.jsxs(Select$1, { name, onValueChange: onChange, value, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: placeholder || "Select..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (options || []).map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: `${idx}`, children: /* @__PURE__ */ jsxRuntime.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] = React.useState("12");
+  const [minute, setMinute] = React.useState("00");
+  const [timePeriod, setTimePeriod] = React.useState("AM");
+  React.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__ */ jsxRuntime.jsxs(Container, { className: "space-y-6 text-icon3 mb-[2rem] content-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-icon5", children: getPhaseMessage() }),
-      streamResult?.runId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[0.5rem] text-[0.75rem] text-icon3", children: [
-        "Run ID: ",
-        streamResult.runId
-      ] })
-    ] }),
-    hasSteps && totalSteps > 0 && !["error"].includes(phase) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[30rem] w-full mx-auto px-[1.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx(ProcessStepProgressBar, { steps }) }),
-    error && phase === "error" && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+  const handleTimePeriodChange = (val) => {
+    setTimePeriod(timePeriodOptions[+val]);
+    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[0.5rem] items-center", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.OctagonXIcon, {}),
-          error || "Something went wrong"
-        ]
+        name: "hour",
+        value: hourOptions.indexOf(hour).toString(),
+        onChange: handleHourChange,
+        options: hourOptions
       }
     ),
-    hasSteps && /* @__PURE__ */ jsxRuntime.jsx(ProcessStepList, { steps, currentStep, className: "pb-[1rem]" }),
-    !hasSteps && phase === "initializing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-sm text-icon3 grid gap-[1rem] justify-items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This may take some time..." })
-    ] })
+    ":",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Select,
+      {
+        name: "minute",
+        value: minuteOptions.indexOf(minute).toString(),
+        onChange: handleMinuteChange,
+        options: minuteOptions
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(
+      DefaultTrigger,
+      {
+        value,
+        placeholder,
+        className,
+        "data-testid": "datepicker-button"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "backdrop-blur-4xl w-auto p-0 bg-surface4 max-w-[16.5rem]",
+        align: "start",
+        "data-testid": "datepicker-calendar",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          DateTimePickerContent,
+          {
+            value,
+            minValue,
+            maxValue,
+            onValueChange,
+            setOpenPopover,
+            defaultTimeStrValue,
+            ...props
+          }
+        )
+      }
+    )
+  ] });
+};
+function getCompoundDate({ date, timeStr = "" }) {
+  if (!dateFns.isValid(date)) {
+    return null;
+  }
+  if (timeStr) {
+    const dateStr = dateFns.format(date, "yyyy-MM-dd");
+    const newDate = /* @__PURE__ */ new Date(`${dateStr} ${timeStr}`);
+    if (dateFns.isValid(newDate)) {
+      return newDate;
+    }
+  }
+  return date;
+}
+const DateTimePickerContent = ({
+  value,
+  minValue,
+  maxValue,
+  onValueChange,
+  setOpenPopover,
+  placeholder,
+  className,
+  defaultTimeStrValue,
+  ...props
+}) => {
+  const [localErrorMsg, setLocalErrorMsg] = React__namespace.useState(null);
+  const [dateInputValue, setDateInputValue] = React__namespace.useState(
+    value ? dateFns.format(getCompoundDate({ date: value, timeStr: defaultTimeStrValue }) || "", "PP p") : ""
+  );
+  const [timeStrValue, setTimeStrValue] = React__namespace.useState(defaultTimeStrValue || "");
+  const [selected, setSelected] = React__namespace.useState(value ? new Date(value) : void 0);
+  const debouncedDateUpdate = useDebounce.useDebouncedCallback((date) => {
+    if (dateFns.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 (dateFns.isValid(date)) {
+      if (maxValue && date > maxValue) {
+        setLocalErrorMsg(`The selected date should be before ${dateFns.format(maxValue, "PP p")}`);
+        setDateInputValue("");
+      } else if (minValue && date < minValue) {
+        setLocalErrorMsg(`The selected date should be after ${dateFns.format(minValue, "PP p")}`);
+        setDateInputValue("");
+      } else {
+        setDateInputValue(dateFns.format(date, "PP p"));
+        setLocalErrorMsg("");
+      }
+    } else {
+      setDateInputValue("");
+      setLocalErrorMsg("");
+    }
+  };
+  const dateInputValueDate = new Date(dateInputValue);
+  const dateInputValueIsValid = dateFns.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 (dateFns.isValid(dateInputValueDate)) {
+      onValueChange(dateInputValueDate);
+    }
+    setOpenPopover?.(false);
+  };
+  const handleClear = () => {
+    onValueChange(void 0);
+    setSelected(void 0);
+    setDateInputValue("");
+    setTimeStrValue("");
+    setOpenPopover?.(false);
+  };
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1.25rem ]", children: "Done!" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.875rem] text-center text-icon3 ", children: [
-          "The ",
-          /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-icon4", children: name }),
-          " template has been successfully installed.",
-          installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-            " Installed entities are listed below."
-          ] })
-        ] }),
-        installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: installedEntities, LinkComponent })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputField,
+          {
+            type: "text",
+            value: dateInputValue,
+            onChange: handleInputChange,
+            placeholder,
+            className: "m-4 mb-0 !w-auto"
+          }
+        ),
+        localErrorMsg && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, {}),
+              " ",
+              localErrorMsg
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DatePicker,
+          {
+            mode: "single",
+            month: selected,
+            selected,
+            onMonthChange: handleMonthSelect,
+            onSelect: handleDaySelect,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TimePicker,
+          {
+            onValueChange: handleTimeStrChange,
+            className: "m-4 mt-0 w-auto",
+            defaultValue: value ? dateFns.formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-[0.5rem] m-4 mt-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "primary",
+              tabIndex: 0,
+              onClick: () => {
+                dateInputValueIsValid ? handleApply() : handleCancel();
+              },
+              children: newValueDefined ? `Apply` : `Cancel`
+            }
+          ),
+          newValueDefined && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", tabIndex: 0, onClick: handleClear, children: "Clear" })
+        ] })
       ]
     }
   );
-}
+};
+const DefaultTrigger = React__namespace.forwardRef(
+  ({ value, placeholder, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" }),
+      value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PPP p") }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "text-yellow-500" }),
-        title: "Template Installed with Warnings"
-      };
+function TextAndIcon({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FrownIcon, {}),
-      title: "Template Installation Failed"
-    };
-  };
-  const { icon, title } = getIconAndTitle();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center max-w-2xl mx-auto", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] font-medium text-icon5", children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon3", children: getUserFriendlyMessage() })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {})
         ]
       }
-    ),
-    validationErrors && validationErrors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: [
-        "Show Validation Issues (",
-        validationErrors.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-l-2 border-red-400 pl-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: error.type === "typescript" ? "🔴 TypeScript Error" : "⚠️ Lint Error" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: "Show Details" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchField,
+      {
+        label: "Search templates",
+        value: searchTerm,
+        onChange: (e) => onSearchChange?.(e.target.value),
+        placeholder: "Search Template"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
+      {
+        label: "Filter by provider",
+        value: selectedProvider,
+        onValueChange: onProviderChange,
+        options: providerOptions
+      }
+    ),
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
+      "Reset ",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
     ] })
   ] });
 }
 
-const TraceContext = React.createContext({});
-function TraceProvider({
-  children,
-  initialTraces: traces = []
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [trace, setTrace] = React.useState(null);
-  const [currentTraceIndex, setCurrentTraceIndex] = React.useState(0);
-  const [span, setSpan] = React.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__ */ jsxRuntime.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
-  } = React.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__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "No traces found" }) }) }) });
-};
-const TracesTableError = ({ error, colsCount }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(TxtCell, { title: trace.traceId, children: [
-      trace.traceId.substring(0, 7),
-      "..."
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" }) : /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), variant: "success", children: "Success" }) })
-  ] });
-};
-const TracesTable = ({ traces, error }) => {
-  const hasNoTraces = !traces || traces.length === 0;
-  const { currentTraceIndex } = React.useContext(TraceContext);
-  const colsCount = 4;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { size: "small", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Time" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: "auto", children: "Trace Id" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Duration" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Spans" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Status" })
-    ] }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      TraceRow,
+function TemplatesList({ templates, linkComponent, className, isLoading }) {
+  const LinkComponent = linkComponent || "a";
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
+                    style: {
+                      backgroundImage: `url(${template.imageURL})`
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
+                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
+                                " ",
+                                template.agents.length
+                              ] }),
+                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+                                " ",
+                                template.tools.length
+                              ] }),
+                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
+                                " ",
+                                template.networks.length
+                              ] }),
+                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
+                                " ",
+                                template.workflows.length
+                              ] }),
+                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
+                                " ",
+                                template.mcp.length
+                              ] })
+                            ]
+                          }
+                        ),
+                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] lg:min-h-[4rem] items-center "), children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PackageIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn({
+                  "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
+                }),
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : title
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] ", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn("mb-[1rem] text-[0.875rem] text-icon4 mt-[.5rem] leading-[1.75]", {
+              "bg-surface4 rounded-lg ": isLoading
+            }),
+            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
+          }
+        ),
+        !isLoading && templateSlug && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "bg-surface2 border border-surface4 rounded-lg p-[1rem] mb-[1rem]",
+              "flex items-start gap-[0.75rem]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-[0.125rem]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "w-[1.1em] h-[1.1em] text-blue-500" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-[0.5rem]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[0.5rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranchIcon, { className: "w-[1em] h-[1em] text-icon4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] font-medium text-icon5", children: "A new Git branch will be created" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[0.8125rem] text-icon4 space-y-[0.25rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Branch name:" }),
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-surface3 px-[0.375rem] py-[0.125rem] rounded text-[0.75rem] font-mono", children: branchName })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: "This ensures safe installation with easy rollback if needed. Your main branch remains unchanged." })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        githubUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GithubIcon, {}),
+              githubUrl?.split("/")?.pop()
+            ]
+          }
+        )
+      ] }),
+      infoData && /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: infoData, LinkComponent: lucideReact.Link, labelsAreHidden: true, isLoading })
+    ] })
+  ] });
+}
+
+function TemplateForm({
+  providerOptions,
+  selectedProvider,
+  onProviderChange,
+  variables,
+  errors,
+  handleInstallTemplate,
+  handleVariableChange,
+  isLoadingEnvVars,
+  defaultModelProvider,
+  defaultModelId,
+  onModelUpdate
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[40rem] my-[1rem] p-[1rem] lg:p-[2rem] mx-auto gap-[2rem] grid", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
+      {
+        options: providerOptions,
+        label: "Provider",
+        onValueChange: onProviderChange,
+        value: selectedProvider,
+        placeholder: "Select a provider"
+      }
+    ),
+    selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-[0.5rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem] font-medium", children: "Select AI Model for Template Installation *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon4 text-[0.75rem]", children: "This model will be used by the workflow to process and install the template" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AgentMetadataModelSwitcher,
+          {
+            defaultProvider: defaultModelProvider || "",
+            defaultModel: defaultModelId || "",
+            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
+            closeEditor: () => {
+            },
+            modelProviders: ["openai", "anthropic", "google", "xai", "groq"]
+          }
+        ),
+        (!defaultModelProvider || !defaultModelId) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-[0.75rem]", children: "Please select an AI model to continue" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, {}),
+            " Loading variables..."
+          ]
+        }
+      ) : Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputField,
+          {
+            name: `env-${key}`,
+            labelIsHidden: true,
+            label: "Key",
+            value: key,
+            disabled: true,
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+        ]
+      }
+    )
+  ] }) });
+}
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-[.5rem]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[0.875rem] text-icon5 min-w-[1.5rem] flex justify-end", children: [
+            position,
+            "."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[0.875rem] text-icon5", children: formatStepTitle(stepId) }),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] -mt-[0.125rem]", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-center flex-col gap-[1rem] content-center w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Container, { className: "space-y-6 text-icon3 mb-[2rem] content-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-icon5", children: getPhaseMessage() }),
+      streamResult?.runId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[0.5rem] text-[0.75rem] text-icon3", children: [
+        "Run ID: ",
+        streamResult.runId
+      ] })
+    ] }),
+    hasSteps && totalSteps > 0 && !["error"].includes(phase) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[30rem] w-full mx-auto px-[1.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx(ProcessStepProgressBar, { steps }) }),
+    error && phase === "error" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.OctagonXIcon, {}),
+          error || "Something went wrong"
+        ]
+      }
+    ),
+    hasSteps && /* @__PURE__ */ jsxRuntime.jsx(ProcessStepList, { steps, currentStep, className: "pb-[1rem]" }),
+    !hasSteps && phase === "initializing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-sm text-icon3 grid gap-[1rem] justify-items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This may take some time..." })
+    ] })
+  ] });
+}
+
+function TemplateSuccess({ name, installedEntities, linkComponent }) {
+  const LinkComponent = linkComponent || "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container,
+    {
+      className: cn(
+        "grid items-center justify-items-center gap-[1rem] content-center",
+        "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PackageOpenIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1.25rem ]", children: "Done!" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.875rem] text-center text-icon3 ", children: [
+          "The ",
+          /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-icon4", children: name }),
+          " template has been successfully installed.",
+          installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            " Installed entities are listed below."
+          ] })
+        ] }),
+        installedEntities && installedEntities.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "text-yellow-500" }),
+        title: "Template Installed with Warnings"
+      };
+    }
+    return {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FrownIcon, {}),
+      title: "Template Installation Failed"
+    };
+  };
+  const { icon, title } = getIconAndTitle();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid items-center justify-items-center gap-[1rem] content-center",
+          "[&>svg]:w-[2rem] [&>svg]:h-[2rem]"
+        ),
+        children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] font-medium text-icon5", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon3", children: getUserFriendlyMessage() })
+          ] })
+        ]
+      }
+    ),
+    validationErrors && validationErrors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: [
+        "Show Validation Issues (",
+        validationErrors.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-l-2 border-red-400 pl-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: error.type === "typescript" ? "🔴 TypeScript Error" : "⚠️ Lint Error" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("details", { className: "text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-icon3 hover:text-icon4 select-none text-center", children: "Show Details" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: errorMsg }) })
+    ] })
+  ] });
+}
+
+const TraceContext = React.createContext({});
+function TraceProvider({
+  children,
+  initialTraces: traces = []
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [trace, setTrace] = React.useState(null);
+  const [currentTraceIndex, setCurrentTraceIndex] = React.useState(0);
+  const [span, setSpan] = React.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__ */ jsxRuntime.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
+  } = React.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__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "No traces found" }) }) }) });
+};
+const TracesTableError = ({ error, colsCount }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TxtCell, { title: trace.traceId, children: [
+      trace.traceId.substring(0, 7),
+      "..."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: toSigFigs(trace.duration / 1e3, 3) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" }) : /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), variant: "success", children: "Success" }) })
+  ] });
+};
+const TracesTable = ({ traces, error }) => {
+  const hasNoTraces = !traces || traces.length === 0;
+  const { currentTraceIndex } = React.useContext(TraceContext);
+  const colsCount = 4;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { size: "small", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: "auto", children: "Trace Id" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Duration" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Spans" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Status" })
+    ] }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      TraceRow,
+      {
+        trace,
+        index,
+        isActive: index === currentTraceIndex
+      },
+      trace.traceId + index
+    )) }) })
+  ] });
+};
+
 const useResizeColumn = ({
   defaultWidth,
   minimumWidth,
@@ -15367,518 +16256,1362 @@ const TraceTree = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx("absolute h-1 rounded-full", variantClass),
+        style: { width: `${percent}%`, left: `${offsetPercent}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
+        toSigFigs(durationMs, 3),
+        "ms"
+      ] }),
+      tokenCount && /* @__PURE__ */ jsxRuntime.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] = React.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__ */ jsxRuntime.jsxs("li", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
+        spans ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { className: clsx("transition-transform -rotate-90", { "rotate-0": isExpanded }) }) })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-full w-4", children: !isRoot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-[7px] h-full w-px rounded-full" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TextEl, { className: "flex items-center gap-2 min-w-0", onClick, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("bg-surface4 flex items-center justify-center rounded-md p-[3px]", variantClass), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(VariantIcon, {}) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon6 truncate", children })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Time,
+        {
+          durationMs,
+          tokenCount,
+          variant: variant === "agent" ? "agent" : void 0,
+          progressPercent,
+          offsetPercent
+        }
+      )
+    ] }),
+    isExpanded && spans && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: spans })
+  ] });
+};
+
+const Spans = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
+};
+
+const Trace = ({
+  name,
+  spans,
+  durationMs,
+  tokenCount,
+  onClick,
+  variant,
+  isActive,
+  totalDurationMs
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Span,
+    {
+      isRoot: true,
+      durationMs,
+      variant,
+      spans: /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(Spans, { children: spanNodes.map((spanNode) => {
+    const isActive = spanNode.id === activeSpan?.id;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Span,
+      {
+        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
+  const tree = createSpanTree(trace);
+  return /* @__PURE__ */ jsxRuntime.jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+    Trace,
+    {
+      name: node.name,
+      durationMs: node.duration,
+      totalDurationMs: node.totalDurationMs,
+      spans: /* @__PURE__ */ jsxRuntime.jsx(NestedSpans, { spanNodes: node.children }),
+      variant: getSpanVariant(node),
+      isActive: node.id === activeSpan?.id,
+      onClick: () => setSpan(node)
+    }
+  )) });
+}
+
+const Header = ({ children, border = true }) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx("absolute h-1 rounded-full", variantClass),
-        style: { width: `${percent}%`, left: `${offsetPercent}%` }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        toSigFigs(durationMs, 3),
-        "ms"
-      ] }),
-      tokenCount && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        tokenCount,
-        "t"
-      ] })
-    ] })
-  ] });
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "gap-lg flex items-center", children });
 };
-const Span = ({
-  children,
-  durationMs,
-  variant,
-  tokenCount,
-  spans,
-  isRoot,
-  onClick,
-  isActive,
-  offsetMs,
-  totalDurationMs
-}) => {
-  const [isExpanded, setIsExpanded] = React.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__ */ jsxRuntime.jsxs("li", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
-        spans ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+
+function TraceDetails() {
+  const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = React.useContext(TraceContext);
+  const actualTrace = traces[currentTraceIndex];
+  if (!actualTrace || !trace) return null;
+  const hasFailure = trace.some((span) => span.status.code === 2);
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-full w-4", children: !isRoot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-[7px] h-full w-px rounded-full" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(TextEl, { className: "flex items-center gap-2 min-w-0", onClick, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("bg-surface4 flex items-center justify-center rounded-md p-[3px]", variantClass), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(VariantIcon, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon6 truncate", children })
-        ] })
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Time,
-        {
-          durationMs,
-          tokenCount,
-          variant: variant === "agent" ? "agent" : void 0,
-          progressPercent,
-          offsetPercent
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
+          "Trace ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
+        ] }),
+        hasFailure && /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" })
+      ] })
     ] }),
-    isExpanded && spans && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: spans })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.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 } = React.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__ */ jsxRuntime.jsxs("aside", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: nextSpan, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
+        "Span ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(SpanIcon, { className: variantClass }) }),
+        span.name
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 2 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
+        "Failed in ",
+        toSigFigs(span.duration, 3),
+        "ms"
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
+        toSigFigs(span.duration, 3),
+        "ms"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: span.id }),
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Created at" }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: span.startTime ? formatOtelTimestamp(span.startTime) : "" })
+      ] }),
+      span.attributes && /* @__PURE__ */ jsxRuntime.jsx(Attributes, { attributes: span.attributes }),
+      span.events?.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: entries.filter(([key]) => !keysToHide.includes(key)).map(([key, val]) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(key) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AttributeValue, { value: val })
+    ] }, key);
+  }) });
+}
+const AttributeValue = ({ value }) => {
+  if (!value)
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: "N/A" });
+  if (typeof value === "number" || typeof value === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
+  if (typeof value === "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: value });
+  }
+  try {
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
+  } catch {
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
 };
+function Events({ span }) {
+  if (!span.events) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2 pb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: event.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Time" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "N/A" })
+          ] }),
+          event.attributes?.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: event.attributes.filter((attribute) => attribute !== null).map((attribute) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(attribute.key) }),
+            /* @__PURE__ */ jsxRuntime.jsx(AttributeValue, { value: attribute.value })
+          ] }, attribute.key)) }) : null
+        ] }, event.name),
+        !isLast && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" })
+      ] }, event.name);
+    })
+  ] });
+}
 
-const Spans = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
-};
-
-const Trace = ({
-  name,
-  spans,
-  durationMs,
-  tokenCount,
-  onClick,
-  variant,
-  isActive,
-  totalDurationMs
-}) => {
+const TracesSidebar = ({ onResize }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Span,
+    MastraResizablePanel,
     {
-      isRoot: true,
-      durationMs,
-      variant,
-      spans: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "h-full grid grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsxRuntime.jsx(TraceDetails, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-40px)] overflow-x-scroll w-full border-l border-border1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TracesViewSkeleton, {});
   }
-  return "other";
+  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(
+    TracesViewInner,
+    {
+      traces,
+      error,
+      runId,
+      stepName,
+      className,
+      setEndOfListElement
+    }
+  ) });
+}
+function TracesViewInner({ traces, error, runId, stepName, className, setEndOfListElement }) {
+  const hasRunRef = React.useRef(false);
+  const [sidebarWidth, setSidebarWidth] = React.useState(100);
+  const { isOpen: open, setTrace, setIsOpen, setSpan } = React.useContext(TraceContext);
+  React.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__ */ jsxRuntime.jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full overflow-y-scroll w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, ref: setEndOfListElement })
+    ] }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+  ] });
+}
+const TracesViewSkeleton = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full relative overflow-hidden flex", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AgentIcon, {}),
+      color: "oklch(0.75 0.15 250)",
+      label: "Agent"
+    },
+    workflow: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}),
+      color: "oklch(0.75 0.15 200)",
+      label: "Workflow"
+    },
+    llm: {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, {}),
+      color: "oklch(0.75 0.15 320)",
+      label: "LLM"
+    },
+    tool: {
+      icon: /* @__PURE__ */ jsxRuntime.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] = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] w-full", children: [
+          !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(TreePositionMark, { isLastChild, hasChildren: Boolean(hasChildren) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0", style: { color: spanUI?.color }, children: spanUI?.icon }),
+            span.name
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        HoverCard__namespace.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__ */ jsxRuntime.jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] ", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRight, {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      style: {
+                        transform: percentageSpanStartTime && percentageSpanStartTime > 70 ? "translateX(calc((100% + 2rem) * -1))" : "none"
+                      },
+                      children: [
+                        (span.latency / 1e3).toFixed(2),
+                        " s"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full bg-surface5  h-[3px] ", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("bg-icon1 h-full absolute rounded-full"),
+                style: {
+                  width: `${percentageSpanLatency}%`,
+                  left: `${percentageSpanStartTime}%`,
+                  backgroundColor: spanUI?.color
+                }
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        HoverCard__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}),
+                  " Span Timing"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightIcon, {})
+                  },
+                  {
+                    key: "startTime",
+                    label: "Started at",
+                    value: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronFirstIcon, {})
+                  },
+                  {
+                    key: "endTime",
+                    label: "Ended at",
+                    value: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLastIcon, {})
+                  },
+                  {
+                    key: "startShift",
+                    label: "Start Shift",
+                    value: `${spanStartTimeShift}ms`,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+                  }
+                ],
+                LinkComponent: Link
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
+          ]
+        }
+      ) })
+    ] }),
+    hasChildren && span.spans?.map((childSpan, idx, array) => {
+      const isLastChild2 = idx === array.length - 1;
+      return /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(Spans, { children: spanNodes.map((spanNode) => {
-    const isActive = spanNode.id === activeSpan?.id;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Span,
-      {
-        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
-  const tree = createSpanTree(trace);
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
-    Trace,
+function TreePositionMark({ isLastChild, hasChildren = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      name: node.name,
-      durationMs: node.duration,
-      totalDurationMs: node.totalDurationMs,
-      spans: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
-};
-const HeaderAction = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children });
-};
-const HeaderGroup = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-lg flex items-center", children });
-};
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-[.5rem]"), children: [
+      /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
-  const actualTrace = traces[currentTraceIndex];
-  if (!actualTrace || !trace) return null;
-  const hasFailure = trace.some((span) => span.status.code === 2);
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button$1,
-          {
-            className: "bg-transparent border-none",
-            onClick: nextTrace,
-            disabled: currentTraceIndex === traces.length - 1,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
-          }
-        )
+function TraceTimeline({
+  spans = [],
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  className
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
+        " Timeline"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
-          "Trace ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
-        ] }),
-        hasFailure && /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(SpanView, { trace }) })
+    isLoading ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, {}),
+          " Loading Trace Timeline ..."
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 } = React.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__ */ jsxRuntime.jsxs("aside", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: nextSpan, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
-        "Span ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(SpanIcon, { className: variantClass }) }),
-        span.name
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 2 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
-        "Failed in ",
-        toSigFigs(span.duration, 3),
-        "ms"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
-        toSigFigs(span.duration, 3),
-        "ms"
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "ID" }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: span.id }),
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Created at" }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: span.startTime ? formatOtelTimestamp(span.startTime) : "" })
-      ] }),
-      span.attributes && /* @__PURE__ */ jsxRuntime.jsx(Attributes, { attributes: span.attributes }),
-      span.events?.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.CoinsIcon, {})
+    },
+    promptTokens: {
+      label: "Prompt Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+    },
+    completionTokens: {
+      label: "Completion Tokens",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("bg-white/5 p-[1rem] px-[1.25rem] rounded-lg text-[0.875rem]", {
+            "min-h-[5.5rem]": traceUsage
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-[1rem]", children: value })
+                ]
+              }
+            ),
+            tokensByProviderValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem] ", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "dl",
+              {
+                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("dt", { children: provider }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: entries.filter(([key]) => !keysToHide.includes(key)).map(([key, val]) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(key) }),
-      /* @__PURE__ */ jsxRuntime.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 ? dateFns.format(new Date(trace?.createdAt), "PPpp") : "-"
+    }
+  ];
 }
-const AttributeValue = ({ value }) => {
-  if (!value)
-    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: "N/A" });
-  if (typeof value === "number" || typeof value === "boolean") {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: value });
+  const baseInfo = [
+    {
+      key: "spanType",
+      label: "Span Type",
+      value: span?.spanType
+    },
+    {
+      key: "createdAt",
+      label: "Created at",
+      value: span?.createdAt ? dateFns.format(new Date(span?.createdAt), "MMM dd, HH:mm:ss.SSS") : "-"
+    },
+    {
+      key: "startedAt",
+      label: "Started At",
+      value: span?.startedAt ? dateFns.format(new Date(span.startedAt), "MMM dd, HH:mm:ss.SSS") : "-"
+    },
+    {
+      key: "endedAt",
+      label: "Ended At",
+      value: span?.endedAt ? dateFns.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__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
-  } catch {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2 pb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Name" }),
-            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: event.name }),
-            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Time" }),
-            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-ui-md text-icon6", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "N/A" })
-          ] }),
-          event.attributes?.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: event.attributes.filter((attribute) => attribute !== null).map((attribute) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(attribute.key) }),
-            /* @__PURE__ */ jsxRuntime.jsx(AttributeValue, { value: attribute.value })
-          ] }, attribute.key)) }) : null
-        ] }, event.name),
-        !isLast && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" })
-      ] }, event.name);
-    })
+  return baseInfo;
+}
+
+function SpanDetails({ span }) {
+  if (!span) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) })
   ] });
 }
 
-const TracesSidebar = ({ onResize }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MastraResizablePanel,
+function SpanDialog({
+  span,
+  isOpen,
+  onClose,
+  onNext,
+  onPrevious,
+  onViewToggle,
+  spanInfo = []
+}) {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SideDialog,
     {
-      className: "h-full absolute right-0 inset-y-0 bg-surface2",
-      defaultWidth: 80,
-      minimumWidth: 50,
-      maximumWidth: 80,
-      setCurrentWidth: onResize,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full grid grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsxRuntime.jsx(TraceDetails, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-40px)] overflow-x-scroll w-full border-l border-border1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+              " ",
+              getShortId(span?.traceId)
+            ] }),
+            "›",
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+              getShortId(span?.spanId)
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelTopIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+              " ",
+              span?.name
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+              " ",
+              span?.spanId
+            ] })
+          ] }),
+          span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
+          /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TracesViewSkeleton, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(
-    TracesViewInner,
-    {
-      traces,
-      error,
-      runId,
-      stepName,
-      className,
-      setEndOfListElement
+  const { Link } = useLinkComponent();
+  const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
+  const [selectedSpanId, setSelectedSpanId] = React.useState(void 0);
+  const [combinedView, setCombinedView] = React.useState(false);
+  const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
+  const hierarchicalSpans = React.useMemo(() => {
+    return formatHierarchicalSpans(traceSpans);
+  }, [traceSpans]);
+  const flatSpans = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+            " ",
+            getShortId(traceId)
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                    " ",
+                    traceDetails?.name
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+                    " ",
+                    traceId
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto pb-[2.5rem]", children: [
+                  traceDetails?.metadata?.usage && /* @__PURE__ */ jsxRuntime.jsx(
+                    TraceSpanUsage,
+                    {
+                      traceUsage: traceDetails?.metadata?.usage,
+                      traceSpans,
+                      className: "mt-[2rem] pr-[1.5rem]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: traceInfo, LinkComponent: Link, className: "mt-[2rem]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    TraceTimeline,
+                    {
+                      hierarchicalSpans,
+                      spans: traceSpans,
+                      onSpanClick: handleSpanClick,
+                      selectedSpanId,
+                      isLoading: isLoadingSpans,
+                      className: "pr-[2.5rem] pt-[2.5rem]"
+                    }
+                  )
+                ] }),
+                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-[.5rem] pt-[1rem] border-b border-border1 pr-[2.5rem]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SideDialogTop,
+                      {
+                        onNext: thereIsNextSpan() ? toNextSpan : void 0,
+                        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
+                        showInnerNav: true,
+                        className: "pl-0",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                            " ",
+                            getShortId(traceId)
+                          ] }),
+                          "›",
+                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                            " ",
+                            getShortId(selectedSpanId)
+                          ] })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[1rem]", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: () => setCombinedView(false), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+                        " ",
+                        selectedSpan?.name
+                      ] }),
+                      selectedSpan?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(
+                        TraceSpanUsage,
+                        {
+                          spanUsage: selectedSpan.attributes.usage,
+                          className: "xl:grid-cols-1 xl:gap-[1rem]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span: selectedSpan }) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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 = React.useRef(false);
-  const [sidebarWidth, setSidebarWidth] = React.useState(100);
-  const { isOpen: open, setTrace, setIsOpen, setSpan } = React.useContext(TraceContext);
-  React.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__ */ jsxRuntime.jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full overflow-y-scroll w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, ref: setEndOfListElement })
+
+function TracesTools({
+  onEntityChange,
+  onReset,
+  selectedEntity,
+  entityOptions,
+  onDateChange,
+  selectedDateFrom,
+  selectedDateTo,
+  isLoading
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap gap-x-[2rem] gap-y-[1rem]"), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem] items-center flex-wrap mr-auto"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0 text-[0.875rem] text-icon3"), children: "Filter by Date & time range" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DateTimePicker,
+        {
+          placeholder: "From",
+          value: selectedDateFrom,
+          maxValue: selectedDateTo,
+          onValueChange: (date) => onDateChange?.(date, "from"),
+          className: "min-w-[15rem]",
+          defaultTimeStrValue: "12:00 AM",
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: onReset, disabled: isLoading, children: [
+      "Reset ",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    ] })
   ] });
 }
-const TracesViewSkeleton = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full relative overflow-hidden flex", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10" }) }) });
-};
 
 const DataTable = ({
   columns,
@@ -16523,8 +18256,11 @@ exports.Crumb = Crumb;
 exports.DarkLogo = DarkLogo;
 exports.DataTable = DataTable;
 exports.DateTimeCell = DateTimeCell;
+exports.DateTimePicker = DateTimePicker;
+exports.DateTimePickerContent = DateTimePickerContent;
 exports.DbIcon = DbIcon;
 exports.DebugIcon = DebugIcon;
+exports.DefaultTrigger = DefaultTrigger;
 exports.DeploymentIcon = DeploymentIcon;
 exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
@@ -16538,9 +18274,16 @@ exports.EntityContent = EntityContent;
 exports.EntityDescription = EntityDescription;
 exports.EntityHeader = EntityHeader;
 exports.EntityIcon = EntityIcon;
+exports.EntityMainHeader = EntityMainHeader;
 exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;
+exports.EntryList = EntryList;
+exports.EntryListItem = EntryListItem;
+exports.EntryListPageHeader = EntryListPageHeader;
+exports.EntryListStatusCell = EntryListStatusCell;
+exports.EntryListTextCell = EntryListTextCell;
+exports.EntryListToolbar = EntryListToolbar;
 exports.EnvIcon = EnvIcon;
 exports.EvaluatorCoinIcon = EvaluatorCoinIcon;
 exports.FiltersIcon = FiltersIcon;
@@ -16580,6 +18323,7 @@ exports.NetworkTable = NetworkTable;
 exports.NetworkTableEmpty = NetworkTableEmpty;
 exports.NetworkTableSkeleton = NetworkTableSkeleton;
 exports.OpenAIIcon = OpenAIIcon;
+exports.PageHeader = PageHeader;
 exports.PlaygroundQueryClient = PlaygroundQueryClient;
 exports.PlaygroundTabs = PlaygroundTabs;
 exports.PromptIcon = PromptIcon;
@@ -16597,6 +18341,16 @@ exports.SearchField = SearchField;
 exports.Searchbar = Searchbar;
 exports.SelectField = SelectField;
 exports.SettingsIcon = SettingsIcon;
+exports.SideDialog = SideDialog;
+exports.SideDialogCodeSection = SideDialogCodeSection;
+exports.SideDialogContent = SideDialogContent;
+exports.SideDialogFooter = SideDialogFooter;
+exports.SideDialogFooterGroup = SideDialogFooterGroup;
+exports.SideDialogHeader = SideDialogHeader;
+exports.SideDialogHeading = SideDialogHeading;
+exports.SideDialogKeyValueList = SideDialogKeyValueList;
+exports.SideDialogSection = SideDialogSection;
+exports.SideDialogTop = SideDialogTop;
 exports.SlashIcon = SlashIcon;
 exports.SliderField = SliderField;
 exports.Tab = Tab;
@@ -16611,6 +18365,7 @@ exports.TemplateInstallation = TemplateInstallation;
 exports.TemplateSuccess = TemplateSuccess;
 exports.TemplatesList = TemplatesList;
 exports.TemplatesTools = TemplatesTools;
+exports.TextAndIcon = TextAndIcon;
 exports.TextareaField = TextareaField;
 exports.Th = Th;
 exports.Thead = Thead;
@@ -16624,7 +18379,12 @@ exports.ToolList = ToolList;
 exports.ToolListEmpty = ToolListEmpty;
 exports.ToolListSkeleton = ToolListSkeleton;
 exports.ToolsIcon = ToolsIcon;
+exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
+exports.TraceTimeline = TraceTimeline;
+exports.TraceTimelineLegend = TraceTimelineLegend;
+exports.TraceTimelineSpan = TraceTimelineSpan;
+exports.TracesTools = TracesTools;
 exports.TracesView = TracesView;
 exports.TracesViewSkeleton = TracesViewSkeleton;
 exports.TsIcon = TsIcon;
@@ -16647,9 +18407,14 @@ exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.allowedAiSpanAttributes = allowedAiSpanAttributes;
 exports.cleanString = cleanString;
 exports.formatDuration = formatDuration;
+exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatOtelTimestamp = formatOtelTimestamp;
 exports.formatOtelTimestamp2 = formatOtelTimestamp2;
+exports.getColumnTemplate = getColumnTemplate;
+exports.getShortId = getShortId;
+exports.getSpanTypeUi = getSpanTypeUi;
 exports.providerMapToIcon = providerMapToIcon;
+exports.spanTypePrefixes = spanTypePrefixes;
 exports.transformKey = transformKey;
 exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;