@agent-native/core 0.98.2 → 0.98.3

package/corpus/templates/analytics/app/components/layout/command-palette-search.ts

@@ -26,3 +26,96 @@ export function commandPaletteKeywords(
 
   return Array.from(variants);
 }
+
+function normalizeSearchText(value: string): string {
+  return value
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, " ")
+    .trim();
+}
+
+function fuzzySubsequenceScore(candidate: string, query: string): number {
+  const compactCandidate = candidate.replace(/\s/g, "");
+  const compactQuery = query.replace(/\s/g, "");
+  let queryIndex = 0;
+
+  for (const character of compactCandidate) {
+    if (character === compactQuery[queryIndex]) queryIndex += 1;
+    if (queryIndex === compactQuery.length) {
+      return 0.2 * (compactQuery.length / compactCandidate.length);
+    }
+  }
+
+  return 0;
+}
+
+export function commandPaletteFilter(
+  value: string,
+  search: string,
+  keywords: string[] = [],
+): number {
+  const query = normalizeSearchText(search);
+  if (!query) return 1;
+
+  const queryWords = query.split(" ");
+  let bestScore = 0;
+
+  for (const rawCandidate of [...keywords, value]) {
+    const candidate = normalizeSearchText(rawCandidate);
+    if (!candidate) continue;
+
+    const words = candidate.split(" ");
+    let score = 0;
+
+    if (candidate === query) score = 1;
+    else if (candidate.startsWith(query)) score = 0.96;
+    else if (words.includes(query)) score = 0.94;
+    else if (words.some((word) => word.startsWith(query))) score = 0.9;
+    else if (candidate.includes(query)) score = 0.8;
+    else if (
+      queryWords.every((queryWord) =>
+        words.some((word) => word.startsWith(queryWord)),
+      )
+    ) {
+      score = 0.72;
+    } else {
+      score = fuzzySubsequenceScore(candidate, query);
+    }
+
+    bestScore = Math.max(bestScore, score);
+  }
+
+  return bestScore;
+}
+
+export function rankCommandPaletteEntries<T>(
+  entries: T[],
+  search: string,
+  getSearchData: (entry: T) => { value: string; keywords?: string[] },
+): Array<{ entry: T; score: number }> {
+  return entries
+    .map((entry, index) => {
+      const { value, keywords } = getSearchData(entry);
+      return {
+        entry,
+        index,
+        score: commandPaletteFilter(value, search, keywords),
+      };
+    })
+    .filter(({ score }) => score > 0)
+    .sort((a, b) => b.score - a.score || a.index - b.index)
+    .map(({ entry, score }) => ({ entry, score }));
+}
+
+export function uniqueCommandItems<T extends { id: string; name: string }>(
+  items: T[],
+): T[] {
+  const seenIds = new Set<string>();
+  return items.filter((item) => {
+    if (seenIds.has(item.id)) return false;
+    seenIds.add(item.id);
+    return true;
+  });
+}

package/corpus/templates/analytics/app/hooks/use-replay-storage-status.ts

@@ -46,11 +46,12 @@ export async function fetchReplayStorageStatus(): Promise<ReplayStorageStatus> {
   };
 }
 
