@mastra/playground-ui 20.0.0-alpha.8 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @mastra/playground-ui
 
+## 20.0.0
+
+### Minor Changes
+
+- Redesigned the Agent Traces tab with improved layout and new filtering capabilities: ([#14644](https://github.com/mastra-ai/mastra/pull/14644))
+  - Added sortable columns for Timestamp and Duration
+  - Inline score display when a scorer is selected, with a threshold filter to surface low-scoring traces
+  - Status and date-range filters for narrowing traces
+  - Client-side search across trace inputs and outputs
+  - Bulk checkbox selection with "Add to dataset" action
+  - Improved text truncation to prevent horizontal scrolling
+
+- Added comprehensive filtering and search to the observability traces view. Traces can now be filtered by entity type, status, tags, metadata key-value pairs, date range (with presets and custom ranges), and context fields (environment, service name, user ID, session ID, and more). Also added full-text search across trace names and metadata, thread grouping with a toggle, and a new traces list with collapsible thread groups. ([#14564](https://github.com/mastra-ai/mastra/pull/14564))
+
+- Redesigned the Evaluation dashboard with new list views, review pipeline, and dataset-level review tab. ([#14649](https://github.com/mastra-ai/mastra/pull/14649))
+
+  **Evaluation dashboard**
+  - Replaced table-based list views with the new `EntityList` design system for Scorers, Datasets, and Experiments tabs.
+  - Moved charts to an Overview tab and list views to dedicated tabs (Scorers, Datasets, Experiments). Tabs are now driven by sidebar navigation instead of an in-page tab bar.
+  - Added per-tab filter toolbars with search, status filters, and tag filters.
+  - Added "Create Dataset" button to Datasets tab.
+  - Added "Needs Review" KPI card and "Review Pipeline" chart to the Overview tab.
+
+  **Dataset review tab**
+  - New "Review" tab on the dataset detail page for reviewing experiment results across all agents targeting that dataset.
+  - Extracted shared review components (`ReviewItemCard`, `TagPicker`, `BulkTagPicker`, `ProposalTag`) into a reusable `review` domain.
+  - LLM-powered failure clustering and tag proposal integrated into dataset-level review.
+  - Tag-based filtering, bulk operations, ratings, and comments.
+
+  **Other improvements**
+  - Dataset tags displayed in a dedicated column with truncation and hover tooltip.
+  - Experiment result panel now shows review status badge and tags.
+  - Scores-over-time chart uses adaptive time bucketing (minute/hour/day) and shows date labels for multi-day ranges.
+  - Bar chart labels repositioned above bars for better contrast.
+  - Breadcrumbs across dataset and experiment pages updated to use `/evaluation/` prefix.
+
+  **Sidebar design system**
+  - `MainSidebarNavHeader` now supports an optional `href` prop for clickable section headers, and an `isActive` prop for header highlighting.
+  - `MainSidebarNavLink` now supports an optional `indent` prop for sub-link indentation.
+
+- Finished light mode support for Mastra Studio. Theme selector is now always visible in settings — no environment variable needed. CodeMirror editors (instructions, trace view, code diff) render with proper syntax highlighting and cursor visibility in both light and dark modes. Dropdown menus now have correct hover/focus states in light mode. ([#14796](https://github.com/mastra-ai/mastra/pull/14796))
+
+### 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`)
+
+- dependencies updates: ([#14826](https://github.com/mastra-ai/mastra/pull/14826))
+  - Updated dependency [`@assistant-ui/react@^0.12.21` ↗︎](https://www.npmjs.com/package/@assistant-ui/react/v/0.12.21) (from `^0.12.19`, in `dependencies`)
+  - Updated dependency [`@assistant-ui/react-markdown@^0.12.7` ↗︎](https://www.npmjs.com/package/@assistant-ui/react-markdown/v/0.12.7) (from `^0.12.6`, in `dependencies`)
+
+- dependencies updates: ([#14827](https://github.com/mastra-ai/mastra/pull/14827))
+  - Updated dependency [`@uiw/codemirror-theme-dracula@^4.25.9` ↗︎](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula/v/4.25.9) (from `^4.25.8`, in `dependencies`)
+  - Updated dependency [`@uiw/codemirror-theme-github@^4.25.9` ↗︎](https://www.npmjs.com/package/@uiw/codemirror-theme-github/v/4.25.9) (from `^4.25.8`, in `dependencies`)
+  - Updated dependency [`@uiw/react-codemirror@^4.25.9` ↗︎](https://www.npmjs.com/package/@uiw/react-codemirror/v/4.25.9) (from `^4.25.8`, in `dependencies`)
+
+- Added a Scorers section to the dataset detail view for attaching and detaching scorers. Fixed a crash on page refresh in the evaluate tab caused by `ReviewQueueProvider` not being mounted during loading states. ([#14783](https://github.com/mastra-ai/mastra/pull/14783))
+
+- Added `as` prop to `MetricsCardTitle` and `titleAs` prop to `MetricsCardTitleAndDescription` to customize the heading level (h2, h3, h4). Defaults to h2. ([#14718](https://github.com/mastra-ai/mastra/pull/14718))
+
+- Changed the Editor tab URL from /agents/:agentId/playground to /agents/:agentId/editor in Mastra Studio ([#14795](https://github.com/mastra-ai/mastra/pull/14795))
+
+- 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))
+
+- Improved the default playground tabs so labels size to their content with tighter horizontal padding. ([#14857](https://github.com/mastra-ai/mastra/pull/14857))
+
+- updated `playground-ui` to send both new and legacy `feedbackSource` fields ([#14856](https://github.com/mastra-ai/mastra/pull/14856))
+
+- Added cost metrics to the Metrics dashboard. ([#14716](https://github.com/mastra-ai/mastra/pull/14716))
+  - Added a **Total Model Cost** KPI card.
+  - Added a **Cost** column in the **Model Usage** table.
+  - Added a **Cost** view in **Token Usage by Agent**.
+  - Improved `ScrollArea` to support horizontal and vertical scrolling together.
+
+  **Example**
+
+  ```tsx
+  <ScrollArea orientation="both" maxHeight="20rem">
+    <MetricsDataTable ... />
+  </ScrollArea>
+  ```
+
+- Fix restored subagent tool results so approval cards and nested tool state appear correctly in the dev server. ([#14348](https://github.com/mastra-ai/mastra/pull/14348))
+
+- Correct link to metrics ([#14854](https://github.com/mastra-ai/mastra/pull/14854))
+
+- 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 [[`dc514a8`](https://github.com/mastra-ai/mastra/commit/dc514a83dba5f719172dddfd2c7b858e4943d067), [`e333b77`](https://github.com/mastra-ai/mastra/commit/e333b77e2d76ba57ccec1818e08cebc1993469ff), [`dc9fc19`](https://github.com/mastra-ai/mastra/commit/dc9fc19da4437f6b508cc355f346a8856746a76b), [`60a224d`](https://github.com/mastra-ai/mastra/commit/60a224dd497240e83698cfa5bfd02e3d1d854844), [`fbf22a7`](https://github.com/mastra-ai/mastra/commit/fbf22a7ad86bcb50dcf30459f0d075e51ddeb468), [`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`f16d92c`](https://github.com/mastra-ai/mastra/commit/f16d92c677a119a135cebcf7e2b9f51ada7a9df4), [`949b7bf`](https://github.com/mastra-ai/mastra/commit/949b7bfd4e40f2b2cba7fef5eb3f108a02cfe938), [`404fea1`](https://github.com/mastra-ai/mastra/commit/404fea13042181f0b0c73a101392ac87c79ceae2), [`ebf5047`](https://github.com/mastra-ai/mastra/commit/ebf5047e825c38a1a356f10b214c1d4260dfcd8d), [`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`eef4a26`](https://github.com/mastra-ai/mastra/commit/eef4a2657cb14343e302e3f310ada86a2013f6cf), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a), [`fbf22a7`](https://github.com/mastra-ai/mastra/commit/fbf22a7ad86bcb50dcf30459f0d075e51ddeb468), [`d084b66`](https://github.com/mastra-ai/mastra/commit/d084b6692396057e83c086b954c1857d20b58a14), [`79c699a`](https://github.com/mastra-ai/mastra/commit/79c699acf3cd8a77e11c55530431f48eb48456e9), [`62757b6`](https://github.com/mastra-ai/mastra/commit/62757b6db6e8bb86569d23ad0b514178f57053f8), [`675f15b`](https://github.com/mastra-ai/mastra/commit/675f15b7eaeea649158d228ea635be40480c584d), [`b174c63`](https://github.com/mastra-ai/mastra/commit/b174c63a093108d4e53b9bc89a078d9f66202b3f), [`7e86302`](https://github.com/mastra-ai/mastra/commit/7e86302a77f16adbb771af43f72472872d13593e), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a), [`8812997`](https://github.com/mastra-ai/mastra/commit/8812997791f546ae6c64921bac6f65d3f4b5832e), [`04160ee`](https://github.com/mastra-ai/mastra/commit/04160eedf3130003cf842ad08428c8ff69af4cc1), [`2c27503`](https://github.com/mastra-ai/mastra/commit/2c275032510d131d2cde47f99953abf0fe02c081), [`424a1df`](https://github.com/mastra-ai/mastra/commit/424a1df7bee59abb5c83717a54807fdd674a6224), [`3d70b0b`](https://github.com/mastra-ai/mastra/commit/3d70b0b3524d817173ad870768f259c06d61bd23), [`bbfd3c0`](https://github.com/mastra-ai/mastra/commit/bbfd3c0302ac10be63e5fca93b5068690f472dea), [`eef7cb2`](https://github.com/mastra-ai/mastra/commit/eef7cb2abe7ef15951e2fdf792a5095c6c643333), [`260fe12`](https://github.com/mastra-ai/mastra/commit/260fe1295fe7354e39d6def2775e0797a7a277f0), [`260fe12`](https://github.com/mastra-ai/mastra/commit/260fe1295fe7354e39d6def2775e0797a7a277f0), [`197daf0`](https://github.com/mastra-ai/mastra/commit/197daf03a33e4650bd90391eef0ec7d0392a6c9c), [`12c88a6`](https://github.com/mastra-ai/mastra/commit/12c88a6e32bf982c2fe0c6af62e65a3414519a75), [`43595bf`](https://github.com/mastra-ai/mastra/commit/43595bf7b8df1a6edce7a23b445b5124d2a0b473), [`78670e9`](https://github.com/mastra-ai/mastra/commit/78670e97e76d7422cf7025faf371b2aeafed860d), [`e8a5b0b`](https://github.com/mastra-ai/mastra/commit/e8a5b0b9bc94d12dee4150095512ca27a288d778), [`3b45a13`](https://github.com/mastra-ai/mastra/commit/3b45a138d09d040779c0aba1edbbfc1b57442d23), [`d400e7c`](https://github.com/mastra-ai/mastra/commit/d400e7c8b8d7afa6ba2c71769eace4048e3cef8e), [`f58d1a7`](https://github.com/mastra-ai/mastra/commit/f58d1a7a457588a996c3ecb53201a68f3d28c432), [`a49a929`](https://github.com/mastra-ai/mastra/commit/a49a92904968b4fc67e01effee8c7c8d0464ba85), [`8127d96`](https://github.com/mastra-ai/mastra/commit/8127d96280492e335d49b244501088dfdd59a8f1)]:
+  - @mastra/core@1.18.0
+  - @mastra/client-js@1.11.0
+  - @mastra/react@0.2.18
+  - @mastra/ai-sdk@1.3.0
+
+## 20.0.0-alpha.9
+
+### Patch Changes
+
+- Improved the default playground tabs so labels size to their content with tighter horizontal padding. ([#14857](https://github.com/mastra-ai/mastra/pull/14857))
+
+- Updated dependencies [[`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`12c647c`](https://github.com/mastra-ai/mastra/commit/12c647cf3a26826eb72d40b42e3c8356ceae16ed), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a), [`819f03c`](https://github.com/mastra-ai/mastra/commit/819f03c25823373b32476413bd76be28a5d8705a)]:
+  - @mastra/client-js@1.11.0-alpha.8
+  - @mastra/react@0.2.18-alpha.8
+  - @mastra/core@1.18.0-alpha.5
+
 ## 20.0.0-alpha.8
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -13216,16 +13216,16 @@ const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
 };
 
-const TabList = ({ children, variant = "default", alignment = "full-width", className }) => {
+const TabList = ({ children, variant = "default", alignment = "left", className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixTabs__namespace.List,
     {
       className: cn(
-        "flex items-center relative",
+        "flex items-center relative w-max min-w-full",
         {
           // variant: default
-          "text-ui-lg": variant === "default",
-          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "text-ui-lg border-b border-border1": variant === "default",
+          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b-2 [&>button]:border-transparent": variant === "default",
           "[&>button]:flex-1": variant === "default" && alignment === "full-width",
           [`[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`]: variant === "default",
           "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-black/50 [&>button[data-state=active]]:dark:border-white/50": variant === "default",
@@ -13248,7 +13248,7 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
     {
       value,
       className: cn(
-        "text-sm p-3 text-neutral3 whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5",
+        "text-sm py-3 px-2 text-neutral3 whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none",
         transitions.all,
         focusRing.visible,
         "hover:text-neutral4",
@@ -17071,7 +17071,8 @@ function MastraRuntimeProvider({
   refreshThreadList,
   settings,
   requestContext,
-  modelVersion
+  modelVersion,
+  agentVersionId
 }) {
   const { settings: tracingSettings } = useTracingSettings();
   const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
@@ -17079,6 +17080,12 @@ function MastraRuntimeProvider({
   React.useEffect(() => {
     setLegacyMessages(initializeMessageState(initialLegacyMessages || []));
   }, [initialLegacyMessages]);
+  const chatRequestContext = React.useMemo(() => {
+    if (!agentVersionId) return void 0;
+    const ctx = new di.RequestContext();
+    ctx.set("agentVersionId", agentVersionId);
+    return ctx;
+  }, [agentVersionId]);
   const {
     messages,
     sendMessage,
@@ -17095,7 +17102,8 @@ function MastraRuntimeProvider({
     networkToolCallApprovals
   } = react.useChat({
     agentId,
-    initialMessages
+    initialMessages,
+    requestContext: chatRequestContext
   });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
@@ -17305,6 +17313,9 @@ function MastraRuntimeProvider({
     Object.entries(requestContext ?? {}).forEach(([key, value]) => {
       requestContextInstance.set(key, value);
     });
+    if (agentVersionId) {
+      requestContextInstance.set("agentVersionId", agentVersionId);
+    }
     try {
       if (isSupportedModel) {
         if (chatWithNetwork) {
@@ -17772,6 +17783,7 @@ const AgentChat = ({
   memory,
   refreshThreadList,
   modelVersion,
+  agentVersionId,
   modelList,
   messageId,
   isNewThread,
@@ -17809,6 +17821,7 @@ const AgentChat = ({
       agentId,
       agentName,
       modelVersion,
+      agentVersionId,
       threadId,
       initialMessages: v5Messages,
       initialLegacyMessages: v4Messages,
@@ -32714,7 +32727,13 @@ function AgentPlaygroundConfig({ agentId, selectedVersionId, latestVersionId })
   ] });
 }
 
-function AgentPlaygroundTestChat({ agentId, agentName, modelVersion, hasMemory }) {
+function AgentPlaygroundTestChat({
+  agentId,
+  agentName,
+  modelVersion,
+  agentVersionId,
+  hasMemory
+}) {
   const testThreadId = React.useMemo(() => uuid.v4(), [agentId]);
   const mergedRequestContext = useMergedRequestContext();
   const hasRequestContext = Object.keys(mergedRequestContext).length > 0;
@@ -32731,6 +32750,7 @@ function AgentPlaygroundTestChat({ agentId, agentName, modelVersion, hasMemory }
           agentId,
           agentName,
           modelVersion,
+          agentVersionId,
           threadId: testThreadId,
           memory: hasMemory,
           refreshThreadList: async () => {
@@ -32965,6 +32985,7 @@ function AgentPlaygroundView({
   agentId,
   agentName,
   modelVersion,
+  agentVersionId,
   hasMemory,
   activeVersionId,
   selectedVersionId,
@@ -33007,6 +33028,7 @@ function AgentPlaygroundView({
         agentId,
         agentName,
         modelVersion,
+        agentVersionId,
         hasMemory
       }
     ) }) }) })