@mastra/playground-ui 26.0.0-alpha.2 → 26.0.0-alpha.4

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/index.cjs.js +101 -27
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.css +4 -24
  5. package/dist/index.es.js +102 -28
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/src/domains/traces/components/timeline-expand-col.d.ts +7 -1
  8. package/dist/src/domains/traces/components/trace-timeline-span.d.ts +2 -1
  9. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @mastra/playground-ui
2
2
 
3
+ ## 26.0.0-alpha.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Added MCP Apps extension support (SEP-1865). MCPServer now accepts an `appResources` config to register interactive `ui://` HTML resources. MCPClient preserves full tool `_meta` (including `ui.resourceUri`) when converting MCP tools to Mastra tools. Both advertise the `io.modelcontextprotocol/ui` extension capability. ([#16004](https://github.com/mastra-ai/mastra/pull/16004))
8
+
9
+ **Example — MCPServer with app resources:**
10
+
11
+ ```typescript
12
+ const server = new MCPServer({
13
+ name: 'my-server',
14
+ tools: { myTool },
15
+ appResources: {
16
+ dashboard: {
17
+ name: 'Dashboard',
18
+ description: 'Interactive dashboard UI',
19
+ html: '<html>...</html>',
20
+ },
21
+ },
22
+ });
23
+ ```
24
+
25
+ - Updated dependencies [[`7679a63`](https://github.com/mastra-ai/mastra/commit/7679a634eae8e8ca459fd87538fdf72b4389b07f), [`7679a63`](https://github.com/mastra-ai/mastra/commit/7679a634eae8e8ca459fd87538fdf72b4389b07f), [`1d64a76`](https://github.com/mastra-ai/mastra/commit/1d64a765861a0772ea187bab76e5ed37bf82d042), [`7679a63`](https://github.com/mastra-ai/mastra/commit/7679a634eae8e8ca459fd87538fdf72b4389b07f), [`a0d9b6d`](https://github.com/mastra-ai/mastra/commit/a0d9b6d6b810aeaa9e177a0dcc99a4402e609634)]:
26
+ - @mastra/client-js@1.17.0-alpha.4
27
+ - @mastra/core@1.32.0-alpha.4
28
+ - @mastra/react@0.2.34-alpha.4
29
+
30
+ ## 26.0.0-alpha.3
31
+
32
+ ### Patch Changes
33
+
34
+ - Improved trace timeline span controls. Added tooltips with row counts to the expand-children, expand-all-descendants, and expand-at-this-level buttons. The expand-children button now collapses only the direct children rather than the entire subtree, and the descendants column gained a matching collapse-all-descendants action. Root spans show a single Expand all / Collapse all button using outward/inward double-chevrons. ([#16173](https://github.com/mastra-ai/mastra/pull/16173))
35
+
36
+ - Updated dependencies [[`ca28c23`](https://github.com/mastra-ai/mastra/commit/ca28c232a2f18801a6cf20fe053479237b4d4fb0), [`39162cb`](https://github.com/mastra-ai/mastra/commit/39162cb952c0053fdd4ed7217ec7802a2027b19d)]:
37
+ - @mastra/core@1.32.0-alpha.3
38
+ - @mastra/client-js@1.17.0-alpha.3
39
+ - @mastra/react@0.2.34-alpha.3
40
+
3
41
  ## 26.0.0-alpha.2
4
42
 
5
43
  ### Minor Changes
package/dist/index.cjs.js CHANGED
@@ -16155,12 +16155,24 @@ function TimelineExpandCol({
16155
16155
  isSelected,
16156
16156
  isFaded,
16157
16157
  isExpanded,
16158
+ isRootSpan,
16158
16159
  toggleChildren,
16159
16160
  expandAllDescendants,
16161
+ collapseAllDescendants,
16162
+ collapseAll,
16160
16163
  totalDescendants = 0,
16161
16164
  allDescendantsExpanded,
16162
- numOfChildren
16165
+ numOfChildren = 0,
16166
+ toggleSiblings,
16167
+ siblingsAllExpanded,
16168
+ siblingsWithChildrenCount = 0
16163
16169
  }) {
16170
+ const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
16171
+ const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;
16172
+ const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;
16173
+ const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;
16174
+ const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;
16175
+ const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;
16164
16176
  return /* @__PURE__ */ jsxRuntime.jsx(
16165
16177
  "div",
16166
16178
  {
@@ -16168,33 +16180,53 @@ function TimelineExpandCol({
16168
16180
  "opacity-30 [&:hover]:opacity-60": isFaded,
16169
16181
  "bg-surface4": isSelected
16170
16182
  }),
16171
- children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
16172
- /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
16173
- allDescendantsExpanded ? totalDescendants : numOfChildren,
16174
- " ",
16175
- isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
16176
- ] }),
16177
- totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
16178
- totalDescendants,
16179
- " ",
16180
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
16183
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1", children: [
16184
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: showToggleChildren && /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { onClick: () => toggleChildren?.(), tooltip: toggleTooltip, children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) }) }),
16185
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: showDescendantsButton && /* @__PURE__ */ jsxRuntime.jsx(
16186
+ ExpandButton,
16187
+ {
16188
+ onClick: () => allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.(),
16189
+ tooltip: allDescendantsExpanded ? `Collapse all descendants (${totalDescendants})` : `Expand all descendants (${totalDescendants})`,
16190
+ children: allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
16191
+ }
16192
+ ) }),
16193
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
16194
+ showToggleSiblings && /* @__PURE__ */ jsxRuntime.jsx(
16195
+ ExpandButton,
16196
+ {
16197
+ onClick: () => toggleSiblings?.(),
16198
+ tooltip: siblingsAllExpanded ? "Collapse at this level" : "Expand at this level",
16199
+ children: siblingsAllExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FoldVerticalIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UnfoldVerticalIcon, {})
16200
+ }
16201
+ ),
16202
+ showRootToggleAll && /* @__PURE__ */ jsxRuntime.jsx(
16203
+ ExpandButton,
16204
+ {
16205
+ onClick: () => fullyExpanded ? collapseAll?.() : expandAllDescendants?.(),
16206
+ tooltip: fullyExpanded ? "Collapse all" : "Expand all",
16207
+ children: fullyExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {})
16208
+ }
16209
+ )
16181
16210
  ] })
