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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @mastra/playground-ui
 
+## 19.0.1-alpha.2
+
+### Patch Changes
+
+- dependencies updates: ([#14584](https://github.com/mastra-ai/mastra/pull/14584))
+  - Updated dependency [`@assistant-ui/react@^0.12.19` ↗︎](https://www.npmjs.com/package/@assistant-ui/react/v/0.12.19) (from `^0.12.17`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-markdown@^0.12.6` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-markdown/v/0.12.6) (from `^0.12.5`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-syntax-highlighter@^0.12.7` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-syntax-highlighter/v/0.12.7) (from `^0.12.6`, in `dependencies`)
+
+- Added 'Create Agent' and 'Edit Agent' buttons to the playground, gated behind the MASTRA_EXPERIMENTAL_UI environment variable. When enabled, a 'Create Agent' button appears on the agents list page and an 'Edit' button appears on the agent detail header for stored agents. ([#14694](https://github.com/mastra-ai/mastra/pull/14694))
+
+- Updated dependencies [[`404fea1`](https://github.com/mastra-ai/mastra/commit/404fea13042181f0b0c73a101392ac87c79ceae2), [`ebf5047`](https://github.com/mastra-ai/mastra/commit/ebf5047e825c38a1a356f10b214c1d4260dfcd8d), [`675f15b`](https://github.com/mastra-ai/mastra/commit/675f15b7eaeea649158d228ea635be40480c584d), [`b174c63`](https://github.com/mastra-ai/mastra/commit/b174c63a093108d4e53b9bc89a078d9f66202b3f), [`eef7cb2`](https://github.com/mastra-ai/mastra/commit/eef7cb2abe7ef15951e2fdf792a5095c6c643333), [`197daf0`](https://github.com/mastra-ai/mastra/commit/197daf03a33e4650bd90391eef0ec7d0392a6c9c), [`86e3263`](https://github.com/mastra-ai/mastra/commit/86e326363edd12be5a5b25ccce4a39f66f7c9f50), [`e8a5b0b`](https://github.com/mastra-ai/mastra/commit/e8a5b0b9bc94d12dee4150095512ca27a288d778)]:
+  - @mastra/core@1.17.0-alpha.2
+  - @mastra/client-js@1.10.1-alpha.2
+  - @mastra/react@0.2.18-alpha.2
+
+## 19.0.1-alpha.1
+
+### Patch Changes
+
+- Added DuckDB to supported observability storage types for metrics dashboard. Unhid ModelCostKpiCard. Updated empty state description to reflect DuckDB and ClickHouse support status. ([#14670](https://github.com/mastra-ai/mastra/pull/14670))
+
+- Updated dependencies [[`7302e5c`](https://github.com/mastra-ai/mastra/commit/7302e5ce0f52d769d3d63fb0faa8a7d4089cda6d)]:
+  - @mastra/core@1.16.1-alpha.1
+  - @mastra/ai-sdk@1.2.1
+  - @mastra/client-js@1.10.1-alpha.1
+  - @mastra/react@0.2.18-alpha.1
+
 ## 19.0.1-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -18079,6 +18079,11 @@ const AgentSettings = ({ agentId }) => {
   ] });
 };
 
+const useCanCreateAgent = () => {
+  const canCreateAgent = typeof window !== "undefined" && window.MASTRA_EXPERIMENTAL_UI === "true";
+  return { canCreateAgent };
+};
+
 const resolveInstructionPart = (part) => {
   if (typeof part === "string") {
     return part.trim();
@@ -18264,29 +18269,41 @@ const AgentsTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table, { child
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
   ] }, index)) })
 ] });
-const EmptyAgentsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-  EmptyState$1,
-  {
-    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentCoinIcon, {}),
-    titleSlot: "No Agents Yet",
-    descriptionSlot: "Configure agents in code to get started.",
-    actionSlot: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        size: "lg",
-        variant: "outline",
-        as: "a",
-        href: "https://mastra.ai/docs/agents/overview",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, {}) }),
-          "Documentation"
-        ]
-      }
-    ) })
-  }
-) });
+const EmptyAgentsTable = () => {
+  const { canCreateAgent } = useCanCreateAgent();
+  const { Link: FrameworkLink, paths } = useLinkComponent();
+  const createAgentPath = paths.cmsAgentCreateLink();
+  const showCreateCta = canCreateAgent && Boolean(createAgentPath);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    EmptyState$1,
+    {
+      iconSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentCoinIcon, {}),
+      titleSlot: "No Agents Yet",
+      descriptionSlot: showCreateCta ? "Create your first agent or configure agents in code." : "Configure agents in code to get started.",
+      actionSlot: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+        showCreateCta && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "lg", variant: "primary", as: FrameworkLink, to: createAgentPath, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+          "Create an agent"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            size: "lg",
+            variant: "outline",
+            as: "a",
+            href: "https://mastra.ai/docs/agents/overview",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, {}) }),
+              "Documentation"
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+};
 
 const RequestContext = () => {
   const { requestContext, setRequestContext } = usePlaygroundStore();
@@ -22079,13 +22096,22 @@ const AgentMetadataCombinedProcessorList = ({
 const AgentEntityHeader = ({ agentId }) => {
   const { data: agent, isLoading } = useAgent(agentId);
   const { handleCopy } = useCopyToClipboard$1({ text: agentId });
+  const { canCreateAgent } = useCanCreateAgent();
+  const { Link: FrameworkLink, paths } = useLinkComponent();
   const sessionUrl = `${window.location.origin}/agents/${agentId}/session`;
   const { handleCopy: handleShareLink, isCopied: isShareCopied } = useCopyToClipboard$1({
     text: sessionUrl,
     copyMessage: "Session URL copied to clipboard!"
   });
   const agentName = agent?.name || "";
+  const isStoredAgent = agent?.source === "stored";
+  const editPath = paths.cmsAgentEditLink(agentId);
+  const showEditButton = canCreateAgent && isStoredAgent && Boolean(editPath);
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityHeader, { icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [
+    showEditButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", as: FrameworkLink, to: editPath, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}) }),
+      "Edit"
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), variant: "default", children: agentId }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
@@ -41997,7 +42023,7 @@ function MetricsFlexGrid({ children, className }) {
 
 const ANALYTICS_OBSERVABILITY_TYPES = /* @__PURE__ */ new Set([
   // 'ObservabilityStorageClickhouse',
-  // 'ObservabilityStorageDuckDB',
+  "ObservabilityStorageDuckDB",
   "ObservabilityInMemory"
 ]);
 function MetricsDashboard() {
@@ -42014,7 +42040,7 @@ function MetricsDashboard() {
       {
         iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, {}),
         titleSlot: "Metrics are not available with your current storage",
-        descriptionSlot: "Metrics currently require in-memory storage for observability. ClickHouse and DuckDB support is coming soon. Relational databases (PostgreSQL, LibSQL) do not support metrics collection. To enable metrics on an existing project, switch the observability storage in the Mastra configuration.",
+        descriptionSlot: "Metrics require DuckDB or in-memory storage for observability. ClickHouse support is coming soon. Relational databases (PostgreSQL, LibSQL) do not support metrics collection. To enable metrics on an existing project, switch the observability storage in the Mastra configuration.",
         actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
@@ -52977,6 +53003,7 @@ exports.useAllModels = useAllModels;
 exports.useAuthCapabilities = useAuthCapabilities;
 exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCSVParser = useCSVParser;
+exports.useCanCreateAgent = useCanCreateAgent;
 exports.useCloneThread = useCloneThread;
 exports.useCodemirrorTheme = useCodemirrorTheme$1;
 exports.useCompareAgentVersions = useCompareAgentVersions;