@agent-native/core 0.91.1 → 0.91.2

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

@@ -23,6 +23,7 @@ import {
   IconPlayerSkipForward,
   IconPlayerTrackNext,
   IconRoute,
+  IconSearch,
   IconTerminal2,
   IconTimelineEvent,
 } from "@tabler/icons-react";
@@ -34,11 +35,13 @@ import {
   useMemo,
   useRef,
   useState,
+  type FormEvent,
 } from "react";
 import { Link, useParams } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
@@ -160,8 +163,18 @@ const MIN_IDLE_SKIP_MS = 8000;
 const IDLE_EDGE_PAD_MS = 1200;
 const REPLAY_CHUNK_FETCH_CONCURRENCY = 6;
 const REPLAY_CHUNK_UNAVAILABLE_MESSAGE = "Session replay chunk is unavailable";
-const DEFAULT_DEVTOOLS_HEIGHT = 280;
+const DEFAULT_DEVTOOLS_HEIGHT = 220;
+const MIN_STAGE_HEIGHT_PX = 240;
 const SCRUBBER_MARKER_LIMIT = 500;
+/** Reject Meta/resize frames that produce the ultra-wide ribbon letterbox.
+ *  True 21:9 ultrawide is ~2.33; multi-monitor spans and corrupt frames are
+ *  usually well above that and collapse the stage after fit-to-scale. */
+const MIN_REPLAY_VIEWPORT_WIDTH = 320;
+const MIN_REPLAY_VIEWPORT_HEIGHT = 240;
+const MAX_REPLAY_ASPECT_RATIO = 2.45;
+const MIN_REPLAY_ASPECT_RATIO = 0.5;
+const TIMELINE_MARKER_LIMIT = 300;
+const TIMELINE_FOLLOW_PAUSE_MS = 4000;
 const SESSION_REPLAY_CONSOLE_EVENT_TAG = "agent-native.console";
 const SESSION_REPLAY_NETWORK_EVENT_TAG = "agent-native.network";
 
@@ -219,6 +232,7 @@ const INCREMENTAL_SOURCE = {
   Mutation: 0,
   MouseInteraction: 2,
   Scroll: 3,
+  ViewportResize: 4,
   Input: 5,
   TouchMove: 6,
 } as const;
