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

package/dist/index.es.js

@@ -16637,24 +16637,21 @@ const AgentMetadataSkillList = ({ skills, agentId, workspaceId }) => {
   }
   return /* @__PURE__ */ jsx(AgentMetadataList, { children: skills.map((skill) => {
     const isActivated = isSkillActivated(skill.name);
-    return /* @__PURE__ */ jsx(
-      AgentMetadataListItem,
+    const badge = /* @__PURE__ */ jsxs(
+      Badge,
       {
-        className: `flex-col items-start gap-1 ${isActivated ? "bg-green-500/10 rounded-md p-1 -m-1" : ""}`,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: /* @__PURE__ */ jsx(
-            Badge,
-            {
-              icon: /* @__PURE__ */ jsx(SkillIcon, { className: isActivated ? "text-green-400" : "text-accent2" }),
-              variant: isActivated ? "success" : "default",
-              children: skill.name
-            }
-          ) }),
-          isActivated && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-green-400 font-medium", children: "Active" })
-        ] })
-      },
-      skill.name
+        icon: /* @__PURE__ */ jsx(SkillIcon, { className: isActivated ? "text-green-400" : "text-accent2" }),
+        variant: isActivated ? "success" : "default",
+        children: [
+          skill.name,
+          isActivated && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Active" })
+        ]
+      }
     );
+    return /* @__PURE__ */ jsx(AgentMetadataListItem, { children: isActivated ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { className: "bg-surface3 text-icon6 border border-border1", children: "Active" })
+    ] }) }) : /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.name);
   }) });
 };
 function formatWorkspaceToolName(toolName) {
@@ -18474,7 +18471,7 @@ function EditAgentDialog({ agentId, open, onOpenChange, onSuccess, onDelete }) {
         integrationTools: integrationToolIds,
         workflows: values.workflows,
         agents: values.agents,
-        memory: values.memory,
+        memory: values.memory ? { key: values.memory } : void 0,
         scorers: values.scorers
       });
       toast.success("Agent updated successfully");
@@ -18517,7 +18514,7 @@ function EditAgentDialog({ agentId, open, onOpenChange, onSuccess, onDelete }) {
       tools: allTools,
       workflows: agent.workflows || [],
       agents: agent.agents || [],
-      memory: agent.memory || "",
+      memory: agent.memory && typeof agent.memory === "object" && "key" in agent.memory ? String(agent.memory.key) : typeof agent.memory === "string" ? agent.memory : "",
       scorers: agent.scorers || {}
     };
   }, [agent]);
@@ -19814,7 +19811,7 @@ function CreateAgentDialog({ open, onOpenChange, onSuccess }) {
         tools: values.tools && values.tools.length > 0 ? values.tools : void 0,
         workflows: values.workflows,
         agents: values.agents,
-        memory: values.memory,
+        memory: values.memory ? { key: values.memory } : void 0,
         scorers: values.scorers
       };
       await createStoredAgent.mutateAsync(createParams);
@@ -25163,7 +25160,7 @@ function getSourceInfo(source) {
       };
   }
 }
-function SkillDetail({ skill, onReferenceClick }) {
+function SkillDetail({ skill, rawSkillMd, onReferenceClick }) {
   const [expandedSections, setExpandedSections] = useState(/* @__PURE__ */ new Set(["instructions"]));
   const [showRawInstructions, setShowRawInstructions] = useState(false);
   const sourceInfo = getSourceInfo(skill.source);
@@ -25189,7 +25186,7 @@ function SkillDetail({ skill, onReferenceClick }) {
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
       /* @__PURE__ */ jsx(MetadataCard, { label: "Source", value: sourceInfo.label, icon: sourceInfo.icon }),
       skill.license && /* @__PURE__ */ jsx(MetadataCard, { label: "License", value: skill.license }),
-      skill.compatibility && /* @__PURE__ */ jsx(MetadataCard, { label: "Compatibility", value: skill.compatibility }),
+      skill.compatibility != null && /* @__PURE__ */ jsx(MetadataCard, { label: "Compatibility", value: skill.compatibility }),
       /* @__PURE__ */ jsx(
         MetadataCard,
         {
@@ -25231,7 +25228,7 @@ function SkillDetail({ skill, onReferenceClick }) {
               backgroundColor: "transparent",
               fontSize: "0.875rem"
             },
-            children: skill.instructions
+            children: rawSkillMd ?? skill.instructions
           }
         ) }) : /* @__PURE__ */ jsx(MarkdownRenderer, { children: skill.instructions })
       }
@@ -25286,12 +25283,38 @@ function SkillDetail({ skill, onReferenceClick }) {
     ] }) })
   ] });
 }
+function formatDisplayValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => typeof v === "string" ? v : JSON.stringify(v)).join(", ");
+  }
+  if (typeof value === "object" && value !== null) {
+    const keys = Object.keys(value);
+    if (keys.length === 0) return "{}";
+    if (keys.length === 1) {
+      const key = keys[0];
+      const val = value[key];
+      if (Array.isArray(val)) {
+        return `${key}: ${val.join(", ")}`;
+      }
+      return `${key}: ${formatDisplayValue(val)}`;
+    }
+    return `{${keys.join(", ")}}`;
+  }
+  return String(value);
+}
 function MetadataCard({ label, value, icon }) {
+  const displayValue = formatDisplayValue(value);
   return /* @__PURE__ */ jsxs("div", { className: "p-3 rounded-lg bg-surface3", children: [
     /* @__PURE__ */ jsx("p", { className: "text-xs text-icon3 mb-1", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
       icon && /* @__PURE__ */ jsx("span", { className: "text-icon4", children: icon }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-icon5", children: value })
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-icon5 truncate", title: displayValue, children: displayValue })
     ] })
   ] });
 }