diff --git a/web/public/locales/en/views/explore.json b/web/public/locales/en/views/explore.json
index 3a0e7af00..787581bf7 100644
--- a/web/public/locales/en/views/explore.json
+++ b/web/public/locales/en/views/explore.json
@@ -33,6 +33,7 @@
   "type": {
     "details": "details",
     "snapshot": "snapshot",
+    "thumbnail": "thumbnail",
     "video": "video",
     "object_lifecycle": "object lifecycle"
   },
@@ -41,7 +42,7 @@
     "noImageFound": "No image found for this timestamp.",
     "createObjectMask": "Create Object Mask",
     "adjustAnnotationSettings": "Adjust annotation settings",
-    "scrollViewTips": "Scroll to view the significant moments of this object's lifecycle.",
+    "scrollViewTips": "Click to view the significant moments of this object's lifecycle.",
     "autoTrackingTips": "Bounding box positions will be inaccurate for autotracking cameras.",
     "count": "{{first}} of {{second}}",
     "trackedPoint": "Tracked Point",
diff --git a/web/src/components/overlay/ObjectTrackOverlay.tsx b/web/src/components/overlay/ObjectTrackOverlay.tsx
index f95cabf7a..ec51786b8 100644
--- a/web/src/components/overlay/ObjectTrackOverlay.tsx
+++ b/web/src/components/overlay/ObjectTrackOverlay.tsx
@@ -13,6 +13,9 @@ import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { Event } from "@/types/event";
 
