@mastra/playground-ui 7.0.0-beta.23 → 7.0.0-beta.25

package/dist/index.cjs.js

@@ -6,7 +6,7 @@ require('./index.css');const jsxRuntime = require('react/jsx-runtime');
 const react = require('@assistant-ui/react');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const tokens = require('./tokens.cjs.js');
+const spacings = require('./spacings-bCnRJAUT.cjs');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
 const reactMarkdown = require('@assistant-ui/react-markdown');
 require('@assistant-ui/react-markdown/styles/dot.css');
@@ -3116,19 +3116,21 @@ const mergeArrayProperties = (baseObject, mergeObject, key) => {
 };
 const extendTailwindMerge = (configExtension, ...createConfig) => typeof configExtension === 'function' ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
 
-const colorKeys = Object.keys({ ...tokens.Colors, ...tokens.BorderColors });
-const spacingKeys = Object.keys(tokens.Spacings);
-const fontSizeKeys = Object.keys(tokens.FontSizes);
-const lineHeightKeys = Object.keys(tokens.LineHeights);
-const borderRadiusKeys = Object.keys(tokens.BorderRadius);
-const sizeKeys = Object.keys(tokens.Sizes);
+const colorKeys = Object.keys({ ...spacings.Colors, ...spacings.BorderColors });
+const spacingKeys = Object.keys(spacings.Spacings);
+const fontSizeKeys = Object.keys(spacings.FontSizes);
+const lineHeightKeys = Object.keys(spacings.LineHeights);
+const borderRadiusKeys = Object.keys(spacings.BorderRadius);
+const sizeKeys = Object.keys(spacings.Sizes);
+const shadowKeys = Object.keys(spacings.Shadows).concat(Object.keys(spacings.Glows));
 const twMerge = extendTailwindMerge({
   extend: {
     theme: {
       color: colorKeys,
       spacing: spacingKeys,
       radius: borderRadiusKeys,
-      leading: lineHeightKeys
+      leading: lineHeightKeys,
+      shadow: shadowKeys
     },
     classGroups: {
       "font-size": [{ text: fontSizeKeys }],
@@ -3152,47 +3154,44 @@ const formElementSizes = {
   md: "h-form-md",
   lg: "h-form-lg"
 };
-const formElementFocus = "focus:outline focus:outline-1 focus:outline-accent1";
-const formElementFocusWithin = "focus-within:outline focus-within:outline-1 focus-within:outline-accent1 focus-within:-outline-offset-2";
+const formElementFocus = "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
+const formElementFocusWithin = "focus-within:outline-none focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
 const formElementRadius = "rounded-md";
 
-const sizeClasses$1 = {
+const sizeClasses$2 = {
   sm: `${formElementSizes.sm} gap-0.5`,
   md: `${formElementSizes.md} gap-1`,
   lg: `${formElementSizes.lg} gap-2`
 };
 const variantClasses$2 = {
-  default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50",
-  light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50",
-  outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50",
-  ghost: "bg-transparent border-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50"
+  default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  ghost: "bg-transparent border-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  primary: "bg-accent1 hover:bg-accent1/90 text-surface1 font-medium hover:shadow-glow-accent1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
 };
+const baseButtonStyles = "border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md transition-all duration-normal ease-out-custom active:scale-[0.98]";
 function buttonVariants(options) {
   const variant = options?.variant || "default";
   const size = options?.size || "md";
-  return cn(
-    "bg-surface2 border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md border",
-    formElementFocus,
-    variantClasses$2[variant],
-    sizeClasses$1[size]
-  );
+  return cn(baseButtonStyles, formElementFocus, variantClasses$2[variant], sizeClasses$2[size]);
 }
 const Button = React.forwardRef(
-  ({ className, as, size = "md", variant = "default", ...props }, ref) => {
+  ({ className, as, size = "md", variant = "default", disabled, ...props }, ref) => {
     const Component = as || "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         ref,
+        disabled,
         className: cn(
-          "bg-surface2 border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md border",
+          baseButtonStyles,
           formElementFocus,
           variantClasses$2[variant],
-          sizeClasses$1[size],
-          className,
-          {
-            "cursor-not-allowed": props.disabled
-          }
+          sizeClasses$2[size],
+          // Remove active scale when disabled
+          disabled && "active:scale-100",
+          className
         ),
         ...props
       }
@@ -3247,17 +3246,36 @@ const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) =
   return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
 };
 
-const sizeClasses = {
+const transitions = {
+  // For color changes (background, text, border)
+  colors: "transition-colors duration-normal ease-out-custom",
+  // For transform changes (scale, translate, rotate)
+  transform: "transition-transform duration-normal ease-out-custom",
+  // For all property changes
+  all: "transition-all duration-normal ease-out-custom",
+  // For opacity changes
+  opacity: "transition-opacity duration-normal ease-out-custom"};
+const focusRing = {
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+const sizeClasses$1 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
 };
-const Avatar = ({ src, name, size = "sm" }) => {
+const Avatar = ({ src, name, size = "sm", interactive = false }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `${sizeClasses[size]} border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center`,
-      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center", children: name[0].toUpperCase() })
+      className: cn(
+        sizeClasses$1[size],
+        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
     }
   );
 };
@@ -4321,22 +4339,64 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
   ) }) })
 ] });
 
+function ProcessorIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "16", height: "16", x: "4", y: "4", rx: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "6", height: "6", x: "9", y: "9", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 2v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 20v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 15h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 9h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 15h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 9h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 2v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 20v2" })
+      ]
+    }
+  );
+}
+
 const variantClasses$1 = {
-  warning: "bg-yellow-900/20 border border-yellow-200 text-yellow-200",
-  destructive: "bg-red-900/20 border border-red-200 text-red-200",
-  info: "bg-blue-900/20 border border-blue-200 text-blue-200"
+  warning: "bg-accent6Darker border-accent6/30 text-accent6",
+  destructive: "bg-accent2Darker border-accent2/30 text-accent2",
+  info: "bg-accent5Darker border-accent5/30 text-accent5"
 };
 const variantIcons = {
   warning: lucideReact.TriangleAlert,
   destructive: lucideReact.AlertCircle,
   info: lucideReact.InfoIcon
 };
-const Alert = ({ children, variant = "destructive" }) => {
+const Alert = ({ children, variant = "destructive", className }) => {
   const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        variantClasses$1[variant],
+        "p-3 rounded-md border shadow-sm",
+        transitions.all,
+        "animate-in fade-in-0 slide-in-from-top-2 duration-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4", children })
+      ] })
+    }
+  );
 };
 const AlertTitle = ({ children, as: As = "h5" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
@@ -4346,24 +4406,33 @@ const AlertDescription = ({ children, as: As = "p" }) => {
 };
 
 const variantClasses = {
+  default: "text-neutral3 bg-surface4",
+  success: "text-accent1 bg-accent1Dark",
+  error: "text-accent2 bg-accent2Dark",
+  info: "text-accent5 bg-accent5Dark",
+  warning: "text-accent6 bg-accent6Dark"
+};
+const iconClasses = {
   default: "text-neutral3",
   success: "text-accent1",
   error: "text-accent2",
-  info: "text-accent3"
+  info: "text-accent5",
+  warning: "text-accent6"
 };
 const Badge = ({ icon, variant = "default", className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "font-mono bg-surface4 text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-md shrink-0",
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-md shrink-0",
+        transitions.colors,
         icon ? "pl-1 pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-neutral5" : variantClasses[variant],
+        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -4466,20 +4535,34 @@ function CopyButton({
   iconSize = "default",
   className
 }) {
-  const { handleCopy } = useCopyToClipboard({
+  const [copied, setCopied] = React.useState(false);
+  const { handleCopy: originalHandleCopy } = useCopyToClipboard({
     text: content,
     copyMessage
   });
+  const handleCopy = () => {
+    originalHandleCopy();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, type: "button", className, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: "transition-colors hover:bg-surface4 rounded-lg text-neutral3 hover:text-neutral6",
-        size: iconSize,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+        onClick: handleCopy,
+        type: "button",
+        className: cn("rounded-lg p-1", transitions.all, focusRing.visible, "hover:bg-surface4", className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            className: cn("text-neutral3", transitions.all, "hover:text-neutral6", copied && "text-accent1"),
+            size: iconSize,
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+          }
+        )
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: copied ? "Copied!" : tooltip })
   ] });
 }
 
@@ -4582,7 +4665,9 @@ const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref)
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -4596,16 +4681,35 @@ const DialogContent = React__namespace.forwardRef(({ className, children, ...pro
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 py-6 shadow-lg duration-200 rounded-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        "gap-4 border border-border1 bg-surface3 py-6 shadow-dialog rounded-lg",
+        "duration-slow",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-surface5 data-[state=open]:text-neutral3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          DialogPrimitive__namespace.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 rounded-md p-1",
+              "text-neutral3 hover:text-neutral6 hover:bg-surface4",
+              "transition-all duration-normal ease-out-custom",
+              "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
       ]
     }
   )
