@mastra/playground-ui 49.0.0-alpha.5 → 49.0.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +119 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,124 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 49.0.1-alpha.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`587f6ef`](https://github.com/mastra-ai/mastra/commit/587f6efcfc25880b93760a8607d1cd381ec612fe)]:
|
|
8
|
+
- @mastra/core@1.59.1-alpha.0
|
|
9
|
+
- @mastra/client-js@1.40.1-alpha.0
|
|
10
|
+
- @mastra/react@1.4.4-alpha.0
|
|
11
|
+
|
|
12
|
+
## 49.0.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- Added animated Sankey layout transitions for column changes. Pass a changing perspective key to opt in: ([#20768](https://github.com/mastra-ai/mastra/pull/20768))
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
<SankeyChart geometryTransitionKey={columns.map(column => column.id).join(':')} />
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
- Made the task list collapsible and moved its scrolling to the design system scroll area. ([#21337](https://github.com/mastra-ai/mastra/pull/21337))
|
|
23
|
+
|
|
24
|
+
Clicking the task list header now collapses it. The collapsed row keeps the completion count and shows the task currently in progress — or the next pending one — with its status icon and color, so the panel can be minimized without losing track of where the agent is. Long lists scroll inside `ScrollArea` (overlay scrollbar, edge fades) instead of a raw `overflow-y` container.
|
|
25
|
+
|
|
26
|
+
Use `defaultOpen` to render it collapsed:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
<TaskList tasks={tasks} defaultOpen={false} />
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
- Streamed markdown now renders block by block. A growing reply re-parses only the block still being written instead of the whole message on every chunk, so a long reply no longer costs more per chunk as it gets longer, and a reply that finishes streaming keeps every element it already put on screen instead of remounting. ([#21473](https://github.com/mastra-ai/mastra/pull/21473))
|
|
33
|
+
|
|
34
|
+
Half-written markdown also renders as what it is about to become: `**bold` reads as bold while its closing marker is still in flight, and a link shows its text until the URL lands, instead of flashing raw syntax on screen.
|
|
35
|
+
|
|
36
|
+
One caveat: splitting a text into blocks is deliberately conservative rather than a second full parse. Anything it cannot decide — an unclosed fence, an indented continuation, a link reference or footnote definition — is kept whole, so those replies render exactly as before and simply do not get the speedup.
|
|
37
|
+
|
|
38
|
+
- `CopyButton` takes a `showToast` option, so a button whose icon already flips to a checkmark on success can skip the toast on top of it. ([#21350](https://github.com/mastra-ai/mastra/pull/21350))
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<CopyButton content={message} showToast={false} />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
- Added two status-strip pieces so any app showing a chat runtime — Studio, Factory — reads the same way. `TokenBudget` draws a token budget as a ring with its reading beside it, and `TokenBudgetDetail` is that budget in full for a popover or panel: ([#21366](https://github.com/mastra-ai/mastra/pull/21366))
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { TokenBudget, TokenBudgetDetail } from '@mastra/playground-ui/components/TokenBudget';
|
|
48
|
+
|
|
49
|
+
<div className="flex items-center gap-1.5">
|
|
50
|
+
<TokenBudget label="Message window" tokens={14_900} threshold={30_000} working={isObserving} />
|
|
51
|
+
<TokenBudget label="Observations" tokens={5_200} threshold={8_000} tone="memory" />
|
|
52
|
+
</div>;
|
|
53
|
+
|
|
54
|
+
<TokenBudgetDetail
|
|
55
|
+
description="Read into memory once full"
|
|
56
|
+
icon={<MessageSquare />}
|
|
57
|
+
label="Messages"
|
|
58
|
+
projected={6_000}
|
|
59
|
+
tokens={14_900}
|
|
60
|
+
threshold={30_000}
|
|
61
|
+
/>;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
The two are separate so the app decides how a budget opens — one trigger per budget, or one control for a whole group. `TokenBudgetDetail` hatches the slice a pending pass will free (`projected`) at the end of its bar, so the number and where it goes read together, and takes an `icon` it tints with the budget's own color so a detail row is recognizable as the ring it came from.
|
|
65
|
+
|
|
66
|
+
`working` runs a highlight around the ring, so a pass happening in the background is visible without a word for it. `tone` picks the budget's identity color (`messages`, `memory`, `warning`), which the memory panel's own progress bars now share instead of repeating the palette classes.
|
|
67
|
+
|
|
68
|
+
Fixed those same memory panel bars drawing a budget as completely full when its threshold was zero.
|
|
69
|
+
|
|
70
|
+
- Improved process step indicators with theme-aware status colors and a plain embedded style. ([#21382](https://github.com/mastra-ai/mastra/pull/21382))
|
|
71
|
+
|
|
72
|
+
**Step labels now come from `title`.** `ProcessStepListItem` used to build its heading from the step id and ignore the `title` you passed, so display copy had to live in kebab-case ids. Give the step the label you want on screen:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
const step = { id: 'clone-repo', title: 'Cloning repository', status: 'running', description: '', isActive: true };
|
|
76
|
+
|
|
77
|
+
<ProcessStepListItem step={step} isActive position={1} />;
|
|
78
|
+
// before: "Clone repo"
|
|
79
|
+
// after: "Cloning repository"
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The `stepId` prop is now optional and ignored; drop it from your call sites.
|
|
83
|
+
|
|
84
|
+
**Added a `plain` variant to `ProcessStepListItem`** — for step lists that already sit inside a panel, where the boxed active card is one frame too many:
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<ProcessStepListItem step={step} isActive={step.status === 'running'} position={1} variant="plain" />
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
- Added a `streaming` prop to `MarkdownRenderer`. A reply marked as still being written fades each word in as it arrives, instead of snapping whole chunks of text into place. ([#21417](https://github.com/mastra-ai/mastra/pull/21417))
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
<MarkdownRenderer streaming={part.state === 'streaming'}>{part.text}</MarkdownRenderer>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
The fade is CSS on words as they land, so the text already on screen stays put while the reply grows. A word fades in once it is whole rather than one character at a time — the word still being typed is held back until its boundary arrives, so the visible text trails the stream by at most one word. One caveat: when a growing block changes shape, a paragraph turning into a list item as the next character lands, that block fades again.
|
|
97
|
+
|
|
98
|
+
Leave the prop off — the default — for text that is already settled: it renders as plain prose, with no extra markup. The animation is disabled under `prefers-reduced-motion`.
|
|
99
|
+
|
|
100
|
+
Markdown no longer sets `text-wrap: pretty`. It re-broke the last lines of a block to avoid orphans, which reran on every chunk of a streaming reply and jumped words that were already on screen onto another line.
|
|
101
|
+
|
|
102
|
+
### Patch Changes
|
|
103
|
+
|
|
104
|
+
- Fixed code blocks flickering between colored and plain text while an agent streams a fenced snippet. The part already highlighted now keeps its colors, and only the characters that just landed show uncolored until highlighting catches up. ([#21415](https://github.com/mastra-ai/mastra/pull/21415))
|
|
105
|
+
|
|
106
|
+
- Improved chat responsiveness on long conversations. `MarkdownRenderer` is memoized, so a streaming reply no longer re-parses the markdown of every message already on screen on each chunk it receives — only the message actually being written is re-parsed. ([#21416](https://github.com/mastra-ai/mastra/pull/21416))
|
|
107
|
+
|
|
108
|
+
- Flattened the step markers in the `plain` variant of `ProcessStepListItem`. A completed step now shows a green check on its own instead of a filled green disc with a glow behind it, and the pending, running and completed markers finally share the same diameter — the dashed pending circle used to be 28px next to an 11px spinner. ([#21414](https://github.com/mastra-ai/mastra/pull/21414))
|
|
109
|
+
|
|
110
|
+
- Reworked the markdown renderer's typography. Headings, lists, blockquotes, tables and horizontal rules now follow one consistent rhythm, list markers and task-list checkboxes render as expected, and long tables scroll instead of stretching their container. ([#21355](https://github.com/mastra-ai/mastra/pull/21355))
|
|
111
|
+
|
|
112
|
+
Fenced code blocks now get syntax highlighting, a copy button and a frame of their own, and yaml, diff, css, html, xml and sql joined the highlighted languages, so fences in those languages are no longer plain text.
|
|
113
|
+
|
|
114
|
+
- Fixed the composer edge glow so it follows the cursor only when the cursor is actually there. Focusing the composer used to light the moving arc as well, which meant the coloured segment kept sliding around the border while you typed or moved the mouse anywhere on the page. Focus now just brightens the border, and the arc lights on hover. ([#21320](https://github.com/mastra-ai/mastra/pull/21320))
|
|
115
|
+
|
|
116
|
+
- Updated dependencies [[`088e41e`](https://github.com/mastra-ai/mastra/commit/088e41e434ed05f2c674b254f1034ec46a57a7be), [`be31796`](https://github.com/mastra-ai/mastra/commit/be3179624ad5f77cff5fa342cd08046bf7605283), [`aa3e7be`](https://github.com/mastra-ai/mastra/commit/aa3e7be30f8addb0278ea74429f4df054517a287), [`d118873`](https://github.com/mastra-ai/mastra/commit/d118873cfd5074b1f814a1c169a97ca7a3a29174), [`b2f0013`](https://github.com/mastra-ai/mastra/commit/b2f0013375588d40c03c13e843b99c0ff8872ca5), [`3cc1876`](https://github.com/mastra-ai/mastra/commit/3cc18767fb47ce9830ac4623a2304e2b09591605), [`3b541ae`](https://github.com/mastra-ai/mastra/commit/3b541ae5d410c52b80a7e381d84d021cddb9a449), [`79dd7c2`](https://github.com/mastra-ai/mastra/commit/79dd7c261ee6be1fafedd4651959394db21d2cba), [`3cc1876`](https://github.com/mastra-ai/mastra/commit/3cc18767fb47ce9830ac4623a2304e2b09591605), [`90822db`](https://github.com/mastra-ai/mastra/commit/90822dba08fb2169c518e4a6d7f127c098eb46b8), [`898bba4`](https://github.com/mastra-ai/mastra/commit/898bba46d4806dd255a44e5dc3a3d5827eaefdfe), [`b9a28ec`](https://github.com/mastra-ai/mastra/commit/b9a28ecf7acdc0cb7a543d5b660f9fbee301df9a), [`4539d73`](https://github.com/mastra-ai/mastra/commit/4539d737bea0e885dfc1e376def99bb7c35a9fbc), [`f9aab1c`](https://github.com/mastra-ai/mastra/commit/f9aab1cfc3fda03238a7fd7bd8b794e07497878c), [`3700208`](https://github.com/mastra-ai/mastra/commit/37002080c7838267803a7e579a7d58b908d62f36), [`e31421b`](https://github.com/mastra-ai/mastra/commit/e31421bc9c11c03c6e74f447ecb5820000e2b9d7), [`8b7131e`](https://github.com/mastra-ai/mastra/commit/8b7131eb0407f58f5205e68fb27b81f026488f28), [`161258b`](https://github.com/mastra-ai/mastra/commit/161258b3473a6d0fce00a43cab59d119a49a232f), [`f9aab1c`](https://github.com/mastra-ai/mastra/commit/f9aab1cfc3fda03238a7fd7bd8b794e07497878c), [`aece0e7`](https://github.com/mastra-ai/mastra/commit/aece0e7cb124ae1eb1230689b887f5554b9a0bf0), [`f82f22f`](https://github.com/mastra-ai/mastra/commit/f82f22f56c58ab90e8a7501aaa5039a4e13cfe8b), [`ae79e34`](https://github.com/mastra-ai/mastra/commit/ae79e34c0bd8674fc24c7524217bfc4a051c6136), [`59d8898`](https://github.com/mastra-ai/mastra/commit/59d8898c8cb48b342fe5bcb5eee803cc8cc95060), [`a6c4399`](https://github.com/mastra-ai/mastra/commit/a6c4399763590b3dae21a2c81826e89a3b1deee4), [`a40f915`](https://github.com/mastra-ai/mastra/commit/a40f9157690d89ef13ce825cc88e30be581de5d4), [`8ea8038`](https://github.com/mastra-ai/mastra/commit/8ea80386fde53d26e2c0b2060c53bc9bd9be10f3), [`be31796`](https://github.com/mastra-ai/mastra/commit/be3179624ad5f77cff5fa342cd08046bf7605283), [`79c4f82`](https://github.com/mastra-ai/mastra/commit/79c4f8295f568752eeadf8a9b50010a7d9ec06ae), [`7dafa4f`](https://github.com/mastra-ai/mastra/commit/7dafa4f670fb16ec8ff07349645a00ca12bc5794)]:
|
|
117
|
+
- @mastra/core@1.59.0
|
|
118
|
+
- @mastra/client-js@1.40.0
|
|
119
|
+
- @mastra/react@1.4.3
|
|
120
|
+
- @mastra/memory@1.26.2
|
|
121
|
+
|
|
3
122
|
## 49.0.0-alpha.5
|
|
4
123
|
|
|
5
124
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "49.0.
|
|
4
|
+
"version": "49.0.1-alpha.0",
|
|
5
5
|
"description": "Mastra Playground components",
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.css"
|
|
@@ -151,8 +151,8 @@
|
|
|
151
151
|
"react": ">=19.0.0",
|
|
152
152
|
"react-dom": ">=19.0.0",
|
|
153
153
|
"tailwindcss": "^4.0.0",
|
|
154
|
-
"@mastra/client-js": "^1.40.
|
|
155
|
-
"@mastra/react": "1.4.
|
|
154
|
+
"@mastra/client-js": "^1.40.1-alpha.0",
|
|
155
|
+
"@mastra/react": "1.4.4-alpha.0"
|
|
156
156
|
},
|
|
157
157
|
"devDependencies": {
|
|
158
158
|
"@storybook/addon-a11y": "^10.4.1",
|
|
@@ -190,11 +190,11 @@
|
|
|
190
190
|
"vite-plugin-dts": "^4.5.4",
|
|
191
191
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
192
192
|
"vitest": "4.1.10",
|
|
193
|
-
"@
|
|
194
|
-
"@mastra/core": "1.59.
|
|
195
|
-
"@
|
|
196
|
-
"@mastra/memory": "1.26.2
|
|
197
|
-
"@mastra/
|
|
193
|
+
"@mastra/client-js": "^1.40.1-alpha.0",
|
|
194
|
+
"@mastra/core": "1.59.1-alpha.0",
|
|
195
|
+
"@internal/lint": "0.0.123",
|
|
196
|
+
"@mastra/memory": "1.26.2",
|
|
197
|
+
"@mastra/react": "1.4.4-alpha.0"
|
|
198
198
|
},
|
|
199
199
|
"homepage": "https://mastra.ai",
|
|
200
200
|
"repository": {
|