@mastra/playground-ui 22.0.0-alpha.3 → 22.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 22.0.0-alpha.4
+
+### Patch Changes
+
+- Added browser tools to the Agent details UI in Playground. Agents configured with browser support now show a "Browser Tools" section in metadata. ([#14998](https://github.com/mastra-ai/mastra/pull/14998))
+
+- Updated dependencies [[`d87e6e6`](https://github.com/mastra-ai/mastra/commit/d87e6e61c42475a7b57768e71dfa12964326a632)]:
+  - @mastra/client-js@1.13.0-alpha.3
+  - @mastra/react@0.2.22-alpha.3
+  - @mastra/core@1.22.0-alpha.3
+
 ## 22.0.0-alpha.3
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -22448,6 +22448,7 @@ const AgentMetadata = ({ agentId }) => {
   const workflows = Object.keys(agentWorkflows).map((key) => ({ id: key, ...agentWorkflows[key] }));
   const skills = agent.skills ?? [];
   const workspaceTools = agent.workspaceTools ?? [];
+  const browserTools = agent.browserTools ?? [];
   const workspaceId = agent.workspaceId;
   const inputProcessors = agent.inputProcessors ?? [];
   const outputProcessors = agent.outputProcessors ?? [];
@@ -22547,6 +22548,17 @@ const AgentMetadata = ({ agentId }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkspaceToolsList, { tools: workspaceTools })
       }
     ),
+    browserTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Browser Tools",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/adding-browser-control",
+          title: "Browser tools documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataBrowserToolsList, { tools: browserTools })
+      }
+    ),
     (inputProcessors.length > 0 || outputProcessors.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
       AgentMetadataSection,
       {
@@ -22648,6 +22660,12 @@ const AgentMetadataWorkspaceToolsList = ({ tools }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "h-3 w-3 text-accent1" }), children: formatWorkspaceToolName(tool) }) }, tool)) });
 };
+const AgentMetadataBrowserToolsList = ({ tools }) => {
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No browser tools" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-3 w-3 text-cyan-500" }), children: tool }) }, tool)) });
+};
 const AgentMetadataCombinedProcessorList = ({
   inputProcessors,
   outputProcessors
@@ -59726,6 +59744,7 @@ exports.AgentInformationTabLayout = AgentInformationTabLayout;
 exports.AgentLayout = AgentLayout;
 exports.AgentMemory = AgentMemory;
 exports.AgentMetadata = AgentMetadata;
+exports.AgentMetadataBrowserToolsList = AgentMetadataBrowserToolsList;
 exports.AgentMetadataCombinedProcessorList = AgentMetadataCombinedProcessorList;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;