@@ -4685,6 +4789,8 @@ function ToolCallProvider({
   children,
   approveToolcall,
   declineToolcall,
+  approveToolcallGenerate,
+  declineToolcallGenerate,
   approveNetworkToolcall,
   declineNetworkToolcall,
   isRunning,
@@ -4697,6 +4803,8 @@ function ToolCallProvider({
       value: {
         approveToolcall,
         declineToolcall,
+        approveToolcallGenerate,
+        declineToolcallGenerate,
         approveNetworkToolcall,
         declineNetworkToolcall,
         isRunning,
@@ -4720,11 +4828,14 @@ const ToolApprovalButtons = ({
   toolCallId,
   toolApprovalMetadata,
   toolName,
-  isNetwork
+  isNetwork,
+  isGenerateMode
 }) => {
   const {
     approveToolcall,
     declineToolcall,
+    approveToolcallGenerate,
+    declineToolcallGenerate,
     isRunning,
     toolCallApprovals,
     approveNetworkToolcall,
@@ -4734,6 +4845,8 @@ const ToolApprovalButtons = ({
   const handleApprove = () => {
     if (isNetwork) {
       approveNetworkToolcall(toolName, toolApprovalMetadata?.runId);
+    } else if (isGenerateMode) {
+      approveToolcallGenerate(toolCallId);
     } else {
       approveToolcall(toolCallId);
     }
@@ -4741,6 +4854,8 @@ const ToolApprovalButtons = ({
   const handleDecline = () => {
     if (isNetwork) {
       declineNetworkToolcall(toolName, toolApprovalMetadata?.runId);
+    } else if (isGenerateMode) {
+      declineToolcallGenerate(toolCallId);
     } else {
       declineToolcall(toolCallId);
     }
@@ -4842,7 +4957,8 @@ const ToolBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ] })
@@ -4920,7 +5036,10 @@ const useWorkflows = () => {
   const { requestContext } = usePlaygroundStore();
   return reactQuery.useQuery({
     queryKey: ["workflows", requestContext],
-    queryFn: () => client.listWorkflows(requestContext)
+    queryFn: async () => {
+      const workflows = await client.listWorkflows(requestContext);
+      return Object.fromEntries(Object.entries(workflows).filter(([_, workflow]) => !workflow.isProcessorWorkflow));
+    }
   });
 };
 
@@ -5817,7 +5936,21 @@ function WorkflowRunProvider({
 }
 
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-surface4/50", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-md bg-surface4 relative overflow-hidden",
+        // Shimmer effect using pseudo-element
+        "before:absolute before:inset-0",
+        "before:translate-x-[-100%]",
+        "before:animate-[shimmer_2s_infinite]",
+        "before:bg-gradient-to-r before:from-transparent before:via-surface5/20 before:to-transparent",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 const lodashTitleCase = (str) => {
@@ -6215,11 +6348,40 @@ const constructNodesAndEdges = ({
 };
 
 const Collapsible = CollapsiblePrimitive__namespace.Root;
-const CollapsibleTrigger = (props) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { className: cn("-outline-offset-2", className), ...rest });
-};
-const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
+const CollapsibleTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.CollapsibleTrigger,
+  {
+    ref,
+    className: cn(
+      "-outline-offset-2",
+      transitions.colors,
+      focusRing.visible,
+      "hover:text-neutral5",
+      "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
+      "[&[data-state=open]>svg]:rotate-90",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+CollapsibleTrigger.displayName = CollapsiblePrimitive__namespace.CollapsibleTrigger.displayName;
+const CollapsibleContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.CollapsibleContent,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1",
+      "duration-normal ease-out-custom",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+CollapsibleContent.displayName = CollapsiblePrimitive__namespace.CollapsibleContent.displayName;
 
 const BADGE_COLORS = {
   sleep: "#A855F7",
@@ -6369,13 +6531,14 @@ const ScrollBar = React__namespace.forwardRef(({ className, orientation = "verti
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-colors",
+      "flex touch-none select-none transition-all duration-normal ease-out-custom",
+      "opacity-0 hover:opacity-100 data-[state=visible]:opacity-100",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border1" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-neutral2 hover:bg-neutral3 transition-colors duration-normal" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
@@ -6512,16 +6675,22 @@ const cva = (base, config)=>(props)=>{
 
 const inputVariants = cva(
   cn(
-    "flex w-full text-neutral6 border bg-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+    // Base styles with enhanced transitions
+    "flex w-full text-neutral6 border bg-transparent",
+    "transition-all duration-normal ease-out-custom",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Better placeholder styling
+    "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+    "focus:placeholder:opacity-70",
     formElementRadius,
     formElementFocus
   ),
   {
     variants: {
       variant: {
-        default: "border border-border1 placeholder:text-neutral3",
-        filled: "border bg-inputFill border-border1 placeholder:text-neutral3",
-        unstyled: "border-0 bg-transparent placeholder:text-neutral3"
+        default: "border border-border1 hover:border-border2",
+        filled: "border bg-surface2 border-border1 hover:border-border2",
+        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
       },
       size: {
         sm: `${formElementSizes.sm} px-2 text-ui-sm`,
@@ -6536,14 +6705,20 @@ const inputVariants = cva(
   }
 );
 const Input = React__namespace.forwardRef(
-  ({ className, size, testId, variant, type, ...props }, ref) => {
+  ({ className, size, testId, variant, type, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         type,
-        className: cn(className, inputVariants({ variant, size, className })),
+        className: cn(
+          inputVariants({ variant, size }),
+          // Error state styling
+          error && "border-error focus:ring-error focus:shadow-glow-accent2",
+          className
+        ),
         "data-testid": testId,
         ref,
+        "aria-invalid": error,
         ...props
       }
     );
@@ -6591,11 +6766,27 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral6 shadow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral6 data-[state=checked]:text-surface2",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral3",
+      "shadow-sm",
+      transitions.all,
+      "hover:border-neutral5 hover:shadow-md",
+      formElementFocus,
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
+      "data-[state=checked]:bg-accent1 data-[state=checked]:border-accent1 data-[state=checked]:text-surface1",
+      "data-[state=checked]:shadow-glow-accent1",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) })
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: cn(
+          "flex items-center justify-center text-current",
+          "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 stroke-[3]" })
+      }
+    )
   }
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
@@ -6698,13 +6889,15 @@ const SelectTrigger = React__namespace.forwardRef(
         "flex w-full items-center justify-between border border-border1 bg-transparent py-2 shadow-sm placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
         formElementRadius,
         formElementFocus,
+        transitions.all,
+        "hover:border-neutral2",
         selectTriggerSizeClasses[size],
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 text-neutral3", transitions.colors) }) })
       ]
     }
   )
@@ -6739,12 +6932,17 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-neutral5 text-sm focus:bg-surface5 focus:text-neutral5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-neutral5 text-sm",
+      transitions.colors,
+      "hover:bg-surface5 hover:text-neutral5",
+      "focus:bg-surface5 focus:text-neutral5",
+      "data-[state=checked]:bg-accent1Dark data-[state=checked]:text-accent1",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-accent1" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
     ]
   }
@@ -6925,7 +7123,13 @@ function SearchField({ onReset, ...props }) {
       {
         type: "button",
         onClick: onReset,
-        className: cn("absolute top-1/2 right-2 -translate-y-1/2 p-1", "[&:hover>svg]:text-neutral5"),
+        className: cn(
+          "absolute top-1/2 right-2 -translate-y-1/2 p-1 rounded",
+          transitions.all,
+          "hover:bg-surface4",
+          "[&>svg]:transition-colors [&>svg]:duration-normal",
+          "[&:hover>svg]:text-neutral5"
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "text-neutral3 w-[1rem] h-[1rem]" })
       }
     )
@@ -7979,11 +8183,26 @@ const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-neutral6 text-neutral6 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-neutral3 text-neutral6",
+        "shadow-sm",
+        transitions.all,
+        "hover:border-neutral5 hover:shadow-md",
+        formElementFocus,
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
+        "data-[state=checked]:border-accent1 data-[state=checked]:shadow-glow-accent1",
         className
       ),
       ...props,
-      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" }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroupPrimitive__namespace.Indicator,
+        {
+          className: cn(
+            "flex items-center justify-center",
+            "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-accent1 text-accent1" })
+        }
+      )
     }
   );
 });
@@ -7996,9 +8215,10 @@ const WorkflowInputData = ({
   isSubmitLoading,
   submitButtonLabel,
   onSubmit,
-  children
+  children,
+  isProcessorWorkflow
 }) => {
-  const [type, setType] = React.useState("form");
+  const [type, setType] = React.useState(isProcessorWorkflow ? "simple" : "form");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       RadioGroup,
@@ -8008,6 +8228,10 @@ const WorkflowInputData = ({
         onValueChange: (value) => setType(value),
         className: "pb-4",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4", children: [
+          isProcessorWorkflow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "simple", id: "simple" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "simple", className: "!text-neutral3 text-ui-sm", children: "Simple" })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "form", id: "form" }),
             /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "form", className: "!text-neutral3 text-ui-sm", children: "Form" })
@@ -8025,7 +8249,18 @@ const WorkflowInputData = ({
         className: cn({
           "opacity-50 pointer-events-none": isSubmitLoading
         }),
-        children: type === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: type === "simple" && isProcessorWorkflow ? /* @__PURE__ */ jsxRuntime.jsx(
+          SimpleProcessorInput,
+          {
+            schema,
+            defaultValues,
+            isSubmitLoading,
+            submitButtonLabel,
+            onSubmit,
+            withoutSubmit,
+            children
+          }
+        ) : type === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
           DynamicForm,
           {
             schema,
@@ -8094,6 +8329,87 @@ const JSONInput = ({
     withoutSubmit ? null : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
   ] });
 };
+const PROCESSOR_PHASES = [
+  { value: "input", label: "Input - Process input messages before LLM" },
+  { value: "inputStep", label: "Input Step - Process at each agentic loop step" },
+  { value: "outputStream", label: "Output Stream - Process streaming chunks" },
+  { value: "outputResult", label: "Output Result - Process complete output" },
+  { value: "outputStep", label: "Output Step - Process after each LLM response" }
+];
+const SimpleProcessorInput = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit,
+  withoutSubmit,
+  children
+}) => {
+  const [message, setMessage] = React.useState("Hello, this is a test message.");
+  const [phase, setPhase] = React.useState("input");
+  const [errors, setErrors] = React.useState([]);
+  const handleSubmit = () => {
+    setErrors([]);
+    const isOutputPhase = phase === "outputStep" || phase === "outputResult";
+    const messageRole = isOutputPhase ? "assistant" : "user";
+    const data = {
+      messages: [
+        {
+          id: crypto.randomUUID(),
+          role: messageRole,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          content: {
+            format: 2,
+            parts: [{ type: "text", text: message }]
+          }
+        }
+      ],
+      phase
+    };
+    try {
+      const result = schema.safeParse(data);
+      if (!result.success) {
+        setErrors(result.error.issues.map((e) => `[${e.path.join(".")}] ${e.message}`));
+      } else {
+        onSubmit(result.data);
+      }
+    } catch (e) {
+      setErrors(["Error processing input"]);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-sm", className: "text-neutral3", children: "Phase" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: phase, onValueChange: setPhase, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select phase" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: PROCESSOR_PHASES.map((p) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: p.value, children: p.value }, p.value)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon4", children: PROCESSOR_PHASES.find((p) => p.value === phase)?.label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-sm", className: "text-neutral3", children: "Test Message" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value: message,
+          onChange: (e) => setMessage(e.target.value),
+          placeholder: "Enter a test message...",
+          rows: 4,
+          className: "w-full bg-transparent border border-border1 rounded-md p-3 text-ui-sm text-neutral6 placeholder:text-neutral3 focus:outline-none focus:ring-2 focus:ring-accent1"
+        }
+      )
+    ] }),
+    children,
+    withoutSubmit ? null : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
 
 const formatJSON = async (code) => {
   const formatted = await prettier.format(code, {
@@ -9132,11 +9448,29 @@ const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   SliderPrimitive__namespace.Root,
   {
     ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
+    className: cn("relative flex w-full touch-none select-none items-center group", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral6/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-neutral6/50" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-4 w-4 rounded-full border border-neutral6/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Track,
+        {
+          className: cn("relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral2", transitions.colors),
+          children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: cn("absolute h-full bg-accent1", transitions.all) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Thumb,
+        {
+          className: cn(
+            "block h-4 w-4 rounded-full border-2 border-accent1 bg-white shadow-md",
+            "transition-all duration-normal ease-out-custom",
+            formElementFocus,
+            "hover:scale-110 hover:shadow-lg",
+            "active:scale-95",
+            "disabled:pointer-events-none disabled:opacity-50"
+          )
+        }
+      )
     ]
   }
 ));
@@ -9456,7 +9790,8 @@ function WorkflowTrigger({
             setPayload(data);
             handleExecuteWorkflow(data);
           },
-          withoutSubmit: !!paramsRunId
+          withoutSubmit: !!paramsRunId,
+          isProcessorWorkflow: workflow?.isProcessorWorkflow
         }
       ) : !!paramsRunId ? null : /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -9601,20 +9936,31 @@ const WorkflowRunDetail = ({
   }
 };
 
