@mastra/playground-ui 33.0.0-alpha.4 → 34.0.0

package/CHANGELOG.md

@@ -1,5 +1,217 @@
 # @mastra/playground-ui
 
+## 34.0.0
+
+### Minor Changes
+
+- Added a `striped` variant to the `DataList` component for a flat, full-bleed table look: zebra-striped rows, a contrasting sticky header with column separators, rounded corners, and edge fade masks via an overlay scrollbar (virtualization preserved). Also added a per-row `error` tone. ([#18023](https://github.com/mastra-ai/mastra/pull/18023))
+
+  Studio now uses this variant on the Observability, Scorers, Agents, Workflows, Tools, Datasets, MCP Servers, Processors, Prompts, Experiments, Schedules, and Logs tables for a consistent, denser browse experience.
+
+  ```tsx
+  // Whole-list look
+  <DataList columns="auto 1fr auto" variant="striped">
+    <DataList.Top>…</DataList.Top>
+
+    {/* Per-row tone — error rows get a subtle destructive tint */}
+    <DataList.RowButton variant="error">…</DataList.RowButton>
+  </DataList>
+  ```
+
+### Patch Changes
+
+- dependencies updates: ([#17147](https://github.com/mastra-ai/mastra/pull/17147))
+  - Updated dependency [`@codemirror/autocomplete@^6.20.3` ↗︎](https://www.npmjs.com/package/@codemirror/autocomplete/v/6.20.3) (from `^6.20.1`, in `dependencies`)
+  - Updated dependency [`@codemirror/legacy-modes@^6.5.3` ↗︎](https://www.npmjs.com/package/@codemirror/legacy-modes/v/6.5.3) (from `^6.5.2`, in `dependencies`)
+  - Updated dependency [`@codemirror/merge@^6.12.2` ↗︎](https://www.npmjs.com/package/@codemirror/merge/v/6.12.2) (from `^6.12.1`, in `dependencies`)
+  - Updated dependency [`@codemirror/search@^6.7.0` ↗︎](https://www.npmjs.com/package/@codemirror/search/v/6.7.0) (from `^6.6.0`, in `dependencies`)
+  - Updated dependency [`@codemirror/view@^6.43.1` ↗︎](https://www.npmjs.com/package/@codemirror/view/v/6.43.1) (from `^6.40.0`, in `dependencies`)
+  - Updated dependency [`@uiw/codemirror-theme-dracula@^4.25.10` ↗︎](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula/v/4.25.10) (from `^4.25.9`, in `dependencies`)
+  - Updated dependency [`@uiw/react-codemirror@^4.25.10` ↗︎](https://www.npmjs.com/package/@uiw/react-codemirror/v/4.25.10) (from `^4.25.9`, in `dependencies`)
+
+- Republished clean patch versions after compromised npm releases were published outside of the trusted release workflow. ([#18049](https://github.com/mastra-ai/mastra/pull/18049))
+
+  These packages must be released as clean versions higher than the compromised versions currently present on npm so semver ranges resolve to trusted tarballs.
+
+- Updated dependencies [[`de66bb0`](https://github.com/mastra-ai/mastra/commit/de66bb040570444c702ce4d8e1e228a5de2949cb), [`67bf8e2`](https://github.com/mastra-ai/mastra/commit/67bf8e206dfe583954d96015cf0d09f7ac50e45f), [`8216d05`](https://github.com/mastra-ai/mastra/commit/8216d0528d866eb9a07f5d4c87ea3bb1e1139b45), [`d18b23c`](https://github.com/mastra-ai/mastra/commit/d18b23c5e29dfc381e73e3c51fcf6c779afd1823), [`5eb94eb`](https://github.com/mastra-ai/mastra/commit/5eb94ebcf66d4e28c9e26d5821ac93379bab20a0), [`1fa3e12`](https://github.com/mastra-ai/mastra/commit/1fa3e123582b63cfe49de4ee52dc6a065e8d956a), [`f9ee2ac`](https://github.com/mastra-ai/mastra/commit/f9ee2ac661af584e61bc063ac208c9035cd752ef), [`c853d53`](https://github.com/mastra-ai/mastra/commit/c853d535d2df84ab89db1adb4c28900c54c9a2d2), [`d8df1f8`](https://github.com/mastra-ai/mastra/commit/d8df1f8e947e1966c9d4e54713df56d0d0d65226), [`641d50a`](https://github.com/mastra-ai/mastra/commit/641d50a2b253a84406cae04f1842b9cb2b392ba6), [`9192ddb`](https://github.com/mastra-ai/mastra/commit/9192ddbced8949113b30de444cbe763f075b59f5), [`42b0dba`](https://github.com/mastra-ai/mastra/commit/42b0dba42577bca39c82984354f193404b889db3), [`ae96523`](https://github.com/mastra-ai/mastra/commit/ae965231f562d9766b0c90c49a69fc68acaa031c), [`17d5a92`](https://github.com/mastra-ai/mastra/commit/17d5a9211aa293b4d4418de3de70dc0394d58101), [`5573693`](https://github.com/mastra-ai/mastra/commit/5573693b589822250e20dfe6cf66e9ff3bc96da8), [`ec4da8a`](https://github.com/mastra-ai/mastra/commit/ec4da8a09e0d2ab452c6ee2c786042ea826b77e5), [`adc44e1`](https://github.com/mastra-ai/mastra/commit/adc44e13c7e570b91e86b20ea7556e61d819db31), [`ed346c0`](https://github.com/mastra-ai/mastra/commit/ed346c0bee2d8496690a4e538bfba1e46894660f), [`c9ce1b2`](https://github.com/mastra-ai/mastra/commit/c9ce1b28d10871110648f9d7b6d76e880b9fa999), [`3ef01fd`](https://github.com/mastra-ai/mastra/commit/3ef01fd130b53d5bd4f828beb174e516a2eb1158), [`245a9a3`](https://github.com/mastra-ai/mastra/commit/245a9a315705fce17ddd980f78a92504b6615c4a), [`dc0b611`](https://github.com/mastra-ai/mastra/commit/dc0b6119b769bd00ee2c5df9259fb376fe63077a), [`38b5de8`](https://github.com/mastra-ai/mastra/commit/38b5de8e5d1d41a69522addf53d96f4b3a1d5bf0), [`dc0b611`](https://github.com/mastra-ai/mastra/commit/dc0b6119b769bd00ee2c5df9259fb376fe63077a), [`dd6a66e`](https://github.com/mastra-ai/mastra/commit/dd6a66ea0b32e0dea8059aec6b35d151e2c87dc4), [`d785c59`](https://github.com/mastra-ai/mastra/commit/d785c593b67fcb4cdc4fab9fdbde5f3b7665efc0), [`641d50a`](https://github.com/mastra-ai/mastra/commit/641d50a2b253a84406cae04f1842b9cb2b392ba6), [`1fa3e12`](https://github.com/mastra-ai/mastra/commit/1fa3e123582b63cfe49de4ee52dc6a065e8d956a), [`8b984f4`](https://github.com/mastra-ai/mastra/commit/8b984f4361c202270ceb69257185c4756c9a7c56), [`bf08402`](https://github.com/mastra-ai/mastra/commit/bf084022374fa5d06ca70ed67a86dd64e379071b), [`81fe587`](https://github.com/mastra-ai/mastra/commit/81fe587275035715c1720ddf3fee0505cf053036), [`1fa3e12`](https://github.com/mastra-ai/mastra/commit/1fa3e123582b63cfe49de4ee52dc6a065e8d956a), [`403c438`](https://github.com/mastra-ai/mastra/commit/403c438e417278989ce247233d2c465b8d902cdd), [`44123de`](https://github.com/mastra-ai/mastra/commit/44123def4cc81cf1042a77db2c095a47bbf5275e), [`f8ba195`](https://github.com/mastra-ai/mastra/commit/f8ba1954e27ee2b20586cc6cd9cf13c002c232f2)]:
+  - @mastra/core@1.43.0
+  - @mastra/client-js@1.25.0
+  - @mastra/react@0.7.0
+
+## 33.0.0
+
+### Minor Changes
+
+- Added shared chat loading and tool card components to the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Added per-component entrypoints under `@mastra/playground-ui/components/*` and enabled tree-shaking via the `sideEffects` field. ([#17740](https://github.com/mastra-ai/mastra/pull/17740))
+
+  **New per-component entrypoints**
+
+  Every design-system component can now be imported directly, without going through the root barrel:
+
+  ```ts
+  import { Button } from '@mastra/playground-ui/components/Button';
+  ```
+
+  The root `@mastra/playground-ui` import keeps working unchanged — this change is purely additive. Deep imports let bundlers pull in only the components you use instead of the whole library.
+
+  **Better tree-shaking**
+
+  The package now declares `"sideEffects": ["**/*.css"]`, so bundlers can drop unused re-exports even for apps that keep importing from the root barrel. The CSS contract is unchanged: import `@mastra/playground-ui/style.css` once, then import components from any subpath.
+
+- Removed legacy raw font-name aliases from playground UI theme tokens. Consumers should use `--font-display`, `--font-body`, and `--font-mono` directly. ([#17707](https://github.com/mastra-ai/mastra/pull/17707))
+
+- Redesigned resize handles across the studio. The sidebar and panel separators now show a subtle gradient line that fades in on hover and stays visible for the whole drag — including when the sidebar is collapsed to icons and the cursor moves away from the handle (the handle now captures the pointer during the gesture). `PanelSeparator` accepts a new `variant` prop: `line` (default) fits panels with a visible container edge, `pill` shows a floating pill for panels without one. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
+
+  ```tsx
+  <PanelSeparator />            // gradient line (default)
+  <PanelSeparator variant="pill" />  // floating pill
+  ```
+
+- Added native switch thumb icons so checked and unchecked states can show their own icon without custom overlay code. ([#17569](https://github.com/mastra-ai/mastra/pull/17569))
+
+- Added a Download trace JSON button to the trace detail panel in Studio. It saves the entire trace — every span with its full input, output, metadata, and attributes — to a `trace-<id>.json` file, so you can share a trace, attach it to a bug report, or build an eval dataset offline. Previously only individual IDs and per-section values could be copied. ([#17752](https://github.com/mastra-ai/mastra/pull/17752))
+
+- Improved code rendering in the design system so `CodeBlock` is the canonical surface for static code. ([#17430](https://github.com/mastra-ai/mastra/pull/17430))
+
+  **Fixed** syntax-highlighted code to follow light and dark mode by default. Token colors are now resolved in CSS from the active theme class instead of JavaScript, so highlighted code works without a `ThemeProvider`.
+
+  **Added** a low-level `Code` component, now shared by `CodeBlock` and `MarkdownRenderer` and exported for custom code surfaces:
+
+  ```tsx
+  import { Code } from '@mastra/playground-ui';
+
+  <Code code="pnpm dlx mastra init" lang="bash" />;
+  ```
+
+  **Added** an `overflow` prop to `CodeBlock`. Use the default `wrap` for commands and snippets, and `scroll` for source code where preserving columns matters:
+
+  ```tsx
+  <CodeBlock code={source} lang="typescript" overflow="scroll" />
+  ```
+
+  **Added** Python syntax highlighting support.
+
+- Added a new `@mastra/playground-ui/theme.css` export and made the Mastra brand green a built-in color. ([#17668](https://github.com/mastra-ai/mastra/pull/17668))
+
+  **New theme.css export**
+
+  You can now import the design tokens as raw CSS:
+
+  ```css
+  @import 'tailwindcss';
+  @import '@mastra/playground-ui/theme.css'; /* design tokens */
+  @import '@mastra/playground-ui/style.css'; /* component styles */
+  ```
+
+  Before, apps had to copy every token into their own `@theme` block so Tailwind would generate the matching utility classes (like `bg-surface1` or `text-neutral4`). Now your app's Tailwind reads the tokens from this file directly. This is the same pattern as `tailwindcss/theme.css`, and it keeps the tokens defined in one place.
+
+  **Brand green and chart colors**
+
+  The `green-*` classes now use the Mastra brand green (in both light and dark mode) instead of Tailwind's default green. New `--chart-1` through `--chart-5` colors are also available for charts. If you used the stock Tailwind green before, the new green looks a bit more vivid.
+
+- Added role-based semantic font tokens so consumers can swap fonts in one declaration. Components now reference `--font-display` (headlines, brand) and `--font-body` (UI, paragraphs) instead of type-based `--font-sans` / `--font-serif`. Existing utilities keep working through backward-compat aliases (`--font-sans` → `--font-body`, `--font-serif` → `--font-display`). ([#16265](https://github.com/mastra-ai/mastra/pull/16265))
+
+  **Override fonts in your app**
+
+  ```css
+  :root {
+    --font-display: 'Inter', system-ui, sans-serif;
+    --font-body: 'Inter', system-ui, sans-serif;
+    --font-mono: 'Commit Mono', ui-monospace, monospace;
+  }
+  ```
+
+  **Backward-compat for existing consumers** — the legacy raw font-name vars `--geist-mono`, `--font-inter`, `--tasa-explorer` continue to resolve via aliases to the semantic tokens, so any `font-family: var(--geist-mono)` keeps working without code changes. New code should reference `var(--font-mono)` directly.
+
+  The package no longer ships font files — defaults are system fonts. Bring your own fonts via `@font-face` in your app and override the tokens above.
+
+- **Added an `xs` size** to Button, Input, Select, and InputGroup for compact, dense layouts. ([#17675](https://github.com/mastra-ai/mastra/pull/17675))
+
+  ```tsx
+  <Button size="xs">Compact</Button>
+  <Input size="xs" />
+  ```
+
+  **Unified the keyboard-focus look across controls.** Buttons now show the same subtle border highlight on focus as inputs and selects, instead of a green ring, so a row of buttons, inputs, and selects feels consistent.
+
+  **Made Select and Combobox triggers match buttons.** They are now pill-shaped and reuse the Button styling, so a select reads like a button with a dropdown arrow. Their field-safe visual variants are `default` (filled, used by default), `outline`, and `ghost` — the same looks as buttons, minus the high-emphasis `primary`. Since `default` is the default, you only pass a `variant` to switch to `outline` or `ghost`. Legacy `SelectTrigger variant="primary"` and `Combobox variant="link"` are still accepted for source compatibility, but render as the closest field-safe look. MultiCombobox's `variant` now works (it previously had no effect).
+
+  **Deprecated `asChild`** on the DropdownMenu, Dialog, AlertDialog, and Popover triggers (and DialogClose). Pass your element to the `render` prop instead. `asChild` still works for now.
+
+  ```tsx
+  // Before
+  <DropdownMenu.Trigger asChild>
+    <Button>Open</Button>
+  </DropdownMenu.Trigger>
+
+  // After
+  <DropdownMenu.Trigger render={<Button>Open</Button>} />
+  ```
+
+- Added a token-usage-over-time timeline to the Studio metrics dashboard, showing input/output tokens per day and cost, filterable by agent and workflow. ([#17686](https://github.com/mastra-ai/mastra/pull/17686))
+
+### Patch Changes
+
+- Removed the generic tool card from the shared playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Removed an unused assistant UI dependency from the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Fixed combobox keyboard selection after filtering so pressing Enter chooses the first matching option. ([#17772](https://github.com/mastra-ai/mastra/pull/17772))
+
+- Removed the `default` Button size. Buttons now use `md` when no size is provided, and the previous `default` styling is available as `lg`. ([#17778](https://github.com/mastra-ai/mastra/pull/17778))
+
+  **Migration**
+
+  Before:
+
+  ```tsx
+  <Button size="default">Save</Button>
+  ```
+
+  After:
+
+  ```tsx
+  <Button size="lg">Save</Button>
+  ```
+
+  Use `size="md"` or omit `size` for the new default Button size.
+
+- Fixed the Studio Metrics **Latency** card drilldown, which was a silent no-op on all three tabs (Agents, Workflows, Tools). The view-level click guard and the container-level navigation handler both read a `rawTimestamp` field that the hook never produces; the only timestamp on a `LatencyPoint` is `tsMs`. Clicking a chart point now correctly navigates to the Traces page filtered to the 1-hour bucket and the entity type of the active tab. ([#17704](https://github.com/mastra-ai/mastra/pull/17704))
+
+- Added an optional `data-testid` prop to the Breadcrumb `Crumb` so individual crumbs can be targeted in tests and automation. ([#17687](https://github.com/mastra-ai/mastra/pull/17687))
+
+- Improved DataList pagination controls, row and header separators, wrapped-row spacing, text truncation, horizontal overflow handling, and empty-cell rendering. ([#17718](https://github.com/mastra-ai/mastra/pull/17718))
+
+- Removed five rarely-used components from the root barrel export. `SettingsRow`, `PrevNextNav`, `MetricsKpiCard`, `SideDialog`, and `ContextMenu` must now be imported from their per-component entrypoints (added in v33.1): ([#17753](https://github.com/mastra-ai/mastra/pull/17753))
+
+  ```ts
+  // before
+  import { SettingsRow, SideDialog, type SideDialogRootProps } from '@mastra/playground-ui';
+
+  // after
+  import { SettingsRow } from '@mastra/playground-ui/components/SettingsRow';
+  import { SideDialog, type SideDialogRootProps } from '@mastra/playground-ui/components/SideDialog';
+  ```
+
+  This is the first step of gradually slimming down the root barrel so apps only load the components they use. All other root exports are unchanged.
+
+- Removed an unnecessary overflow clip on the Switch track so thumb motion effects are no longer cut off at the edges ([#17822](https://github.com/mastra-ai/mastra/pull/17822))
+
+- Removed the right padding on the agent memory sidebar so it sits flush against the panel resize handle. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
+
+- Fixed the Evaluate Trace button in Studio (Agents → Traces) doing nothing on the first click. Selecting the anchor span and opening the scoring tab now happen in a single URL update instead of two racing ones, so the scoring panel opens immediately. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
+
+- Fixed the Agent and Workflow icon not appearing in the Traces and Logs entity column. The icon now matches the stored lowercase entity types (`agent`, `workflow_run`) instead of only uppercase values, so you can tell agent runs from workflow runs at a glance. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
+
+- Fixed input focus borders so hovering no longer overrides the focused state. ([#17570](https://github.com/mastra-ai/mastra/pull/17570))
+
+- Updated dependencies [[`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`575f815`](https://github.com/mastra-ai/mastra/commit/575f815c5c3567b71c0b83cbb7fa98c8253a9d9c), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`053735a`](https://github.com/mastra-ai/mastra/commit/053735a75c2c18e23ce34d9468007efa4a45f4c4), [`306909a`](https://github.com/mastra-ai/mastra/commit/306909a693de77d709b38706e2673c9547d24a28), [`5191af8`](https://github.com/mastra-ai/mastra/commit/5191af80c799eea25357c545fc05d91b3883531d), [`43bd3d4`](https://github.com/mastra-ai/mastra/commit/43bd3d421987463fdf35386a45199c49499ed069), [`e6fa79e`](https://github.com/mastra-ai/mastra/commit/e6fa79ec72a2ddffdd25e85270398951e9d552a4), [`904bcdf`](https://github.com/mastra-ai/mastra/commit/904bcdf7b8004aa7be823f9f70ca63580e47e470), [`7f5ee1d`](https://github.com/mastra-ai/mastra/commit/7f5ee1dca46daee8d2817f2ebe49e6335da81956), [`1e9aab5`](https://github.com/mastra-ai/mastra/commit/1e9aab50ff11e6e88fde4d7cbf512c44a9fe8d61), [`2bccba4`](https://github.com/mastra-ai/mastra/commit/2bccba4c03cadc815c2d54cbf4dd43a922140a8d), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`3abfa15`](https://github.com/mastra-ai/mastra/commit/3abfa158881ad3b187f69392cc64fe3a5aeed5c3), [`bf8eb6d`](https://github.com/mastra-ai/mastra/commit/bf8eb6d0ec213a403eb9265a594ad283c44ab3dc), [`e9be4e7`](https://github.com/mastra-ai/mastra/commit/e9be4e747ec3d8b65548bff92f9377db06105376), [`95482bf`](https://github.com/mastra-ai/mastra/commit/95482bf8a5c2b38022d4e2fee8ee07488c5f6262), [`493a328`](https://github.com/mastra-ai/mastra/commit/493a328f4346a1deeb9f1e2e44c8f2a3a4d7591b), [`d53cfc2`](https://github.com/mastra-ai/mastra/commit/d53cfc2c7f8d78343a4aa84ec4e129ba25f3325e), [`65799d4`](https://github.com/mastra-ai/mastra/commit/65799d4d549e5ebb9c848fbe3f51ac090f64becf), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`c268c89`](https://github.com/mastra-ai/mastra/commit/c268c89f4c63a93ee474d3cffdf3ea60bf00d4f2), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`014e00f`](https://github.com/mastra-ai/mastra/commit/014e00f2b3a597a016b72f9901c6ab27d491f822), [`029a414`](https://github.com/mastra-ai/mastra/commit/029a4141719793bd3e898a39eb5a0466a55f5f3a), [`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`d371ac1`](https://github.com/mastra-ai/mastra/commit/d371ac1d9820afaaf7cfdbc380a475946a994d8f), [`2bccba4`](https://github.com/mastra-ai/mastra/commit/2bccba4c03cadc815c2d54cbf4dd43a922140a8d), [`0c72f03`](https://github.com/mastra-ai/mastra/commit/0c72f032abb13254df5a7856d64be2f207b8006d), [`36df947`](https://github.com/mastra-ai/mastra/commit/36df947de2603131fd24652db61af7799a790827), [`cf182b7`](https://github.com/mastra-ai/mastra/commit/cf182b7fb495767946d9840ef29f19cfa906f31f), [`3b45ea9`](https://github.com/mastra-ai/mastra/commit/3b45ea95015557a6cb9d70dc5252af54ab1b78ac), [`a049c2a`](https://github.com/mastra-ai/mastra/commit/a049c2a9dfb41d0ee2e7a28874a88cd64fd5669f), [`f084be1`](https://github.com/mastra-ai/mastra/commit/f084be1fcbe33ad7480913e44d6130c421c0976f), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`65d3320`](https://github.com/mastra-ai/mastra/commit/65d3320bade087db166caff07eb461c008590ee8), [`2a96528`](https://github.com/mastra-ai/mastra/commit/2a9652848dfa3c5a2426f952e9d93554c26fd90f), [`44d2c09`](https://github.com/mastra-ai/mastra/commit/44d2c0989186b7294d624bc6dd17722bdb2dcf72), [`61f5491`](https://github.com/mastra-ai/mastra/commit/61f54912e6453cc706bb5d7df9f6c7aad78d428f), [`f2ab060`](https://github.com/mastra-ai/mastra/commit/f2ab060162bea81505fda553e2cee29c1979fd04), [`5d302c8`](https://github.com/mastra-ai/mastra/commit/5d302c8eda1a6ac74eab5e442c4f64db6cc97a06), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`a952852`](https://github.com/mastra-ai/mastra/commit/a952852c971a21fb646cd907c75fcf4443cdc963), [`2656d9c`](https://github.com/mastra-ai/mastra/commit/2656d9c2976d4f3354253bfbbbf9b88a1b2bbf34), [`b3e9781`](https://github.com/mastra-ai/mastra/commit/b3e9781a93a18e8e492849040016ddf239c00d9c), [`63e3fe1`](https://github.com/mastra-ai/mastra/commit/63e3fe13cc1ea96f91d7c68aea92f400faf9e4da), [`1d4ce8d`](https://github.com/mastra-ai/mastra/commit/1d4ce8daaa54511f325c1b609d31b8e54009d677), [`8c68372`](https://github.com/mastra-ai/mastra/commit/8c68372e85fe0b066ec12c58bd29ffb93e54c552)]:
+  - @mastra/core@1.42.0
+  - @mastra/client-js@1.24.0
+  - @mastra/react@0.6.0
+
 ## 33.0.0-alpha.4
 
 ### Minor Changes

package/dist/components/DataList.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tracesDataList = require('../traces-data-list-5GA3JumQ.cjs');
-const dataListSkeleton = require('../data-list-skeleton-Bges_t5u.cjs');
+const tracesDataList = require('../traces-data-list-kc8O_Yyd.cjs');
+const dataListSkeleton = require('../data-list-skeleton-DR7cqfzq.cjs');
 
 
 

package/dist/components/DataList.es.js

@@ -1,3 +1,3 @@
-export { D as DataList, S as ScoresDataList, T as TracesDataList } from '../traces-data-list-Dru2XnRN.js';
-export { D as DataListSkeleton } from '../data-list-skeleton-C9Ncz3jM.js';
+export { D as DataList, S as ScoresDataList, T as TracesDataList } from '../traces-data-list-JWUFbWnS.js';
+export { D as DataListSkeleton } from '../data-list-skeleton-B3bHGBlU.js';
 //# sourceMappingURL=DataList.es.js.map

package/dist/components/HorizontalBars.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const horizontalBars = require('../horizontal-bars-DkJlf6-x.cjs');
+const horizontalBars = require('../horizontal-bars-C9qp4r47.cjs');
 
 
 

package/dist/components/HorizontalBars.es.js

@@ -1,2 +1,2 @@
-export { H as HorizontalBars } from '../horizontal-bars-B43f5B_S.js';
+export { H as HorizontalBars } from '../horizontal-bars-DjLETHvH.js';
 //# sourceMappingURL=HorizontalBars.es.js.map

package/dist/components/LogsDataList.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const logsDataList = require('../logs-data-list-DikL8ZQ0.cjs');
-const dataListSkeleton = require('../data-list-skeleton-Bges_t5u.cjs');
+const logsDataList = require('../logs-data-list-De4DHIW9.cjs');
+const dataListSkeleton = require('../data-list-skeleton-DR7cqfzq.cjs');
 
 
 

package/dist/components/LogsDataList.es.js

@@ -1,3 +1,3 @@
-export { L as LogsDataList } from '../logs-data-list-B0Y5AHWL.js';
-export { D as LogsDataListSkeleton } from '../data-list-skeleton-C9Ncz3jM.js';
+export { L as LogsDataList } from '../logs-data-list-Be970xP6.js';
+export { D as LogsDataListSkeleton } from '../data-list-skeleton-B3bHGBlU.js';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/MainSidebar.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const mainSidebar = require('../main-sidebar-H8NQ7njm.cjs');
+const mainSidebar = require('../main-sidebar-CWoM-yrH.cjs');
 
 
 

package/dist/components/MainSidebar.es.js

@@ -1,2 +1,2 @@
-export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from '../main-sidebar-0q7MXh2j.js';
+export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from '../main-sidebar-Bk2U9O57.js';
 //# sourceMappingURL=MainSidebar.es.js.map

package/dist/components/MetricsDataTable.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const metricsDataTable = require('../metrics-data-table-BpEAlJi0.cjs');
+const metricsDataTable = require('../metrics-data-table-D7vx2WEJ.cjs');
 
 
 

package/dist/components/MetricsDataTable.es.js

@@ -1,2 +1,2 @@
-export { M as MetricsDataTable } from '../metrics-data-table-Dds2TkvE.js';
+export { M as MetricsDataTable } from '../metrics-data-table-DryqJWoI.js';
 //# sourceMappingURL=MetricsDataTable.es.js.map

package/dist/components/ScrollArea.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const scrollArea = require('../scroll-area-KogxLVrV.cjs');
+const scrollArea = require('../scroll-area-BqJfcT94.cjs');
 
 
 

package/dist/components/ScrollArea.es.js

@@ -1,2 +1,2 @@
-export { S as ScrollArea, a as ScrollBar } from '../scroll-area-BCZiAvhR.js';
+export { S as ScrollArea, a as ScrollBar } from '../scroll-area-BtDqmqBK.js';
 //# sourceMappingURL=ScrollArea.es.js.map

package/dist/{data-list-skeleton-C9Ncz3jM.js → data-list-skeleton-B3bHGBlU.js}

@@ -1,9 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { c as cn } from './utils-CzYGxqbG.js';
 import { Children, isValidElement, cloneElement, useContext, createContext, forwardRef } from 'react';
+import { c as cva } from './index-CsyK0ihk.js';
 import { C as Checkbox } from './checkbox-DmKlRClz.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DehuxlSR.js';
 import { format, isToday } from 'date-fns';
+import { S as ScrollArea } from './scroll-area-BtDqmqBK.js';
 
 const AgentIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 8.82265 8.51434", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx(
@@ -166,19 +168,64 @@ function DataListNoMatch({ message = "Nothing matches your search", className })
   return /* @__PURE__ */ jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-md", children: message }) });
 }
 
-function DataListRoot({ children, columns, className, scrollRef }) {
-  return /* @__PURE__ */ jsx(
+const dataListRootVariants = cva("grid min-w-0 max-w-full content-start", {
+  variants: {
+    variant: {
+      default: "bg-surface2 border border-border1 rounded-xl",
+      striped: cn(
+        "gap-y-px",
+        // The header is sticky, so it must be opaque to occlude rows scrolling
+        // behind it (a translucent overlay would show ghosted content through it).
+        // Rows keep the translucent tints — only the header needs to be solid.
+        "[&_.data-list-top]:mx-0 [&_.data-list-top]:bg-surface4 [&_.data-list-top]:after:hidden",
+        "[&_.data-list-top]:rounded-t-xl [&_.data-list-top]:rounded-b-md",
+        // header column separators: a short, faint vertical line centered in the gap
+        // to the left of every header cell but the first. A `before` pseudo (not a
+        // `border-l` + padding) keeps header text aligned with the row cells below.
+        // The cell's default `overflow-hidden` would clip a gap-positioned pseudo, so
+        // these cells switch to `overflow-visible`; the title text still truncates via
+        // its inner `truncate` span, so nothing else spills.
+        "[&_.data-list-top>*:not(:first-child)]:relative [&_.data-list-top>*:not(:first-child)]:overflow-visible",
+        '[&_.data-list-top>*:not(:first-child)]:before:absolute [&_.data-list-top>*:not(:first-child)]:before:-left-4 [&_.data-list-top>*:not(:first-child)]:before:top-1/2 [&_.data-list-top>*:not(:first-child)]:before:-translate-y-1/2 [&_.data-list-top>*:not(:first-child)]:before:h-4 [&_.data-list-top>*:not(:first-child)]:before:w-px [&_.data-list-top>*:not(:first-child)]:before:bg-border2 [&_.data-list-top>*:not(:first-child)]:before:content-[""]',
+        "[&_.data-list-row]:mx-0 [&_.data-list-row]:my-0 [&_.data-list-row]:rounded-md [&_.data-list-row]:after:hidden",
+        "[&_.data-list-row]:even:bg-surface-overlay-soft",
+        "[&_.data-list-row]:hover:bg-surface-overlay-strong!",
+        "[&_.data-list-row]:focus-visible:bg-surface-overlay-strong!"
+      )
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function DataListRoot({ children, columns, className, variant = "default", scrollRef }) {
+  const isStriped = variant === "striped";
+  const grid = /* @__PURE__ */ jsx(
     "div",
     {
-      ref: scrollRef,
+      ref: isStriped ? void 0 : scrollRef,
       className: cn(
-        "grid min-w-0 max-w-full bg-surface2 border max-h-full border-border1 rounded-xl overflow-auto content-start",
-        className
+        dataListRootVariants({ variant }),
+        // Default is its own scroll container; striped delegates scrolling to the
+        // ScrollArea viewport, so the grid just lays out.
+        !isStriped && "max-h-full overflow-auto",
+        !isStriped && className
       ),
       style: { gridTemplateColumns: columns },
       children
     }
   );
+  if (!isStriped) return grid;
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      orientation: "both",
+      mask: { top: false },
+      viewportRef: scrollRef,
+      className: cn("h-full w-full rounded-t-xl", className),
+      children: grid
+    }
+  );
 }
 
 const DataListRowWrapperContext = createContext(false);
@@ -199,9 +246,32 @@ const dataListRowInteractiveStyles = [
 ];
 const dataListRowStyles = ["mx-1", ...dataListRowInteractiveStyles, ...dataListRowOuterStyles];
 const dataListRowStaticStyles = ["mx-1 grid grid-cols-subgrid gap-8 px-5", ...dataListRowOuterStyles];
+const dataListRowVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      error: "bg-notice-destructive/10! hover:bg-notice-destructive/15!"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 
 const DataListRowButton = forwardRef(
-  ({ children, className, type = "button", flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
+  ({
+    children,
+    className,
+    type = "button",
+    flushLeft,
+    flushRight,
+    colStart,
+    colEnd,
+    featured,
+    variant,
+    style,
+    ...rest
+  }, ref) => {
     const isWrapped = useDataListRowWrapperContext();
     const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
     const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
@@ -215,7 +285,10 @@ const DataListRowButton = forwardRef(
           "text-left",
           !isWrapped && flushLeft && "ml-0!",
           !isWrapped && flushRight && "mr-0!",
-          featured && "bg-surface4",
+          // `!` so the selection fill wins over the striped variant's zebra tint
+          // (a higher-specificity root descendant rule); same color in `default`.
+          featured && "bg-surface4!",
+          dataListRowVariants({ variant }),
           className
         ),
         style: resolvedStyle,
@@ -237,7 +310,8 @@ function DataListRowLink({
   flushRight,
   colStart,
   colEnd,
-  featured
+  featured,
+  variant
 }) {
   const isWrapped = useDataListRowWrapperContext();
   const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
@@ -250,7 +324,10 @@ function DataListRowLink({
         ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
         !isWrapped && flushLeft && "ml-0!",
         !isWrapped && flushRight && "mr-0!",
-        featured && "bg-surface4",
+        // `!` so the selection fill wins over the striped variant's zebra tint
+        // (a higher-specificity root descendant rule); same color in `default`.
+        featured && "bg-surface4!",
+        dataListRowVariants({ variant }),
         className
       ),
       style: resolvedStyle,
@@ -296,16 +373,17 @@ function DataListTop({ children, className, hasLeadingCell }) {
 const DataListTopCell = forwardRef(
   ({ children, className, as, ...rest }, ref) => {
     const Component = as || "span";
+    const isText = typeof children === "string" || typeof children === "number";
     return /* @__PURE__ */ jsx(
       Component,
       {
         ref,
         className: cn(
-          "h-8 min-w-0 max-w-full overflow-hidden py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
+          "h-8 min-w-0 max-w-full overflow-hidden py-1 flex items-center whitespace-nowrap text-neutral2 font-semibold tracking-tight text-ui-sm",
           className
         ),
         ...rest,
-        children
+        children: isText ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }) : children
       }
     );
   }
@@ -385,5 +463,5 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
   )) });
 }
 
-export { AgentIcon as A, DataListSkeleton as D, WorkflowIcon as W, DataListCell as a, DataListMonoCell as b, DataListRoot as c, DataListNextPageLoading as d, DataListTimeCell as e, DataListDateCell as f, DataListNoMatch as g, DataListSpacer as h, DataListRowLink as i, DataListRowButton as j, DataListRowWrapper as k, DataListTopCellSmart as l, DataListTopCellWithTooltip as m, DataListTopCell as n, DataListTop as o, dataListRowStaticStyles as p, DataListTopSelectCell as q, DataListSelectCell as r, DataListIdCell as s, DataListDescriptionCell as t, useDataListRowWrapperContext as u, DataListNameCell as v, DataListTextCell as w };
-//# sourceMappingURL=data-list-skeleton-C9Ncz3jM.js.map
+export { AgentIcon as A, DataListSkeleton as D, WorkflowIcon as W, DataListCell as a, DataListMonoCell as b, DataListRoot as c, DataListNextPageLoading as d, DataListTimeCell as e, DataListDateCell as f, DataListNoMatch as g, DataListSpacer as h, DataListRowLink as i, DataListRowButton as j, DataListRowWrapper as k, DataListTopCellSmart as l, DataListTopCellWithTooltip as m, DataListTopCell as n, DataListTop as o, dataListRowVariants as p, dataListRowStaticStyles as q, DataListTopSelectCell as r, DataListSelectCell as s, DataListIdCell as t, useDataListRowWrapperContext as u, DataListDescriptionCell as v, DataListNameCell as w, DataListTextCell as x };
+//# sourceMappingURL=data-list-skeleton-B3bHGBlU.js.map