+// Use a small tolerance (10ms) for browsers with seek precision by-design issues
+const TOLERANCE = 0.01;
+
 type ObjectTrackOverlayProps = {
   camera: string;
   showBoundingBoxes?: boolean;
@@ -166,41 +169,45 @@ export default function ObjectTrackOverlay({
             }) || [];
 
         // show full path once current time has reached the object's start time
-        const combinedPoints = [...savedPathPoints, ...eventSequencePoints]
-          .sort((a, b) => a.timestamp - b.timestamp)
-          .filter(
-            (point) =>
-              currentTime >= (eventData?.start_time ?? 0) &&
-              point.timestamp >= (eventData?.start_time ?? 0) &&
-              point.timestamp <= (eventData?.end_time ?? Infinity),
-          );
+        // event.start_time is in DETECT stream time, so convert it to record stream time for comparison
+        const eventStartTimeRecord =
+          (eventData?.start_time ?? 0) + annotationOffset / 1000;
+
+        const allPoints = [...savedPathPoints, ...eventSequencePoints].sort(
+          (a, b) => a.timestamp - b.timestamp,
+        );
+        const combinedPoints = allPoints.filter(
+          (point) =>
+            currentTime >= eventStartTimeRecord - TOLERANCE &&
+            point.timestamp <= effectiveCurrentTime + TOLERANCE,
+        );
 
         // Get color for this object
         const label = eventData?.label || "unknown";
         const color = getObjectColor(label, objectId);
 
-        // Get current zones
+        // zones (with tolerance for browsers with seek precision by-design issues)
         const currentZones =
           timelineData
             ?.filter(
               (event: TrackingDetailsSequence) =>
-                event.timestamp <= effectiveCurrentTime,
+                event.timestamp <= effectiveCurrentTime + TOLERANCE,
             )
             .sort(
               (a: TrackingDetailsSequence, b: TrackingDetailsSequence) =>
                 b.timestamp - a.timestamp,
             )[0]?.data?.zones || [];
 
-        // Get current bounding box
-        const currentBox = timelineData
-          ?.filter(
-            (event: TrackingDetailsSequence) =>
-              event.timestamp <= effectiveCurrentTime && event.data.box,
-          )
-          .sort(
-            (a: TrackingDetailsSequence, b: TrackingDetailsSequence) =>
-              b.timestamp - a.timestamp,
-          )[0]?.data?.box;
+        // bounding box (with tolerance for browsers with seek precision by-design issues)
+        const boxCandidates = timelineData?.filter(
+          (event: TrackingDetailsSequence) =>
+            event.timestamp <= effectiveCurrentTime + TOLERANCE &&
+            event.data.box,
+        );
+        const currentBox = boxCandidates?.sort(
+          (a: TrackingDetailsSequence, b: TrackingDetailsSequence) =>
+            b.timestamp - a.timestamp,
+        )[0]?.data?.box;
 
         return {
           objectId,
@@ -221,6 +228,7 @@ export default function ObjectTrackOverlay({
     getObjectColor,
     config,
     camera,
+    annotationOffset,
   ]);
 
   // Collect all zones across all objects
@@ -274,9 +282,10 @@ export default function ObjectTrackOverlay({
 
   const handlePointClick = useCallback(
     (timestamp: number) => {
-      onSeekToTime?.(timestamp, false);
+      // Convert detect stream timestamp to record stream timestamp before seeking
+      onSeekToTime?.(timestamp + annotationOffset / 1000, false);
     },
-    [onSeekToTime],
+    [onSeekToTime, annotationOffset],
   );
 
   const zonePolygons = useMemo(() => {
diff --git a/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx b/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
index 9f6b6efbd..4af982da5 100644
--- a/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
+++ b/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
@@ -91,8 +91,8 @@ export default function AnnotationOffsetSlider({ className }: Props) {
         <div className="w-full flex-1 landscape:flex">
           <Slider
             value={[annotationOffset]}
-            min={-1500}
-            max={1500}
+            min={-2500}
+            max={2500}
             step={50}
             onValueChange={handleChange}
           />
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
deleted file mode 100644
index 16050245c..000000000
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ /dev/null
@@ -1,577 +0,0 @@
-import { isDesktop, isIOS, isMobile } from "react-device-detect";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "../../ui/sheet";
-import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
-import { getIconForLabel } from "@/utils/iconUtil";
-import { useApiHost } from "@/api";
-import {
-  ReviewDetailPaneType,
-  ReviewSegment,
-  ThreatLevel,
-} from "@/types/review";
-import { Event } from "@/types/event";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
-import TrackingDetails from "./TrackingDetails";
-import Chip from "@/components/indicators/Chip";
-import { FaDownload, FaImages, FaShareAlt } from "react-icons/fa";
-import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
-import { FaArrowsRotate } from "react-icons/fa6";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { baseUrl } from "@/api/baseUrl";
-import { shareOrCopy } from "@/utils/browserUtil";
-import {
-  MobilePage,
-  MobilePageContent,
-  MobilePageDescription,
-  MobilePageHeader,
-  MobilePageTitle,
-} from "@/components/mobile/MobilePage";
-import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { LuSearch } from "react-icons/lu";
-import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { Trans, useTranslation } from "react-i18next";
-import { getTranslatedLabel } from "@/utils/i18n";
-import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
-
-type ReviewDetailDialogProps = {
-  review?: ReviewSegment;
-  setReview: (review: ReviewSegment | undefined) => void;
-};
-export default function ReviewDetailDialog({
-  review,
-  setReview,
-}: ReviewDetailDialogProps) {
-  const { t } = useTranslation(["views/explore"]);
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
-  const navigate = useNavigate();
-
-  // upload
-
-  const [upload, setUpload] = useState<Event>();
-
-  // data
-
-  const { data: events } = useSWR<Event[]>(
-    review ? ["event_ids", { ids: review.data.detections.join(",") }] : null,
-  );
-
-  const aiAnalysis = useMemo(() => review?.data?.metadata, [review]);
-
-  const aiThreatLevel = useMemo(() => {
-    if (
-      !aiAnalysis ||
-      (!aiAnalysis.potential_threat_level && !aiAnalysis.other_concerns)
-    ) {
-      return "None";
-    }
-
-    let concerns = "";
-    switch (aiAnalysis.potential_threat_level) {
-      case ThreatLevel.SUSPICIOUS:
-        concerns = `• ${t("suspiciousActivity", { ns: "views/events" })}\n`;
-        break;
-      case ThreatLevel.DANGER:
-        concerns = `• ${t("threateningActivity", { ns: "views/events" })}\n`;
-        break;
-    }
-
-    (aiAnalysis.other_concerns ?? []).forEach((c) => {
-      concerns += `• ${c}\n`;
-    });
-
-    return concerns || "None";
-  }, [aiAnalysis, t]);
-
-  const hasMismatch = useMemo(() => {
-    if (!review || !events) {
-      return false;
-    }
-
-    return events.length != review?.data.detections.length;
-  }, [review, events]);
-
-  const missingObjects = useMemo(() => {
-    if (!review || !events) {
-      return [];
-    }
-
-    const detectedIds = review.data.detections;
-    const missing = Array.from(
-      new Set(
-        events
-          .filter((event) => !detectedIds.includes(event.id))
-          .map((event) => event.label),
-      ),
-    );
-
-    return missing;
-  }, [review, events]);
-
-  const formattedDate = useFormattedTimestamp(
-    review?.start_time ?? 0,
-    config?.ui.time_format == "24hour"
-      ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
-          ns: "common",
-        })
-      : t("time.formattedTimestampMonthDayYearHourMinute.12hour", {
-          ns: "common",
-        }),
-    config?.ui.timezone,
-  );
-
-  // content
-
-  const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [pane, setPane] = useState<ReviewDetailPaneType>("overview");
-
-  // dialog and mobile page
-
-  const [isOpen, setIsOpen] = useState(review != undefined);
-
-  const handleOpenChange = useCallback(
-    (open: boolean) => {
-      setIsOpen(open);
-      if (!open) {
-        // short timeout to allow the mobile page animation
-        // to complete before updating the state
-        setTimeout(() => {
-          setReview(undefined);
-          setSelectedEvent(undefined);
-          setPane("overview");
-        }, 300);
-      }
-    },
-    [setReview, setIsOpen],
-  );
-
-  useEffect(() => {
-    setIsOpen(review != undefined);
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [review]);
-
-  // keyboard listener
-
-  useKeyboardListener(["Esc"], (key, modifiers) => {
-    if (key == "Esc" && modifiers.down && !modifiers.repeat) {
-      setIsOpen(false);
-    }
-
-    return true;
-  });
-
-  const Overlay = isDesktop ? Sheet : MobilePage;
-  const Content = isDesktop ? SheetContent : MobilePageContent;
-  const Header = isDesktop ? SheetHeader : MobilePageHeader;
-  const Title = isDesktop ? SheetTitle : MobilePageTitle;
-  const Description = isDesktop ? SheetDescription : MobilePageDescription;
-
-  if (!review) {
-    return;
-  }
-
-  return (
-    <>
-      <Overlay
-        open={isOpen ?? false}
-        onOpenChange={handleOpenChange}
-        enableHistoryBack={true}
-      >
-        <FrigatePlusDialog
-          upload={upload}
-          onClose={() => setUpload(undefined)}
-          onEventUploaded={() => {
-            if (upload) {
-              upload.plus_id = "new_upload";
-            }
-          }}
-        />
-
-        <Content
-          className={cn(
-            "scrollbar-container overflow-y-auto",
-            isDesktop && pane == "overview"
-              ? "sm:max-w-xl"
-              : "pt-2 sm:max-w-4xl",
-            isMobile && "px-4",
-          )}
-        >
-          <span tabIndex={0} className="sr-only" />
-          {pane == "overview" && (
-            <Header className="justify-center">
-              <Title>{t("details.item.title")}</Title>
-              <Description className="sr-only">
-                {t("details.item.desc")}
-              </Description>
-              <div
-                className={cn(
-                  "absolute flex gap-2 lg:flex-col",
-                  isDesktop && "right-1 top-8",
-                  isMobile && "right-0 top-3",
-                )}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      aria-label={t("details.item.button.share")}
-                      size="sm"
-                      onClick={() =>
-                        shareOrCopy(`${baseUrl}review?id=${review.id}`)
-                      }
-                    >
-                      <FaShareAlt className="size-4 text-secondary-foreground" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPortal>
-                    <TooltipContent>
-                      {t("details.item.button.share")}
-                    </TooltipContent>
-                  </TooltipPortal>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <DownloadVideoButton
-                      source={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`}
-                      camera={review.camera}
-                      startTime={review.start_time}
-                    />
-                  </TooltipTrigger>
-                  <TooltipPortal>
-                    <TooltipContent>
-                      {t("button.download", { ns: "common" })}
-                    </TooltipContent>
-                  </TooltipPortal>
-                </Tooltip>
-              </div>
-            </Header>
-          )}
-          {pane == "overview" && (
-            <div className="flex flex-col gap-5 md:mt-3">
-              {aiAnalysis != undefined && (
-                <div
-                  className={cn(
-                    "flex h-full w-full flex-col gap-2 rounded-md bg-card p-2",
-                    isDesktop && "m-2 w-[90%]",
-                  )}
-                >
-                  {t("aiAnalysis.title")}
-                  <div className="text-sm text-primary/40">
-                    {t("details.description.label")}
-                  </div>
-                  <div className="text-sm">{aiAnalysis.scene}</div>
-                  <div className="text-sm text-primary/40">
-                    {t("details.score.label")}
-                  </div>
-                  <div className="text-sm">{aiAnalysis.confidence * 100}%</div>
-                  <div className="text-sm text-primary/40">
-                    {t("concerns.label")}
-                  </div>
-                  <div className="text-sm">{aiThreatLevel}</div>
-                </div>
-              )}
-              <div className="flex w-full flex-row">
-                <div className="flex w-full flex-col gap-3">
-                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">
-                      {t("details.camera")}
-                    </div>
-                    <div className="text-sm smart-capitalize">
-                      <CameraNameLabel camera={review.camera} />
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">
-                      {t("details.timestamp")}
-                    </div>
-                    <div className="text-sm">{formattedDate}</div>
-                  </div>
-                </div>
-                <div className="flex w-full flex-col items-center gap-2">
-                  <div className="flex w-full flex-col gap-1.5 lg:pr-8">
-                    <div className="text-sm text-primary/40">
-                      {t("details.objects")}
-                    </div>
-                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm smart-capitalize">
-                      {events?.map((event) => {
-                        return (
-                          <div
-                            key={event.id}
-                            className="flex flex-row items-center gap-2 smart-capitalize"
-                          >
-                            {getIconForLabel(
-                              event.label,
-                              "size-3 text-primary",
-                            )}
-                            {event.sub_label ??
-                              event.label.replaceAll("_", " ")}{" "}
-                            ({Math.round(event.data.top_score * 100)}%)
-                            <Tooltip>
-                              <TooltipTrigger>
-                                <div
-                                  className="cursor-pointer"
-                                  onClick={() => {
-                                    navigate(`/explore?event_id=${event.id}`);
-                                  }}
-                                >
-                                  <LuSearch className="size-4 text-muted-foreground" />
-                                </div>
-                              </TooltipTrigger>
-                              <TooltipPortal>
-                                <TooltipContent>
-                                  {t("details.item.button.viewInExplore")}
-                                </TooltipContent>
-                              </TooltipPortal>
-                            </Tooltip>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                  {review.data.zones.length > 0 && (
-                    <div className="scrollbar-container flex max-h-32 w-full flex-col gap-1.5">
-                      <div className="text-sm text-primary/40">
-                        {t("details.zones")}
-                      </div>
-                      <div className="flex flex-col items-start gap-2 text-sm smart-capitalize">
-                        {review.data.zones.map((zone) => {
-                          return (
-                            <div
-                              key={zone}
-                              className="flex flex-row items-center gap-2 smart-capitalize"
-                            >
-                              {zone.replaceAll("_", " ")}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-              {hasMismatch && (
-                <div className="p-4 text-center text-sm">
-                  {(() => {
-                    const detectedCount = Math.abs(
-                      (events?.length ?? 0) -
-                        (review?.data.detections.length ?? 0),
-                    );
-
-                    return t("details.item.tips.mismatch", {
-                      count: detectedCount,
-                    });
-                  })()}
-                  {missingObjects.length > 0 && (
-                    <div className="mt-2">
-                      <Trans
-                        ns="views/explore"
-                        values={{
-                          objects: missingObjects
-                            .map((x) => getTranslatedLabel(x))
-                            .join(", "),
-                        }}
-                      >
-                        details.item.tips.hasMissingObjects
-                      </Trans>
-                    </div>
-                  )}
-                </div>
-              )}
-              <div className="relative flex size-full flex-col gap-2">
-                {events?.map((event) => (
-                  <EventItem
-                    key={event.id}
-                    event={event}
-                    setPane={setPane}
-                    setSelectedEvent={setSelectedEvent}
-                    setUpload={setUpload}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {pane == "details" && selectedEvent && (
-            <div className="mt-0 flex size-full flex-col gap-2">
-              <TrackingDetails event={selectedEvent} setPane={setPane} />
-            </div>
-          )}
-        </Content>
-      </Overlay>
-    </>
-  );
-}
-
-type EventItemProps = {
-  event: Event;
-  setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
-  setSelectedEvent: React.Dispatch<React.SetStateAction<Event | undefined>>;
-  setUpload?: React.Dispatch<React.SetStateAction<Event | undefined>>;
-};
-
-function EventItem({
-  event,
-  setPane,
-  setSelectedEvent,
-  setUpload,
-}: EventItemProps) {
-  const { t } = useTranslation(["views/explore"]);
-
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
-  const apiHost = useApiHost();
-
-  const imgRef = useRef(null);
-
-  const [hovered, setHovered] = useState(isMobile);
-
-  const navigate = useNavigate();
-
-  return (
-    <>
-      <div
-        className={cn(
-          "relative mr-auto",
-          !event.has_snapshot && "flex flex-row items-center justify-center",
-        )}
-        onMouseEnter={isDesktop ? () => setHovered(true) : undefined}
-        onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
-        key={event.id}
-      >
-        {event.has_snapshot && (
-          <>
-            <div className="pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
-          </>
-        )}
-        <img
-          ref={imgRef}
-          className={cn(
-            "select-none rounded-lg object-contain transition-opacity",
-          )}
-          style={
-            isIOS
-              ? {
-                  WebkitUserSelect: "none",
-                  WebkitTouchCallout: "none",
-                }
-              : undefined
-          }
-          draggable={false}
-          src={
-            event.has_snapshot
-              ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-              : `${apiHost}api/events/${event.id}/thumbnail.webp`
-          }
-        />
-        {hovered && (
-          <div>
-            <div
-              className={cn("absolute right-1 top-1 flex items-center gap-2")}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <a
-                    download
-                    href={
-                      event.has_snapshot
-                        ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-                        : `${apiHost}api/events/${event.id}/thumbnail.webp`
-                    }
-                  >
-                    <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
-                      <FaDownload className="size-4 text-white" />
-                    </Chip>
-                  </a>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t("button.download", { ns: "common" })}
-                </TooltipContent>
-              </Tooltip>
-
-              {event.has_snapshot &&
-                event.plus_id == undefined &&
-                event.data.type == "object" &&
-                config?.plus.enabled && (
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Chip
-                        className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                        onClick={() => {
-                          setUpload?.(event);
-                        }}
-                      >
-                        <FrigatePlusIcon className="size-4 text-white" />
-                      </Chip>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {t("itemMenu.submitToPlus.label")}
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-
-              {event.has_clip && (
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Chip
-                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                      onClick={() => {
-                        setPane("details");
-                        setSelectedEvent(event);
-                      }}
-                    >
-                      <FaArrowsRotate className="size-4 text-white" />
-                    </Chip>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("itemMenu.viewTrackingDetails.label")}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {event.has_snapshot && config?.semantic_search.enabled && (
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Chip
-                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                      onClick={() => {
-                        navigate(
-                          `/explore?search_type=similarity&event_id=${event.id}`,
-                        );
-                      }}
-                    >
-                      <FaImages className="size-4 text-white" />
-                    </Chip>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("itemMenu.findSimilar.label")}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 0c0339793..ee63a0c50 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -31,10 +31,9 @@ import {
   FaDownload,
   FaHistory,
   FaImage,
-  FaRegListAlt,
-  FaVideo,
 } from "react-icons/fa";
-import TrackingDetails from "./TrackingDetails";
+import { TrackingDetails } from "./TrackingDetails";
+import { DetailStreamProvider } from "@/context/detail-stream-context";
 import {
   MobilePage,
   MobilePageContent,
@@ -80,13 +79,9 @@ import { getTranslatedLabel } from "@/utils/i18n";
 import { CgTranscript } from "react-icons/cg";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
 import { PiPath } from "react-icons/pi";
+import Heading from "@/components/ui/heading";
 
-const SEARCH_TABS = [
-  "details",
-  "snapshot",
-  "video",
-  "tracking_details",
-] as const;
+const SEARCH_TABS = ["snapshot", "tracking_details"] as const;
 export type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
@@ -109,6 +104,7 @@ export default function SearchDetailDialog({
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+  const apiHost = useApiHost();
 
   // tabs
 
@@ -149,16 +145,6 @@ export default function SearchDetailDialog({
 
     const views = [...SEARCH_TABS];
 
-    if (!search.has_snapshot) {
-      const index = views.indexOf("snapshot");
-      views.splice(index, 1);
-    }
-
-    if (!search.has_clip) {
-      const index = views.indexOf("video");
-      views.splice(index, 1);
-    }
-
     if (search.data.type != "object" || !search.has_clip) {
       const index = views.indexOf("tracking_details");
       views.splice(index, 1);
@@ -173,10 +159,50 @@ export default function SearchDetailDialog({
     }
 
     if (!searchTabs.includes(pageToggle)) {
-      setSearchPage("details");
+      setSearchPage("snapshot");
     }
   }, [pageToggle, searchTabs, setSearchPage]);
 
+  // Tabs component for reuse
+  const tabsComponent = (
+    <ScrollArea className="w-full whitespace-nowrap">
+      <div className="flex flex-row">
+        <ToggleGroup
+          className="*:rounded-md *:px-3 *:py-4"
+          type="single"
+          size="sm"
+          value={pageToggle}
+          onValueChange={(value: SearchTab) => {
+            if (value) {
+              setPageToggle(value);
+            }
+          }}
+        >
+          {Object.values(searchTabs).map((item) => (
+            <ToggleGroupItem
+              key={item}
+              className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+              value={item}
+              data-nav-item={item}
+              aria-label={`Select ${item}`}
+            >
+              {item == "snapshot" && <FaImage className="size-4" />}
+              {item == "tracking_details" && <PiPath className="size-4" />}
+              <div className="smart-capitalize">
+                {item === "snapshot"
+                  ? search?.has_snapshot
+                    ? t("type.snapshot")
+                    : t("type.thumbnail")
+                  : t(`type.${item}`)}
+              </div>
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+        <ScrollBar orientation="horizontal" className="h-0" />
+      </div>
+    </ScrollArea>
+  );
+
   if (!search) {
     return;
   }
@@ -190,92 +216,188 @@ export default function SearchDetailDialog({
   const Description = isDesktop ? DialogDescription : MobilePageDescription;
 
   return (
-    <Overlay
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      enableHistoryBack={true}
+    <DetailStreamProvider
+      isDetailMode={true}
+      currentTime={(search as unknown as Event)?.start_time ?? 0}
+      camera={(search as unknown as Event)?.camera ?? ""}
+      initialSelectedObjectIds={[(search as unknown as Event).id as string]}
     >
-      <Content
-        className={cn(
-          "scrollbar-container overflow-y-auto",
-          isDesktop &&
-            "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
-          isMobile && "px-4",
-        )}
+      <Overlay
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        enableHistoryBack={true}
       >
-        <Header>
-          <Title>{t("trackedObjectDetails")}</Title>
-          <Description className="sr-only">
-            {t("trackedObjectDetails")}
-          </Description>
-        </Header>
-        <ScrollArea
-          className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
+        <Content
+          className={cn(
+            "scrollbar-container overflow-y-auto",
+            isDesktop &&
+              "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
+            isDesktop &&
+              page == "tracking_details" &&
+              "lg:max-w-[75%] xl:max-w-[80%]",
+            isMobile && "px-4",
+          )}
         >
-          <div className="flex flex-row">
-            <ToggleGroup
-              className="*:rounded-md *:px-3 *:py-4"
-              type="single"
-              size="sm"
-              value={pageToggle}
-              onValueChange={(value: SearchTab) => {
-                if (value) {
-                  setPageToggle(value);
-                }
-              }}
-            >
-              {Object.values(searchTabs).map((item) => (
-                <ToggleGroupItem
-                  key={item}
-                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "details" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
-                  value={item}
-                  data-nav-item={item}
-                  aria-label={`Select ${item}`}
+          <Header>
+            <Title>{t("trackedObjectDetails")}</Title>
+            <Description className="sr-only">
+              {t("trackedObjectDetails")}
+            </Description>
+          </Header>
+          {isDesktop ? (
+            page === "tracking_details" ? (
+              <TrackingDetails
+                className="size-full"
+                event={search as unknown as Event}
+                tabs={tabsComponent}
+              />
+            ) : (
+              <div className="flex h-full gap-4 overflow-hidden">
+                <div
+                  className={cn(
+                    "scrollbar-container flex-[3] overflow-y-hidden",
+                    page === "snapshot" && !search.has_snapshot && "flex-[2]",
+                  )}
                 >
-                  {item == "details" && <FaRegListAlt className="size-4" />}
-                  {item == "snapshot" && <FaImage className="size-4" />}
-                  {item == "video" && <FaVideo className="size-4" />}
-                  {item == "tracking_details" && <PiPath className="size-4" />}
-                  <div className="smart-capitalize">{t(`type.${item}`)}</div>
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-            <ScrollBar orientation="horizontal" className="h-0" />
-          </div>
-        </ScrollArea>
-        {page == "details" && (
-          <ObjectDetailsTab
-            search={search}
-            config={config}
-            setSearch={setSearch}
-            setSimilarity={setSimilarity}
-            setInputFocused={setInputFocused}
-          />
-        )}
-        {page == "snapshot" && (
-          <ObjectSnapshotTab
-            search={
-              {
-                ...search,
-                plus_id: config?.plus?.enabled ? search.plus_id : "not_enabled",
-              } as unknown as Event
-            }
-            onEventUploaded={() => {
-              search.plus_id = "new_upload";
-            }}
-          />
-        )}
-        {page == "video" && <VideoTab search={search} />}
-        {page == "tracking_details" && (
-          <TrackingDetails
-            className="w-full overflow-x-hidden"
-            event={search as unknown as Event}
-            fullscreen={true}
-            setPane={() => {}}
-          />
-        )}
-      </Content>
-    </Overlay>
+                  {page === "snapshot" && search.has_snapshot && (
+                    <ObjectSnapshotTab
+                      search={
+                        {
+                          ...search,
+                          plus_id: config?.plus?.enabled
+                            ? search.plus_id
+                            : "not_enabled",
+                        } as unknown as Event
+                      }
+                      onEventUploaded={() => {
+                        search.plus_id = "new_upload";
+                      }}
+                    />
+                  )}
+                  {page === "snapshot" && !search.has_snapshot && (
+                    <img
+                      className="size-full select-none rounded-lg object-contain transition-opacity"
+                      style={
+                        isIOS
+                          ? {
+                              WebkitUserSelect: "none",
+                              WebkitTouchCallout: "none",
+                            }
+                          : undefined
+                      }
+                      draggable={false}
+                      src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
+                    />
+                  )}
+                </div>
+                <div className="flex flex-[2] flex-col gap-4 overflow-hidden">
+                  {tabsComponent}
+                  <div className="scrollbar-container flex-1 overflow-y-auto">
+                    {page == "snapshot" && (
+                      <ObjectDetailsTab
+                        search={search}
+                        config={config}
+                        setSearch={setSearch}
+                        setSimilarity={setSimilarity}
+                        setInputFocused={setInputFocused}
+                        showThumbnail={false}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          ) : (
+            <>
+              <ScrollArea
+                className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
+              >
+                <div className="flex flex-row">
+                  <ToggleGroup
+                    className="*:rounded-md *:px-3 *:py-4"
+                    type="single"
+                    size="sm"
+                    value={pageToggle}
+                    onValueChange={(value: SearchTab) => {
+                      if (value) {
+                        setPageToggle(value);
+                      }
+                    }}
+                  >
+                    {Object.values(searchTabs).map((item) => (
+                      <ToggleGroupItem
+                        key={item}
+                        className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                        value={item}
+                        data-nav-item={item}
+                        aria-label={`Select ${item}`}
+                      >
+                        {item == "snapshot" && <FaImage className="size-4" />}
+                        {item == "tracking_details" && (
+                          <PiPath className="size-4" />
+                        )}
+                        <div className="smart-capitalize">
+                          {t(`type.${item}`)}
+                        </div>
+                      </ToggleGroupItem>
+                    ))}
+                  </ToggleGroup>
+                  <ScrollBar orientation="horizontal" className="h-0" />
+                </div>
+              </ScrollArea>
+              {page == "snapshot" && (
+                <>
+                  {search.has_snapshot && (
+                    <ObjectSnapshotTab
+                      search={
+                        {
+                          ...search,
+                          plus_id: config?.plus?.enabled
+                            ? search.plus_id
+                            : "not_enabled",
+                        } as unknown as Event
+                      }
+                      onEventUploaded={() => {
+                        search.plus_id = "new_upload";
+                      }}
+                    />
+                  )}
+                  {page == "snapshot" && !search.has_snapshot && (
+                    <img
+                      className="w-full select-none rounded-lg object-contain transition-opacity"
+                      style={
+                        isIOS
+                          ? {
+                              WebkitUserSelect: "none",
+                              WebkitTouchCallout: "none",
+                            }
+                          : undefined
+                      }
+                      draggable={false}
+                      src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
+                    />
+                  )}
+                  <Heading as="h3" className="mt-2 smart-capitalize">
+                    {t("type.details")}
+                  </Heading>
+                  <ObjectDetailsTab
+                    search={search}
+                    config={config}
+                    setSearch={setSearch}
+                    setSimilarity={setSimilarity}
+                    setInputFocused={setInputFocused}
+                    showThumbnail={false}
+                  />
+                </>
+              )}
+              {page == "tracking_details" && (
+                <TrackingDetails event={search as unknown as Event} />
+              )}
+            </>
+          )}
+        </Content>
+      </Overlay>
+    </DetailStreamProvider>
   );
 }
 
@@ -285,6 +407,7 @@ type ObjectDetailsTabProps = {
   setSearch: (search: SearchResult | undefined) => void;
   setSimilarity?: () => void;
   setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
+  showThumbnail?: boolean;
 };
 function ObjectDetailsTab({
   search,
@@ -292,6 +415,7 @@ function ObjectDetailsTab({
   setSearch,
   setSimilarity,
   setInputFocused,
+  showThumbnail = true,
 }: ObjectDetailsTabProps) {
   const { t } = useTranslation(["views/explore", "views/faceLibrary"]);
 
@@ -873,66 +997,71 @@ function ObjectDetailsTab({
             <div className="text-sm">{formattedDate}</div>
           </div>
         </div>
-        <div className="flex w-full flex-col gap-2 pl-6">
-          <img
-            className="aspect-video select-none rounded-lg object-contain transition-opacity"
-            style={
-              isIOS
-                ? {
-                    WebkitUserSelect: "none",
-                    WebkitTouchCallout: "none",
-                  }
-                : undefined
-            }
-            draggable={false}
-            src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
-          />
-          <div
-            className={cn("flex w-full flex-row gap-2", isMobile && "flex-col")}
-          >
-            {config?.semantic_search.enabled &&
-              setSimilarity != undefined &&
-              search.data.type == "object" && (
-                <Button
+        {showThumbnail && (
+          <div className="flex w-full flex-col gap-2 pl-6">
+            <img
+              className="aspect-video select-none rounded-lg object-contain transition-opacity"
+              style={
+                isIOS
+                  ? {
+                      WebkitUserSelect: "none",
+                      WebkitTouchCallout: "none",
+                    }
+                  : undefined
+              }
+              draggable={false}
+              src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
+            />
+            <div
+              className={cn(
+                "flex w-full flex-row gap-2",
+                isMobile && "flex-col",
+              )}
+            >
+              {config?.semantic_search.enabled &&
+                setSimilarity != undefined &&
+                search.data.type == "object" && (
+                  <Button
+                    className="w-full"
+                    aria-label={t("itemMenu.findSimilar.aria")}
+                    onClick={() => {
+                      setSearch(undefined);
+                      setSimilarity();
+                    }}
+                  >
+                    <div className="flex gap-1">
+                      <LuSearch />
+                      {t("itemMenu.findSimilar.label")}
+                    </div>
+                  </Button>
+                )}
+              {hasFace && (
+                <FaceSelectionDialog
                   className="w-full"
-                  aria-label={t("itemMenu.findSimilar.aria")}
-                  onClick={() => {
-                    setSearch(undefined);
-                    setSimilarity();
-                  }}
+                  faceNames={faceNames}
+                  onTrainAttempt={onTrainFace}
                 >
-                  <div className="flex gap-1">
-                    <LuSearch />
-                    {t("itemMenu.findSimilar.label")}
-                  </div>
-                </Button>
-              )}
-            {hasFace && (
-              <FaceSelectionDialog
-                className="w-full"
-                faceNames={faceNames}
-                onTrainAttempt={onTrainFace}
-              >
-                <Button className="w-full">
-                  <div className="flex gap-1">
-                    <TbFaceId />
-                    {t("trainFace", { ns: "views/faceLibrary" })}
-                  </div>
-                </Button>
-              </FaceSelectionDialog>
-            )}
-            {config?.cameras[search?.camera].audio_transcription.enabled &&
-              search?.label == "speech" &&
-              search?.end_time && (
-                <Button className="w-full" onClick={onTranscribe}>
-                  <div className="flex gap-1">
-                    <CgTranscript />
-                    {t("itemMenu.audioTranscription.label")}
-                  </div>
-                </Button>
+                  <Button className="w-full">
+                    <div className="flex gap-1">
+                      <TbFaceId />
+                      {t("trainFace", { ns: "views/faceLibrary" })}
+                    </div>
+                  </Button>
+                </FaceSelectionDialog>
               )}
+              {config?.cameras[search?.camera].audio_transcription.enabled &&
+                search?.label == "speech" &&
+                search?.end_time && (
+                  <Button className="w-full" onClick={onTranscribe}>
+                    <div className="flex gap-1">
+                      <CgTranscript />
+                      {t("itemMenu.audioTranscription.label")}
+                    </div>
+                  </Button>
+                )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <div className="flex flex-col gap-1.5">
         {config?.cameras[search.camera].objects.genai.enabled &&
@@ -1167,7 +1296,7 @@ export function ObjectSnapshotTab({
               search.label != "on_demand" && (
                 <Card className="p-1 text-sm md:p-2">
                   <CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
-                    <div className={cn("flex flex-col space-y-3")}>
+                    <div className={cn("flex max-w-sm flex-col space-y-3")}>
                       <div className={"text-lg leading-none"}>
                         {t("explore.plus.submitToPlus.label")}
                       </div>
@@ -1176,7 +1305,7 @@ export function ObjectSnapshotTab({
                       </div>
                     </div>
 
-                    <div className="flex w-full flex-1 flex-col justify-center gap-2 md:ml-8 md:w-auto md:justify-end">
+                    <div className="flex w-full flex-1 flex-col justify-center gap-2 md:ml-8 md:flex-1 md:justify-end">
                       {state == "reviewing" && (
                         <>
                           <div>
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 77dce19e9..82fb14771 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -5,29 +5,11 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import { TrackingDetailsSequence } from "@/types/timeline";
 import Heading from "@/components/ui/heading";
-import { ReviewDetailPaneType } from "@/types/review";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { getIconForLabel } from "@/utils/iconUtil";
-import {
-  LuCircle,
-  LuCircleDot,
-  LuEar,
-  LuFolderX,
-  LuPlay,
-  LuSettings,
-  LuTruck,
-} from "react-icons/lu";
-import { IoMdArrowRoundBack, IoMdExit } from "react-icons/io";
-import {
-  MdFaceUnlock,
-  MdOutlineLocationOn,
-  MdOutlinePictureInPictureAlt,
-} from "react-icons/md";
+import { LuCircle, LuSettings } from "react-icons/lu";
 import { cn } from "@/lib/utils";
-import { useApiHost } from "@/api";
-import { isDesktop, isIOS, isSafari } from "react-device-detect";
-import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
 import {
   Tooltip,
   TooltipContent,
@@ -35,12 +17,10 @@ import {
 } from "@/components/ui/tooltip";
 import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
+import { baseUrl } from "@/api/baseUrl";
+import { REVIEW_PADDING } from "@/types/review";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -49,30 +29,40 @@ import {
   DropdownMenuPortal,
 } from "@/components/ui/dropdown-menu";
 import { Link, useNavigate } from "react-router-dom";
-import { ObjectPath } from "./ObjectPath";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
-import { IoPlayCircleOutline } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { Badge } from "@/components/ui/badge";
 import { HiDotsHorizontal } from "react-icons/hi";
 import axios from "axios";
 import { toast } from "sonner";
+import { useDetailStream } from "@/context/detail-stream-context";
+import { isDesktop, isIOS } from "react-device-detect";
+import Chip from "@/components/indicators/Chip";
+import { FaDownload, FaHistory } from "react-icons/fa";
 
 type TrackingDetailsProps = {
   className?: string;
   event: Event;
   fullscreen?: boolean;
-  setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
+  tabs?: React.ReactNode;
 };
 
-export default function TrackingDetails({
+export function TrackingDetails({
   className,
   event,
-  fullscreen = false,
-  setPane,
+  tabs,
 }: TrackingDetailsProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
   const { t } = useTranslation(["views/explore"]);
+  const navigate = useNavigate();
+  const { setSelectedObjectIds, annotationOffset, setAnnotationOffset } =
+    useDetailStream();
+
+  // event.start_time is detect time, convert to record, then subtract padding
+  const [currentTime, setCurrentTime] = useState(
+    (event.start_time ?? 0) + annotationOffset / 1000 - REVIEW_PADDING,
+  );
 
   const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([
     "timeline",
@@ -82,16 +72,17 @@ export default function TrackingDetails({
   ]);
 
   const { data: config } = useSWR<FrigateConfig>("config");
-  const apiHost = useApiHost();
-  const navigate = useNavigate();
 
-  const [imgLoaded, setImgLoaded] = useState(false);
-  const imgRef = useRef<HTMLImageElement>(null);
+  const effectiveTime = useMemo(() => {
+    return currentTime - annotationOffset / 1000;
+  }, [currentTime, annotationOffset]);
 
-  const [selectedZone, setSelectedZone] = useState("");
-  const [lifecycleZones, setLifecycleZones] = useState<string[]>([]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [_selectedZone, setSelectedZone] = useState("");
+  const [_lifecycleZones, setLifecycleZones] = useState<string[]>([]);
   const [showControls, setShowControls] = useState(false);
   const [showZones, setShowZones] = useState(true);
+  const [seekToTimestamp, setSeekToTimestamp] = useState<number | null>(null);
 
   const aspectRatio = useMemo(() => {
     if (!config) {
@@ -120,178 +111,27 @@ export default function TrackingDetails({
     [config, event],
   );
 
-  const getObjectColor = useCallback(
-    (label: string) => {
-      const objectColor = config?.model?.colormap[label];
-      if (objectColor) {
-        const reversed = [...objectColor].reverse();
-        return reversed;
-      }
-    },
-    [config],
-  );
-
-  const getZonePolygon = useCallback(
-    (zoneName: string) => {
-      if (!imgRef.current || !config) {
-        return;
-      }
-      const zonePoints =
-        config?.cameras[event.camera].zones[zoneName].coordinates;
-      const imgElement = imgRef.current;
-      const imgRect = imgElement.getBoundingClientRect();
-
-      return zonePoints
-        .split(",")
-        .map(Number.parseFloat)
-        .reduce((acc, value, index) => {
-          const isXCoordinate = index % 2 === 0;
-          const coordinate = isXCoordinate
-            ? value * imgRect.width
-            : value * imgRect.height;
-          acc.push(coordinate);
-          return acc;
-        }, [] as number[])
-        .join(",");
-    },
-    [config, imgRef, event],
-  );
-
-  const [boxStyle, setBoxStyle] = useState<React.CSSProperties | null>(null);
-  const [attributeBoxStyle, setAttributeBoxStyle] =
-    useState<React.CSSProperties | null>(null);
-
-  const configAnnotationOffset = useMemo(() => {
-    if (!config) {
-      return 0;
-    }
-
-    return config.cameras[event.camera]?.detect?.annotation_offset || 0;
-  }, [config, event]);
-
-  const [annotationOffset, setAnnotationOffset] = useState<number>(
-    configAnnotationOffset,
-  );
-
-  const savedPathPoints = useMemo(() => {
-    return (
-      event.data.path_data?.map(([coords, timestamp]: [number[], number]) => ({
-        x: coords[0],
-        y: coords[1],
-        timestamp,
-        lifecycle_item: undefined,
-      })) || []
-    );
-  }, [event.data.path_data]);
-
-  const eventSequencePoints = useMemo(() => {
-    return (
-      eventSequence
-        ?.filter((event) => event.data.box !== undefined)
-        .map((event) => {
-          const [left, top, width, height] = event.data.box!;
-
-          return {
-            x: left + width / 2, // Center x-coordinate
-            y: top + height, // Bottom y-coordinate
-            timestamp: event.timestamp,
-            lifecycle_item: event,
-          };
-        }) || []
-    );
-  }, [eventSequence]);
-
-  // final object path with timeline points included
-  const pathPoints = useMemo(() => {
-    // don't display a path if we don't have any saved path points
-    if (
-      savedPathPoints.length === 0 ||
-      config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config
-    )
-      return [];
-    return [...savedPathPoints, ...eventSequencePoints].sort(
-      (a, b) => a.timestamp - b.timestamp,
-    );
-  }, [savedPathPoints, eventSequencePoints, config, event]);
-
-  const [timeIndex, setTimeIndex] = useState(0);
-
-  const handleSetBox = useCallback(
-    (box: number[], attrBox: number[] | undefined) => {
-      if (imgRef.current && Array.isArray(box) && box.length === 4) {
-        const imgElement = imgRef.current;
-        const imgRect = imgElement.getBoundingClientRect();
-
-        const style = {
-          left: `${box[0] * imgRect.width}px`,
-          top: `${box[1] * imgRect.height}px`,
-          width: `${box[2] * imgRect.width}px`,
-          height: `${box[3] * imgRect.height}px`,
-          borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
-        };
-
-        if (attrBox) {
-          const attrStyle = {
-            left: `${attrBox[0] * imgRect.width}px`,
-            top: `${attrBox[1] * imgRect.height}px`,
-            width: `${attrBox[2] * imgRect.width}px`,
-            height: `${attrBox[3] * imgRect.height}px`,
-            borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
-          };
-          setAttributeBoxStyle(attrStyle);
-        } else {
-          setAttributeBoxStyle(null);
-        }
-
-        setBoxStyle(style);
-      }
-    },
-    [imgRef, event, getObjectColor],
-  );
-
-  // image
-
-  const [src, setSrc] = useState(
-    `${apiHost}api/${event.camera}/recordings/${event.start_time + annotationOffset / 1000}/snapshot.jpg?height=500`,
-  );
-  const [hasError, setHasError] = useState(false);
-
+  // Set the selected object ID in the context so ObjectTrackOverlay can display it
   useEffect(() => {
-    if (timeIndex) {
-      const newSrc = `${apiHost}api/${event.camera}/recordings/${timeIndex + annotationOffset / 1000}/snapshot.jpg?height=500`;
-      setSrc(newSrc);
-    }
-    setImgLoaded(false);
-    setHasError(false);
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeIndex, annotationOffset]);
+    setSelectedObjectIds([event.id]);
+  }, [event.id, setSelectedObjectIds]);
 
-  // carousels
+  const handleLifecycleClick = useCallback(
+    (item: TrackingDetailsSequence) => {
+      if (!videoRef.current) return;
 
-  // Selected lifecycle item index; -1 when viewing a path-only point
+      // Convert lifecycle timestamp (detect stream) to record stream time
+      const targetTimeRecord = item.timestamp + annotationOffset / 1000;
 
-  const handlePathPointClick = useCallback(
-    (index: number) => {
-      if (!eventSequence) return;
-      const sequenceIndex = eventSequence.findIndex(
-        (item) => item.timestamp === pathPoints[index].timestamp,
-      );
-      if (sequenceIndex !== -1) {
-        setTimeIndex(eventSequence[sequenceIndex].timestamp);
-        handleSetBox(
-          eventSequence[sequenceIndex]?.data.box ?? [],
-          eventSequence[sequenceIndex]?.data?.attribute_box,
-        );
-        setLifecycleZones(eventSequence[sequenceIndex]?.data.zones);
-      } else {
-        // click on a normal path point, not a lifecycle point
-        setTimeIndex(pathPoints[index].timestamp);
-        setBoxStyle(null);
-        setLifecycleZones([]);
-      }
+      // Convert to video-relative time for seeking
+      const eventStartRecord =
+        (event.start_time ?? 0) + annotationOffset / 1000;
+      const videoStartTime = eventStartRecord - REVIEW_PADDING;
+      const relativeTime = targetTimeRecord - videoStartTime;
+
+      videoRef.current.currentTime = relativeTime;
     },
-    [eventSequence, pathPoints, handleSetBox],
+    [event.start_time, annotationOffset],
   );
 
   const formattedStart = config
@@ -328,53 +168,38 @@ export default function TrackingDetails({
 
   useEffect(() => {
     if (!eventSequence || eventSequence.length === 0) return;
-    // If timeIndex hasn't been set to a non-zero value, prefer the first lifecycle timestamp
-    if (!timeIndex) {
-      setTimeIndex(eventSequence[0].timestamp);
-      handleSetBox(
-        eventSequence[0]?.data.box ?? [],
-        eventSequence[0]?.data?.attribute_box,
-      );
-      setLifecycleZones(eventSequence[0]?.data.zones);
-    }
-  }, [eventSequence, timeIndex, handleSetBox]);
+    setLifecycleZones(eventSequence[0]?.data.zones);
+  }, [eventSequence]);
 
-  // When timeIndex changes or image finishes loading, sync the box/zones to matching lifecycle, else clear
   useEffect(() => {
-    if (!eventSequence || timeIndex == null) return;
-    const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
-    if (idx !== -1) {
-      if (imgLoaded) {
-        handleSetBox(
-          eventSequence[idx]?.data.box ?? [],
-          eventSequence[idx]?.data?.attribute_box,
-        );
-      }
-      setLifecycleZones(eventSequence[idx]?.data.zones);
-    } else {
-      // Non-lifecycle point (e.g., saved path point)
-      setBoxStyle(null);
-      setLifecycleZones([]);
+    if (seekToTimestamp === null || !videoRef.current) return;
+
+    // seekToTimestamp is a record stream timestamp
+    // event.start_time is detect stream time, convert to record
+    // The video clip starts at (eventStartRecord - REVIEW_PADDING)
+    const eventStartRecord = event.start_time + annotationOffset / 1000;
+    const videoStartTime = eventStartRecord - REVIEW_PADDING;
+    const relativeTime = seekToTimestamp - videoStartTime;
+    if (relativeTime >= 0) {
+      videoRef.current.currentTime = relativeTime;
     }
-  }, [timeIndex, imgLoaded, eventSequence, handleSetBox]);
+    setSeekToTimestamp(null);
+  }, [seekToTimestamp, event.start_time, annotationOffset]);
 
-  const selectedLifecycle = useMemo(() => {
-    if (!eventSequence || eventSequence.length === 0) return undefined;
-    const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
-    return idx !== -1 ? eventSequence[idx] : eventSequence[0];
-  }, [eventSequence, timeIndex]);
+  const isWithinEventRange =
+    effectiveTime !== undefined &&
+    event.start_time !== undefined &&
+    event.end_time !== undefined &&
+    effectiveTime >= event.start_time &&
+    effectiveTime <= event.end_time;
 
-  const selectedIndex = useMemo(() => {
-    if (!eventSequence || eventSequence.length === 0) return 0;
-    const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
-    return idx === -1 ? 0 : idx;
-  }, [eventSequence, timeIndex]);
+  // Calculate how far down the blue line should extend based on effectiveTime
+  const calculateLineHeight = useCallback(() => {
+    if (!eventSequence || eventSequence.length === 0 || !isWithinEventRange) {
+      return 0;
+    }
 
-  // Calculate how far down the blue line should extend based on timeIndex
-  const calculateLineHeight = () => {
-    if (!eventSequence || eventSequence.length === 0) return 0;
-
-    const currentTime = timeIndex ?? 0;
+    const currentTime = effectiveTime ?? 0;
 
     // Find which events have been passed
     let lastPassedIndex = -1;
@@ -412,352 +237,356 @@ export default function TrackingDetails({
       100,
       lastPassedIndex * itemPercentage + interpolation * itemPercentage,
     );
-  };
+  }, [eventSequence, effectiveTime, isWithinEventRange]);
 
   const blueLineHeight = calculateLineHeight();
 
+  const videoSource = useMemo(() => {
+    // event.start_time and event.end_time are in DETECT stream time
+    // Convert to record stream time, then create video clip with padding
+    const eventStartRecord = event.start_time + annotationOffset / 1000;
+    const eventEndRecord =
+      (event.end_time ?? Date.now() / 1000) + annotationOffset / 1000;
+    const startTime = eventStartRecord - REVIEW_PADDING;
+    const endTime = eventEndRecord + REVIEW_PADDING;
+    const playlist = `${baseUrl}vod/${event.camera}/start/${startTime}/end/${endTime}/index.m3u8`;
+
+    return {
+      playlist,
+      startPosition: 0,
+    };
+  }, [event, annotationOffset]);
+
+  // Determine camera aspect ratio category
+  const cameraAspect = useMemo(() => {
+    if (!aspectRatio) {
+      return "normal";
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+      return "wide";
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+      return "tall";
+    } else {
+      return "normal";
+    }
+  }, [aspectRatio]);
+
+  const handleSeekToTime = useCallback((timestamp: number, _play?: boolean) => {
+    // Set the target timestamp to seek to
+    setSeekToTimestamp(timestamp);
+  }, []);
+
+  const handleTimeUpdate = useCallback(
+    (time: number) => {
+      // event.start_time is detect stream time, convert to record
+      const eventStartRecord = event.start_time + annotationOffset / 1000;
+      const videoStartTime = eventStartRecord - REVIEW_PADDING;
+      const absoluteTime = time + videoStartTime;
+
+      setCurrentTime(absoluteTime);
+    },
+    [event.start_time, annotationOffset],
+  );
+
   if (!config) {
     return <ActivityIndicator />;
   }
 
   return (
-    <div className={className}>
-      <span tabIndex={0} className="sr-only" />
-      {!fullscreen && (
-        <div className={cn("flex items-center gap-2")}>
-          <Button
-            className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
-            aria-label={t("label.back", { ns: "common" })}
-            size="sm"
-            onClick={() => setPane("overview")}
-          >
-            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-            {isDesktop && (
-              <div className="text-primary">
-                {t("button.back", { ns: "common" })}
-              </div>
-            )}
-          </Button>
-        </div>
+    <div
+      className={cn(
+        isDesktop
+          ? "flex size-full gap-4 overflow-hidden"
+          : "flex size-full flex-col gap-2",
+        className,
       )}
+    >
+      <span tabIndex={0} className="sr-only" />
 
       <div
         className={cn(
-          "relative mx-auto flex max-h-[50dvh] flex-row justify-center",
+          "flex w-full items-center justify-center",
+          isDesktop && "overflow-hidden",
+          cameraAspect === "tall" ? "max-h-[50dvh] lg:max-h-[70dvh]" : "w-full",
+          cameraAspect !== "tall" && isDesktop && "flex-[3]",
         )}
-        style={{
-          aspectRatio: !imgLoaded ? aspectRatio : undefined,
-        }}
+        style={{ aspectRatio: aspectRatio }}
+        ref={containerRef}
       >
-        <ImageLoadingIndicator
-          className="absolute inset-0"
-          imgLoaded={imgLoaded}
-        />
-        {hasError && (
-          <div className="relative aspect-video">
-            <div className="flex flex-col items-center justify-center p-20 text-center">
-              <LuFolderX className="size-16" />
-              {t("trackingDetails.noImageFound")}
-            </div>
-          </div>
-        )}
         <div
           className={cn(
-            "relative inline-block",
-            imgLoaded ? "visible" : "invisible",
+            "relative",
+            cameraAspect === "tall" ? "h-full" : "w-full",
           )}
         >
-          <ContextMenu>
-            <ContextMenuTrigger>
-              <img
-                key={event.id}
-                ref={imgRef}
-                className={cn(
-                  "max-h-[50dvh] max-w-full select-none rounded-lg object-contain",
-                )}
-                loading={isSafari ? "eager" : "lazy"}
-                style={
-                  isIOS
-                    ? {
-                        WebkitUserSelect: "none",
-                        WebkitTouchCallout: "none",
-                      }
-                    : undefined
-                }
-                draggable={false}
-                src={src}
-                onLoad={() => setImgLoaded(true)}
-                onError={() => setHasError(true)}
-              />
-
-              {showZones &&
-                imgRef.current?.width &&
-                imgRef.current?.height &&
-                lifecycleZones?.map((zone) => (
-                  <div
-                    className="absolute inset-0 flex items-center justify-center"
-                    style={{
-                      width: imgRef.current?.clientWidth,
-                      height: imgRef.current?.clientHeight,
-                    }}
-                    key={zone}
-                  >
-                    <svg
-                      viewBox={`0 0 ${imgRef.current?.width} ${imgRef.current?.height}`}
-                      className="absolute inset-0"
-                    >
-                      <polygon
-                        points={getZonePolygon(zone)}
-                        className="fill-none stroke-2"
-                        style={{
-                          stroke: `rgb(${getZoneColor(zone)?.join(",")})`,
-                          fill:
-                            selectedZone == zone
-                              ? `rgba(${getZoneColor(zone)?.join(",")}, 0.5)`
-                              : `rgba(${getZoneColor(zone)?.join(",")}, 0.3)`,
-                          strokeWidth: selectedZone == zone ? 4 : 2,
-                        }}
-                      />
-                    </svg>
-                  </div>
-                ))}
-
-              {boxStyle && (
-                <div className="absolute border-2" style={boxStyle}>
-                  <div className="absolute bottom-[-3px] left-1/2 h-[5px] w-[5px] -translate-x-1/2 transform bg-yellow-500" />
-                </div>
-              )}
-              {attributeBoxStyle && (
-                <div className="absolute border-2" style={attributeBoxStyle} />
-              )}
-              {imgRef.current?.width &&
-                imgRef.current?.height &&
-                pathPoints &&
-                pathPoints.length > 0 && (
-                  <div
-                    className="absolute inset-0 flex items-center justify-center"
-                    style={{
-                      width: imgRef.current?.clientWidth,
-                      height: imgRef.current?.clientHeight,
-                    }}
-                    key="path"
-                  >
-                    <svg
-                      viewBox={`0 0 ${imgRef.current?.width} ${imgRef.current?.height}`}
-                      className="absolute inset-0"
-                    >
-                      <ObjectPath
-                        positions={pathPoints}
-                        color={getObjectColor(event.label)}
-                        width={2}
-                        imgRef={imgRef}
-                        onPointClick={handlePathPointClick}
-                      />
-                    </svg>
-                  </div>
-                )}
-            </ContextMenuTrigger>
-            <ContextMenuContent>
-              <ContextMenuItem>
-                <div
-                  className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
-                  onClick={() =>
-                    navigate(
-                      `/settings?page=masksAndZones&camera=${event.camera}&object_mask=${selectedLifecycle?.data.box}`,
-                    )
-                  }
-                >
-                  <div className="text-primary">
-                    {t("trackingDetails.createObjectMask")}
-                  </div>
-                </div>
-              </ContextMenuItem>
-            </ContextMenuContent>
-          </ContextMenu>
-        </div>
-      </div>
-
-      <div className="mt-3 flex flex-row items-center justify-between">
-        <Heading as="h4">{t("trackingDetails.title")}</Heading>
-
-        <div className="flex flex-row gap-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={showControls ? "select" : "default"}
-                className="size-7 p-1.5"
-                aria-label={t("trackingDetails.adjustAnnotationSettings")}
-              >
-                <LuSettings
-                  className="size-5"
-                  onClick={() => setShowControls(!showControls)}
-                />
-              </Button>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent>
-                {t("trackingDetails.adjustAnnotationSettings")}
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
-        </div>
-      </div>
-      <div className="flex flex-row items-center justify-between">
-        <div className="mb-2 text-sm text-muted-foreground">
-          {t("trackingDetails.scrollViewTips")}
-        </div>
-        <div className="min-w-20 text-right text-sm text-muted-foreground">
-          {t("trackingDetails.count", {
-            first: selectedIndex + 1,
-            second: eventSequence?.length ?? 0,
-          })}
-        </div>
-      </div>
-      {config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config && (
-        <div className="-mt-2 mb-2 text-sm text-danger">
-          {t("trackingDetails.autoTrackingTips")}
-        </div>
-      )}
-      {showControls && (
-        <AnnotationSettingsPane
-          event={event}
-          showZones={showZones}
-          setShowZones={setShowZones}
-          annotationOffset={annotationOffset}
-          setAnnotationOffset={setAnnotationOffset}
-        />
-      )}
-
-      <div className="mt-4">
-        <div
-          className={cn(
-            "rounded-md bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500",
-          )}
-        >
-          <div className="flex w-full items-center justify-between">
-            <div
-              className="flex items-center gap-2 font-medium"
-              onClick={(e) => {
-                e.stopPropagation();
-                setTimeIndex(event.start_time ?? 0);
-              }}
-              role="button"
-            >
-              <div
-                className={cn(
-                  "relative ml-2 rounded-full bg-muted-foreground p-2",
-                )}
-              >
-                {getIconForLabel(
-                  event.sub_label ? event.label + "-verified" : event.label,
-                  "size-4 text-white",
-                )}
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="capitalize">{label}</span>
-                <span className="text-secondary-foreground">
-                  {formattedStart ?? ""} - {formattedEnd ?? ""}
-                </span>
-                {event.data?.recognized_license_plate && (
-                  <>
-                    <span className="text-secondary-foreground">·</span>
-                    <div className="text-sm text-secondary-foreground">
-                      <Link
-                        to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
-                        className="text-sm"
-                      >
-                        {event.data.recognized_license_plate}
-                      </Link>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-2">
-            {!eventSequence ? (
-              <ActivityIndicator className="size-2" size={2} />
-            ) : eventSequence.length === 0 ? (
-              <div className="py-2 text-muted-foreground">
-                {t("detail.noObjectDetailData", { ns: "views/events" })}
-              </div>
-            ) : (
-              <div className="-pb-2 relative mx-2">
-                <div className="absolute -top-2 bottom-8 left-4 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
-                <div
-                  className="absolute left-4 top-2 z-[5] max-h-[calc(100%-3rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
-                  style={{ height: `${blueLineHeight}%` }}
-                />
-                <div className="space-y-2">
-                  {eventSequence.map((item, idx) => {
-                    const isActive =
-                      Math.abs((timeIndex ?? 0) - (item.timestamp ?? 0)) <= 0.5;
-                    const formattedEventTimestamp = config
-                      ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
-                          timezone: config.ui.timezone,
-                          date_format:
-                            config.ui.time_format == "24hour"
-                              ? t(
-                                  "time.formattedTimestampHourMinuteSecond.24hour",
-                                  { ns: "common" },
-                                )
-                              : t(
-                                  "time.formattedTimestampHourMinuteSecond.12hour",
-                                  { ns: "common" },
-                                ),
-                          time_style: "medium",
-                          date_style: "medium",
-                        })
-                      : "";
-
-                    const ratio =
-                      Array.isArray(item.data.box) && item.data.box.length >= 4
-                        ? (
-                            aspectRatio *
-                            (item.data.box[2] / item.data.box[3])
-                          ).toFixed(2)
-                        : "N/A";
-                    const areaPx =
-                      Array.isArray(item.data.box) && item.data.box.length >= 4
-                        ? Math.round(
-                            (config.cameras[event.camera]?.detect?.width ?? 0) *
-                              (config.cameras[event.camera]?.detect?.height ??
-                                0) *
-                              (item.data.box[2] * item.data.box[3]),
-                          )
-                        : undefined;
-                    const areaPct =
-                      Array.isArray(item.data.box) && item.data.box.length >= 4
-                        ? (item.data.box[2] * item.data.box[3]).toFixed(4)
-                        : undefined;
-
-                    return (
-                      <LifecycleIconRow
-                        key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
-                        item={item}
-                        isActive={isActive}
-                        formattedEventTimestamp={formattedEventTimestamp}
-                        ratio={ratio}
-                        areaPx={areaPx}
-                        areaPct={areaPct}
-                        onClick={() => {
-                          setTimeIndex(item.timestamp ?? 0);
-                          handleSetBox(
-                            item.data.box ?? [],
-                            item.data.attribute_box,
-                          );
-                          setLifecycleZones(item.data.zones);
-                          setSelectedZone("");
-                        }}
-                        setSelectedZone={setSelectedZone}
-                        getZoneColor={getZoneColor}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
+          <HlsVideoPlayer
+            videoRef={videoRef}
+            containerRef={containerRef}
+            visible={true}
+            currentSource={videoSource}
+            hotKeys={false}
+            supportsFullscreen={false}
+            fullscreen={false}
+            frigateControls={true}
+            onTimeUpdate={handleTimeUpdate}
+            onSeekToTime={handleSeekToTime}
+            isDetailMode={true}
+            camera={event.camera}
+            currentTimeOverride={currentTime}
+          />
+          <div
+            className={cn(
+              "absolute top-2 z-[5] flex items-center gap-2",
+              isIOS ? "right-8" : "right-2",
             )}
+          >
+            {event && (
+              <Tooltip>
+                <TooltipTrigger>
+                  <Chip
+                    className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                    onClick={() => {
+                      if (event?.id) {
+                        const params = new URLSearchParams({
+                          id: event.id,
+                        }).toString();
+                        navigate(`/review?${params}`);
+                      }
+                    }}
+                  >
+                    <FaHistory className="size-4 text-white" />
+                  </Chip>
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent>
+                    {t("itemMenu.viewInHistory.label")}
+                  </TooltipContent>
+                </TooltipPortal>
+              </Tooltip>
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  download
+                  href={`${baseUrl}api/${event.camera}/start/${event.start_time - REVIEW_PADDING}/end/${(event.end_time ?? Date.now() / 1000) + REVIEW_PADDING}/clip.mp4`}
+                >
+                  <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
+                    <FaDownload className="size-4 text-white" />
+                  </Chip>
+                </a>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent>
+                  {t("button.download", { ns: "common" })}
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+
+      <div className={cn(isDesktop && "flex-[2] overflow-hidden")}>
+        {isDesktop && tabs && <div className="mb-4">{tabs}</div>}
+        <div
+          className={cn(
+            isDesktop && "scrollbar-container h-full overflow-y-auto",
+          )}
+        >
+          <div className="flex flex-row items-center justify-between">
+            <Heading as="h4">{t("trackingDetails.title")}</Heading>
+
+            <div className="flex flex-row gap-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant={showControls ? "select" : "default"}
+                    className="size-7 p-1.5"
+                    aria-label={t("trackingDetails.adjustAnnotationSettings")}
+                  >
+                    <LuSettings
+                      className="size-5"
+                      onClick={() => setShowControls(!showControls)}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent>
+                    {t("trackingDetails.adjustAnnotationSettings")}
+                  </TooltipContent>
+                </TooltipPortal>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="flex flex-row items-center justify-between">
+            <div className="mb-2 text-sm text-muted-foreground">
+              {t("trackingDetails.scrollViewTips")}
+            </div>
+            <div className="min-w-20 text-right text-sm text-muted-foreground">
+              {t("trackingDetails.count", {
+                first: eventSequence?.length ?? 0,
+                second: eventSequence?.length ?? 0,
+              })}
+            </div>
+          </div>
+          {config?.cameras[event.camera]?.onvif.autotracking
+            .enabled_in_config && (
+            <div className="-mt-2 mb-2 text-sm text-danger">
+              {t("trackingDetails.autoTrackingTips")}
+            </div>
+          )}
+          {showControls && (
+            <AnnotationSettingsPane
+              event={event}
+              showZones={showZones}
+              setShowZones={setShowZones}
+              annotationOffset={annotationOffset}
+              setAnnotationOffset={(value) => {
+                if (typeof value === "function") {
+                  const newValue = value(annotationOffset);
+                  setAnnotationOffset(newValue);
+                } else {
+                  setAnnotationOffset(value);
+                }
+              }}
+            />
+          )}
+
+          <div className="mt-4">
+            <div
+              className={cn(
+                "rounded-md bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500",
+              )}
+            >
+              <div className="flex w-full items-center justify-between">
+                <div
+                  className="flex items-center gap-2 font-medium"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    // event.start_time is detect time, convert to record
+                    handleSeekToTime(
+                      (event.start_time ?? 0) + annotationOffset / 1000,
+                    );
+                  }}
+                  role="button"
+                >
+                  <div
+                    className={cn(
+                      "relative ml-2 rounded-full bg-muted-foreground p-2",
+                    )}
+                  >
+                    {getIconForLabel(
+                      event.sub_label ? event.label + "-verified" : event.label,
+                      "size-4 text-white",
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="capitalize">{label}</span>
+                    <span className="text-secondary-foreground">
+                      {formattedStart ?? ""} - {formattedEnd ?? ""}
+                    </span>
+                    {event.data?.recognized_license_plate && (
+                      <>
+                        <span className="text-secondary-foreground">·</span>
+                        <div className="text-sm text-secondary-foreground">
+                          <Link
+                            to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
+                            className="text-sm"
+                          >
+                            {event.data.recognized_license_plate}
+                          </Link>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-2">
+                {!eventSequence ? (
+                  <ActivityIndicator className="size-2" size={2} />
+                ) : eventSequence.length === 0 ? (
+                  <div className="py-2 text-muted-foreground">
+                    {t("detail.noObjectDetailData", { ns: "views/events" })}
+                  </div>
+                ) : (
+                  <div className="-pb-2 relative mx-0">
+                    <div className="absolute -top-2 bottom-8 left-6 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
+                    {isWithinEventRange && (
+                      <div
+                        className="absolute left-6 top-2 z-[5] max-h-[calc(100%-3rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
+                        style={{ height: `${blueLineHeight}%` }}
+                      />
+                    )}
+                    <div className="space-y-2">
+                      {eventSequence.map((item, idx) => {
+                        const isActive =
+                          Math.abs(
+                            (effectiveTime ?? 0) - (item.timestamp ?? 0),
+                          ) <= 0.5;
+                        const formattedEventTimestamp = config
+                          ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
+                              timezone: config.ui.timezone,
+                              date_format:
+                                config.ui.time_format == "24hour"
+                                  ? t(
+                                      "time.formattedTimestampHourMinuteSecond.24hour",
+                                      { ns: "common" },
+                                    )
+                                  : t(
+                                      "time.formattedTimestampHourMinuteSecond.12hour",
+                                      { ns: "common" },
+                                    ),
+                              time_style: "medium",
+                              date_style: "medium",
+                            })
+                          : "";
+
+                        const ratio =
+                          Array.isArray(item.data.box) &&
+                          item.data.box.length >= 4
+                            ? (
+                                aspectRatio *
+                                (item.data.box[2] / item.data.box[3])
+                              ).toFixed(2)
+                            : "N/A";
+                        const areaPx =
+                          Array.isArray(item.data.box) &&
+                          item.data.box.length >= 4
+                            ? Math.round(
+                                (config.cameras[event.camera]?.detect?.width ??
+                                  0) *
+                                  (config.cameras[event.camera]?.detect
+                                    ?.height ?? 0) *
+                                  (item.data.box[2] * item.data.box[3]),
+                              )
+                            : undefined;
+                        const areaPct =
+                          Array.isArray(item.data.box) &&
+                          item.data.box.length >= 4
+                            ? (item.data.box[2] * item.data.box[3]).toFixed(4)
+                            : undefined;
+
+                        return (
+                          <LifecycleIconRow
+                            key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
+                            item={item}
+                            isActive={isActive}
+                            formattedEventTimestamp={formattedEventTimestamp}
+                            ratio={ratio}
+                            areaPx={areaPx}
+                            areaPct={areaPct}
+                            onClick={() => handleLifecycleClick(item)}
+                            setSelectedZone={setSelectedZone}
+                            getZoneColor={getZoneColor}
+                            effectiveTime={effectiveTime}
+                            isTimelineActive={isWithinEventRange}
+                          />
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -765,44 +594,6 @@ export default function TrackingDetails({
   );
 }
 
-type GetTimelineIconParams = {
-  lifecycleItem: TrackingDetailsSequence;
-  className?: string;
-};
-
-export function LifecycleIcon({
-  lifecycleItem,
-  className,
-}: GetTimelineIconParams) {
-  switch (lifecycleItem.class_type) {
-    case "visible":
-      return <LuPlay className={cn(className)} />;
-    case "gone":
-      return <IoMdExit className={cn(className)} />;
-    case "active":
-      return <IoPlayCircleOutline className={cn(className)} />;
-    case "stationary":
-      return <LuCircle className={cn(className)} />;
-    case "entered_zone":
-      return <MdOutlineLocationOn className={cn(className)} />;
-    case "attribute":
-      switch (lifecycleItem.data?.attribute) {
-        case "face":
-          return <MdFaceUnlock className={cn(className)} />;
-        case "license_plate":
-          return <MdOutlinePictureInPictureAlt className={cn(className)} />;
-        default:
-          return <LuTruck className={cn(className)} />;
-      }
-    case "heard":
-      return <LuEar className={cn(className)} />;
-    case "external":
-      return <LuCircleDot className={cn(className)} />;
-    default:
-      return null;
-  }
-}
-
 type LifecycleIconRowProps = {
   item: TrackingDetailsSequence;
   isActive?: boolean;
@@ -813,6 +604,8 @@ type LifecycleIconRowProps = {
   onClick: () => void;
   setSelectedZone: (z: string) => void;
   getZoneColor: (zoneName: string) => number[] | undefined;
+  effectiveTime?: number;
+  isTimelineActive?: boolean;
 };
 
 function LifecycleIconRow({
@@ -825,6 +618,8 @@ function LifecycleIconRow({
   onClick,
   setSelectedZone,
   getZoneColor,
+  effectiveTime,
+  isTimelineActive,
 }: LifecycleIconRowProps) {
   const { t } = useTranslation(["views/explore", "components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -837,17 +632,19 @@ function LifecycleIconRow({
       role="button"
       onClick={onClick}
       className={cn(
-        "rounded-md p-2 text-sm text-primary-variant",
+        "rounded-md p-2 pr-0 text-sm text-primary-variant",
         isActive && "bg-secondary-highlight font-semibold text-primary",
         !isActive && "duration-500",
       )}
     >
       <div className="flex items-center gap-2">
-        <div className="relative flex size-4 items-center justify-center">
+        <div className="relative ml-2 flex size-4 items-center justify-center">
           <LuCircle
             className={cn(
-              "relative z-10 ml-[1px] size-2.5 fill-secondary-foreground stroke-none",
-              isActive && "fill-selected duration-300",
+              "relative z-10 size-2.5 fill-secondary-foreground stroke-none",
+              (isActive || (effectiveTime ?? 0) >= (item?.timestamp ?? 0)) &&
+                isTimelineActive &&
+                "fill-selected duration-300",
             )}
           />
         </div>
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index b5ce70446..e8d609cdb 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -57,7 +57,7 @@ export default function DetailStream({
     elementRef: scrollRef,
   });
 
-  const effectiveTime = currentTime + annotationOffset / 1000;
+  const effectiveTime = currentTime - annotationOffset / 1000;
   const [upload, setUpload] = useState<Event | undefined>(undefined);
   const [controlsExpanded, setControlsExpanded] = useState(false);
   const [alwaysExpandActive, setAlwaysExpandActive] = usePersistence(
@@ -213,6 +213,7 @@ export default function DetailStream({
                     config={config}
                     onSeek={onSeekCheckPlaying}
                     effectiveTime={effectiveTime}
+                    annotationOffset={annotationOffset}
                     isActive={activeReviewId == id}
                     onActivate={() => setActiveReviewId(id)}
                     onOpenUpload={(e) => setUpload(e)}
@@ -278,6 +279,7 @@ type ReviewGroupProps = {
   onActivate?: () => void;
   onOpenUpload?: (e: Event) => void;
   effectiveTime?: number;
+  annotationOffset: number;
   alwaysExpandActive?: boolean;
 };
 
@@ -290,11 +292,14 @@ function ReviewGroup({
   onActivate,
   onOpenUpload,
   effectiveTime,
+  annotationOffset,
   alwaysExpandActive = false,
 }: ReviewGroupProps) {
   const { t } = useTranslation("views/events");
   const [open, setOpen] = useState(false);
   const start = review.start_time ?? 0;
+  // review.start_time is in detect time, convert to record for seeking
+  const startRecord = start + annotationOffset / 1000;
 
   // Auto-expand when this review becomes active and alwaysExpandActive is enabled
   useEffect(() => {
@@ -371,7 +376,7 @@ function ReviewGroup({
         )}
         onClick={() => {
           onActivate?.();
-          onSeek(start);
+          onSeek(startRecord);
         }}
       >
         <div className="ml-4 mr-2 mt-1.5 flex flex-row items-start">
@@ -450,6 +455,7 @@ function ReviewGroup({
                     key={event.id}
                     event={event}
                     effectiveTime={effectiveTime}
+                    annotationOffset={annotationOffset}
                     onSeek={onSeek}
                     onOpenUpload={onOpenUpload}
                   />
@@ -483,12 +489,14 @@ function ReviewGroup({
 type EventListProps = {
   event: Event;
   effectiveTime?: number;
+  annotationOffset: number;
   onSeek: (ts: number, play?: boolean) => void;
   onOpenUpload?: (e: Event) => void;
 };
 function EventList({
   event,
   effectiveTime,
+  annotationOffset,
   onSeek,
   onOpenUpload,
 }: EventListProps) {
@@ -505,14 +513,17 @@ function EventList({
     if (event) {
       setSelectedObjectIds([]);
       setSelectedObjectIds([event.id]);
-      onSeek(event.start_time);
+      // event.start_time is detect time, convert to record
+      const recordTime = event.start_time + annotationOffset / 1000;
+      onSeek(recordTime);
     } else {
       setSelectedObjectIds([]);
     }
   };
 
   const handleTimelineClick = (ts: number, play?: boolean) => {
-    handleObjectSelect(event);
+    setSelectedObjectIds([]);
+    setSelectedObjectIds([event.id]);
     onSeek(ts, play);
   };
 
@@ -554,7 +565,6 @@ function EventList({
               )}
               onClick={(e) => {
                 e.stopPropagation();
-                onSeek(event.start_time);
                 handleObjectSelect(event);
               }}
               role="button"
@@ -568,7 +578,6 @@ function EventList({
               className="flex flex-1 items-center gap-2"
               onClick={(e) => {
                 e.stopPropagation();
-                onSeek(event.start_time);
                 handleObjectSelect(event);
               }}
               role="button"
@@ -607,6 +616,7 @@ function EventList({
             eventId={event.id}
             onSeek={handleTimelineClick}
             effectiveTime={effectiveTime}
+            annotationOffset={annotationOffset}
             startTime={event.start_time}
             endTime={event.end_time}
           />
@@ -621,6 +631,7 @@ type LifecycleItemProps = {
   isActive?: boolean;
   onSeek?: (timestamp: number, play?: boolean) => void;
   effectiveTime?: number;
+  annotationOffset: number;
   isTimelineActive?: boolean;
 };
 
@@ -629,6 +640,7 @@ function LifecycleItem({
   isActive,
   onSeek,
   effectiveTime,
+  annotationOffset,
   isTimelineActive = false,
 }: LifecycleItemProps) {
   const { t } = useTranslation("views/events");
@@ -682,7 +694,8 @@ function LifecycleItem({
     <div
       role="button"
       onClick={() => {
-        onSeek?.(item.timestamp, false);
+        const recordTimestamp = item.timestamp + annotationOffset / 1000;
+        onSeek?.(recordTimestamp, false);
       }}
       className={cn(
         "flex cursor-pointer items-center gap-2 text-sm text-primary-variant",
@@ -751,12 +764,14 @@ function ObjectTimeline({
   eventId,
   onSeek,
   effectiveTime,
+  annotationOffset,
   startTime,
   endTime,
 }: {
   eventId: string;
   onSeek: (ts: number, play?: boolean) => void;
   effectiveTime?: number;
+  annotationOffset: number;
   startTime?: number;
   endTime?: number;
 }) {
@@ -857,6 +872,7 @@ function ObjectTimeline({
               onSeek={onSeek}
               isActive={isActive}
               effectiveTime={effectiveTime}
+              annotationOffset={annotationOffset}
               isTimelineActive={isWithinEventRange}
             />
           );
diff --git a/web/src/context/detail-stream-context.tsx b/web/src/context/detail-stream-context.tsx
index c1faae12c..ff909a30e 100644
--- a/web/src/context/detail-stream-context.tsx
+++ b/web/src/context/detail-stream-context.tsx
@@ -22,6 +22,7 @@ interface DetailStreamProviderProps {
   isDetailMode: boolean;
   currentTime: number;
   camera: string;
+  initialSelectedObjectIds?: string[];
 }
 
 export function DetailStreamProvider({
@@ -29,8 +30,11 @@ export function DetailStreamProvider({
   isDetailMode,
   currentTime,
   camera,
+  initialSelectedObjectIds,
 }: DetailStreamProviderProps) {
-  const [selectedObjectIds, setSelectedObjectIds] = useState<string[]>([]);
+  const [selectedObjectIds, setSelectedObjectIds] = useState<string[]>(
+    () => initialSelectedObjectIds ?? [],
+  );
 
   const toggleObjectSelection = (id: string | undefined) => {
     if (id === undefined) {
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 7c2a4aa05..5d60ce56c 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -893,7 +893,7 @@ function ObjectTrainGrid({
   // selection
 
   const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [dialogTab, setDialogTab] = useState<SearchTab>("details");
+  const [dialogTab, setDialogTab] = useState<SearchTab>("snapshot");
 
   // handlers
 
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 4a824b4e8..a96d7bbb6 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -214,7 +214,7 @@ export default function SearchView({
   // detail
 
   const [searchDetail, setSearchDetail] = useState<SearchResult>();
-  const [page, setPage] = useState<SearchTab>("details");
+  const [page, setPage] = useState<SearchTab>("snapshot");
 
   // search interaction
 
@@ -222,7 +222,7 @@ export default function SearchView({
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
   const onSelectSearch = useCallback(
-    (item: SearchResult, ctrl: boolean, page: SearchTab = "details") => {
+    (item: SearchResult, ctrl: boolean, page: SearchTab = "snapshot") => {
       if (selectedObjects.length > 1 || ctrl) {
         const index = selectedObjects.indexOf(item.id);