-const EmptyState = ({
+function EmptyState({
   iconSlot,
   titleSlot,
   descriptionSlot,
   actionSlot,
-  as: Component = "div"
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[340px] flex-col items-center justify-center text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-auto [&>svg]:w-[126px]", children: iconSlot }),
-    /* @__PURE__ */ jsxRuntime.jsx(Component, { className: "text-neutral6 pt-8 font-serif text-header-xl font-semibold", children: titleSlot }),
-    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "text-neutral3 pb-8", children: descriptionSlot }),
-    actionSlot
-  ] });
-};
+  className,
+  as: HeadingTag = "h3"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center text-center py-10 px-6",
+        "transition-opacity duration-normal ease-out-custom",
+        className
+      ),
+      children: [
+        iconSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: iconSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeadingTag, { className: "font-medium text-neutral5 text-ui-md", children: titleSlot }),
+        descriptionSlot && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-neutral3 text-ui-sm max-w-md", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5", children: actionSlot })
+      ]
+    }
+  );
+}
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -9624,14 +9970,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("table", { className: cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
       className: cn(
-        "text-neutral3 text-ui-sm h-full whitespace-nowrap text-left font-normal uppercase first:pl-3 last:pr-3",
+        "text-neutral2 text-ui-xs h-full whitespace-nowrap text-left font-medium uppercase tracking-wide first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -9653,7 +9999,12 @@ const Row = React.forwardRef(
       "tr",
       {
         className: cn(
-          "border-b border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2",
+          "border-b border-border1",
+          // Smooth hover transition
+          "transition-colors duration-normal ease-out-custom",
+          "hover:bg-surface3",
+          // Focus state
+          "focus:bg-surface3 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-accent1/50",
           selected && "bg-surface4",
           onClick && "cursor-pointer",
           className
@@ -9871,6 +10222,8 @@ const LinkComponentContext = React.createContext({
     networkThreadLink: () => "",
     scorerLink: () => "",
     toolLink: () => "",
+    processorsLink: () => "",
+    processorLink: () => "",
     mcpServerLink: () => "",
     mcpServerToolLink: () => "",
     workflowRunLink: () => ""
@@ -9887,7 +10240,7 @@ const useLinkComponent = () => {
   return ctx;
 };
 
-const columns$4 = [
+const columns$5 = [
   {
     id: "name",
     header: "Name",
@@ -9897,10 +10250,7 @@ const columns$4 = [
       return /* @__PURE__ */ jsxRuntime.jsx(
         EntryCell,
         {
-          name: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(row.original.id), children: row.original.name }),
-            workflow.isProcessorWorkflow && /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cpu, { className: "h-3 w-3" }), className: "!h-badge-sm bg-violet-500/20 text-violet-400", children: "Processor" })
-          ] }),
+          name: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(row.original.id), children: row.original.name }),
           description: workflow.description,
           meta: void 0
         }
@@ -9966,10 +10316,12 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
         "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
         formElementRadius,
         formElementFocusWithin,
+        transitions.all,
+        "hover:border-neutral2",
         searchbarSizeClasses[size]
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-neutral3 h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-4 w-4", transitions.colors) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -9979,7 +10331,7 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
               type: "text",
               placeholder,
               className: cn(
-                "bg-surface2 text-ui-md placeholder:text-icon-3 block w-full px-2 outline-none",
+                "bg-transparent text-ui-md placeholder:text-neutral3 block w-full px-2 outline-none",
                 searchbarSizeClasses[size]
               ),
               name: id,
@@ -10011,7 +10363,7 @@ function WorkflowTable({ workflows, isLoading }) {
   }, [workflows]);
   const table = reactTable.useReactTable({
     data: workflowData,
-    columns: columns$4,
+    columns: columns$5,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   const ths = table.getHeaderGroups()[0];
@@ -10092,16 +10444,18 @@ const TabList = ({ children, variant = "default", className }) => {
     RadixTabs__namespace.List,
     {
       className: cn(
-        "flex items-center",
+        "flex items-center relative",
         {
           // variant: default
           "text-ui-lg": variant === "default",
           "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
-          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-neutral3": variant === "default",
+          [`[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`]: variant === "default",
+          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-accent1": variant === "default",
           // variant: buttons
           "border border-border1 flex justify-stretch rounded-md overflow-hidden text-ui-md min-h-[2.5rem]": variant === "buttons",
-          "[&>button]:flex-1 [&>button]:py-2 [&>button]:px-4 [&>button]:text-neutral3": variant === "buttons",
-          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:bg-surface4": variant === "buttons"
+          [`[&>button]:flex-1 [&>button]:py-2 [&>button]:px-4 [&>button]:text-neutral3 [&>button]:${transitions.all}`]: variant === "buttons",
+          "[&>button]:hover:text-neutral4 [&>button]:hover:bg-surface3": variant === "buttons",
+          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:bg-surface4 [&>button[data-state=active]]:shadow-inner": variant === "buttons"
         },
         className
       ),
@@ -10116,7 +10470,11 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
     {
       value,
       className: cn(
-        "text-xs p-3 text-neutral3 data-[state=active]:text-neutral5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0 flex items-center justify-center gap-1.5",
+        "text-xs p-3 text-neutral3 whitespace-nowrap flex-shrink-0 flex items-center justify-center gap-1.5",
+        transitions.all,
+        focusRing.visible,
+        "hover:text-neutral4",
+        "data-[state=active]:text-neutral5 data-[state=active]:border-b-2 data-[state=active]:border-accent1",
         className
       ),
       onClick,
@@ -10129,7 +10487,7 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
               e.stopPropagation();
               onClose();
             },
-            className: "p-0.5 hover:bg-surface3 rounded transition-colors",
+            className: cn("p-0.5 hover:bg-surface4 rounded", transitions.colors, "hover:text-neutral5"),
             "aria-label": "Close tab",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -10145,7 +10503,10 @@ const TabContent = ({ children, value, className }) => {
     {
       value,
       className: cn(
-        "grid py-3 overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
+        "grid py-3 overflow-y-auto ring-offset-background",
+        focusRing.visible,
+        "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200",
+        "data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:duration-150",
         className
       ),
       children
@@ -10197,21 +10558,27 @@ const TracingRunOptions = () => {
   ] });
 };
 
-function Spinner({ color = "#fff", className }) {
+const sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8"
+};
+function Spinner({ color, className, size = "md" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("animate-spin duration-700", className),
+      className: cn("animate-spin", sizeClasses[size], className),
+      style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2",
+      strokeWidth: "2.5",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color || "currentColor", className: "text-accent1" })
     }
   );
 }
@@ -10546,59 +10913,84 @@ function Combobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface3 text-neutral5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: inputRef,
-            className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50 outline-none",
-            placeholder: searchPlaceholder,
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            onKeyDown: handleKeyDown,
-            role: "combobox",
-            "aria-autocomplete": "list",
-            "aria-controls": "combobox-options",
-            "aria-expanded": open
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: listRef,
-          id: "combobox-options",
-          role: "listbox",
-          className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
-            const isSelected = value === option.value;
-            const isHighlighted = index === highlightedIndex;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface3 text-neutral5",
+          "shadow-elevated",
+          "animate-in fade-in-0 zoom-in-95 duration-150"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center border-b border-border1 px-3 py-2", transitions.colors), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                role: "option",
-                "aria-selected": isSelected,
+                ref: inputRef,
                 className: cn(
-                  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
-                  "hover:bg-surface5 hover:text-neutral5",
-                  isHighlighted && "bg-surface5 text-neutral5",
-                  isSelected && !isHighlighted && "bg-surface5/50"
+                  "flex h-8 w-full rounded-md bg-transparent py-1 text-sm",
+                  "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+                  "outline-none",
+                  transitions.colors
                 ),
-                onClick: () => handleSelect(option.value),
-                onMouseEnter: () => setHighlightedIndex(index),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
-                  option.label
-                ]
-              },
-              option.value
-            );
-          })
-        }
-      )
-    ] }) })
+                placeholder: searchPlaceholder,
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                onKeyDown: handleKeyDown,
+                role: "combobox",
+                "aria-autocomplete": "list",
+                "aria-controls": "combobox-options",
+                "aria-expanded": open
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              id: "combobox-options",
+              role: "listbox",
+              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-neutral3", children: emptyText }) : filteredOptions.map((option, index) => {
+                const isSelected = value === option.value;
+                const isHighlighted = index === highlightedIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    role: "option",
+                    "aria-selected": isSelected,
+                    className: cn(
+                      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm",
+                      transitions.colors,
+                      "hover:bg-surface5 hover:text-neutral5",
+                      isHighlighted && "bg-surface5 text-neutral5",
+                      isSelected && !isHighlighted && "bg-accent1Dark text-accent1"
+                    ),
+                    onClick: () => handleSelect(option.value),
+                    onMouseEnter: () => setHighlightedIndex(index),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.Check,
+                        {
+                          className: cn(
+                            "mr-2 h-4 w-4",
+                            transitions.opacity,
+                            isSelected ? "opacity-100 text-accent1" : "opacity-0"
+                          )
+                        }
+                      ),
+                      option.label
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 }
 
