@mastra/playground-ui 7.0.0-beta.24 → 7.0.0-beta.26

package/dist/index.cjs.js

@@ -71,6 +71,7 @@ const languageData = require('@codemirror/language-data');
 const codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const format = require('date-fns/format');
+const observability = require('@mastra/core/observability');
 const semver = require('semver');
 
 function _interopNamespaceDefault(e) {
@@ -4339,6 +4340,36 @@ 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-accent6Darker border-accent6/30 text-accent6",
   destructive: "bg-accent2Darker border-accent2/30 text-accent2",
@@ -4759,6 +4790,8 @@ function ToolCallProvider({
   children,
   approveToolcall,
   declineToolcall,
+  approveToolcallGenerate,
+  declineToolcallGenerate,
   approveNetworkToolcall,
   declineNetworkToolcall,
   isRunning,
@@ -4771,6 +4804,8 @@ function ToolCallProvider({
       value: {
         approveToolcall,
         declineToolcall,
+        approveToolcallGenerate,
+        declineToolcallGenerate,
         approveNetworkToolcall,
         declineNetworkToolcall,
         isRunning,
@@ -4794,11 +4829,14 @@ const ToolApprovalButtons = ({
   toolCallId,
   toolApprovalMetadata,
   toolName,
-  isNetwork
+  isNetwork,
+  isGenerateMode
 }) => {
   const {
     approveToolcall,
     declineToolcall,
+    approveToolcallGenerate,
+    declineToolcallGenerate,
     isRunning,
     toolCallApprovals,
     approveNetworkToolcall,
@@ -4808,6 +4846,8 @@ const ToolApprovalButtons = ({
   const handleApprove = () => {
     if (isNetwork) {
       approveNetworkToolcall(toolName, toolApprovalMetadata?.runId);
+    } else if (isGenerateMode) {
+      approveToolcallGenerate(toolCallId);
     } else {
       approveToolcall(toolCallId);
     }
@@ -4815,6 +4855,8 @@ const ToolApprovalButtons = ({
   const handleDecline = () => {
     if (isNetwork) {
       declineNetworkToolcall(toolName, toolApprovalMetadata?.runId);
+    } else if (isGenerateMode) {
+      declineToolcallGenerate(toolCallId);
     } else {
       declineToolcall(toolCallId);
     }
@@ -4916,7 +4958,8 @@ const ToolBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ] })
@@ -4994,7 +5037,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));
+    }
   });
 };
 
@@ -8170,9 +8216,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,
@@ -8182,6 +8229,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" })
@@ -8199,7 +8250,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,
@@ -8268,6 +8330,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, {
@@ -9648,7 +9791,8 @@ function WorkflowTrigger({
             setPayload(data);
             handleExecuteWorkflow(data);
           },
-          withoutSubmit: !!paramsRunId
+          withoutSubmit: !!paramsRunId,
+          isProcessorWorkflow: workflow?.isProcessorWorkflow
         }
       ) : !!paramsRunId ? null : /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -10079,6 +10223,8 @@ const LinkComponentContext = React.createContext({
     networkThreadLink: () => "",
     scorerLink: () => "",
     toolLink: () => "",
+    processorsLink: () => "",
+    processorLink: () => "",
     mcpServerLink: () => "",
     mcpServerToolLink: () => "",
     workflowRunLink: () => ""
@@ -10095,7 +10241,7 @@ const useLinkComponent = () => {
   return ctx;
 };
 
-const columns$4 = [
+const columns$5 = [
   {
     id: "name",
     header: "Name",
@@ -10105,10 +10251,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
         }
@@ -10221,7 +10364,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];
@@ -11114,7 +11257,8 @@ const WorkflowBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ]
@@ -11218,7 +11362,8 @@ const AgentBadge = ({
             toolCallId,
             toolApprovalMetadata,
             toolName,
-            isNetwork
+            isNetwork,
+            isGenerateMode: metadata?.mode === "generate"
           }
         )
       ]
@@ -11286,8 +11431,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;
@@ -13033,6 +13178,8 @@ function MastraRuntimeProvider({
     setMessages,
     approveToolCall,
     declineToolCall,
+    approveToolCallGenerate,
+    declineToolCallGenerate,
     toolCallApprovals,
     approveNetworkToolCall,
     declineNetworkToolCall,
@@ -13484,6 +13631,8 @@ function MastraRuntimeProvider({
     {
       approveToolcall: approveToolCall,
       declineToolcall: declineToolCall,
+      approveToolcallGenerate: approveToolCallGenerate,
+      declineToolcallGenerate: declineToolCallGenerate,
       isRunning: isRunningStream,
       toolCallApprovals,
       approveNetworkToolcall: approveNetworkToolCall,
@@ -14087,7 +14236,7 @@ const AgentSettings = ({ agentId }) => {
   ] });
 };
 
-const NameCell$3 = ({ row }) => {
+const NameCell$4 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
@@ -14097,11 +14246,11 @@ const NameCell$3 = ({ row }) => {
     }
   );
 };
-const columns$3 = [
+const columns$4 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell$3
+    cell: NameCell$4
   },
   {
     header: "Model",
@@ -14143,7 +14292,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",
@@ -14158,6 +14309,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(", ") })
+          ] })
         ] })
       ] }) });
     }
@@ -14170,7 +14337,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];
@@ -15216,7 +15383,7 @@ function ScorerCombobox({
   );
 }
 
-const NameCell$2 = ({ row }) => {
+const NameCell$3 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   const scorer = row.original;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15227,11 +15394,11 @@ const NameCell$2 = ({ row }) => {
     }
   );
 };
-const columns$2 = [
+const columns$3 = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell$2
+    cell: NameCell$3
   }
 ];
 
@@ -15250,7 +15417,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];
@@ -16190,6 +16357,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(
@@ -16283,6 +16452,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 }) })
   ] });
@@ -16319,6 +16499,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);
@@ -17518,6 +17713,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;
@@ -19466,9 +19975,9 @@ function SpanTabs({
 }) {
   const { Link } = useLinkComponent();
   let entityType;
-  if (span?.attributes?.agentId) {
+  if (span?.attributes?.agentId || span?.entityType === observability.EntityType.AGENT) {
     entityType = "Agent";
-  } else if (span?.attributes?.workflowId) {
+  } else if (span?.attributes?.workflowId || span?.entityType === observability.EntityType.WORKFLOW_RUN) {
     entityType = "Workflow";
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: defaultActiveTab, children: [
@@ -21637,6 +22146,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;
@@ -21764,6 +22274,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;
@@ -21870,6 +22383,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;
@@ -21906,6 +22420,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;
@@ -21921,6 +22436,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;