@mastra/playground-ui 26.1.0-alpha.0 → 26.1.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @mastra/playground-ui
 
+## 26.1.0-alpha.2
+
+### Patch Changes
+
+- Updated dependencies [[`d1fdbd0`](https://github.com/mastra-ai/mastra/commit/d1fdbd012add5623cb7e6b7f882b605ab358bbb4), [`d91ebe2`](https://github.com/mastra-ai/mastra/commit/d91ebe28ee065d8f2ed6df741c3c07f58d359529), [`e41e7c8`](https://github.com/mastra-ai/mastra/commit/e41e7c88285feefe5cddea22105b40092bcf217f)]:
+  - @mastra/core@1.33.0-alpha.2
+  - @mastra/client-js@1.17.2-alpha.2
+  - @mastra/react@0.2.36-alpha.2
+
+## 26.1.0-alpha.1
+
+### Patch Changes
+
+- Improved Studio's Traces page to scale smoothly to many traces. The list now renders only the visible window, so scrolling stays responsive and memory usage stays bounded regardless of how many traces are loaded. ([#16262](https://github.com/mastra-ai/mastra/pull/16262))
+
+- Improved Studio's Logs page to scale smoothly to many log records. The list now renders only the visible window, so scrolling stays responsive and memory usage stays bounded regardless of how many logs are loaded. ([#16263](https://github.com/mastra-ai/mastra/pull/16263))
+
+- Updated dependencies [[`dccd8f1`](https://github.com/mastra-ai/mastra/commit/dccd8f1f8b8f1ad203b77556207e5529567c616d)]:
+  - @mastra/core@1.33.0-alpha.1
+  - @mastra/client-js@1.17.2-alpha.1
+  - @mastra/react@0.2.36-alpha.1
+
 ## 26.1.0-alpha.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -52,6 +52,7 @@ const reactResizablePanels = require('react-resizable-panels');
 const zustand = require('zustand');
 const middleware = require('zustand/middleware');
 const reactQuery = require('@tanstack/react-query');
+const reactVirtual = require('@tanstack/react-virtual');
 const observability = require('@mastra/core/observability');
 
 function _interopNamespaceDefault(e) {
@@ -12502,10 +12503,11 @@ function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
   ] });
 }
 
-function DataListRoot({ children, columns, className }) {
+function DataListRoot({ children, columns, className, scrollRef }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: scrollRef,
       className: cn(
         "grid bg-surface2 border max-h-full border-border1 rounded-xl overflow-y-auto content-start",
         className
@@ -12526,32 +12528,46 @@ const dataListRowStyles = [
   "transition-colors duration-200 rounded-lg"
 ];
 
-function DataListRow({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(...dataListRowStyles, className), children });
-}
+const DataListRow = React.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(...dataListRowStyles, className), ...rest, children });
+});
+DataListRow.displayName = "DataListRow";
 
-function DataListRowButton({ children, onClick, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: cn(...dataListRowStyles, "text-left", className), children });
-}
+const DataListRowButton = React.forwardRef(
+  ({ children, className, type = "button", ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type, className: cn(...dataListRowStyles, "text-left", className), ...rest, children });
+  }
+);
+DataListRowButton.displayName = "DataListRowButton";
 
 function DataListRowLink({ children, to, className, LinkComponent: Link }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Link, { href: to, className: cn(...dataListRowStyles, className), children });
 }
 
-function DataListSubheader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "data-list-subheader relative isolate col-span-full px-4 py-3 border-none text-ui-md text-neutral4 font-medium mx-1",
-        "before:absolute before:inset-x-0 before:inset-y-1 before:bg-surface4 before:rounded-md before:-z-1",
-        className
-      ),
-      children
-    }
-  );
+function DataListSpacer({ height }) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
 }
 
