@mastra/playground-ui 29.0.0-alpha.10 → 29.0.0-alpha.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @mastra/playground-ui
 
+## 29.0.0-alpha.11
+
+### Minor Changes
+
+- Added a custom date range option to the Metrics page date picker. You can now filter metrics by an arbitrary start and end date and time, matching the Traces page, alongside the existing relative presets (last 24 hours, 3, 7, 14, and 30 days). ([#16832](https://github.com/mastra-ai/mastra/pull/16832))
+
+  The selected range is reflected in the URL so it can be bookmarked or shared:
+
+  ```txt
+  /metrics?period=custom&dateFrom=2026-05-01T00:00:00.000Z&dateTo=2026-05-07T23:59:59.999Z
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`27fd1b7`](https://github.com/mastra-ai/mastra/commit/27fd1b79ac62eb7694f92587eb7d1be05b59be01), [`a702009`](https://github.com/mastra-ai/mastra/commit/a702009d3cfaa745120f501e21c783ed4d6a3072), [`8534d79`](https://github.com/mastra-ai/mastra/commit/8534d791fa1cb70fe1c19e2604c4b63cc10dd051), [`c78f8cd`](https://github.com/mastra-ai/mastra/commit/c78f8cd6222a86e6c60ae5210b6929ad5221b6fb), [`e146aad`](https://github.com/mastra-ai/mastra/commit/e146aadbba66c410ba0e74bac4c50135495cb8dd), [`1a0ec78`](https://github.com/mastra-ai/mastra/commit/1a0ec789a26cae443744e9abbd62ed6ee676af39), [`d52b6fe`](https://github.com/mastra-ai/mastra/commit/d52b6fe1c56853eb38864baae0bbfa75cc739ccb)]:
+  - @mastra/core@1.36.0-alpha.10
+  - @mastra/client-js@1.20.0-alpha.10
+  - @mastra/react@0.4.0-alpha.10
+
 ## 29.0.0-alpha.10
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -16783,18 +16783,70 @@ function MetricsProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(MetricsContext.Provider, { value, children });
 }
 
+const METRICS_PRESETS = [
+  "last-24h",
+  "last-3d",
+  "last-7d",
+  "last-14d",
+  "last-30d",
+  "custom"
+];
+function toPickerPreset(preset) {
+  switch (preset) {
+    case "3d":
+      return "last-3d";
+    case "7d":
+      return "last-7d";
+    case "14d":
+      return "last-14d";
+    case "30d":
+      return "last-30d";
+    case "custom":
+      return "custom";
+    default:
+      return "last-24h";
+  }
+}
+function fromPickerPreset(preset) {
+  switch (preset) {
+    case "last-3d":
+      return "3d";
+    case "last-7d":
+      return "7d";
+    case "last-14d":
+      return "14d";
+    case "last-30d":
+      return "30d";
+    case "custom":
+      return "custom";
+    default:
+      return "24h";
+  }
+}
 function DateRangeSelector() {
-  const { datePreset, setDatePreset } = useMetrics();
+  const { datePreset, setDatePreset, customRange, setCustomRange } = useMetrics();
+  const presetRef = React.useRef(datePreset);
+  presetRef.current = datePreset;
+  const customRangeRef = React.useRef(customRange);
+  customRangeRef.current = customRange;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SelectFieldBlock,
+    DateTimeRangePicker,
     {
-      name: "date-range",
-      labelIsHidden: true,
-      value: datePreset,
-      options: DATE_PRESETS.map((p) => ({ label: p.label, value: p.value })),
-      onValueChange: (value) => {
-        if (isValidPreset(value)) setDatePreset(value);
-      }
+      preset: toPickerPreset(datePreset),
+      onPresetChange: (next) => {
+        const mapped = fromPickerPreset(next);
+        presetRef.current = mapped;
+        setDatePreset(mapped);
+      },
+      dateFrom: customRange?.from,
+      dateTo: customRange?.to,
+      onDateChange: (value, type) => {
+        if (presetRef.current !== "custom") return;
+        const next = { ...customRangeRef.current, [type]: value };
+        customRangeRef.current = next;
+        setCustomRange(next);
+      },
+      presets: METRICS_PRESETS
     }
   );
 }