@@ -10805,7 +11197,7 @@ const LoadingBadge = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: tokens.Colors.neutral3 }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: spacings.Colors.neutral3 }),
       title: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
       collapsible: false
     }
@@ -10864,7 +11256,8 @@ const WorkflowBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ]
@@ -10968,7 +11361,8 @@ const AgentBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ]
@@ -11036,8 +11430,8 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...pr
   const isNetwork = metadata?.mode === "network";
   const agentToolName = toolName.startsWith("agent-") ? toolName.substring("agent-".length) : toolName;
   const workflowToolName = toolName.startsWith("workflow-") ? toolName.substring("workflow-".length) : toolName;
-  const requireApprovalMetadata = (metadata?.mode === "stream" || metadata?.mode === "network") && metadata?.requireApprovalMetadata;
-  const suspendedTools = (metadata?.mode === "stream" || metadata?.mode === "network") && metadata?.suspendedTools;
+  const requireApprovalMetadata = (metadata?.mode === "stream" || metadata?.mode === "network" || metadata?.mode === "generate") && metadata?.requireApprovalMetadata;
+  const suspendedTools = (metadata?.mode === "stream" || metadata?.mode === "network" || metadata?.mode === "generate") && metadata?.suspendedTools;
   const toolApprovalMetadata = requireApprovalMetadata ? requireApprovalMetadata?.[toolName] ?? requireApprovalMetadata?.[toolCallId] : void 0;
   const suspendedToolMetadata = suspendedTools ? suspendedTools?.[toolName] : void 0;
   const toolCalled = metadata?.mode === "network" && metadata?.hasMoreMessages ? true : void 0;
