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

package/dist/index.d.ts

@@ -6,5 +6,9 @@ export * from './domains/resizable-panel';
 export * from './components/dynamic-form/index';
 export * from './types';
 export * from './ds/components/Badge/index';
+export * from './ds/components/Button/index';
+export * from './ds/components/Breadcrumb/index';
+export * from './ds/components/Header/index';
 export * from './ds/components/Logo/index';
+export * from './ds/components/Table/index';
 export * from './ds/components/Txt/index';

package/dist/index.es.js

@@ -2827,13 +2827,13 @@ const buttonVariants = cva(
     }
   }
 );
-const Button = React.forwardRef(
+const Button$1 = React.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
-Button.displayName = "Button";
+Button$1.displayName = "Button";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
@@ -2855,7 +2855,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const TooltipIconButton = forwardRef(
   ({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", ...rest, className: cn("size-6 p-1", className), ref, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", ...rest, className: cn("size-6 p-1", className), ref, children: [
         children,
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: tooltip })
       ] }) }),
@@ -3128,7 +3128,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
         /* @__PURE__ */ jsx("b", { children: toolName })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex-grow" }),
-      /* @__PURE__ */ jsx(Button, { onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      /* @__PURE__ */ jsx(Button$1, { onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
     ] }),
     !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t pt-2", children: [
       /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText }) }),
@@ -3311,7 +3311,7 @@ const Thread = ({
               bottom: 0,
               margin: "0 auto",
               zIndex: 10,
-              paddingBottom: "0.5em",
+              paddingBottom: "4rem",
               left: "50%",
               transform: "translate(-50%)",
               background: "#0f0f0f"
@@ -3473,8 +3473,8 @@ const EditComposer = () => {
       children: [
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, { className: "text-foreground flex h-8 w-full resize-none bg-transparent p-4 pb-0 outline-none" }),
         /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-3 flex items-center justify-center gap-2 self-end", children: [
-          /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Send" }) })
+          /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { variant: "ghost", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(Button$1, { children: "Send" }) })
         ] })
       ]
     }
