@mastra/playground-ui 22.2.0-alpha.9 → 23.0.0-alpha.10

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @mastra/playground-ui
 
+## 23.0.0-alpha.10
+
+### Minor Changes
+
+- Added `ErrorBoundary` component to catch and display runtime errors in the studio. Wraps routes in the local playground so a crash on one page (e.g. an agent editor referencing an unresolved workspace skill) surfaces a friendly recovery UI with **Try again** (in-place React reset), **Reload page** (full browser refresh), and **Report issue** (opens the Mastra GitHub issues page in a new tab) actions, plus a collapsible stack trace — instead of a blank screen. ([#15561](https://github.com/mastra-ai/mastra/pull/15561))
+
+  The fallback is spatially aware: it fills its parent and the icon, heading, and body text scale up on wider containers via Tailwind container queries. Scope the boundary to a single widget to keep the rest of the UI interactive while one panel fails.
+
+  **Usage**
+
+  ```tsx
+  import { ErrorBoundary } from '@mastra/playground-ui';
+  import { useLocation } from 'react-router';
+
+  // Route-level: wrap the router outlet, reset when the path changes
+  function Layout({ children }) {
+    const { pathname } = useLocation();
+    return <ErrorBoundary resetKeys={[pathname]}>{children}</ErrorBoundary>;
+  }
+
+  // Scoped: contain the crash to one panel, leave the rest of the tree alone
+  <ErrorBoundary variant="inline" title="The editor failed to render">
+    <AgentEditor />
+  </ErrorBoundary>;
+  ```
+
+  Props: `fallback` (node or render prop with `{ error, errorInfo, reset }`), `onError` for reporting, `resetKeys` for automatic reset, `variant` (`'section'` — fills available space, default; `'inline'` — stays compact), and `title` / `description` overrides.
+
+### Patch Changes
+
+- Align BrandLoader geometry with the Mastra logo: match disk positions to the logo path, introduce per-size stroke widths and bubble radii (sm/md/lg), and rebalance the gooey filter for rounder ridge↔disk fillets. Shift the size scale so sm stays, md is now w-8, lg is now w-10, and the old w-16 size is removed. ([#15531](https://github.com/mastra-ai/mastra/pull/15531))
+
+- Updated dependencies [[`aba393e`](https://github.com/mastra-ai/mastra/commit/aba393e2da7390c69b80e516a4f153cda6f09376), [`0a5fa1d`](https://github.com/mastra-ai/mastra/commit/0a5fa1d3cb0583889d06687155f26fd7d2edc76c), [`ea43e64`](https://github.com/mastra-ai/mastra/commit/ea43e646dd95d507694b6112b0bf1df22ad552b2), [`00d1b16`](https://github.com/mastra-ai/mastra/commit/00d1b16b401199cb294fa23f43336547db4dca9b), [`af8a57e`](https://github.com/mastra-ai/mastra/commit/af8a57ed9ba9685ad8601d5b71ae3706da6222f9), [`be49755`](https://github.com/mastra-ai/mastra/commit/be4975575e63b38f63af588ea8ce6f4cf5b8ff2c)]:
+  - @mastra/core@1.26.0-alpha.10
+  - @mastra/client-js@1.14.0-alpha.10
+  - @mastra/react@0.2.27-alpha.10
+
 ## 22.2.0-alpha.9
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -7716,43 +7716,46 @@ Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 
 const sizeClasses$1 = {
   sm: "w-6",
-  md: "w-10",
-  lg: "w-16"
+  md: "w-8",
+  lg: "w-10"
+};
+const strokeBySize = {
+  sm: 2.2,
+  md: 2.5,
+  lg: 2.9
+};
+const bubbleBySize = {
+  sm: 4.3,
+  md: 4.4,
+  lg: 4.498
 };
 function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
   const reactId = React.useId();
   const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const r = bubbleBySize[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       role: "status",
       "aria-label": ariaLabel,
       className: cn("brand-loader inline-block text-neutral6", sizeClasses$1[size], className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 34 21",
-          className: "block w-full h-auto overflow-visible",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.55" }),
-              /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln23", x1: "10.4", y1: "4.5", x2: "16.8", y2: "16.2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln34", x1: "16.8", y1: "16.2", x2: "23.2", y2: "4.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln45", x1: "23.2", y1: "4.5", x2: "29.5", y2: "16.2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b1", cx: "4.5", cy: "16.2", r: "4.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b2", cx: "10.4", cy: "4.5", r: "4.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b3", cx: "16.8", cy: "16.2", r: "4.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b4", cx: "23.2", cy: "4.5", r: "4.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b5", cx: "29.5", cy: "16.2", r: "4.5" })
-            ] })
-          ]
-        }
-      )
+      style: { ["--brand-loader-stroke"]: strokeBySize[size] },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 34 21", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, x: "-5%", y: "-5%", width: "110%", height: "110%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.9" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -4.3" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln23", x1: "10.387", y1: "4.498", x2: "16.899", y2: "16.192" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln34", x1: "16.899", y1: "16.192", x2: "22.815", y2: "4.56" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln45", x1: "22.815", y1: "4.56", x2: "28.57", y2: "16.192" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b1", cx: "4.498", cy: "16.192", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b2", cx: "10.387", cy: "4.498", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b3", cx: "16.899", cy: "16.192", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b4", cx: "22.815", cy: "4.56", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b5", cx: "28.57", cy: "16.192", r })
+        ] })
+      ] })
     }
   );
 }