@@ -12783,6 +13177,8 @@ function MastraRuntimeProvider({
     setMessages,
     approveToolCall,
     declineToolCall,
+    approveToolCallGenerate,
+    declineToolCallGenerate,
     toolCallApprovals,
     approveNetworkToolCall,
     declineNetworkToolCall,
@@ -13234,6 +13630,8 @@ function MastraRuntimeProvider({
     {
       approveToolcall: approveToolCall,
       declineToolcall: declineToolCall,
+      approveToolcallGenerate: approveToolCallGenerate,
+      declineToolcallGenerate: declineToolCallGenerate,
       isRunning: isRunningStream,
       toolCallApprovals,
       approveNetworkToolcall: approveNetworkToolCall,
@@ -13837,7 +14235,7 @@ const AgentSettings = ({ agentId }) => {
   ] });
 };
 
-const NameCell$3 = ({ row }) => {
+const NameCell$4 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
@@ -13847,11 +14245,11 @@ const NameCell$3 = ({ row }) => {
     }
   );
 };
-const columns$3 = [
+const columns$4 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell$3
+    cell: NameCell$4
   },
   {
     header: "Model",
@@ -13893,7 +14291,9 @@ const columns$3 = [
       const agentsCount = Object.keys(agent.agents || {}).length;
       const toolsCount = Object.keys(agent.tools || {}).length;
       const workflowsCount = Object.keys(agent.workflows || {}).length;
-      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-row gap-2 w-full items-center", children: [
+      const inputProcessorsCount = (agent.inputProcessors || []).length;
+      const outputProcessorsCount = (agent.outputProcessors || []).length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-row gap-2 w-full items-center flex-wrap", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
           agentsCount,
           " agent",
@@ -13908,6 +14308,22 @@ const columns$3 = [
           workflowsCount,
           " workflow",
           workflowsCount > 1 ? "s" : ""
+        ] }),
+        (inputProcessorsCount > 0 || outputProcessorsCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(ProcessorIcon, { className: "text-accent4" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://mastra.ai/docs/agents/processors",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-accent1 hover:underline",
+                children: "Processors"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: [inputProcessorsCount > 0 && "input", outputProcessorsCount > 0 && "output"].filter(Boolean).join(", ") })
+          ] })
         ] })
       ] }) });
     }