@@ -3760,7 +3760,7 @@ function CopyableContent({ content, label, multiline = false }) {
   return /* @__PURE__ */ jsxs("div", { className: "group relative flex items-start gap-2", children: [
     /* @__PURE__ */ jsx("span", { className: cn("text-sm text-mastra-el-4", multiline ? "whitespace-pre-wrap" : "truncate"), children: content }),
     /* @__PURE__ */ jsx(
-      Button,
+      Button$1,
       {
         variant: "ghost",
         size: "sm",
@@ -3832,10 +3832,10 @@ function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
 }
 
-const Table = React.forwardRef(
+const Table$1 = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm border-spacing-0", className), ...props })
 );
-Table.displayName = "Table";
+Table$1.displayName = "Table";
 const TableHeader = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b-[0.5px]", className), ...props })
 );
@@ -4010,9 +4010,9 @@ function EvalTable({ evals, isCIMode = false }) {
         evals.length,
         " Total Evaluations"
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: isTableLoading, className: "h-9 w-9", children: isTableLoading ? /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: isTableLoading, className: "h-9 w-9", children: isTableLoading ? /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs(Table$1, { className: "w-full", children: [
       /* @__PURE__ */ jsx(TableHeader, { className: "bg-mastra-bg-2 h-[var(--table-header-height)] sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
         /* @__PURE__ */ jsx(TableHead, { className: "w-12 h-12" }),
         /* @__PURE__ */ jsx(
@@ -4075,7 +4075,7 @@ function EvalTable({ evals, isCIMode = false }) {
           {
             colSpan: 5 + (getHasReasons(group.evals) ? 1 : 0) + (isCIMode ? 1 : 0),
             className: "p-0",
-            children: /* @__PURE__ */ jsx("div", { className: "bg-mastra-bg-3 rounded-lg m-2", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
+            children: /* @__PURE__ */ jsx("div", { className: "bg-mastra-bg-3 rounded-lg m-2", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Table$1, { className: "w-full", children: [
               /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "text-[0.7rem] text-mastra-el-3 hover:bg-transparent", children: [
                 /* @__PURE__ */ jsx(TableHead, { className: "pl-12 w-[120px]", children: "Timestamp" }),
                 /* @__PURE__ */ jsx(TableHead, { className: "w-[300px]", children: "Instructions" }),
@@ -4467,7 +4467,7 @@ function Traces({ traces }) {
     return !prevTracesId.has(traceId);
   };
   const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table$1, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", style: { outline: "1px solid 0_0%_20.4%" }, children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
       /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
       /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4526,7 +4526,7 @@ function TraceButton({
     setCurrentTraceIndex
   } = useContext(TraceContext);
   return /* @__PURE__ */ jsxs(
-    Button,
+    Button$1,
     {
       variant: "ghost",
       className: "flex h-0 items-center gap-2 p-0",
@@ -4581,7 +4581,7 @@ function TreeNode({ node, depth = 0 }) {
   const widthPercentage = Math.min(node.relativePercentage ? node?.relativePercentage * 100 : 0, 100);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxs(
-      Button,
+      Button$1,
       {
         variant: "ghost",
         className: cn("relative flex w-full items-center justify-start gap-2 py-3 pr-1 text-sm", {
@@ -4696,7 +4696,7 @@ function TraceDetails() {
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(
-            Button,
+            Button$1,
             {
               onClick: () => {
                 prevTrace();
@@ -4710,7 +4710,7 @@ function TraceDetails() {
           ),
           " ",
           /* @__PURE__ */ jsx(
-            Button,
+            Button$1,
             {
               onClick: () => {
                 nextTrace();
@@ -4725,7 +4725,7 @@ function TraceDetails() {
         ] }),
         /* @__PURE__ */ jsx("span", { className: "bg-secondary inline-block h-5 w-px" }),
         /* @__PURE__ */ jsx(
-          Button,
+          Button$1,
           {
             onClick: () => {
               clearData();
@@ -5010,7 +5010,7 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
       if (!res.traces) {
         throw new Error("Error fetching traces");
       }
-      const refinedTraces = refineTraces(res?.traces?.traces || [], isWorkflow);
+      const refinedTraces = refineTraces(res?.traces || [], isWorkflow);
       return refinedTraces;
     } catch (error2) {
       throw error2;
@@ -5058,7 +5058,7 @@ function AgentTracesInner({
   const { isOpen: open } = useContext(TraceContext);
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5080,7 +5080,7 @@ function AgentTracesInner({
   }
   if (!traces || traces.length === 0) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5177,7 +5177,6 @@ const AgentIcon = ({ className }) => {
 };
 
 const DataTable = ({
-  title,
   icon,
   withoutBorder = false,
   columns,
@@ -5186,7 +5185,6 @@ const DataTable = ({
   pagination,
   gotoNextPage,
   gotoPreviousPage,
-  maxHeight,
   withoutRadius = false,
   disabledFlex,
   emptyStateHeight,
@@ -5223,17 +5221,10 @@ const DataTable = ({
     onRowSelectionChange: setRowSelection
   });
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", disabledFlex ? "block" : ""), children: [
-    /* @__PURE__ */ jsx("div", { className: cn("border", !withoutRadius && "rounded-md", className), children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { className: cn("z-50 bg-[#0f0f0f]", title && "hover:bg-transparent"), children: [
-        icon && !title ? /* @__PURE__ */ jsx(TableHead, { className: "w-9 rounded-tl-md" }) : null,
-        title ? /* @__PURE__ */ jsx(
-          TableHead,
-          {
-            className: cn("px-0", !withoutRadius && "rounded-tl-md rounded-tr-md"),
-            colSpan: headerGroup.headers.length + (icon ? 1 : 0),
-            children: title
-          }
-        ) : headerGroup.headers.map((header) => {
+    /* @__PURE__ */ jsx("div", { className: cn("border", !withoutRadius && "rounded-md", className), children: /* @__PURE__ */ jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { className: cn("z-50 bg-[#0f0f0f]", "hover:bg-transparent"), children: [
+        icon ? /* @__PURE__ */ jsx(TableHead, { className: "w-9 rounded-tl-md" }) : null,
+        headerGroup.headers.map((header) => {
           return /* @__PURE__ */ jsx(
             TableHead,
             {
@@ -5268,7 +5259,7 @@ const DataTable = ({
           },
           cell.id
         ))
-      ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan: columns.length, className: cn("h-24 text-center", emptyStateHeight), children: [
+      ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan: columns.length, className: cn("h-24 text-center w-full", emptyStateHeight), children: [
         "No ",
         emptyText || "results"
       ] }) }) })
@@ -5285,15 +5276,14 @@ const DataTable = ({
         " results"
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-6 lg:space-x-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: gotoPreviousPage, disabled: !pagination.offset, children: "Previous" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: gotoNextPage, disabled: !pagination.hasMore, children: "Next" })
+        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoPreviousPage, disabled: !pagination.offset, children: "Previous" }),
+        /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: gotoNextPage, disabled: !pagination.hasMore, children: "Next" })
       ] }) })
     ] })
   ] });
 };
 
 const AgentsTable = ({
-  title,
   agentsList,
   columns,
   isLoading
@@ -5302,7 +5292,6 @@ const AgentsTable = ({
     DataTable,
     {
       emptyText: "Agents",
-      title,
       isLoading,
       withoutBorder: true,
       withoutRadius: true,
@@ -5510,7 +5499,7 @@ function CopyButton({ content, copyMessage, classname }) {
     copyMessage
   });
   return /* @__PURE__ */ jsxs(
-    Button,
+    Button$1,
     {
       variant: "ghost",
       size: "icon",
@@ -5758,7 +5747,7 @@ function WorkflowTracesInner({
   const { isOpen: open } = useContext(TraceContext);
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5780,7 +5769,7 @@ function WorkflowTracesInner({
   }
   if (!traces || traces.length === 0) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -6806,7 +6795,6 @@ const AutomationIcon = ({ className }) => {
 };
 
 const WorkflowsTable = ({
-  title,
   workflowsList,
   columns,
   isLoading
@@ -6815,7 +6803,6 @@ const WorkflowsTable = ({
     DataTable,
     {
       emptyText: "Workflows",
-      title,
       withoutBorder: true,
       withoutRadius: true,
       isLoading,
@@ -6879,7 +6866,7 @@ const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "dest
   /* @__PURE__ */ jsx(AlertTitle, { children: error })
 ] });
 
-const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button, { type: "submit", children });
+const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button$1, { type: "submit", children });
 
 const StringField = ({ inputProps, error, id }) => {
   const { key, ...props } = inputProps;
@@ -7140,7 +7127,7 @@ const DatePickerOnly = ({
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: clearable && /* @__PURE__ */ jsx(
-          Button,
+          Button$1,
           {
             variant: "outline",
             tabIndex: 0,
@@ -7161,7 +7148,7 @@ const DatePickerOnly = ({
 const DefaultButton = React.forwardRef(
   ({ value, placeholder, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
-      Button,
+      Button$1,
       {
         ref,
         variant: "outline",
@@ -7298,7 +7285,7 @@ const ArrayWrapper = ({ label, children, onAddItem }) => {
     /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: label }),
     children,
     /* @__PURE__ */ jsx(
-      Button,
+      Button$1,
       {
         className: "w-full flex items-center justify-center",
         onClick: onAddItem,
@@ -7313,7 +7300,7 @@ const ArrayWrapper = ({ label, children, onAddItem }) => {
 
 const ArrayElementWrapper = ({ children, onRemove }) => {
   return /* @__PURE__ */ jsxs("div", { className: "relative border p-4 rounded-md mt-2", children: [
-    /* @__PURE__ */ jsx(Button, { onClick: onRemove, variant: "ghost", className: "absolute top-2 right-2", type: "button", children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(Button$1, { onClick: onRemove, variant: "ghost", className: "absolute top-2 right-2", type: "button", children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }) }),
     children
   ] });
 };
@@ -7371,7 +7358,7 @@ const RecordField = ({ inputProps, error, id }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     pairs.map((pair) => /* @__PURE__ */ jsxs("div", { className: "relative space-y-2 rounded-lg border p-4", children: [
       /* @__PURE__ */ jsx(
-        Button,
+        Button$1,
         {
           type: "button",
           variant: "ghost",
@@ -7402,7 +7389,7 @@ const RecordField = ({ inputProps, error, id }) => {
         )
       ] })
     ] }, pair.id)),
-    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: addPair, children: [
+    /* @__PURE__ */ jsxs(Button$1, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: addPair, children: [
       /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
       "Add Key-Value Pair"
     ] })
@@ -7540,7 +7527,7 @@ function DynamicForm({
       className: "space-y-4 p-4"
     },
     uiComponents: {
-      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : children || submitButtonLabel })
+      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button$1, { className: "w-full", type: "submit", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : children || submitButtonLabel })
     },
     formComponents: {
       Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
@@ -7691,7 +7678,7 @@ function WorkflowTrigger({
         /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
         " Resuming workflow"
       ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-      /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
+      /* @__PURE__ */ jsx(Button$1, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
     ] }) }),
     Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
@@ -7790,6 +7777,68 @@ const Badge = ({ icon, variant = "default", className, children, ...props }) =>
   );
 };
 
+const Button = ({ className, as, ...props }) => {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx(
+        "bg-surface2 border-sm border-border1 px-lg h-button-default text-ui-md text-icon3 gap-md inline-flex items-center rounded-md border",
+        "hover:bg-surface4 hover:text-white",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label }) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
+};
+const Crumb = ({ className, as, isCurrent, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("li", { className: "flex h-full items-center", children: /* @__PURE__ */ jsx(
+      Root,
+      {
+        "aria-current": isCurrent ? "page" : void 0,
+        className: clsx("text-ui-lg leading-ui-lg font-medium", isCurrent ? "text-white" : "text-icon3", className),
+        ...props
+      }
+    ) }),
+    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const Header = ({ children }) => {
+  return /* @__PURE__ */ jsx("header", { className: "h-header-default bg-surface2 border-b-sm border-border1 z-50 flex w-full items-center gap-[18px] px-5", children });
+};
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
+};
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
+};
+const HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
+};
+
 const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "black" }),
   /* @__PURE__ */ jsx(
@@ -7848,19 +7897,76 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
+const rowSize = {
+  default: "[&>tbody>tr]:h-table-row",
+  small: "[&>tbody>tr]:h-table-row-small"
 };
-const fonts = {
-  mono: "font-mono"
+const Table = ({ className, children, size = "default" }) => {
+  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
 };
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+const Thead = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
+};
+const Th = ({ className, children }) => {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: clsx("text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5", className),
+      children
+    }
+  );
+};
+const Tbody = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
+};
+const Row = ({ className, children, selected = false }) => {
+  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
+};
+
+const formatDateCell = (date) => {
+  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
+  const day = date.getDate();
+  const formattedDay = `${month} ${day}`;
+  const time = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+    // Use 24-hour format
+  }).format(date);
+  return { day: formattedDay, time };
+};
+
+const Cell = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("td", { className: "text-icon5 first:pl-5 last:pr-5", children: /* @__PURE__ */ jsx("div", { className: clsx("flex h-full items-center", className), children }) });
+};
+const TxtCell = ({ className, children }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full max-w-[330px] truncate", children }) });
+};
+const UnitCell = ({ className, children, unit }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full max-w-[200px] truncate", children: unit })
+  ] }) });
+};
+const DateTimeCell = ({ className, dateTime }) => {
+  const { day, time } = formatDateCell(dateTime);
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "w-28 shrink-0", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3", children: day }),
+    " ",
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
+  ] }) });
+};
+const EntryCell = ({ className, name, description, icon, meta }) => {
+  return /* @__PURE__ */ jsxs(Cell, { className: clsx("!gap-[14px]", className), children: [
+    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
+      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
+    ] }),
+    meta
+  ] });
 };
 
-export { AgentChat, AgentContext, AgentEvals, AgentProvider, AgentTraces, AgentsTable, Badge, DarkLogo, DynamicForm, MastraResizablePanel, NetworkChat, Txt, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentContext, AgentEvals, AgentProvider, AgentTraces, AgentsTable, Badge, Breadcrumb, Button, Cell, Crumb, DarkLogo, DateTimeCell, DynamicForm, EntryCell, Header, HeaderAction, HeaderGroup, HeaderTitle, MastraResizablePanel, NetworkChat, Row, Table, Tbody, Th, Thead, Txt, TxtCell, UnitCell, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map