@mastra/playground-ui 20.0.2-alpha.0 → 21.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @mastra/playground-ui
 
+## 21.0.0-alpha.0
+
+### Patch Changes
+
+- Fixed broken colors in DataDetailsPanelCodeSection when using Light theme by adding theme-aware CodeMirror styling and container classes ([#14923](https://github.com/mastra-ai/mastra/pull/14923))
+
+- Reverted HorizontalBars layout to original inline style with label overlaid inside the bar and total displayed to the right ([#14919](https://github.com/mastra-ai/mastra/pull/14919))
+
+- Updated dependencies [[`9a43b47`](https://github.com/mastra-ai/mastra/commit/9a43b476465e86c9aca381c2831066b5c33c999a), [`edf8f9d`](https://github.com/mastra-ai/mastra/commit/edf8f9d9cd671ffbc8533ac154da6c3386799b33)]:
+  - @mastra/core@1.21.0-alpha.0
+  - @mastra/client-js@1.12.0-alpha.0
+  - @mastra/react@0.2.21-alpha.0
+
+## 20.0.2
+
+### Patch Changes
+
+- **New components for the Logs MVP** ([#14899](https://github.com/mastra-ai/mastra/pull/14899))
+  - `DataDetailsPanel` — composable detail panel with header, key-value list, code sections, and loading/empty states.
+  - `DataList` — generic data list with row links, top cells, skeleton loading, and pagination.
+  - `LogsDataList` — log-specific data list cells (level, date, time, entity, message).
+  - `SelectDataFilter` — dropdown filter with searchable categories, single/multi selection, and active count badge.
+
+  **`ListSearch`** now accepts a `size` prop to control input height:
+
+  ```tsx
+  <ListSearch size="sm" onSearch={handleSearch} label="Filter" placeholder="Search..." />
+  ```
+
+- **Logs UI improvements** ([#14899](https://github.com/mastra-ai/mastra/pull/14899))
+  - Added `SelectDataFilter` dropdown component to the design system for reusable multi-category filtering with search, single/multi selection modes, and active filter count badge.
+  - Updated `LogsToolbar` with `SelectDataFilter` integration and a Reset button that appears when filters are active.
+  - Replaced custom `DetailRow` in log `SpanDetails` with `DataDetailsPanel.KeyValueList` for consistent key-value rendering.
+  - Improved `LogDetails` span button to disable when traceId is missing.
+  - Enabled line numbers and code folding in `DataDetailsPanelCodeSection` to match `SideDialogCodeSection` behavior.
+  - Fixed `bgColor` values in span type mapping to use valid CSS color strings.
+
+- Updated dependencies [[`cbeec24`](https://github.com/mastra-ai/mastra/commit/cbeec24b3c97a1a296e7e461e66cc7f7d215dc50), [`cee146b`](https://github.com/mastra-ai/mastra/commit/cee146b5d858212e1df2b2730fc36d3ceda0e08d), [`aa0aeff`](https://github.com/mastra-ai/mastra/commit/aa0aeffa11efbef5e219fbd97bf43d263cfe3afe), [`2bcec65`](https://github.com/mastra-ai/mastra/commit/2bcec652d62b07eab15e9eb9822f70184526eede), [`ad9bded`](https://github.com/mastra-ai/mastra/commit/ad9bdedf86a824801f49928a8d40f6e31ff5450f), [`cbeec24`](https://github.com/mastra-ai/mastra/commit/cbeec24b3c97a1a296e7e461e66cc7f7d215dc50), [`208c0bb`](https://github.com/mastra-ai/mastra/commit/208c0bbacbf5a1da6318f2a0e0c544390e542ddc), [`f566ee7`](https://github.com/mastra-ai/mastra/commit/f566ee7d53a3da33a01103e2a5ac2070ddefe6b0)]:
+  - @mastra/core@1.20.0
+  - @mastra/client-js@1.11.2
+  - @mastra/ai-sdk@1.3.0
+  - @mastra/react@0.2.20
+
 ## 20.0.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -5569,7 +5569,7 @@ function CopyButton({
   ] });
 }
 
-function buildDarkTheme() {
+function buildDarkTheme$1() {
   const baseTheme = codemirrorThemeDracula.draculaInit({
     settings: {
       fontFamily: "var(--geist-mono)",
@@ -5656,7 +5656,7 @@ function buildDarkTheme() {
   });
   return [baseTheme, customLineNumberTheme];
 }
-function buildLightTheme() {
+function buildLightTheme$1() {
   const editorTheme = view.EditorView.theme({
     "&": {
       backgroundColor: "transparent",
@@ -5759,7 +5759,7 @@ function buildLightTheme() {
 }
 const useCodemirrorTheme$2 = () => {
   const isDark = useIsDarkMode();
-  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+  return React.useMemo(() => isDark ? buildDarkTheme$1() : buildLightTheme$1(), [isDark]);
 };
 const CodeEditor = React.forwardRef(
   ({
@@ -42673,62 +42673,65 @@ function HorizontalBars({
   });
   const isStacked = segments.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: cn("w-full h-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mb-4 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
-    ] }, seg.label)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4 mt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-ui-sm text-neutral2 pr-2", children: "Total" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
       const total = d.values.reduce((s, v) => s + v, 0);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral4 truncate", children: d.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral4 tabular-nums shrink-0", children: fmt(total) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-5 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-y-0 left-0 cursor-default",
-              style: { width: `${maxVal > 0 ? total / maxVal * 100 : 0}%` },
-              children: segments.map((seg, si) => {
-                const val = d.values[si] ?? 0;
-                const pct = total > 0 ? val / total * 100 : 0;
-                const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
-                const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
-                if (isStacked) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-14 h-6 ", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-y-0 left-0 cursor-default",
+                style: { width: `${maxVal > 0 ? total / maxVal * 100 : 0}%` },
+                children: segments.map((seg, si) => {
+                  const val = d.values[si] ?? 0;
+                  const pct = total > 0 ? val / total * 100 : 0;
+                  const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
+                  const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
+                  if (isStacked) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-y-0",
+                          si === 0 && "rounded-l",
+                          isLastWithValue && "rounded-r"
+                        ),
+                        style: {
+                          left: `${left}%`,
+                          width: `${pct}%`,
+                          backgroundColor: seg.color
+                        }
+                      },
+                      seg.label
+                    );
+                  }
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "absolute inset-y-0",
-                        si === 0 && "rounded-l",
-                        isLastWithValue && "rounded-r"
-                      ),
-                      style: {
-                        left: `${left}%`,
-                        width: `${pct}%`,
-                        backgroundColor: seg.color
-                      }
+                      className: "absolute inset-y-0 left-0 rounded",
+                      style: { width: `${pct}%`, backgroundColor: seg.color }
                     },
                     seg.label
                   );
-                }
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 left-0 rounded",
-                    style: { width: `${pct}%`, backgroundColor: seg.color }
-                  },
-                  seg.label
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
-          ] }, seg.label)) }) })
-        ] }) })
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none", children: d.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral4 tabular-nums shrink-0 pr-3", children: fmt(total) })
       ] }, d.name);
     }) })
   ] });