-export function useReplayStorageStatus() {
+export function useReplayStorageStatus(options?: { enabled?: boolean }) {
   return useQuery({
     queryKey: REPLAY_STORAGE_STATUS_KEY,
     queryFn: fetchReplayStorageStatus,
     staleTime: 60_000,
+    enabled: options?.enabled,
   });
 }
 

package/corpus/templates/analytics/app/lib/demo-chart-trend.ts

@@ -52,49 +52,56 @@ function normalizedVolatility(
 }
 
 function normalizedTrend(
-  length: number,
+  series: number[],
+  minimum: number,
+  range: number,
   volatilityScore: number,
   random: () => number,
 ): number[] {
+  const length = series.length;
   if (length <= 1) return [0];
   if (length === 2) return [0, 1];
 
-  const volatility = 0.015 + volatilityScore * (0.22 + random() * 0.12);
-  const noiseMemory = 0.78 - volatilityScore * 0.58;
-  let noise = 0;
-  const values = Array.from({ length }, (_, index) => {
-    if (index === 0) return 0;
-    if (index === length - 1) return 1;
+  const normalized = series.map((value) => (value - minimum) / range);
+  const randomization = 0.012 + volatilityScore * 0.08;
+  const shape = [normalized[0]];
+
+  // Preserve the source's actual step pattern (including when and how sharply
+  // it spikes), with just enough seeded variation that otherwise-similar demo
+  // series do not become identical. Smooth sources receive almost no jitter;
+  // volatile sources can vary a little more without moving their events.
+  for (let index = 1; index < length; index += 1) {
+    const sourceStep = normalized[index] - normalized[index - 1];
+    const factor = 1 + (random() * 2 - 1) * randomization;
+    shape.push(shape[index - 1] + sourceStep * factor);
+  }
 
+  // Add only the linear drift required for the first point to be the global
+  // minimum and the last to be the global maximum. A linear term has zero
+  // second difference, so the source's local acceleration, spikes, and dips
+  // survive instead of being replaced by a synthetic random walk.
+  let requiredDrift = 0;
+  for (let index = 1; index < length; index += 1) {
+    const progress = index / (length - 1);
+    requiredDrift = Math.max(
+      requiredDrift,
+      (shape[0] - shape[index]) / progress,
+    );
+  }
+  for (let index = 0; index < length - 1; index += 1) {
     const progress = index / (length - 1);
-    noise = noise * noiseMemory + (random() * 2 - 1) * (1 - noiseMemory);
-    const taperedNoise = noise * volatility * Math.sin(Math.PI * progress);
-    return clamp(progress + taperedNoise, 0.025, 0.975);
-  });
-
-  // Pullback count and depth follow the source's normalized volatility. A
-  // smooth source remains a gentle rise; a jagged source gets several seeded
-  // reversals. Spacing the reversals across the series prevents them from
-  // collapsing into one noisy patch.
-  if (length >= 5 && volatilityScore >= 0.12) {
-    const maximumPullbacks = Math.min(3, Math.floor((length - 2) / 2));
-    const pullbackCount = Math.max(
-      1,
-      Math.round(volatilityScore * maximumPullbacks),
+    requiredDrift = Math.max(
+      requiredDrift,
+      (shape[index] - shape[length - 1]) / (1 - progress),
     );
-    for (let pullback = 0; pullback < pullbackCount; pullback += 1) {
-      const segmentCenter =
-        ((pullback + 1) * (length - 3)) / (pullbackCount + 1) + 1;
-      const jitter = (random() - 0.5) * Math.max(1, length / 10);
-      const dipIndex = Math.round(clamp(segmentCenter + jitter, 2, length - 2));
-      const center = dipIndex / (length - 1);
-      const amplitude = 0.025 + volatilityScore * (0.075 + random() * 0.12);
-      values[dipIndex - 1] = clamp(center + amplitude, 0.075, 0.925);
-      values[dipIndex] = clamp(center - amplitude, 0.05, 0.9);
-    }
   }
 
-  return values;
+  const drift = requiredDrift + 0.012 + random() * 0.018;
+  const candidate = shape.map(
+    (value, index) => value + drift * (index / (length - 1)),
+  );
+  const candidateRange = candidate[length - 1] - candidate[0];
+  return candidate.map((value) => (value - candidate[0]) / candidateRange);
 }
 
 /**
@@ -133,7 +140,13 @@ export function createDemoChartTrendRows(
       minimum,
       range,
     );
-    const trend = normalizedTrend(points.length, volatilityScore, random);
+    const trend = normalizedTrend(
+      points.map((point) => point.numeric),
+      minimum,
+      range,
+      volatilityScore,
+      random,
+    );
     const useStringValues = points.every(
       (point) => typeof point.original === "string",
     );

package/corpus/templates/analytics/app/pages/Settings.tsx

@@ -5,7 +5,6 @@ import {
   useAgentSettingsTabs,
   useSession,
   useT,
-  type SettingsSearchEntry,
   type SettingsTabItem,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
@@ -27,6 +26,7 @@ import changelog from "../../CHANGELOG.md?raw";
 import { useReplayStorageStatus } from "../hooks/use-replay-storage-status";
 import { ReplayStorageHint } from "./sessions/SessionsPage";
 import { AlertRulesSettingsCard } from "./settings/AlertRulesSettingsCard";
+import { buildAnalyticsGeneralSettingsSearchEntries } from "./settings/settings-search";
 
 export default function Settings() {
   // Settings is also reachable directly from the full-page agent surface.
@@ -56,49 +56,12 @@ export default function Settings() {
     [agentSettingsTabs, t],
   );
 
-  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
-    () => [
-      {
-        id: "analytics-account",
-        label: t("settings.account"),
-        keywords: "profile email signed in identity",
-        hash: "account",
-      },
-      {
-        id: "analytics-credentials",
-        label: t("settings.credentials"),
-        keywords: "data sources api keys manage credentials",
-        hash: "credentials",
-      },
-      {
-        id: "analytics-dashboard-templates",
-        label: t("settings.dashboardTemplates"),
-        keywords: "templates catalog dashboards",
-        hash: "dashboard-templates",
-      },
-      ...(replayStorageStatus.data?.configured
-        ? [
-            {
-              id: "analytics-replay-storage",
-              label: t("sessions.storageSetupTitle"),
-              keywords: "session replay recording storage s3 bucket builder",
-              hash: "replay-storage",
-            },
-          ]
-        : []),
-      {
-        id: "analytics-language",
-        label: t("settings.languageTitle"),
-        keywords: "language locale translation i18n",
-        hash: "language",
-      },
-      {
-        id: "analytics-about",
-        label: t("settings.about"),
-        keywords: "about version info usage",
-        hash: "about",
-      },
-    ],
+  const generalSearchEntries = useMemo(
+    () =>
+      buildAnalyticsGeneralSettingsSearchEntries(
+        t,
+        !!replayStorageStatus.data?.configured,
+      ),
     [replayStorageStatus.data?.configured, t],
   );
 
@@ -184,7 +147,7 @@ export default function Settings() {
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <ReplayStorageHint />
+                <ReplayStorageHint embedded />
               </CardContent>
             </Card>
           ) : null}

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -160,8 +160,17 @@ type ReplayViewportDimensions = {
   height: number;
 };
 
+type ReplayViewportChange = ReplayViewportDimensions & {
+  offsetMs: number;
+};
+
 const DEFAULT_PLAYER_WIDTH = 1024;
 const DEFAULT_PLAYER_HEIGHT = 640;
+const MALFORMED_REPLAY_MIN_WIDTH = 4000;
+const MALFORMED_REPLAY_MIN_ASPECT_RATIO = 4;
+const MIN_REPLAY_DISPLAY_DIMENSION = 240;
+const RECOVERED_REPLAY_DISPLAY_ASPECT_RATIO =
+  DEFAULT_PLAYER_WIDTH / DEFAULT_PLAYER_HEIGHT;
 const DEFAULT_SPEED = 2;
 const SPEED_OPTIONS = [0.5, 1, 2, 4, 8];
 const SKIP_STEP_MS = 5000;
@@ -487,8 +496,17 @@ function ReplayPlayer({
     height: number;
   } | null>(null);
   const [fitScale, setFitScale] = useState(1);
-  const initialDims = useMemo(() => replayViewportDimensions(events), [events]);
+  const initialDims = useMemo(
+    () => replayInitialDisplayDimensions(events),
+    [events],
+  );
+  const viewportTimeline = useMemo(
+    () => buildReplayViewportTimeline(events),
+    [events],
+  );
   const eventsRef = useLiveRef(events);
+  const viewportTimelineRef = useLiveRef(viewportTimeline);
+  const streamedDimsRef = useLiveRef(streamedDims);
   // Stable identity for the loaded event set so progressive chunk publishes
   // that only grow the array do not tear down a healthy Replayer mid-playback.
   const eventsIdentity = useMemo(
@@ -501,13 +519,16 @@ function ReplayPlayer({
   const scrubbingRef = useRef(false);
   const scrubResumePlayingRef = useRef(false);
 
-  // Keep the stage in rrweb's coordinate system. Clamping only this outer
-  // wrapper while rrweb keeps its raw iframe dimensions clips and stretches
-  // wide recordings because the two layers no longer share a viewport.
-  const playerWidth =
-    streamedDims?.width ?? initialDims?.width ?? DEFAULT_PLAYER_WIDTH;
-  const playerHeight =
-    streamedDims?.height ?? initialDims?.height ?? DEFAULT_PLAYER_HEIGHT;
+  // IMPORTANT — DO NOT REMOVE THIS LEGACY VIEWPORT CORRECTION.
+  // Some stored sessions contain impossible 4,000–7,500px-wide Meta/resize
+  // values even though the browser was a normal desktop viewport. Rendering
+  // those raw values collapses the replay into a tiny horizontal ribbon. Keep
+  // normal recordings exact—including 32:9 and mobile portrait. Recover only
+  // widths >=4,000px with aspect >4:1 to the standard 16:10 viewport. The same
+  // dimensions are applied to rrweb's iframe so CSS breakpoints/camera agree.
+  const displayDims = clampReplayDisplayDimensions(streamedDims ?? initialDims);
+  const playerWidth = displayDims?.width ?? DEFAULT_PLAYER_WIDTH;
+  const playerHeight = displayDims?.height ?? DEFAULT_PLAYER_HEIGHT;
   const skipRanges = useMemo(() => buildIdleSkipRanges(events), [events]);
   const skipRangesRef = useLiveRef(skipRanges);
   const skipInactiveRef = useLiveRef(skipInactive);
@@ -626,9 +647,35 @@ function ReplayPlayer({
         console.warn("[session-replay] seek failed", seekError);
         return;
       }
+      const seekDims = replayViewportDimensionsAtTime(
+        viewportTimelineRef.current,
+        clamped,
+      );
+      if (seekDims) {
+        // rrweb 2.1 does not reliably re-emit Resize when seeking backwards.
+        // IMPORTANT: correct both layers together. Correcting only the outer
+        // stage or only rrweb's iframe recreates the ultra-wide/clipped bug.
+        const correctedSeekDims = clampReplayDisplayDimensions(seekDims);
+        const currentDims = streamedDimsRef.current;
+        if (
+          correctedSeekDims &&
+          (currentDims?.width !== correctedSeekDims.width ||
+            currentDims?.height !== correctedSeekDims.height)
+        ) {
+          replayer.handleResize?.(correctedSeekDims);
+          setStreamedDims(correctedSeekDims);
+        }
+      }
       updateTime(clamped);
     },
-    [playingRef, status, totalTime, updateTime],
+    [
+      playingRef,
+      status,
+      streamedDimsRef,
+      totalTime,
+      updateTime,
+      viewportTimelineRef,
+    ],
   );
 
   const beginScrub = useCallback(
@@ -693,11 +740,13 @@ function ReplayPlayer({
 
       stageRootRef.current.innerHTML = "";
       // Match builder-internal: pass events through untouched and let rrweb own
-      // iframe sizing via Meta / ViewportResize. Only use dimensions for CSS
-      // fit-to-stage scaling of the outer wrapper — never rewrite Meta or force
-      // iframe width/height (that mismatches the FullSnapshot DOM and blanks
-      // the stage).
-      setStreamedDims(replayViewportDimensions(replayEvents));
+      // normal iframe sizing via Meta / ViewportResize. Never rewrite Meta or
+      // force arbitrary iframe dimensions (that mismatches the FullSnapshot DOM
+      // and blanks the stage). The one exception below mirrors the narrowly
+      // detected legacy malformed viewport onto both the iframe and outer stage.
+      const rawInitialDims = replayInitialViewportDimensions(replayEvents);
+      const correctedInitialDims = replayInitialDisplayDimensions(replayEvents);
+      setStreamedDims(correctedInitialDims);
       localReplayer = new Replayer(replayEvents as any[], {
         root: stageRootRef.current,
         speed: speedRef.current,
@@ -708,6 +757,21 @@ function ReplayPlayer({
         mouseTail: false,
         insertStyleRules: SUPPRESS_OVERLAYS_CSS,
       });
+      // IMPORTANT: rrweb constructs its iframe from the raw initial Meta event.
+      // When that legacy Meta width is malformed, correcting only streamedDims
+      // fixes the outer stage but leaves CSS breakpoints and clicks ultra-wide.
+      // Apply the same correction to rrweb immediately, before first playback.
+      if (
+        correctedInitialDims &&
+        (rawInitialDims?.width !== correctedInitialDims.width ||
+          rawInitialDims?.height !== correctedInitialDims.height)
+      ) {
+        localReplayer.handleResize?.(correctedInitialDims);
+      }
+      // rrweb already sandboxes the replay document without script execution.
+      // Do not mutate recorded URLs/CSS; suppress viewer-page referrer leakage
+      // at the iframe boundary while retaining historical visual resources.
+      localReplayer.iframe?.setAttribute?.("referrerpolicy", "no-referrer");
       replayerRef.current = localReplayer;
       const meta = localReplayer.getMetaData?.();
       const total = Number(meta?.totalTime ?? replayDuration(replayEvents));
@@ -732,10 +796,29 @@ function ReplayPlayer({
           dims.width > 0 &&
           dims.height > 0
         ) {
-          setStreamedDims({
+          const rawDims = {
             width: Math.round(dims.width),
             height: Math.round(dims.height),
-          });
+          };
+          const correctedDims = clampReplayDisplayDimensions(rawDims);
+          if (!correctedDims) return;
+          // rrweb handles the raw resize before notifying us. Override only
+          // impossible legacy geometry so its iframe and our stage stay equal.
+          // DO NOT clamp just one layer; that breaks responsive CSS and clicks.
+          const currentDims = streamedDimsRef.current;
+          if (
+            currentDims?.width === correctedDims.width &&
+            currentDims?.height === correctedDims.height
+          ) {
+            return;
+          }
+          if (
+            correctedDims.width !== rawDims.width ||
+            correctedDims.height !== rawDims.height
+          ) {
+            localReplayer.handleResize?.(correctedDims);
+          }
+          setStreamedDims(correctedDims);
         }
       });
       updateTime(startAt);
@@ -1855,65 +1938,19 @@ function useReplayEvents(
   );
 }
 
-const REPLAY_NETWORK_ATTRIBUTES = new Set([
-  "src",
-  "srcset",
-  "poster",
-  "background",
-  "action",
-  "formaction",
-  "data",
-  "ping",
-  "cite",
-  "xlink:href",
-]);
-
-function stripReplayCssUrls(value: string): string {
-  return value
-    .replace(/@import\s+(?:url\()?[^;)]+(?:\))?\s*;?/gi, "")
-    .replace(/url\(\s*[^)]*\)/gi, "none");
-}
-
-function sanitizeReplayValue(value: unknown, key?: string): unknown {
-  if (Array.isArray(value)) {
-    return value.map((item) => sanitizeReplayValue(item));
-  }
-  if (!isRecord(value)) {
-    if (typeof value !== "string") return value;
-    const normalizedKey = key?.toLowerCase();
-    if (
-      normalizedKey === "href" ||
-      REPLAY_NETWORK_ATTRIBUTES.has(normalizedKey ?? "")
-    ) {
-      return "about:blank";
-    }
-    if (
-      normalizedKey === "style" ||
-      normalizedKey === "_csstext" ||
-      normalizedKey === "csstext"
-    ) {
-      return stripReplayCssUrls(value);
-    }
-    return value;
-  }
-
-  return Object.fromEntries(
-    Object.entries(value).map(([entryKey, entryValue]) => [
-      entryKey,
-      sanitizeReplayValue(entryValue, entryKey),
-    ]),
-  );
-}
-
 /**
- * rrweb's iframe sandbox prevents scripts but permits passive resource loads.
- * Preserve the captured DOM structure and inline styling while neutralizing
- * URLs that could contact a recorded page or third-party origin.
+ * Stock rrweb consumes the recorded event objects directly. Playback-time URL
+ * or CSS rewriting breaks snapshots, responsive rules, fonts, and navigation
+ * metadata, so filtering invalid container entries is the only normalization.
+ *
+ * IMPORTANT — DO NOT add URL/CSS sanitization here. A previous security review
+ * changed href/src/_cssText to about:blank and immediately regressed every
+ * historical recording that depended on captured styles. Network/privacy
+ * controls belong at capture or the sandbox boundary, never in rrweb events.
  */
 export function normalizeReplayEvents(events: unknown[]): AnyReplayEvent[] {
   return events
     .filter((event): event is AnyReplayEvent => isRecord(event))
-    .map((event) => sanitizeReplayValue(event) as AnyReplayEvent)
     .sort((a, b) => Number(a.timestamp ?? 0) - Number(b.timestamp ?? 0));
 }
 
@@ -2236,6 +2273,81 @@ export function replayViewportDimensions(
   return best;
 }
 
+export function replayInitialViewportDimensions(
+  events: AnyReplayEvent[],
+): ReplayViewportDimensions | null {
+  // rrweb itself initializes from the first Meta event. A resize can appear
+  // earlier in chunk order after reconnect/flush boundaries, but it must not
+  // replace the snapshot's native starting viewport.
+  for (const event of events) {
+    if (event.type !== RRWEB_EVENT_TYPE.Meta) continue;
+    const dims = dimensionsFromReplayEvent(event);
+    if (dims) return dims;
+  }
+  for (const event of events) {
+    const dims = dimensionsFromReplayEvent(event);
+    if (dims) return dims;
+  }
+  return null;
+}
+
+export function replayInitialDisplayDimensions(
+  events: AnyReplayEvent[],
+): ReplayViewportDimensions | null {
+  // Keep the initial outer stage and rrweb iframe on one corrected camera.
+  // DO NOT use the raw initial Meta dimensions for only one of those layers.
+  return clampReplayDisplayDimensions(replayInitialViewportDimensions(events));
+}
+
+export function buildReplayViewportTimeline(
+  events: AnyReplayEvent[],
+): ReplayViewportChange[] {
+  const initial = replayInitialViewportDimensions(events);
+  if (!initial) return [];
+  const startedAt = replayStartedAt(events);
+  const firstMetaTimestamp = events.reduce((best, event) => {
+    if (event.type !== RRWEB_EVENT_TYPE.Meta) return best;
+    const timestamp = Number(event.timestamp ?? 0);
+    return Number.isFinite(timestamp) && timestamp > 0
+      ? Math.min(best, timestamp)
+      : best;
+  }, Number.POSITIVE_INFINITY);
+  const changes: ReplayViewportChange[] = [{ ...initial, offsetMs: 0 }];
+  for (const event of events) {
+    const timestamp = Number(event.timestamp ?? 0);
+    if (!Number.isFinite(timestamp) || timestamp <= firstMetaTimestamp)
+      continue;
+    const dims = dimensionsFromReplayEvent(event);
+    if (!dims) continue;
+    const previous = changes[changes.length - 1];
+    if (previous?.width === dims.width && previous.height === dims.height) {
+      continue;
+    }
+    changes.push({
+      ...dims,
+      offsetMs: Math.max(0, timestamp - startedAt),
+    });
+  }
+  return changes;
+}
+
+export function replayViewportDimensionsAtTime(
+  changes: ReplayViewportChange[],
+  elapsedMs: number,
+): ReplayViewportDimensions | null {
+  if (changes.length === 0) return null;
+  const target = Math.max(0, elapsedMs);
+  let low = 0;
+  let high = changes.length - 1;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if ((changes[middle]?.offsetMs ?? 0) <= target) low = middle;
+    else high = middle - 1;
+  }
+  const match = changes[low];
+  return match ? { width: match.width, height: match.height } : null;
+}
+
 function dimensionsFromReplayEvent(
   event: AnyReplayEvent,
 ): ReplayViewportDimensions | null {
@@ -2272,6 +2384,29 @@ export function normalizeReplayDimensions(
   };
 }
 
+export function clampReplayDisplayDimensions(
+  dims: ReplayViewportDimensions | null,
+): ReplayViewportDimensions | null {
+  if (!dims) return null;
+  if (
+    dims.width < MIN_REPLAY_DISPLAY_DIMENSION ||
+    dims.height < MIN_REPLAY_DISPLAY_DIMENSION
+  ) {
+    return { width: DEFAULT_PLAYER_WIDTH, height: DEFAULT_PLAYER_HEIGHT };
+  }
+  const aspect = dims.width / dims.height;
+  if (
+    dims.width >= MALFORMED_REPLAY_MIN_WIDTH &&
+    aspect > MALFORMED_REPLAY_MIN_ASPECT_RATIO
+  ) {
+    return {
+      width: Math.round(dims.height * RECOVERED_REPLAY_DISPLAY_ASPECT_RATIO),
+      height: dims.height,
+    };
+  }
+  return dims;
+}
+
 export function filterReplayMarkers(
   markers: ReplayMarker[],
   query: string,