@@ -13920,7 +14336,7 @@ function AgentsTable({ agents, isLoading }) {
   const projectData = React.useMemo(() => Object.values(agents), [agents]);
   const table = reactTable.useReactTable({
     data: projectData,
-    columns: columns$3,
+    columns: columns$4,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   const ths = table.getHeaderGroups()[0];
@@ -14120,22 +14536,19 @@ function EntryListEntry({ entry, isSelected, onClick, children, columns }) {
       className: cn(
         "border-t text-neutral5 border-border1 last:border-b-0 text-ui-md",
         "[&:last-child>button]:rounded-b-lg",
+        transitions.colors,
         {
-          "bg-surface5": isSelected
+          "bg-accent1Dark": isSelected
         }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleClick,
-          className: cn(
-            "grid w-full px-6 gap-6 text-left items-center min-h-12",
-            "focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_1px_rgba(24,251,111,.75)]",
-            {
-              // hover effect only not for skeleton and selected
-              "hover:bg-surface4": entry && !isSelected
-            }
-          ),
+          className: cn("grid w-full px-6 gap-6 text-left items-center min-h-12", transitions.colors, focusRing.visible, {
+            // hover effect only not for skeleton and selected
+            "hover:bg-surface4": entry && !isSelected
+          }),
           style: { gridTemplateColumns: getColumnTemplate(columns) },
           disabled: !entry,
           children
@@ -14379,18 +14792,28 @@ function SideDialogRoot({
 }) {
   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-40") }),
+    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
+      DialogPrimitive__namespace.Overlay,
+      {
+        className: cn(
+          "bg-overlay backdrop-blur-sm top-0 bottom-0 right-0 left-0 fixed z-50",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150"
+        )
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       DialogPrimitive__namespace.Content,
       {
         className: cn(
-          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ",
+          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-1/4 data-[state=closed]:duration-200",
           {
             "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
             "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
             "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 shadow-[-3rem_0_2rem_0_rgba(0,0,0,0.75)]": !isConfirmation,
-            "bg-surface2/70": isConfirmation
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 data-[state=open]:duration-300 shadow-dialog": !isConfirmation,
+            "bg-surface2/70 backdrop-blur-sm": isConfirmation
           },
           className
         ),
@@ -14403,8 +14826,9 @@ function SideDialogRoot({
             "button",
             {
               className: cn(
-                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-neutral4 border-l border-b border-border2",
-                "hover:surface5 hover:text-neutral5"
+                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-neutral3 border-l border-b border-border2",
+                transitions.all,
+                "hover:bg-surface4 hover:text-neutral5"
               ),
               "aria-label": "Close",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
@@ -14958,7 +15382,7 @@ function ScorerCombobox({
   );
 }
 
-const NameCell$2 = ({ row }) => {
+const NameCell$3 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const scorer = row.original;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14969,11 +15393,11 @@ const NameCell$2 = ({ row }) => {
     }
   );
 };
-const columns$2 = [
+const columns$3 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell$2
+    cell: NameCell$3
   }
 ];
 
@@ -14992,7 +15416,7 @@ function ScorersTable({ scorers, isLoading }) {
   );
   const table = reactTable.useReactTable({
     data: scorersData,
-    columns: columns$2,
+    columns: columns$3,
     getCoreRowModel: reactTable.getCoreRowModel()
   });
   const ths = table.getHeaderGroups()[0];
@@ -15629,7 +16053,13 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   SwitchPrimitives__namespace.Root,
   {
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent4 data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+      transitions.all,
+      formElementFocus,
+      "hover:brightness-110",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100",
+      "data-[state=checked]:bg-accent1 data-[state=checked]:shadow-glow-accent1",
+      "data-[state=unchecked]:bg-neutral2",
       className
     ),
     ...props,
@@ -15638,7 +16068,10 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /*
       SwitchPrimitives__namespace.Thumb,
       {
         className: cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md",
+          "transition-all duration-normal ease-out-custom",
+          "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+          "data-[state=checked]:shadow-lg"
         )
       }
     )
@@ -15923,6 +16356,8 @@ const AgentMetadata = ({ agentId }) => {
   const tools = Object.keys(agentTools).map((key) => agentTools[key]);
   const agentWorkflows = agent.workflows ?? {};
   const workflows = Object.keys(agentWorkflows).map((key) => ({ id: key, ...agentWorkflows[key] }));
+  const inputProcessors = agent.inputProcessors ?? [];
+  const outputProcessors = agent.outputProcessors ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(AgentMetadataWrapper, { children: [
     agent?.description && /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Description", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral6", children: agent.description }) }),
     agent.modelList ? /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Models", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -16016,6 +16451,17 @@ const AgentMetadata = ({ agentId }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkflowList, { workflows })
       }
     ),
+    (inputProcessors.length > 0 || outputProcessors.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Processors",
+        hint: {
+          link: "https://mastra.ai/docs/agents/processors",
+          title: "Processors documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataCombinedProcessorList, { inputProcessors, outputProcessors })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataScorerList, { entityId: agent.name, entityType: "AGENT" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "System Prompt", children: /* @__PURE__ */ jsxRuntime.jsx(PromptEnhancer, { agentId }) })
   ] });
@@ -16052,6 +16498,21 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-neutral3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
+const AgentMetadataCombinedProcessorList = ({
+  inputProcessors,
+  outputProcessors
+}) => {
+  const { Link, paths } = useLinkComponent();
+  if (inputProcessors.length === 0 && outputProcessors.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No processors" });
+  }
+  const inputProcessorId = inputProcessors[0]?.id;
+  const outputProcessorId = outputProcessors[0]?.id;
+  return /* @__PURE__ */ jsxRuntime.jsxs(AgentMetadataList, { children: [
+    inputProcessors.length > 0 && inputProcessorId && /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: `${paths.workflowLink(inputProcessorId)}/graph`, "data-testid": "processor-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(ProcessorIcon, { className: "text-accent4" }), children: "input" }) }) }),
+    outputProcessors.length > 0 && outputProcessorId && /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: `${paths.workflowLink(outputProcessorId)}/graph`, "data-testid": "processor-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(ProcessorIcon, { className: "text-accent5" }), children: "output" }) }) })
+  ] });
+};
 
 const AgentEntityHeader = ({ agentId }) => {
   const { data: agent, isLoading } = useAgent(agentId);
@@ -16073,7 +16534,11 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
       href,
       prefetch,
       to,
-      className: cn("text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer", className),
+      className: cn(
+        "text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer",
+        transitions.colors,
+        className
+      ),
       children
     }
   );
@@ -16086,8 +16551,10 @@ const ThreadItem = ({ children, isActive, className }) => {
     "li",
     {
       className: cn(
-        "border-b border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
-        isActive && "bg-surface4",
+        "border-b border-border1 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
+        transitions.colors,
+        "hover:bg-surface3",
+        isActive && "bg-accent1Dark",
         className
       ),
       children
@@ -16098,9 +16565,15 @@ const ThreadDeleteButton = ({ onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
-      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
+      variant: "ghost",
+      className: cn(
+        "shrink-0 opacity-0",
+        transitions.all,
+        "group-focus-within:opacity-100 group-hover:opacity-100",
+        "hover:bg-surface4 hover:text-accent2"
+      ),
       onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-neutral3" }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-neutral3 hover:text-accent2 transition-colors" }) })
     }
   );
 };
@@ -16119,7 +16592,9 @@ const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150",
       className
     ),
     ...props,
@@ -16134,7 +16609,9 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 p-6 shadow-lg duration-200 rounded-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 p-6 shadow-dialog rounded-md",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:duration-200",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:duration-150",
         className
       ),
       ...props
@@ -17235,6 +17712,320 @@ const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
   ] });
 };
 