@@ -51443,21 +51446,66 @@ function DataDetailsPanelCloseButton({
   );
 }
 
+function buildDarkTheme() {
+  return codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: "var(--geist-mono)",
+      fontSize: "0.75rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
+  });
+}
+function buildLightTheme() {
+  const editorTheme = view.EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.75rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--geist-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    }
+  });
+  const highlightStyle = language.HighlightStyle.define([
+    { tag: [highlight$1.tags.comment, highlight$1.tags.bracket], color: "var(--neutral2)" },
+    { tag: [highlight$1.tags.string, highlight$1.tags.meta, highlight$1.tags.regexp], color: "var(--accent1)" },
+    { tag: [highlight$1.tags.atom, highlight$1.tags.bool, highlight$1.tags.special(highlight$1.tags.variableName)], color: "var(--accent6)" },
+    { tag: [highlight$1.tags.keyword, highlight$1.tags.operator, highlight$1.tags.tagName], color: "var(--accent2)" },
+    { tag: [highlight$1.tags.function(highlight$1.tags.propertyName), highlight$1.tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [highlight$1.tags.definition(highlight$1.tags.variableName), highlight$1.tags.function(highlight$1.tags.variableName), highlight$1.tags.className, highlight$1.tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [highlight$1.tags.variableName, highlight$1.tags.number], color: "var(--accent5)" },
+    { tag: [highlight$1.tags.name, highlight$1.tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
 const useCodemirrorTheme = () => {
-  return React.useMemo(
-    () => codemirrorThemeDracula.draculaInit({
-      settings: {
-        fontFamily: "var(--geist-mono)",
-        fontSize: "0.75rem",
-        lineHighlight: "transparent",
-        gutterBackground: "transparent",
-        gutterForeground: "#939393",
-        background: "transparent"
-      },
-      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
-    }),
-    []
-  );
+  const isDark = useIsDarkMode();
+  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
 function DataDetailsPanelCodeSection({
   codeStr = "",
@@ -51507,10 +51555,10 @@ function DataDetailsPanelCodeSection({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/20 p-3 overflow-hidden rounded-lg border border-white/10 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
       CodeMirror,
       {
-        extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping],
+        extensions: [langJson.json(), view.EditorView.lineWrapping],
         theme,
         value: codeStr,
         editable: false