+const DataListSubheader = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "data-list-subheader relative isolate col-span-full px-4 py-3 border-none text-ui-md text-neutral4 font-medium mx-1",
+          "before:absolute before:inset-x-0 before:inset-y-1 before:bg-surface4 before:rounded-md before:-z-1",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListSubheader.displayName = "DataListSubheader";
+
 function DataListSubHeading({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-sm text-neutral2 font-normal", className), children });
 }
@@ -12636,6 +12652,7 @@ const DataList = Object.assign(DataListRoot, {
   NoMatch: DataListNoMatch,
   Subheader: DataListSubheader,
   SubHeading: DataListSubHeading,
+  Spacer: DataListSpacer,
   NextPageLoading: DataListNextPageLoading,
   Pagination: DataListPagination
 });
@@ -12776,6 +12793,7 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
   NoMatch: DataListNoMatch,
   Subheader: DataListSubheader,
   SubHeading: DataListSubHeading,
+  Spacer: DataListSpacer,
   IdCell: TracesDataListIdCell,
   DateCell: TracesDataListDateCell,
   TimeCell: TracesDataListTimeCell,
@@ -13076,6 +13094,7 @@ const LogsDataList = Object.assign(DataListRoot, {
   Row: DataListRow,
   RowButton: DataListRowButton,
   RowLink: DataListRowLink,
+  Spacer: DataListSpacer,
   NoMatch: DataListNoMatch,
   DateCell: LogsDataListDateCell,
   TimeCell: LogsDataListTimeCell,
@@ -17933,6 +17952,8 @@ function groupTracesByThread(traces) {
 }
 
 const COLUMNS$1 = "auto auto auto auto minmax(5rem,1fr) auto auto";
+const ROW_HEIGHT$1 = 36;
+const OVERSCAN$1 = 8;
 function TracesListView({
   traces,
   isLoading,
@@ -17945,32 +17966,73 @@ function TracesListView({
   groupByThread,
   threadTitles
 }) {
+  const scrollRef = React.useRef(null);
+  const items = React.useMemo(() => {
+    if (traces.length === 0) return [];
+    if (!groupByThread) {
+      return traces.map((trace) => ({ kind: "row", key: trace.traceId, trace }));
+    }
+    const { groups, ungrouped } = groupTracesByThread(traces);
+    const result = [];
+    for (const group of groups) {
+      result.push({
+        kind: "subheader",
+        key: `header-${group.threadId}`,
+        node: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: "Thread" }),
+          threadTitles?.[group.threadId] && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+            "'",
+            threadTitles[group.threadId],
+            "'"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+            "# ",
+            group.threadId
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+            "(",
+            group.traces.length,
+            ")"
+          ] })
+        ] })
+      });
+      for (const trace of group.traces) {
+        result.push({ kind: "row", key: trace.traceId, trace });
+      }
+    }
+    if (ungrouped.length > 0) {
+      result.push({
+        kind: "subheader",
+        key: "header-ungrouped",
+        node: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2 uppercase", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No thread" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+            "(",
+            ungrouped.length,
+            ")"
+          ] })
+        ] })
+      });
+      for (const trace of ungrouped) {
+        result.push({ kind: "row", key: trace.traceId, trace });
+      }
+    }
+    return result;
+  }, [traces, groupByThread, threadTitles]);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT$1,
+    overscan: OVERSCAN$1
+  });
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(DataListSkeleton, { columns: COLUMNS$1 });
   }