+const NameCell$2 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
+  const processor = row.original;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntryCell,
+    {
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.processorLink(processor.id), children: processor.name || processor.id }),
+      description: processor.description
+    }
+  );
+};
+const PhasesCell = ({ row }) => {
+  const processor = row.original;
+  const phases = processor.phases || [];
+  const phaseLabels = {
+    input: "Input",
+    inputStep: "Input Step",
+    outputStream: "Output Stream",
+    outputResult: "Output Result",
+    outputStep: "Output Step"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: phaseLabels[phase] || phase }, phase)) }) });
+};
+const AgentsCell = ({ row }) => {
+  const processor = row.original;
+  const agentsCount = processor.agentIds?.length || 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+    agentsCount,
+    " agent",
+    agentsCount !== 1 ? "s" : ""
+  ] }) });
+};
+const columns$2 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell$2
+  },
+  {
+    header: "Phases",
+    accessorKey: "phases",
+    cell: PhasesCell
+  },
+  {
+    header: "Used by",
+    accessorKey: "agentIds",
+    cell: AgentsCell
+  }
+];
+
+function ProcessorTable({ processors, isLoading }) {
+  const [search, setSearch] = React.useState("");
+  const { navigate, paths } = useLinkComponent();
+  const processorData = React.useMemo(() => {
+    return Object.values(processors ?? {}).filter((p) => p.phases && p.phases.length > 0);
+  }, [processors]);
+  const table = reactTable.useReactTable({
+    data: processorData,
+    columns: columns$2,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyProcessorsTable, {});
+  }
+  const filteredRows = rows.filter((row) => {
+    const id = row.original.id.toLowerCase();
+    const name = (row.original.name || "").toLowerCase();
+    const searchLower = search.toLowerCase();
+    return id.includes(searchLower) || name.includes(searchLower);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search processors", placeholder: "Search processors" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ProcessorTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Row,
+          {
+            onClick: () => {
+              if (row.original.isWorkflow) {
+                navigate(paths.workflowLink(row.original.id) + "/graph");
+              } else {
+                navigate(paths.processorLink(row.original.id));
+              }
+            },
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          },
+          row.id
+        );
+      }) })
+    ] }) }) })
+  ] });
+}
+const ProcessorTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Phases" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyProcessorsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cpu, {}),
+    titleSlot: "Configure Processors",
+    descriptionSlot: "No processors are configured yet. Add input or output processors to your agents to transform messages.",
+    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/processors",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cpu, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const useProcessors = () => {
+  const { requestContext } = usePlaygroundStore();
+  const client = react$1.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["processors"],
+    queryFn: () => client.listProcessors(requestContext)
+  });
+};
+const useProcessor = (processorId, options) => {
+  const client = react$1.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["processor", processorId],
+    queryFn: () => client.getProcessor(processorId).details(requestContext),
+    enabled: options?.enabled !== false && !!processorId
+  });
+};
+const useExecuteProcessor = () => {
+  const client = react$1.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.useMutation({
+    mutationFn: async ({
+      processorId,
+      phase,
+      messages,
+      agentId
+    }) => {
+      return client.getProcessor(processorId).execute({
+        phase,
+        messages,
+        agentId,
+        requestContext
+      });
+    }
+  });
+};
+
+const PHASE_LABELS = {
+  input: "Input - Process input messages before LLM (once at start)",
+  inputStep: "Input Step - Process at each agentic loop step",
+  outputStream: "Output Stream - Process streaming chunks",
+  outputResult: "Output Result - Process complete output after streaming",
+  outputStep: "Output Step - Process after each LLM response (before tools)"
+};
+function ProcessorPanel({ processorId }) {
+  const { data: processor, isLoading, error } = useProcessor(processorId);
+  React.useEffect(() => {
+    if (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load processor";
+      toast.error(`Error loading processor: ${errorMessage}`);
+    }
+  }, [error]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-48 mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-32 w-full" })
+    ] });
+  }
+  if (error) return null;
+  if (!processor)
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-neutral3", children: "Processor not found" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ProcessorDetailPanel, { processor });
+}
+function ProcessorDetailPanel({ processor }) {
+  const theme = useCodemirrorTheme$1();
+  const formId = React.useId();
+  const [selectedPhase, setSelectedPhase] = React.useState(processor.phases[0] || "input");
+  const [selectedAgentId, setSelectedAgentId] = React.useState(processor.configurations[0]?.agentId || "");
+  const [testMessage, setTestMessage] = React.useState("Hello, this is a test message.");
+  const [result, setResult] = React.useState(null);
+  const [errorString, setErrorString] = React.useState();
+  const executeProcessor = useExecuteProcessor();
+  const handleExecute = async () => {
+    setErrorString(void 0);
+    setResult(null);
+    const isOutputPhase = selectedPhase === "outputStep" || selectedPhase === "outputResult";
+    const messageRole = isOutputPhase ? "assistant" : "user";
+    const messages = [
+      {
+        id: crypto.randomUUID(),
+        role: messageRole,
+        createdAt: /* @__PURE__ */ new Date(),
+        content: {
+          format: 2,
+          parts: [{ type: "text", text: testMessage }]
+        }
+      }
+    ];
+    try {
+      const response = await executeProcessor.mutateAsync({
+        processorId: processor.id,
+        phase: selectedPhase,
+        messages,
+        agentId: selectedAgentId || void 0
+      });
+      setResult(response);
+      if (!response.success && response.error) {
+        setErrorString(response.error);
+      }
+    } catch (error) {
+      setErrorString(error.message || "An error occurred");
+    }
+  };
+  const resultCode = result ? JSON.stringify(result, null, 2) : "{}";
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainContentContent, { hasLeftServiceColumn: true, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface2 border-r border-border1 w-[22rem] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProcessorInformation, { processor }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 space-y-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", children: "Phase" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedPhase, onValueChange: (v) => setSelectedPhase(v), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select phase" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: processor.phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: phase, children: phase }, phase)) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon4", children: PHASE_LABELS[selectedPhase] })
+        ] }),
+        processor.configurations.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", children: "Agent Configuration" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedAgentId, onValueChange: setSelectedAgentId, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select agent" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: processor.configurations.map((config) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: config.agentId, children: [
+              config.agentName,
+              " (",
+              config.type,
+              ")"
+            ] }, config.agentId)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", htmlFor: formId, variant: "ui-sm", className: "text-icon3", children: "Test Message" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              id: formId,
+              value: testMessage,
+              onChange: (e) => setTestMessage(e.target.value),
+              placeholder: "Enter a test message...",
+              rows: 4,
+              className: "w-full bg-transparent border border-border1 rounded-md p-3 text-ui-sm text-neutral6 placeholder:text-neutral3 focus:outline-none focus:ring-2 focus:ring-accent1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            onClick: handleExecute,
+            disabled: executeProcessor.isPending || selectedPhase === "outputStream",
+            className: "w-full",
+            children: executeProcessor.isPending ? "Running..." : "Run Processor"
+          }
+        ),
+        selectedPhase === "outputStream" && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-accent6", children: "Output Stream phase cannot be executed directly. Use streaming instead." }),
+        result && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 pt-4 border-t border-border1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: result.success ? "success" : "error", children: result.success ? "Success" : "Failed" }),
+            result.tripwire?.triggered && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "info", children: "Tripwire Triggered" })
+          ] }),
+          result.tripwire?.triggered && result.tripwire.reason && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-accent6Dark rounded-md border border-accent6/20", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-accent6 font-medium", children: "Tripwire Reason" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 mt-1", children: result.tripwire.reason })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: resultCode, tooltip: "Copy JSON result to clipboard" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 h-full relative overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: errorString || resultCode, editable: true, theme, extensions: [langJson.jsonLanguage] }) })
+  ] });
+}
+function ProcessorInformation({ processor }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 pt-5 pb-4 border-b border-border1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon1 mb-2", children: processor.name || processor.id }),
+    processor.name && processor.name !== processor.id && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon4 mb-3", children: processor.id }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-3", children: processor.phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: phase }, phase)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-xs", className: "text-icon4", children: [
+      "Attached to ",
+      processor.configurations.length,
+      " agent",
+      processor.configurations.length !== 1 ? "s" : ""
+    ] }) })
+  ] });
+}
+
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const tool = row.original;
@@ -17926,30 +18717,53 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", {
-        "border border-dashed border-gray-500": isActive
+      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-md text-neutral5 min-w-6 flex justify-end", children: [
-            position,
-            "."
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn("text-ui-md min-w-6 flex justify-end", transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-ui-md text-neutral5", children: formatStepTitle(stepId) }),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md -mt-0.5", children: step.description })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: cn("text-ui-md", transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", 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"
-            }),
+            className: cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              transitions.all,
+              {
+                "border border-neutral2 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-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
             children: getStatusIcon(step.status)
           }
         )
@@ -17979,19 +18793,20 @@ function ProcessStepProgressBar({ steps }) {
       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"
+          className: cn("flex justify-end items-center relative h-[2rem]", transitions.colors, {
+            "bg-accent1Dark": 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-neutral3 font-bold text-ui-sm",
+                transitions.all,
                 {
-                  "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"
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : idx + 1
@@ -18001,7 +18816,7 @@ function ProcessStepProgressBar({ steps }) {
         step.id
       );
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-neutral3 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs text-neutral3 text-center", transitions.colors), children: [
       completedSteps,
       " of ",
       totalSteps,
@@ -19874,46 +20689,67 @@ function Notification({
   type = "info"
 }) {
   const [localIsVisible, setLocalIsVisible] = React.useState(isVisible);
+  const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
   React.useEffect(() => {
     if (dismissible && autoDismiss && isVisible) {
       const timer = setTimeout(() => {
-        setLocalIsVisible(false);
+        handleDismiss();
       }, dismissTime);
       return () => clearTimeout(timer);
     }
-  }, [autoDismiss, isVisible, dismissTime]);
+  }, [autoDismiss, isVisible, dismissTime, dismissible]);
   React.useEffect(() => {
-    setLocalIsVisible(isVisible);
+    if (isVisible) {
+      setIsAnimatingOut(false);
+      setLocalIsVisible(true);
+    }
   }, [isVisible]);
+  const handleDismiss = () => {
+    setIsAnimatingOut(true);
+    setTimeout(() => {
+      setLocalIsVisible(false);
+      setIsAnimatingOut(false);
+    }, 200);
+  };
   if (!localIsVisible) return null;
+  const typeStyles = {
+    info: "bg-surface4 border-border1",
+    error: "bg-accent2Darker border-accent2/30",
+    success: "bg-accent1Darker border-accent1/30",
+    warning: "bg-accent6Darker border-accent6/30"
+  };
+  const iconStyles = {
+    info: "text-accent5",
+    error: "text-accent2",
+    success: "text-accent1",
+    warning: "text-accent6"
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "grid grid-cols-[1fr_auto] gap-2 rounded-lg bg-white/5 p-6 py-4 text-ui-md text-neutral3 items-center",
-        {
-          "bg-red-900/10 border border-red-900": type === "error"
-        },
+        "grid grid-cols-[auto_1fr_auto] gap-3 rounded-lg border p-4 text-ui-md text-neutral4 items-start",
+        "shadow-card",
+        transitions.all,
+        isAnimatingOut ? "animate-out fade-out-0 slide-out-to-right-2 duration-200" : "animate-in fade-in-0 slide-in-from-right-2 duration-300",
+        typeStyles[type],
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 mt-0.5", iconStyles[type]), children: type === "error" || type === "warning" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 items-start min-w-0", children }),
+        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
           {
-            className: cn(
-              "flex gap-2 items-start",
-              "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-70 [&>svg]:translate-y-0.5",
-              {
-                "[&>svg]:text-red-400": type === "error"
-              }
-            ),
-            children
+            variant: "ghost",
+            className: cn("h-6 w-6 p-0 flex-shrink-0", transitions.colors, "hover:bg-surface5"),
+            onClick: handleDismiss,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
+            ]
           }
-        ),
-        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => setLocalIsVisible(false), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
-        ] })
+        )
       ]
     }
   );