@@ -12003,6 +12006,152 @@ const ListSearch = ({
   );
 };
 
+const INITIAL_STATE = { error: null, errorInfo: null };
+function keysChanged(prev, next) {
+  if (prev === next) return false;
+  if (!prev || !next) return true;
+  if (prev.length !== next.length) return true;
+  for (let i = 0; i < prev.length; i++) {
+    if (!Object.is(prev[i], next[i])) return true;
+  }
+  return false;
+}
+class ErrorBoundary extends React__namespace.Component {
+  state = INITIAL_STATE;
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    if (this.props.onError) {
+      try {
+        this.props.onError(error, errorInfo);
+      } catch (handlerError) {
+        if (typeof console !== "undefined") {
+          console.error("[ErrorBoundary] onError handler threw:", handlerError);
+        }
+      }
+    }
+    if (typeof console !== "undefined") {
+      console.error("[ErrorBoundary] Uncaught error:", error, errorInfo);
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && keysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
+  reset = () => {
+    this.setState(INITIAL_STATE);
+  };
+  render() {
+    const { error, errorInfo } = this.state;
+    const { children, fallback, title, description, variant, className } = this.props;
+    if (!error) return children;
+    if (typeof fallback === "function") {
+      return fallback({ error, errorInfo, reset: this.reset });
+    }
+    if (fallback !== void 0) return fallback;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DefaultErrorFallback,
+      {
+        error,
+        errorInfo,
+        reset: this.reset,
+        title,
+        description,
+        variant: variant ?? "section",
+        className
+      }
+    );
+  }
+}
+function DefaultErrorFallback({
+  error,
+  errorInfo,
+  reset,
+  title,
+  description,
+  variant,
+  className
+}) {
+  const stack = errorInfo?.componentStack ?? error.stack ?? "";
+  const isInline = variant === "inline";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "@container flex w-full items-center justify-center",
+        isInline ? "py-6 px-4" : "h-full min-h-[240px] flex-1 py-10 px-6",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center text-center",
+            isInline ? "gap-3 max-w-md" : "gap-4 max-w-2xl @md:gap-5 @lg:gap-6"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-full bg-accent2/10 text-accent2 flex items-center justify-center",
+                  isInline ? "h-10 w-10 [&>svg]:h-5 [&>svg]:w-5" : "h-14 w-14 [&>svg]:h-7 [&>svg]:w-7 @md:h-16 @md:w-16 @md:[&>svg]:h-8 @md:[&>svg]:w-8 @lg:h-20 @lg:w-20 @lg:[&>svg]:h-10 @lg:[&>svg]:w-10"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn(
+                  "font-medium text-neutral6",
+                  isInline ? "text-ui-md" : "text-ui-lg @md:text-header-md @lg:text-header-lg"
+                ),
+                children: title ?? "Something went wrong"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-neutral3", isInline ? "text-ui-sm" : "text-ui-md @lg:text-ui-lg"), children: description ?? "An unexpected error occurred while rendering this part of the page." }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "font-mono text-neutral4 break-words rounded-md bg-surface3 px-3 py-2",
+                  isInline ? "text-ui-xs" : "text-ui-sm"
+                ),
+                children: error.message
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-2", isInline ? "mt-1" : "mt-2"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: isInline ? "sm" : "default", onClick: reset, children: "Try again" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "default", size: isInline ? "sm" : "default", onClick: () => window.location.reload(), children: "Reload page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  as: "a",
+                  variant: "default",
+                  size: isInline ? "sm" : "default",
+                  href: "https://github.com/mastra-ai/mastra/issues",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Report issue"
+                }
+              )
+            ] }),
+            stack ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("w-full text-left", isInline ? "mt-1" : "mt-2"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-ui-sm text-neutral3 hover:text-neutral4", children: "Show error details" }),
+              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-surface3 p-3 text-ui-xs text-neutral4 whitespace-pre-wrap break-words", children: stack })
+            ] }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
 function ErrorState({ title, message }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[30vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-center py-10 px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, { className: "h-8 w-8 text-red-900" }) }),
@@ -14356,6 +14505,7 @@ exports.EntryCell = EntryCell;
 exports.EntryList = EntryList;
 exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
+exports.ErrorBoundary = ErrorBoundary;
 exports.ErrorState = ErrorState;
 exports.Field = Field;
 exports.FieldBlock = FieldBlock;