16182
- ] }) : null
16211
+ ] })
16183
16212
  }
16184
16213
  );
16185
16214
  }
16186
- function ExpandButton({ onClick, children, className }) {
16187
- return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
16188
- "div",
16189
- {
16190
- className: cn(
16191
- "flex items-center gap-[0.1rem] text-ui-xs text-neutral5 border border-border1 pl-1.5 pr-0.5 rounded-md transition-all",
16192
- "hover:text-yellow-500",
16193
- "[&>svg]:shrink-0 [&>svg]:opacity-80 [&>svg]:w-[0.85rem] [&>svg]:h-[0.85rem] [&>svg]:transition-all"
16194
- ),
16195
- children
16196
- }
16197
- ) });
16215
+ function ExpandButton({ onClick, children, className, tooltip }) {
16216
+ return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
16217
+ /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full shrink-0 cursor-pointer", className), "aria-label": tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
16218
+ "div",
16219
+ {
16220
+ className: cn(
16221
+ "flex items-center gap-[0.1rem] rounded-md transition-all p-1",
16222
+ "hover:bg-surface5",
16223
+ "[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all"
16224
+ ),
16225
+ children
16226
+ }
16227
+ ) }) }),
16228
+ tooltip && /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
16229
+ ] });
16198
16230
  }
16199
16231
 