@@ -471,12 +485,26 @@ function ReplayPlayer({
   const [skipInactive, setSkipInactive] = useState(true);
   const [devToolsOpen, setDevToolsOpen] = useState(false);
   const [devToolsHeight, setDevToolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
+  const [maxDevToolsHeight, setMaxDevToolsHeight] = useState(420);
+  const playerShellRef = useRef<HTMLDivElement>(null);
   const [streamedDims, setStreamedDims] = useState<{
     width: number;
     height: number;
   } | null>(null);
   const [fitScale, setFitScale] = useState(1);
   const initialDims = useMemo(() => replayViewportDimensions(events), [events]);
+  const eventsRef = useLiveRef(events);
+  // 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(
+    () =>
+      `${events.length}:${Number(events[0]?.timestamp ?? 0)}:${Number(
+        events[events.length - 1]?.timestamp ?? 0,
+      )}`,
+    [events],
+  );
+  const scrubbingRef = useRef(false);
+  const scrubResumePlayingRef = useRef(false);
 
   const playerWidth =
     streamedDims?.width ?? initialDims?.width ?? DEFAULT_PLAYER_WIDTH;
@@ -556,6 +584,26 @@ function ReplayPlayer({
     return () => observer.disconnect();
   }, [playerHeight, playerWidth]);
 
+  // Keep Dev Tools from eating the stage. On short viewports the panel used to
+  // shrink the replay area into a ribbon even when Meta dimensions were fine.
+  useEffect(() => {
+    const el = playerShellRef.current;
+    if (!el) return;
+    const update = () => {
+      const chromeBudget = 140;
+      const available = Math.max(
+        160,
+        el.clientHeight - MIN_STAGE_HEIGHT_PX - chromeBudget,
+      );
+      setMaxDevToolsHeight(available);
+      setDevToolsHeight((current) => Math.min(current, available));
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [devToolsOpen]);
+
   const updateTime = useCallback(
     (next: number) => {
       setCurrentTime(next);
@@ -586,6 +634,27 @@ function ReplayPlayer({
     [playingRef, status, totalTime, updateTime],
   );
 
+  const beginScrub = useCallback(
+    (ms: number) => {
+      if (!scrubbingRef.current) {
+        scrubResumePlayingRef.current = playingRef.current;
+      }
+      scrubbingRef.current = true;
+      seek(ms, false);
+    },
+    [playingRef, seek],
+  );
+
+  const endScrub = useCallback(
+    (ms: number) => {
+      const resume = scrubResumePlayingRef.current;
+      scrubbingRef.current = false;
+      scrubResumePlayingRef.current = false;
+      seek(ms, resume);
+    },
+    [seek],
+  );
+
   useEffect(() => {
     registerSeek(seek);
   }, [registerSeek, seek]);
@@ -596,21 +665,29 @@ function ReplayPlayer({
     let localReplayer: any = null;
 
     async function loadReplay() {
-      const hasPlayableEvents = hasPlayableReplayEvents(events);
-      if (!hasPlayableEvents && !response.isComplete) {
+      // Wait for the full recording before creating the Replayer. Progressive
+      // chunk publishes used to rebuild the player on every append, which
+      // reset the clock, disabled the scrubber, and desynced the playhead.
+      const replayEvents = eventsRef.current;
+      if (!response.isComplete) {
         setStatus("loading");
         setError(null);
         setPlaying(false);
         return;
       }
-      if (events.length < 2) {
+      if (replayEvents.length < 2) {
         throw new Error(t("sessions.noReplayEvents"));
       }
       if (
-        !events.some((event) => event.type === RRWEB_EVENT_TYPE.FullSnapshot)
+        !replayEvents.some(
+          (event) => event.type === RRWEB_EVENT_TYPE.FullSnapshot,
+        )
       ) {
         throw new Error(t("sessions.noReplayEvents"));
       }
+      if (!hasPlayableReplayEvents(replayEvents)) {
+        throw new Error(t("sessions.noReplayEvents"));
+      }
       setStatus("loading");
       setError(null);
       await import("@rrweb/replay/dist/style.css");
@@ -618,8 +695,16 @@ function ReplayPlayer({
       if (cancelled || !stageRootRef.current) return;
 
       stageRootRef.current.innerHTML = "";
-      setStreamedDims(initialDims);
-      localReplayer = new Replayer(events as any[], {
+      const frameDims = replayViewportDimensions(replayEvents);
+      const playbackEvents = sanitizeReplayViewportEvents(
+        replayEvents,
+        frameDims ?? {
+          width: DEFAULT_PLAYER_WIDTH,
+          height: DEFAULT_PLAYER_HEIGHT,
+        },
+      );
+      setStreamedDims(frameDims);
+      localReplayer = new Replayer(playbackEvents as any[], {
         root: stageRootRef.current,
         speed: speedRef.current,
         skipInactive: false,
@@ -640,14 +725,14 @@ function ReplayPlayer({
       });
       replayerRef.current = localReplayer;
       const meta = localReplayer.getMetaData?.();
-      const total = Number(meta?.totalTime ?? replayDuration(events));
+      const total = Number(meta?.totalTime ?? replayDuration(replayEvents));
       setTotalTime(Number.isFinite(total) ? total : 0);
       const startAt = clamp(
         currentTimeRef.current,
         0,
         Number.isFinite(total) ? total : 0,
       );
-      applyReplayFrameDimensions(localReplayer, initialDims);
+      applyReplayFrameDimensions(localReplayer, frameDims);
       localReplayer.on?.("finish", () => {
         setPlaying(false);
         const finalTime = Number(localReplayer.getCurrentTime?.() ?? total);
@@ -665,7 +750,8 @@ function ReplayPlayer({
       localReplayer.on?.("fullsnapshot-rebuilded", () => {
         applyReplayFrameDimensions(
           localReplayer,
-          replayViewportDimensions(events) ?? initialDims,
+          replayViewportAt(eventsRef.current, currentTimeRef.current) ??
+            frameDims,
         );
         revealReplayFrame(localReplayer);
       });
@@ -686,7 +772,8 @@ function ReplayPlayer({
       window.requestAnimationFrame(() => {
         applyReplayFrameDimensions(
           localReplayer,
-          replayViewportDimensions(events) ?? initialDims,
+          replayViewportAt(eventsRef.current, currentTimeRef.current) ??
+            frameDims,
         );
         revealReplayFrame(localReplayer);
       });
@@ -713,10 +800,13 @@ function ReplayPlayer({
       replayerRef.current = null;
       if (stageRootRef.current) stageRootRef.current.innerHTML = "";
     };
+    // Key only on isComplete + a stable events identity. Including the events
+    // array reference would rebuild the Replayer when the final publish()
+    // replaces the chunks object even though the event set is unchanged.
   }, [
     currentTimeRef,
-    events,
-    initialDims,
+    eventsIdentity,
+    eventsRef,
     response.isComplete,
     speedRef,
     t,
@@ -732,7 +822,7 @@ function ReplayPlayer({
 
     const tick = () => {
       const replayer = replayerRef.current;
-      if (replayer) {
+      if (replayer && !scrubbingRef.current) {
         let nextTime = Number(
           replayer.getCurrentTime?.() ?? currentTimeRef.current,
         );
@@ -812,210 +902,218 @@ function ReplayPlayer({
 
   return (
     <TooltipProvider>
-      <Card className="flex min-h-0 overflow-hidden">
-        <CardContent className="flex min-h-0 flex-1 flex-col p-0">
-          <div className="flex min-h-0 flex-1 flex-col bg-muted/20 p-2">
-            {currentUrl ? (
+      <div ref={playerShellRef} className="flex min-h-0 flex-1 flex-col">
+        <Card className="flex min-h-0 flex-1 overflow-hidden">
+          <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+            <div className="flex min-h-0 flex-1 flex-col bg-muted/20 p-2">
+              {currentUrl ? (
+                <div
+                  className="flex h-8 shrink-0 items-center rounded-t-md border border-b-0 bg-background px-3 font-mono text-xs text-muted-foreground"
+                  title={currentUrl}
+                >
+                  <span className="truncate">{currentUrl}</span>
+                </div>
+              ) : null}
               <div
-                className="flex h-8 shrink-0 items-center rounded-t-md border border-b-0 bg-background px-3 font-mono text-xs text-muted-foreground"
-                title={currentUrl}
+                ref={stageAreaRef}
+                className={cn(
+                  "relative min-h-[200px] flex-1 overflow-hidden border bg-white dark:bg-zinc-950",
+                  currentUrl ? "rounded-b-md" : "rounded-md",
+                  !devToolsOpen && "min-h-[320px]",
+                )}
               >
-                <span className="truncate">{currentUrl}</span>
+                <div
+                  ref={stageRootRef}
+                  className="an-replay-stage-root absolute left-1/2 top-1/2"
+                  style={{
+                    width: playerWidth,
+                    height: playerHeight,
+                    transform: `translate(-50%, -50%) scale(${fitScale})`,
+                    transformOrigin: "center center",
+                  }}
+                />
+                <button
+                  type="button"
+                  className="absolute inset-0 z-20 cursor-pointer rounded-[inherit] border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default"
+                  disabled={disabled}
+                  aria-label={
+                    playing ? t("sessions.pause") : t("sessions.play")
+                  }
+                  onClick={togglePlay}
+                />
+                {status === "loading" ? (
+                  <div className="absolute inset-0 z-30 grid place-items-center bg-background/70 p-6 text-center text-sm text-muted-foreground">
+                    <div className="w-full max-w-sm">
+                      <p>{t("sessions.replayLoading")}</p>
+                      <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full bg-primary transition-[width]"
+                          style={{
+                            width: `${Math.round(loadingPercent * 100)}%`,
+                          }}
+                        />
+                      </div>
+                      {response.totalChunks > 0 ? (
+                        <p className="mt-2 font-mono text-[11px]">
+                          {t("sessions.replayLoadingProgress", {
+                            loaded: String(response.loadedChunks),
+                            total: String(response.totalChunks),
+                          })}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+                {status === "error" && error ? (
+                  <div className="absolute inset-0 z-30 grid place-items-center bg-background/85 p-6 text-center text-sm text-destructive">
+                    {t("sessions.loadFailed", { message: error })}
+                  </div>
+                ) : null}
               </div>
-            ) : null}
-            <div
-              ref={stageAreaRef}
-              className={cn(
-                "relative min-h-[320px] flex-1 overflow-hidden border bg-white dark:bg-zinc-950",
-                currentUrl ? "rounded-b-md" : "rounded-md",
-              )}
-            >
-              <div
-                ref={stageRootRef}
-                className="an-replay-stage-root absolute left-1/2 top-1/2"
-                style={{
-                  width: playerWidth,
-                  height: playerHeight,
-                  transform: `translate(-50%, -50%) scale(${fitScale})`,
-                  transformOrigin: "center center",
-                }}
-              />
-              <button
+            </div>
+
+            <div className="flex shrink-0 flex-wrap items-center gap-2 border-t px-3 py-2">
+              <ReplayIconButton
+                label={t("sessions.skipBack")}
+                disabled={disabled}
+                onClick={() => seek(currentTime - SKIP_STEP_MS)}
+              >
+                <IconPlayerSkipBack className="h-4 w-4" />
+              </ReplayIconButton>
+              <Button
                 type="button"
-                className="absolute inset-0 z-20 cursor-pointer rounded-[inherit] border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default"
+                size="icon"
                 disabled={disabled}
-                aria-label={playing ? t("sessions.pause") : t("sessions.play")}
                 onClick={togglePlay}
-              />
-              {status === "loading" ? (
-                <div className="absolute inset-0 z-30 grid place-items-center bg-background/70 p-6 text-center text-sm text-muted-foreground">
-                  <div className="w-full max-w-sm">
-                    <p>{t("sessions.replayLoading")}</p>
-                    <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
-                      <div
-                        className="h-full rounded-full bg-primary transition-[width]"
-                        style={{
-                          width: `${Math.round(loadingPercent * 100)}%`,
-                        }}
-                      />
-                    </div>
-                    {response.totalChunks > 0 ? (
-                      <p className="mt-2 font-mono text-[11px]">
-                        {t("sessions.replayLoadingProgress", {
-                          loaded: String(response.loadedChunks),
-                          total: String(response.totalChunks),
-                        })}
-                      </p>
-                    ) : null}
-                  </div>
-                </div>
-              ) : null}
-              {status === "error" && error ? (
-                <div className="absolute inset-0 z-30 grid place-items-center bg-background/85 p-6 text-center text-sm text-destructive">
-                  {t("sessions.loadFailed", { message: error })}
-                </div>
-              ) : null}
-            </div>
-          </div>
+                aria-label={playing ? t("sessions.pause") : t("sessions.play")}
+                className="h-8 w-8"
+              >
+                {playing ? (
+                  <IconPlayerPause className="h-4 w-4" />
+                ) : (
+                  <IconPlayerPlay className="h-4 w-4" />
+                )}
+              </Button>
+              <ReplayIconButton
+                label={t("sessions.skipForward")}
+                disabled={disabled}
+                onClick={() => seek(currentTime + SKIP_STEP_MS)}
+              >
+                <IconPlayerSkipForward className="h-4 w-4" />
+              </ReplayIconButton>
 
-          <div className="flex shrink-0 flex-wrap items-center gap-2 border-t px-3 py-2">
-            <ReplayIconButton
-              label={t("sessions.skipBack")}
-              disabled={disabled}
-              onClick={() => seek(currentTime - SKIP_STEP_MS)}
-            >
-              <IconPlayerSkipBack className="h-4 w-4" />
-            </ReplayIconButton>
-            <Button
-              type="button"
-              size="icon"
-              disabled={disabled}
-              onClick={togglePlay}
-              aria-label={playing ? t("sessions.pause") : t("sessions.play")}
-              className="h-8 w-8"
-            >
-              {playing ? (
-                <IconPlayerPause className="h-4 w-4" />
-              ) : (
-                <IconPlayerPlay className="h-4 w-4" />
-              )}
-            </Button>
-            <ReplayIconButton
-              label={t("sessions.skipForward")}
-              disabled={disabled}
-              onClick={() => seek(currentTime + SKIP_STEP_MS)}
-            >
-              <IconPlayerSkipForward className="h-4 w-4" />
-            </ReplayIconButton>
-
-            <span className="w-12 text-center font-mono text-xs text-muted-foreground">
-              {formatClock(currentTime)}
-            </span>
-            <ReplayScrubber
-              currentTime={currentTime}
-              totalTime={totalTime}
-              markers={markers}
-              skipRanges={skipRanges}
-              skipInactive={skipInactive}
-              disabled={disabled}
-              onSeek={(ms) => seek(ms)}
-            />
-            <span className="w-12 text-center font-mono text-xs text-muted-foreground">
-              {formatClock(totalTime)}
-            </span>
+              <span className="w-12 text-center font-mono text-xs text-muted-foreground">
+                {formatClock(currentTime)}
+              </span>
+              <ReplayScrubber
+                currentTime={currentTime}
+                totalTime={totalTime}
+                markers={markers}
+                skipRanges={skipRanges}
+                skipInactive={skipInactive}
+                disabled={disabled}
+                onScrub={beginScrub}
+                onScrubEnd={endScrub}
+              />
+              <span className="w-12 text-center font-mono text-xs text-muted-foreground">
+                {formatClock(totalTime)}
+              </span>
 
-            <div className="flex items-center rounded-md bg-muted p-1">
-              {SPEED_OPTIONS.map((option) => (
-                <button
-                  key={option}
-                  type="button"
-                  className={cn(
-                    "rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
-                    speed === option &&
-                      "bg-background text-foreground shadow-sm",
-                  )}
-                  onClick={() => updateSpeed(option)}
-                >
-                  {option}x
-                </button>
-              ))}
-            </div>
+              <div className="flex items-center rounded-md bg-muted p-1">
+                {SPEED_OPTIONS.map((option) => (
+                  <button
+                    key={option}
+                    type="button"
+                    className={cn(
+                      "rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+                      speed === option &&
+                        "bg-background text-foreground shadow-sm",
+                    )}
+                    onClick={() => updateSpeed(option)}
+                  >
+                    {option}x
+                  </button>
+                ))}
+              </div>
 
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  className={cn(
-                    "inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors hover:bg-muted",
-                    skipInactive &&
-                      "border-primary/40 bg-primary/10 text-primary",
-                  )}
-                  onClick={() => setSkipInactive((value) => !value)}
-                  aria-pressed={skipInactive}
-                >
-                  <IconPlayerTrackNext className="h-4 w-4" />
-                  {t("sessions.skipInactive")}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {skipInactive
-                  ? t("sessions.skipInactiveOn")
-                  : t("sessions.skipInactiveOff")}
-              </TooltipContent>
-            </Tooltip>
-
-            <button
-              type="button"
-              className={cn(
-                "inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors hover:bg-muted",
-                devToolsOpen && "border-primary/40 bg-primary/10 text-primary",
-              )}
-              onClick={() => setDevToolsOpen((value) => !value)}
-              aria-pressed={devToolsOpen}
-              aria-expanded={devToolsOpen}
-            >
-              <IconTerminal2 className="h-4 w-4" />
-              {t("sessions.devtools")}
-              {devToolsIssueCount > 0 ? (
-                <span
-                  className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 font-mono text-[10px] font-semibold leading-none text-white"
-                  aria-label={t("sessions.devtoolsIssueCount", {
-                    count: String(devToolsIssueCount),
-                  })}
-                >
-                  {devToolsIssueCount > 99 ? "99+" : devToolsIssueCount}
-                </span>
-              ) : null}
-            </button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors hover:bg-muted",
+                      skipInactive &&
+                        "border-primary/40 bg-primary/10 text-primary",
+                    )}
+                    onClick={() => setSkipInactive((value) => !value)}
+                    aria-pressed={skipInactive}
+                  >
+                    <IconPlayerTrackNext className="h-4 w-4" />
+                    {t("sessions.skipInactive")}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {skipInactive
+                    ? t("sessions.skipInactiveOn")
+                    : t("sessions.skipInactiveOff")}
+                </TooltipContent>
+              </Tooltip>
 
-            <span className="ms-auto hidden text-xs text-muted-foreground lg:inline">
-              {t("sessions.replayEventCount", {
-                events: String(response.eventCount),
-              })}
-              {response.truncated ? ` ${t("sessions.truncated")}` : ""}
-            </span>
-          </div>
+              <button
+                type="button"
+                className={cn(
+                  "inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors hover:bg-muted",
+                  devToolsOpen &&
+                    "border-primary/40 bg-primary/10 text-primary",
+                )}
+                onClick={() => setDevToolsOpen((value) => !value)}
+                aria-pressed={devToolsOpen}
+                aria-expanded={devToolsOpen}
+              >
+                <IconTerminal2 className="h-4 w-4" />
+                {t("sessions.devtools")}
+                {devToolsIssueCount > 0 ? (
+                  <span
+                    className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 font-mono text-[10px] font-semibold leading-none text-white"
+                    aria-label={t("sessions.devtoolsIssueCount", {
+                      count: String(devToolsIssueCount),
+                    })}
+                  >
+                    {devToolsIssueCount > 99 ? "99+" : devToolsIssueCount}
+                  </span>
+                ) : null}
+              </button>
+
+              <span className="ms-auto hidden text-xs text-muted-foreground lg:inline">
+                {t("sessions.replayEventCount", {
+                  events: String(response.eventCount),
+                })}
+                {response.truncated ? ` ${t("sessions.truncated")}` : ""}
+              </span>
+            </div>
 
-          {devToolsOpen ? (
-            <SessionDevToolsPanel
-              diagnostics={diagnostics}
-              currentTime={currentTime}
-              height={devToolsHeight}
-              onHeightChange={setDevToolsHeight}
-              onSeek={(ms) => seek(ms, true)}
-              issueMatches={issueMatches}
-            />
-          ) : null}
+            {devToolsOpen ? (
+              <SessionDevToolsPanel
+                diagnostics={diagnostics}
+                currentTime={currentTime}
+                height={Math.min(devToolsHeight, maxDevToolsHeight)}
+                maxHeight={maxDevToolsHeight}
+                onHeightChange={setDevToolsHeight}
+                onSeek={(ms) => seek(ms, true)}
+                issueMatches={issueMatches}
+              />
+            ) : null}
 
-          {response.unavailableChunks > 0 ? (
-            <div className="border-t px-4 py-2 text-xs text-muted-foreground">
-              {t("sessions.unavailableChunks", {
-                count: String(response.unavailableChunks),
-              })}
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
+            {response.unavailableChunks > 0 ? (
+              <div className="border-t px-4 py-2 text-xs text-muted-foreground">
+                {t("sessions.unavailableChunks", {
+                  count: String(response.unavailableChunks),
+                })}
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+      </div>
     </TooltipProvider>
   );
 }
@@ -1027,7 +1125,8 @@ function ReplayScrubber({
   skipRanges,
   skipInactive,
   disabled,
-  onSeek,
+  onScrub,
+  onScrubEnd,
 }: {
   currentTime: number;
   totalTime: number;
@@ -1035,13 +1134,19 @@ function ReplayScrubber({
   skipRanges: SkipRange[];
   skipInactive: boolean;
   disabled: boolean;
-  onSeek: (ms: number) => void;
+  onScrub: (ms: number) => void;
+  onScrubEnd: (ms: number) => void;
 }) {
   const t = useT();
   const scrubberMarkers = useMemo(
     () => visibleScrubberMarkers(markers, totalTime),
     [markers, totalTime],
   );
+
+  function handleScrub(event: FormEvent<HTMLInputElement>) {
+    onScrub(Number(event.currentTarget.value));
+  }
+
   return (
     <div className="relative min-h-8 min-w-[180px] flex-1">
       <input
@@ -1050,9 +1155,16 @@ function ReplayScrubber({
         min={0}
         max={Math.max(0, totalTime)}
         step={50}
-        value={Math.min(currentTime, totalTime)}
+        value={Math.min(currentTime, Math.max(totalTime, 0))}
         disabled={disabled}
-        onChange={(event) => onSeek(Number(event.target.value))}
+        onInput={handleScrub}
+        onChange={handleScrub}
+        onPointerUp={(event) =>
+          onScrubEnd(Number((event.target as HTMLInputElement).value))
+        }
+        onKeyUp={(event) =>
+          onScrubEnd(Number((event.target as HTMLInputElement).value))
+        }
         aria-label={t("sessions.replayTimeline")}
       />
       <div className="pointer-events-none absolute inset-x-0 top-1/2 z-10 h-2 -translate-y-1/2 overflow-hidden rounded-full">
@@ -1081,7 +1193,7 @@ function ReplayScrubber({
             <span
               key={marker.id}
               className={cn(
-                "absolute top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-background",
+                "absolute top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-90 ring-1 ring-background/80",
                 marker.kind === "navigation"
                   ? "bg-amber-500"
                   : marker.kind === "input"
@@ -1147,38 +1259,94 @@ function ReplayTimeline({
 }) {
   const t = useT();
   const [expandedMarkerId, setExpandedMarkerId] = useState<string | null>(null);
-  const visibleMarkers = markers.slice(0, 300);
+  const [query, setQuery] = useState("");
+  const listRef = useRef<HTMLDivElement>(null);
+  const lastManualScrollAtRef = useRef(0);
+  const activeRowRef = useRef<HTMLDivElement | null>(null);
+
+  const filteredMarkers = useMemo(
+    () => filterReplayMarkers(markers, query).slice(0, TIMELINE_MARKER_LIMIT),
+    [markers, query],
+  );
+
+  useEffect(() => {
+    if (!activeMarkerId) return;
+    if (Date.now() - lastManualScrollAtRef.current < TIMELINE_FOLLOW_PAUSE_MS) {
+      return;
+    }
+    const row = activeRowRef.current;
+    const list = listRef.current;
+    if (!row || !list) return;
+    const rowTop = row.offsetTop;
+    const rowBottom = rowTop + row.offsetHeight;
+    if (
+      rowTop >= list.scrollTop &&
+      rowBottom <= list.scrollTop + list.clientHeight
+    ) {
+      return;
+    }
+    list.scrollTo({
+      top: Math.max(0, rowTop - list.clientHeight / 3),
+      behavior: "smooth",
+    });
+  }, [activeMarkerId, filteredMarkers]);
+
   return (
     <Card className="analytics-session-detail-timeline min-h-0 overflow-hidden">
       <CardContent className="flex min-h-0 flex-1 flex-col p-0">
-        <div className="shrink-0 border-b px-3 py-2">
+        <div className="shrink-0 space-y-2 border-b px-3 py-2">
           <div className="flex items-center gap-2 text-sm font-semibold">
             <IconTimelineEvent className="h-4 w-4" />
             {t("sessions.timeline")}
           </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            {visibleMarkers.length
+          <p className="text-xs text-muted-foreground">
+            {filteredMarkers.length
               ? t("sessions.timelineDescription", {
-                  count: String(visibleMarkers.length),
+                  count: String(filteredMarkers.length),
                   total: String(markers.length),
                 })
               : t("sessions.noTimelineEvents")}
           </p>
+          <div className="relative">
+            <IconSearch className="pointer-events-none absolute start-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              className="h-7 ps-7 text-xs"
+              value={query}
+              placeholder={t("sessions.timelineSearch")}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </div>
         </div>
-        <div className="min-h-0 flex-1 overflow-auto">
-          {visibleMarkers.length ? (
+        <div
+          ref={listRef}
+          className="min-h-0 flex-1 overflow-auto"
+          onWheel={() => {
+            lastManualScrollAtRef.current = Date.now();
+          }}
+          onPointerDown={() => {
+            lastManualScrollAtRef.current = Date.now();
+          }}
+        >
+          {filteredMarkers.length ? (
             <div className="divide-y">
-              {visibleMarkers.map((marker) => {
+              {filteredMarkers.map((marker) => {
                 const expanded = marker.id === expandedMarkerId;
+                const active = marker.id === activeMarkerId;
                 return (
                   <div
                     key={marker.id}
-                    className={cn(marker.id === activeMarkerId && "bg-muted")}
+                    ref={active ? activeRowRef : undefined}
+                    className={cn(
+                      "transition-colors duration-300",
+                      active && "bg-primary/[0.06] dark:bg-primary/[0.09]",
+                    )}
                   >
                     <button
                       type="button"
                       className="flex w-full gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-muted/50"
                       aria-expanded={expanded}
+                      aria-current={active ? "true" : undefined}
                       onClick={() => {
                         onSeek(marker.offsetMs);
                         setExpandedMarkerId((current) =>
@@ -1236,7 +1404,9 @@ function ReplayTimeline({
             </div>
           ) : (
             <div className="p-4 text-sm text-muted-foreground">
-              {t("sessions.noTimelineEvents")}
+              {query.trim()
+                ? t("sessions.timelineNoMatches")
+                : t("sessions.noTimelineEvents")}
             </div>
           )}
         </div>
@@ -1323,21 +1493,18 @@ function useSessionReplayPlayback(recordingId: string) {
         let loadedBytes = 0;
         let unavailableChunks = 0;
         let nextIndex = 0;
-        let firstPlayablePublished = false;
 
         const publish = (force = false) => {
           const complete = loadedCount >= manifest.chunks.length;
           const chunks = loadedChunks.filter(
             (chunk): chunk is ReplayChunkEvents => Boolean(chunk),
           );
-          const shouldPublishEvents =
-            force ||
-            complete ||
-            (!firstPlayablePublished &&
-              hasPlayableReplayEvents(chunks.flatMap((chunk) => chunk.events)));
+          // Only hand events to the player once every chunk is in. Partial
+          // publishes used to rebuild the Replayer mid-playback and break the
+          // scrubber; the loading bar still updates while chunks stream in.
+          const shouldPublishEvents = force || complete;
 
           if (shouldPublishEvents) {
-            firstPlayablePublished = true;
             setState({
               data: playbackResponseFromChunks(manifest, chunks, {
                 isComplete: complete,
@@ -1365,6 +1532,8 @@ function useSessionReplayPlayback(recordingId: string) {
                   loadedBytes,
                   unavailableChunks,
                 }),
+            // Keep the page shell mounted so the player loading bar can show
+            // chunk progress; the Replayer itself still waits for isComplete.
             isLoading: false,
             error: null,
           }));
@@ -2008,18 +2177,55 @@ function hasPlayableReplayEvents(events: unknown[]): boolean {
 export function replayViewportDimensions(
   events: AnyReplayEvent[],
 ): ReplayViewportDimensions | null {
+  // Prefer the most recent sane Meta/ViewportResize frame. Early Meta events
+  // (or corrupt resize payloads) can report absurd aspect ratios that collapse
+  // the stage into an ultra-wide ribbon after fit-to-stage scaling.
+  let best: ReplayViewportDimensions | null = null;
   for (const event of events) {
-    if (event.type !== RRWEB_EVENT_TYPE.Meta) continue;
-    const dims = normalizeReplayDimensions(
-      event.data?.width,
-      event.data?.height,
-    );
-    if (dims) return dims;
+    const dims = dimensionsFromReplayEvent(event);
+    if (dims) best = dims;
+  }
+  return best;
+}
+
+export function replayViewportAt(
+  events: AnyReplayEvent[],
+  currentTime: number,
+): ReplayViewportDimensions | null {
+  const startedAt = replayStartedAt(events);
+  let current: ReplayViewportDimensions | null = null;
+  for (const event of events) {
+    const dims = dimensionsFromReplayEvent(event);
+    if (!dims) continue;
+    const offset = Number(event.timestamp ?? 0) - startedAt;
+    if (offset <= currentTime + 50) current = dims;
+    else break;
+  }
+  return current ?? replayViewportDimensions(events);
+}
+
+function dimensionsFromReplayEvent(
+  event: AnyReplayEvent,
+): ReplayViewportDimensions | null {
+  if (event.type === RRWEB_EVENT_TYPE.Meta) {
+    return normalizeReplayDimensions(event.data?.width, event.data?.height);
+  }
+  if (
+    event.type === RRWEB_EVENT_TYPE.IncrementalSnapshot &&
+    event.data?.source === INCREMENTAL_SOURCE.ViewportResize
+  ) {
+    return normalizeReplayDimensions(event.data?.width, event.data?.height);
   }
   return null;
 }
 
-function normalizeReplayDimensions(
+/**
+ * Prefer a sane viewport for the stage. Returns null only when width/height
+ * are missing or non-positive. Out-of-range aspect ratios are clamped rather
+ * than rejected so genuine wide windows keep their height (and most of their
+ * width) instead of collapsing to the default 1024×640 fallback.
+ */
+export function normalizeReplayDimensions(
   width: unknown,
   height: unknown,
 ): ReplayViewportDimensions | null {
@@ -2033,9 +2239,114 @@ function normalizeReplayDimensions(
   ) {
     return null;
   }
+  return clampReplayViewport(width, height);
+}
+
+/**
+ * Clamp Meta / ViewportResize dimensions into a displayable aspect range.
+ * Multi-monitor spans and corrupt frames often report absurd widths; keep the
+ * captured height and shrink width (or vice versa) so the DOM still roughly
+ * matches the recorded layout.
+ */
+export function clampReplayViewport(
+  width: number,
+  height: number,
+): ReplayViewportDimensions {
+  let nextWidth = Math.max(MIN_REPLAY_VIEWPORT_WIDTH, Math.round(width));
+  let nextHeight = Math.max(MIN_REPLAY_VIEWPORT_HEIGHT, Math.round(height));
+  const aspect = nextWidth / nextHeight;
+  if (aspect > MAX_REPLAY_ASPECT_RATIO) {
+    nextWidth = Math.round(nextHeight * MAX_REPLAY_ASPECT_RATIO);
+  } else if (aspect < MIN_REPLAY_ASPECT_RATIO) {
+    nextHeight = Math.round(nextWidth / MIN_REPLAY_ASPECT_RATIO);
+  }
+  return { width: nextWidth, height: nextHeight };
+}
+
+export function filterReplayMarkers(
+  markers: ReplayMarker[],
+  query: string,
+): ReplayMarker[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return markers;
+  return markers.filter((marker) => {
+    const haystack = [
+      marker.label,
+      marker.detail,
+      marker.kind,
+      marker.severity,
+      ...(marker.fields?.flatMap((field) => [field.label, field.value]) ?? []),
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+    return haystack.includes(needle);
+  });
+}
+
+/**
+ * Rewrite Meta / ViewportResize frames so rrweb never applies absurd aspect
+ * ratios that collapse the stage into an ultra-wide ribbon. Prefer clamping
+ * the captured dimensions (preserve height, shrink width) over replacing them
+ * with the default fallback, which would misalign the recorded DOM.
+ */
+export function sanitizeReplayViewportEvents(
+  events: AnyReplayEvent[],
+  fallback: ReplayViewportDimensions,
+): AnyReplayEvent[] {
+  return events.map((event) => {
+    if (event.type === RRWEB_EVENT_TYPE.Meta && isRecord(event.data)) {
+      return rewriteViewportEventData(event, event.data, fallback);
+    }
+    if (
+      event.type === RRWEB_EVENT_TYPE.IncrementalSnapshot &&
+      event.data?.source === INCREMENTAL_SOURCE.ViewportResize &&
+      isRecord(event.data)
+    ) {
+      return rewriteViewportEventData(event, event.data, fallback);
+    }
+    return event;
+  });
+}
+
+function rewriteViewportEventData(
+  event: AnyReplayEvent,
+  data: AnyRecord,
+  fallback: ReplayViewportDimensions,
+): AnyReplayEvent {
+  const width = data.width;
+  const height = data.height;
+  if (
+    typeof width === "number" &&
+    typeof height === "number" &&
+    Number.isFinite(width) &&
+    Number.isFinite(height) &&
+    width > 0 &&
+    height > 0
+  ) {
+    const clamped = clampReplayViewport(width, height);
+    if (
+      clamped.width === Math.round(width) &&
+      clamped.height === Math.round(height)
+    ) {
+      return event;
+    }
+    return {
+      ...event,
+      data: {
+        ...data,
+        width: clamped.width,
+        height: clamped.height,
+      },
+    };
+  }
   return {
-    width: Math.round(width),
-    height: Math.round(height),
+    ...event,
+    data: {
+      ...data,
+      width: fallback.width,
+      height: fallback.height,
+    },
   };
 }