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

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @mastra/playground-ui
 
+## 8.0.0-alpha.2
+
+### Patch Changes
+
+- Added raw SKILL.md source view in skill detail page. The 'Source' toggle now shows the full file contents including YAML frontmatter. ([#12497](https://github.com/mastra-ai/mastra/pull/12497))
+
+## 8.0.0-alpha.1
+
+### Patch Changes
+
+- Restructured stored agents to use a thin metadata record with versioned configuration snapshots. ([#12488](https://github.com/mastra-ai/mastra/pull/12488))
+
+  The agent record now only stores metadata fields (id, status, activeVersionId, authorId, metadata, timestamps). All configuration fields (name, instructions, model, tools, etc.) live exclusively in version snapshot rows, enabling full version history and rollback.
+
+  **Key changes:**
+  - Stored Agent records are now thin metadata-only (StorageAgentType)
+  - All config lives in version snapshots (StorageAgentSnapshotType)
+  - New resolved type (StorageResolvedAgentType) merges agent record + active version config
+  - Renamed `ownerId` to `authorId` for multi-tenant filtering
+  - Changed `memory` field type from `string` to `Record<string, unknown>`
+  - Added `status` field ('draft' | 'published') to agent records
+  - Flattened CreateAgent/UpdateAgent input types (config fields at top level, no nested snapshot)
+  - Version config columns are top-level in the agent_versions table (no single snapshot jsonb column)
+  - List endpoints return resolved agents (thin record + active version config)
+  - Auto-versioning on update with retention limits and race condition handling
+
+- Improved skill activation styling with cleaner badge appearance and dark-themed tooltip on hover. ([#12487](https://github.com/mastra-ai/mastra/pull/12487))
+
+- Fixed skill detail page crashing when skills have object-typed compatibility or metadata fields. Skills from skills.sh and other external sources now display correctly. ([#12491](https://github.com/mastra-ai/mastra/pull/12491))
+
+- Updated dependencies [[`b99ceac`](https://github.com/mastra-ai/mastra/commit/b99ceace2c830dbdef47c8692d56a91954aefea2), [`deea43e`](https://github.com/mastra-ai/mastra/commit/deea43eb1366d03a864c5e597d16a48592b9893f), [`ac9ec66`](https://github.com/mastra-ai/mastra/commit/ac9ec6672779b2e6d4344e415481d1a6a7d4911a)]:
+  - @mastra/core@1.1.0-alpha.1
+  - @mastra/client-js@1.1.0-alpha.1
+  - @mastra/react@0.2.0-alpha.1
+  - @mastra/ai-sdk@1.0.3-alpha.0
+
 ## 8.0.0-alpha.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -16669,24 +16669,21 @@ const AgentMetadataSkillList = ({ skills, agentId, workspaceId }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: skills.map((skill) => {
     const isActivated = isSkillActivated(skill.name);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AgentMetadataListItem,
+    const badge = /* @__PURE__ */ jsxRuntime.jsxs(
+      Badge,
       {
-        className: `flex-col items-start gap-1 ${isActivated ? "bg-green-500/10 rounded-md p-1 -m-1" : ""}`,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Badge,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(SkillIcon, { className: isActivated ? "text-green-400" : "text-accent2" }),
-              variant: isActivated ? "success" : "default",
-              children: skill.name
-            }
-          ) }),
-          isActivated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-green-400 font-medium", children: "Active" })
-        ] })
-      },
-      skill.name
+        icon: /* @__PURE__ */ jsxRuntime.jsx(SkillIcon, { className: isActivated ? "text-green-400" : "text-accent2" }),
+        variant: isActivated ? "success" : "default",
+        children: [
+          skill.name,
+          isActivated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Active" })
+        ]
+      }
     );
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: isActivated ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "bg-surface3 text-icon6 border border-border1", children: "Active" })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.name);
   }) });
 };
 function formatWorkspaceToolName(toolName) {
@@ -18506,7 +18503,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");
@@ -18549,7 +18546,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]);
@@ -19846,7 +19843,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);
@@ -25195,7 +25192,7 @@ function getSourceInfo(source) {
       };
   }
 }
-function SkillDetail({ skill, onReferenceClick }) {
+function SkillDetail({ skill, rawSkillMd, onReferenceClick }) {
   const [expandedSections, setExpandedSections] = React.useState(/* @__PURE__ */ new Set(["instructions"]));
   const [showRawInstructions, setShowRawInstructions] = React.useState(false);
   const sourceInfo = getSourceInfo(skill.source);
@@ -25221,7 +25218,7 @@ function SkillDetail({ skill, onReferenceClick }) {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(MetadataCard, { label: "Source", value: sourceInfo.label, icon: sourceInfo.icon }),
       skill.license && /* @__PURE__ */ jsxRuntime.jsx(MetadataCard, { label: "License", value: skill.license }),
-      skill.compatibility && /* @__PURE__ */ jsxRuntime.jsx(MetadataCard, { label: "Compatibility", value: skill.compatibility }),
+      skill.compatibility != null && /* @__PURE__ */ jsxRuntime.jsx(MetadataCard, { label: "Compatibility", value: skill.compatibility }),
       /* @__PURE__ */ jsxRuntime.jsx(
         MetadataCard,
         {
@@ -25263,7 +25260,7 @@ function SkillDetail({ skill, onReferenceClick }) {
               backgroundColor: "transparent",
               fontSize: "0.875rem"
             },
-            children: skill.instructions
+            children: rawSkillMd ?? skill.instructions
           }
         ) }) : /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { children: skill.instructions })
       }
@@ -25318,12 +25315,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__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-surface3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-icon3 mb-1", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon4", children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-icon5", children: value })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-icon5 truncate", title: displayValue, children: displayValue })
     ] })
   ] });
 }