16200
16232
  function TimelineStructureSign({ isLastChild }) {
@@ -16401,6 +16433,7 @@ function getAllSpanIds(spans) {
16401
16433
 
16402
16434
  function TraceTimelineSpan({
16403
16435
  span,
16436
+ siblings,
16404
16437
  depth = 0,
16405
16438
  onSpanClick,
16406
16439
  selectedSpanId,
@@ -16436,8 +16469,7 @@ function TraceTimelineSpan({
16436
16469
  if (!setExpandedSpanIds) return;
16437
16470
  setExpandedSpanIds((prev) => {
16438
16471
  if (!prev) return prev;
16439
- const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
16440
- return isExpanded ? prev.filter((id) => !idsToRemove.has(id)) : [...prev, span.id];
16472
+ return isExpanded ? prev.filter((id) => id !== span.id) : [...prev, span.id];
16441
16473
  });
16442
16474
  };
16443
16475
  const expandAllDescendants = () => {
@@ -16447,7 +16479,41 @@ function TraceTimelineSpan({
16447
16479
  return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
16448
16480
  });
16449
16481
  };
16482
+ const collapseAllDescendants = () => {
16483
+ if (!setExpandedSpanIds) return;
16484
+ setExpandedSpanIds((prev) => {
16485
+ if (!prev) return prev;
16486
+ const idsToRemove = new Set(allDescendantIds);
16487
+ return prev.filter((id) => !idsToRemove.has(id));
16488
+ });
16489
+ };
16490
+ const collapseAll = () => {
16491
+ if (!setExpandedSpanIds) return;
16492
+ setExpandedSpanIds((prev) => {
16493
+ if (!prev) return prev;
16494
+ const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
16495
+ return prev.filter((id) => !idsToRemove.has(id));
16496
+ });
16497
+ };
16450
16498
  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
16499
+ const siblingsWithChildren = (siblings ?? []).filter((s) => s.spans && s.spans.length > 0);
16500
+ const siblingsWithChildrenCount = siblingsWithChildren.length;
16501
+ const siblingsAllExpanded = siblingsWithChildrenCount > 0 && siblingsWithChildren.every((s) => expandedSpanIds?.includes(s.id));
16502
+ const toggleSiblings = () => {
16503
+ if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;
16504
+ setExpandedSpanIds((prev) => {
16505
+ if (!prev) return prev;
16506
+ if (siblingsAllExpanded) {
16507
+ const idsToRemove = /* @__PURE__ */ new Set();
16508
+ siblingsWithChildren.forEach((s) => {
16509
+ idsToRemove.add(s.id);
16510
+ getSpanDescendantIds(s).forEach((id) => idsToRemove.add(id));
16511
+ });
16512
+ return prev.filter((id) => !idsToRemove.has(id));
16513
+ }
16514
+ return Array.from(/* @__PURE__ */ new Set([...prev, ...siblingsWithChildren.map((s) => s.id)]));
16515
+ });
16516
+ };
16451
16517
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
16452
16518
  /* @__PURE__ */ jsxRuntime.jsx(
16453
16519
  TimelineNameCol,
@@ -16470,11 +16536,17 @@ function TraceTimelineSpan({
16470
16536
  isSelected: selectedSpanId === span.id,
16471
16537
  isFaded,
16472
16538
  isExpanded,
16539
+ isRootSpan,
16473
16540
  toggleChildren,
16474
16541
  expandAllDescendants,
16542
+ collapseAllDescendants,
16543
+ collapseAll,
16475
16544
  totalDescendants,
16476
16545
  allDescendantsExpanded,
16477
- numOfChildren
16546
+ numOfChildren,
16547
+ toggleSiblings,
16548
+ siblingsAllExpanded,
16549
+ siblingsWithChildrenCount
16478
16550
  }
16479
16551
  ),
16480
16552
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -16495,6 +16567,7 @@ function TraceTimelineSpan({
16495
16567
  TraceTimelineSpan,
16496
16568
  {
16497
16569
  span: childSpan,
16570
+ siblings: array,
16498
16571
  depth: depth + 1,
16499
16572
  onSpanClick,
16500
16573
  selectedSpanId,
@@ -16575,6 +16648,7 @@ function TraceTimeline({
16575
16648
  TraceTimelineSpan,
16576
16649
  {
16577
16650
  span,
16651
+ siblings: hierarchicalSpans,
16578
16652
  onSpanClick,
16579
16653
  selectedSpanId,
16580
16654
  overallLatency,