@@ -20019,7 +20855,8 @@ const Crumb = ({ className, as, isCurrent, action, ...props }) => {
           "aria-current": isCurrent ? "page" : void 0,
           className: cn(
             "text-ui-md leading-ui-md flex items-center gap-2",
-            isCurrent ? "text-white" : "text-neutral3",
+            transitions.colors,
+            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
             className
           ),
           ...props
@@ -20027,7 +20864,7 @@ const Crumb = ({ className, as, isCurrent, action, ...props }) => {
       ),
       action
     ] }),
-    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-neutral3", children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
   ] });
 };
 
@@ -20096,12 +20933,24 @@ const LogoWithoutText = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns
 ) });
 
 const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700",
-  dark: "bg-surface4 border-border1 text-neutral6"
+  light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
+  dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
 };
-const Kbd = ({ children, theme = "dark" }) => {
+const Kbd = ({ children, theme = "dark", className }) => {
   const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: cn("border rounded-md px-1 py-0.5 font-mono", themeClass), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      className: cn(
+        "border rounded-md px-1.5 py-0.5 font-mono text-ui-sm inline-flex items-center justify-center min-w-[1.5rem]",
+        transitions.transform,
+        "active:scale-95 active:shadow-none",
+        themeClass,
+        className
+      ),
+      children
+    }
+  );
 };
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
@@ -20171,6 +21020,8 @@ function MainSidebarRoot({ children, className }) {
     {
       className: cn(
         "flex flex-col h-full px-4 relative overflow-y-auto",
+        // Smooth width transition for collapse/expand
+        "transition-all duration-slow ease-out-custom",
         {
           "lg:min-w-52 xl:min-w-56 2xl:min-w-60 3xl:min-w-64 4xl:min-w-72": !isCollapsed
         },
@@ -20187,8 +21038,10 @@ function MainSidebarRoot({ children, className }) {
                 onClick: toggleSidebar,
                 className: cn(
                   "inline-flex w-auto items-center text-neutral3 h-8 px-3 rounded-md ml-auto",
-                  "hover:bg-surface4",
-                  "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-neutral3",
+                  "hover:bg-surface4 hover:text-neutral5",
+                  "transition-all duration-normal ease-out-custom",
+                  "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+                  "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-neutral3 [&_svg]:transition-transform [&_svg]:duration-normal",
                   {
                     "ml-auto": !isCollapsed
                   }
@@ -20256,15 +21109,23 @@ function MainSidebarNavLink({
     "li",
     {
       className: cn(
-        "flex",
+        "flex relative",
+        // Base link styles with smooth transitions
         "[&>a]:flex [&>a]:items-center [&>a]:min-h-8 [&>a]:gap-2.5 [&>a]:text-ui-md [&>a]:text-neutral3 [&>a]:py-1.5 [&>a]:px-3 [&>a]:w-full [&>a]:rounded-lg [&>a]:justify-center",
-        "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3/60",
+        "[&>a]:transition-all [&>a]:duration-normal [&>a]:ease-out-custom",
+        // Icon styles with transitions
+        "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3/60 [&_svg]:transition-colors [&_svg]:duration-normal",
+        // Hover states
         "[&>a:hover]:bg-surface4 [&>a:hover]:text-neutral5 [&>a:hover_svg]:text-neutral3",
         {
+          // Active state with left indicator bar
           "[&>a]:text-neutral5 [&>a]:bg-surface3": isActive,
           "[&_svg]:text-neutral5": isActive,
+          // Active indicator bar
+          "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-5 before:bg-accent1 before:rounded-r-full before:transition-all before:duration-normal": isActive && !isCollapsed,
           "[&>a]:justify-start": !isCollapsed,
           "[&_svg]:text-neutral3": isCollapsed,
+          // Featured variant
           "[&>a]:rounded-md [&>a]:my-2 [&>a]:bg-accent1/75 [&>a:hover]:bg-accent1/85 [&>a]:text-black [&>a:hover]:text-black": isFeatured,
           "[&_svg]:text-black/75 [&>a:hover_svg]:text-black": isFeatured
         },
@@ -21284,6 +22145,7 @@ exports.AgentInformationTabLayout = AgentInformationTabLayout;
 exports.AgentLayout = AgentLayout;
 exports.AgentMemory = AgentMemory;
 exports.AgentMetadata = AgentMetadata;
+exports.AgentMetadataCombinedProcessorList = AgentMetadataCombinedProcessorList;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;
 exports.AgentMetadataListItem = AgentMetadataListItem;
@@ -21411,6 +22273,9 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.ProcessStepList = ProcessStepList;
 exports.ProcessStepListItem = ProcessStepListItem;
 exports.ProcessStepProgressBar = ProcessStepProgressBar;
+exports.ProcessorIcon = ProcessorIcon;
+exports.ProcessorPanel = ProcessorPanel;
+exports.ProcessorTable = ProcessorTable;
 exports.PromptIcon = PromptIcon;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
@@ -21517,6 +22382,7 @@ exports.WorkingMemoryContext = WorkingMemoryContext;
 exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
+exports.columns = columns$2;
 exports.convertWorkflowRunStateToStreamResult = convertWorkflowRunStateToStreamResult;
 exports.extractPrompt = extractPrompt;
 exports.fieldConfig = fieldConfig;
@@ -21553,6 +22419,7 @@ exports.useDeleteThread = useDeleteThread;
 exports.useDeleteWorkflowRun = useDeleteWorkflowRun;
 exports.useExecuteAgentTool = useExecuteAgentTool;
 exports.useExecuteMCPTool = useExecuteMCPTool;
+exports.useExecuteProcessor = useExecuteProcessor;
 exports.useExecuteTool = useExecuteTool;
 exports.useExecuteWorkflow = useExecuteWorkflow;
 exports.useInView = useInView;
@@ -21568,6 +22435,8 @@ exports.useMemoryConfig = useMemoryConfig;
 exports.useMemorySearch = useMemorySearch;
 exports.usePackageUpdates = usePackageUpdates;
 exports.usePlaygroundStore = usePlaygroundStore;
+exports.useProcessor = useProcessor;
+exports.useProcessors = useProcessors;
 exports.useReorderModelList = useReorderModelList;
 exports.useResetAgentModel = useResetAgentModel;
 exports.useScorer = useScorer;