-  const renderRows = (rows) => rows.map((trace) => {
-    const isFeatured = trace.traceId === featuredTraceId;
-    const displayDate = trace.startedAt ?? trace.createdAt;
-    const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      TracesDataList.RowButton,
-      {
-        onClick: () => onTraceClick(trace),
-        className: cn(isFeatured && "bg-surface4"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.IdCell, { traceId: trace.traceId }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.NameCell, { name: trace.name }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
-        ]
-      },
-      trace.traceId
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList, { columns: COLUMNS$1, className: "min-w-0", children: [
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const paddingTop = virtualItems[0]?.start ?? 0;
+  const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList, { columns: COLUMNS$1, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.Top, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "ID" }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Date" }),
@@ -17980,55 +18042,53 @@ function TracesListView({
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Entity" }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Status" })
     ] }),
-    traces.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       TracesDataList.NoMatch,
       {
         message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
       }
-    ) : groupByThread ? (() => {
-      const { groups, ungrouped } = groupTracesByThread(traces);
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: "Thread" }),
-            threadTitles?.[group.threadId] && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-              "'",
-              threadTitles[group.threadId],
-              "'"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-              "# ",
-              group.threadId
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-              "(",
-              group.traces.length,
-              ")"
-            ] })
-          ] }) }),
-          renderRows(group.traces)
-        ] }, group.threadId)),
-        ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2 uppercase", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No thread" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-              "(",
-              ungrouped.length,
-              ")"
-            ] })
-          ] }) }),
-          renderRows(ungrouped)
-        ] })
-      ] });
-    })() : renderRows(traces),
-    traces.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      TracesDataList.NextPageLoading,
-      {
-        isLoading: isFetchingNextPage,
-        hasMore: hasNextPage,
-        setEndOfListElement
-      }
-    )
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Spacer, { height: paddingTop }),
+      virtualItems.map((vi) => {
+        const item = items[vi.index];
+        if (!item) return null;
+        if (item.kind === "subheader") {
+          return /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { ref: virtualizer.measureElement, "data-index": vi.index, children: item.node }, item.key);
+        }
+        const trace = item.trace;
+        const isFeatured = trace.traceId === featuredTraceId;
+        const displayDate = trace.startedAt ?? trace.createdAt;
+        const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TracesDataList.RowButton,
+          {
+            ref: virtualizer.measureElement,
+            "data-index": vi.index,
+            onClick: () => onTraceClick(trace),
+            className: cn(isFeatured && "bg-surface4"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.IdCell, { traceId: trace.traceId }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.NameCell, { name: trace.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
+              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
+            ]
+          },
+          trace.traceId
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Spacer, { height: paddingBottom }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TracesDataList.NextPageLoading,
+        {
+          isLoading: isFetchingNextPage,
+          hasMore: hasNextPage,
+          setEndOfListElement
+        }
+      )
+    ] })
   ] });
 }
 
@@ -19049,6 +19109,8 @@ function LogsLayout({ listSlot, logPanelSlot, tracePanelSlot, spanPanelSlot, log
 }
 
 const COLUMNS = "auto auto auto auto minmax(5rem,1fr) minmax(5rem,1fr)";
+const ROW_HEIGHT = 36;
+const OVERSCAN = 8;
 function LogsListView({
   logs,
   isLoading,
@@ -19059,10 +19121,21 @@ function LogsListView({
   featuredLogId,
   onLogClick
 }) {
+  const scrollRef = React.useRef(null);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: logs.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN
+  });
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(DataListSkeleton, { columns: COLUMNS });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList, { columns: COLUMNS, className: "min-w-0", children: [
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const paddingTop = virtualItems[0]?.start ?? 0;
+  const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList, { columns: COLUMNS, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(LogsDataList.Top, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Time" }),
@@ -19071,27 +19144,35 @@ function LogsListView({
       /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Message" }),
       /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TopCell, { children: "Data" })
     ] }),
-    logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.NoMatch, { message: "No logs match your search" }) : logs.map((log) => {
-      const id = logIdMap.get(log);
-      if (!id) return null;
-      const isFeatured = id === featuredLogId;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        LogsDataList.RowButton,
-        {
-          onClick: () => onLogClick(log),
-          className: cn(isFeatured && "bg-surface4"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.LevelCell, { level: log.level }),
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.EntityCell, { entityType: log.entityType, entityName: log.entityName }),
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.MessageCell, { message: log.message }),
-            /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DataCell, { data: log.data })
-          ]
-        },
-        id
-      );
-    }),
+    logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.NoMatch, { message: "No logs match your search" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.Spacer, { height: paddingTop }),
+      virtualItems.map((vi) => {
+        const log = logs[vi.index];
+        if (!log) return null;
+        const id = logIdMap.get(log);
+        if (!id) return null;
+        const isFeatured = id === featuredLogId;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          LogsDataList.RowButton,
+          {
+            ref: virtualizer.measureElement,
+            "data-index": vi.index,
+            onClick: () => onLogClick(log),
+            className: cn(isFeatured && "bg-surface4"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.LevelCell, { level: log.level }),
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.EntityCell, { entityType: log.entityType, entityName: log.entityName }),
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.MessageCell, { message: log.message }),
+              /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DataCell, { data: log.data })
+            ]
+          },
+          id
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.Spacer, { height: paddingBottom })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       LogsDataList.NextPageLoading,
       {