Add Detail stream in History view (#20525)

* new type

* activity stream panel

* use context provider for activity stream

* new activity stream panel in history view

* overlay for object tracking details in history view

* use overlay in video player

* don't refetch timeline

* fix activity stream group from being highlighted prematurely

* use annotation offset

* fix scrolling and use custom hook for interaction

* memoize to prevent unnecessary renders

* i18n and timestamp formatting

* add annotation offset slider

* bg color

* add collapsible component

* refactor

* rename activity to detail

* fix merge conflicts

* i18n

* more i18n

web/src/components/overlay/ObjectTrackOverlay.tsx

@@ -0,0 +1,395 @@
+import { useMemo, useCallback } from "react";
+import { ObjectLifecycleSequence, LifecycleClassType } from "@/types/timeline";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+import { useDetailStream } from "@/context/detail-stream-context";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+type ObjectTrackOverlayProps = {
+  camera: string;
+  selectedObjectId: string;
+  currentTime: number;
+  videoWidth: number;
+  videoHeight: number;
+  className?: string;
+  onSeekToTime?: (timestamp: number) => void;
+  objectTimeline?: ObjectLifecycleSequence[];
+};
+
+export default function ObjectTrackOverlay({
+  camera,
+  selectedObjectId,
+  currentTime,
+  videoWidth,
+  videoHeight,
+  className,
+  onSeekToTime,
+  objectTimeline,
+}: ObjectTrackOverlayProps) {
+  const { t } = useTranslation("views/events");
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const { annotationOffset } = useDetailStream();
+
+  const effectiveCurrentTime = currentTime - annotationOffset / 1000;
+
+  // Fetch the full event data to get saved path points
+  const { data: eventData } = useSWR(["event_ids", { ids: selectedObjectId }]);
+
+  const typeColorMap = useMemo(
+    () => ({
+      [LifecycleClassType.VISIBLE]: [0, 255, 0], // Green
+      [LifecycleClassType.GONE]: [255, 0, 0], // Red
+      [LifecycleClassType.ENTERED_ZONE]: [255, 165, 0], // Orange
+      [LifecycleClassType.ATTRIBUTE]: [128, 0, 128], // Purple
+      [LifecycleClassType.ACTIVE]: [255, 255, 0], // Yellow
+      [LifecycleClassType.STATIONARY]: [128, 128, 128], // Gray
+      [LifecycleClassType.HEARD]: [0, 255, 255], // Cyan
+      [LifecycleClassType.EXTERNAL]: [165, 42, 42], // Brown
+    }),
+    [],
+  );
+
+  const getObjectColor = useMemo(() => {
+    return (label: string) => {
+      const objectColor = config?.model?.colormap[label];
+      if (objectColor) {
+        const reversed = [...objectColor].reverse();
+        return `rgb(${reversed.join(",")})`;
+      }
+      return "rgb(255, 0, 0)"; // fallback red
+    };
+  }, [config]);
+
+  const getZoneColor = useCallback(
+    (zoneName: string) => {
+      const zoneColor = config?.cameras?.[camera]?.zones?.[zoneName]?.color;
+      if (zoneColor) {
+        const reversed = [...zoneColor].reverse();
+        return `rgb(${reversed.join(",")})`;
+      }
+      return "rgb(255, 0, 0)"; // fallback red
+    },
+    [config, camera],
+  );
+
+  const currentObjectZones = useMemo(() => {
+    if (!objectTimeline) return [];
+
+    // Find the most recent timeline event at or before effective current time
+    const relevantEvents = objectTimeline
+      .filter((event) => event.timestamp <= effectiveCurrentTime)
+      .sort((a, b) => b.timestamp - a.timestamp); // Most recent first
+
+    // Get zones from the most recent event
+    return relevantEvents[0]?.data?.zones || [];
+  }, [objectTimeline, effectiveCurrentTime]);
+
+  const zones = useMemo(() => {
+    if (!config?.cameras?.[camera]?.zones || !currentObjectZones.length)
+      return [];
+
+    return Object.entries(config.cameras[camera].zones)
+      .filter(([name]) => currentObjectZones.includes(name))
+      .map(([name, zone]) => ({
+        name,
+        coordinates: zone.coordinates,
+        color: getZoneColor(name),
+      }));
+  }, [config, camera, getZoneColor, currentObjectZones]);
+
+  // get saved path points from event
+  const savedPathPoints = useMemo(() => {
+    return (
+      eventData?.[0].data?.path_data?.map(
+        ([coords, timestamp]: [number[], number]) => ({
+          x: coords[0],
+          y: coords[1],
+          timestamp,
+          lifecycle_item: undefined,
+        }),
+      ) || []
+    );
+  }, [eventData]);
+
+  // timeline points for selected event
+  const eventSequencePoints = useMemo(() => {
+    return (
+      objectTimeline
+        ?.filter((event) => event.data.box !== undefined)
+        .map((event) => {
+          const [left, top, width, height] = event.data.box!;
+
+          return {
+            x: left + width / 2, // Center x
+            y: top + height, // Bottom y
+            timestamp: event.timestamp,
+            lifecycle_item: event,
+          };
+        }) || []
+    );
+  }, [objectTimeline]);
+
+  // final object path with timeline points included
+  const pathPoints = useMemo(() => {
+    // don't display a path for autotracking cameras
+    if (config?.cameras[camera]?.onvif.autotracking.enabled_in_config)
+      return [];
+
+    const combinedPoints = [...savedPathPoints, ...eventSequencePoints].sort(
+      (a, b) => a.timestamp - b.timestamp,
+    );
+
+    // Filter points around current time (within a reasonable window)
+    const timeWindow = 30; // 30 seconds window
+    return combinedPoints.filter(
+      (point) =>
+        point.timestamp >= currentTime - timeWindow &&
+        point.timestamp <= currentTime + timeWindow,
+    );
+  }, [savedPathPoints, eventSequencePoints, config, camera, currentTime]);
+
+  // get absolute positions on the svg canvas for each point
+  const absolutePositions = useMemo(() => {
+    if (!pathPoints) return [];
+
+    return pathPoints.map((point) => {
+      // Find the corresponding timeline entry for this point
+      const timelineEntry = objectTimeline?.find(
+        (entry) => entry.timestamp == point.timestamp,
+      );
+      return {
+        x: point.x * videoWidth,
+        y: point.y * videoHeight,
+        timestamp: point.timestamp,
+        lifecycle_item:
+          timelineEntry ||
+          (point.box // normal path point
+            ? {
+                timestamp: point.timestamp,
+                camera: camera,
+                source: "tracked_object",
+                source_id: selectedObjectId,
+                class_type: "visible" as LifecycleClassType,
+                data: {
+                  camera: camera,
+                  label: point.label,
+                  sub_label: "",
+                  box: point.box,
+                  region: [0, 0, 0, 0], // placeholder
+                  attribute: "",
+                  zones: [],
+                },
+              }
+            : undefined),
+      };
+    });
+  }, [
+    pathPoints,
+    videoWidth,
+    videoHeight,
+    objectTimeline,
+    camera,
+    selectedObjectId,
+  ]);
+
+  const generateStraightPath = useCallback(
+    (points: { x: number; y: number }[]) => {
+      if (!points || points.length < 2) return "";
+      let path = `M ${points[0].x} ${points[0].y}`;
+      for (let i = 1; i < points.length; i++) {
+        path += ` L ${points[i].x} ${points[i].y}`;
+      }
+      return path;
+    },
+    [],
+  );
+
+  const getPointColor = useCallback(
+    (baseColor: number[], type?: string) => {
+      if (type && typeColorMap[type as keyof typeof typeColorMap]) {
+        const typeColor = typeColorMap[type as keyof typeof typeColorMap];
+        if (typeColor) {
+          return `rgb(${typeColor.join(",")})`;
+        }
+      }
+      // normal path point
+      return `rgb(${baseColor.map((c) => Math.max(0, c - 10)).join(",")})`;
+    },
+    [typeColorMap],
+  );
+
+  const handlePointClick = useCallback(
+    (timestamp: number) => {
+      onSeekToTime?.(timestamp);
+    },
+    [onSeekToTime],
+  );
+
+  // render bounding box for object at current time if we have a timeline entry
+  const currentBoundingBox = useMemo(() => {
+    if (!objectTimeline) return null;
+
+    // Find the most recent timeline event at or before effective current time with a bounding box
+    const relevantEvents = objectTimeline
+      .filter(
+        (event) => event.timestamp <= effectiveCurrentTime && event.data.box,
+      )
+      .sort((a, b) => b.timestamp - a.timestamp); // Most recent first
+
+    const currentEvent = relevantEvents[0];
+
+    if (!currentEvent?.data.box) return null;
+
+    const [left, top, width, height] = currentEvent.data.box;
+    return {
+      left,
+      top,
+      width,
+      height,
+      centerX: left + width / 2,
+      centerY: top + height,
+    };
+  }, [objectTimeline, effectiveCurrentTime]);
+
+  const objectColor = useMemo(() => {
+    return pathPoints[0]?.label
+      ? getObjectColor(pathPoints[0].label)
+      : "rgb(255, 0, 0)";
+  }, [pathPoints, getObjectColor]);
+
+  const objectColorArray = useMemo(() => {
+    return pathPoints[0]?.label
+      ? getObjectColor(pathPoints[0].label).match(/\d+/g)?.map(Number) || [
+          255, 0, 0,
+        ]
+      : [255, 0, 0];
+  }, [pathPoints, getObjectColor]);
+
+  // render any zones for object at current time
+  const zonePolygons = useMemo(() => {
+    return zones.map((zone) => {
+      // Convert zone coordinates from normalized (0-1) to pixel coordinates
+      const points = zone.coordinates
+        .split(",")
+        .map(Number.parseFloat)
+        .reduce((acc: string[], value, index) => {
+          const isXCoordinate = index % 2 === 0;
+          const coordinate = isXCoordinate
+            ? value * videoWidth
+            : value * videoHeight;
+          acc.push(coordinate.toString());
+          return acc;
+        }, [])
+        .join(",");
+
+      return {
+        key: zone.name,
+        points,
+        fill: `rgba(${zone.color.replace("rgb(", "").replace(")", "")}, 0.3)`,
+        stroke: zone.color,
+      };
+    });
+  }, [zones, videoWidth, videoHeight]);
+
+  if (!pathPoints.length || !config) {
+    return null;
+  }
+
+  return (
+    <svg
+      className={cn(className)}
+      viewBox={`0 0 ${videoWidth} ${videoHeight}`}
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+      preserveAspectRatio="xMidYMid slice"
+    >
+      {zonePolygons.map((zone) => (
+        <polygon
+          key={zone.key}
+          points={zone.points}
+          fill={zone.fill}
+          stroke={zone.stroke}
+          strokeWidth="5"
+          opacity="0.7"
+        />
+      ))}
+
+      {absolutePositions.length > 1 && (
+        <path
+          d={generateStraightPath(absolutePositions)}
+          fill="none"
+          stroke={objectColor}
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+
+      {absolutePositions.map((pos, index) => (
+        <Tooltip key={`point-${index}`}>
+          <TooltipTrigger asChild>
+            <circle
+              cx={pos.x}
+              cy={pos.y}
+              r="7"
+              fill={getPointColor(
+                objectColorArray,
+                pos.lifecycle_item?.class_type,
+              )}
+              stroke="white"
+              strokeWidth="3"
+              style={{ cursor: onSeekToTime ? "pointer" : "default" }}
+              onClick={() => handlePointClick(pos.timestamp)}
+            />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="smart-capitalize">
+              {pos.lifecycle_item
+                ? `${pos.lifecycle_item.class_type.replace("_", " ")} at ${new Date(pos.timestamp * 1000).toLocaleTimeString()}`
+                : t("objectTrack.trackedPoint")}
+              {onSeekToTime && (
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {t("objectTrack.clickToSeek")}
+                </div>
+              )}
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      ))}
+
+      {currentBoundingBox && (
+        <g>
+          <rect
+            x={currentBoundingBox.left * videoWidth}
+            y={currentBoundingBox.top * videoHeight}
+            width={currentBoundingBox.width * videoWidth}
+            height={currentBoundingBox.height * videoHeight}
+            fill="none"
+            stroke={objectColor}
+            strokeWidth="5"
+            opacity="0.9"
+          />
+
+          <circle
+            cx={currentBoundingBox.centerX * videoWidth}
+            cy={currentBoundingBox.centerY * videoHeight}
+            r="5"
+            fill="rgb(255, 255, 0)" // yellow highlight
+            stroke={objectColor}
+            strokeWidth="5"
+            opacity="1"
+          />
+        </g>
+      )}
+    </svg>
+  );
+}

web/src/components/overlay/detail/AnnotationOffsetSlider.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useState } from "react";
+import { Slider } from "@/components/ui/slider";
+import { Button } from "@/components/ui/button";
+import { useDetailStream } from "@/context/detail-stream-context";
+import axios from "axios";
+import { useSWRConfig } from "swr";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  className?: string;
+};
+
+export default function AnnotationOffsetSlider({ className }: Props) {
+  const { annotationOffset, setAnnotationOffset, camera } = useDetailStream();
+  const { mutate } = useSWRConfig();
+  const { t } = useTranslation(["views/explore"]);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleChange = useCallback(
+    (values: number[]) => {
+      if (!values || values.length === 0) return;
+      const valueMs = values[0];
+      setAnnotationOffset(valueMs);
+    },
+    [setAnnotationOffset],
+  );
+
+  const reset = useCallback(() => {
+    setAnnotationOffset(0);
+  }, [setAnnotationOffset]);
+
+  const save = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      // save value in milliseconds to config
+      await axios.put(
+        `config/set?cameras.${camera}.detect.annotation_offset=${annotationOffset}`,
+        { requires_restart: 0 },
+      );
+
+      toast.success(
+        t("objectLifecycle.annotationSettings.offset.toast.success", {
+          camera,
+        }),
+        { position: "top-center" },
+      );
+
+      // refresh config
+      await mutate("config");
+    } catch (e: unknown) {
+      const err = e as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
+      const errorMessage =
+        err?.response?.data?.message || err?.message || "Unknown error";
+      toast.error(t("toast.save.error.title", { errorMessage, ns: "common" }), {
+        position: "top-center",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [annotationOffset, camera, mutate, t]);
+
+  return (
+    <div
+      className={`absolute bottom-0 left-0 right-0 z-30 flex items-center gap-3 bg-background p-3 ${className ?? ""}`}
+      style={{ pointerEvents: "auto" }}
+    >
+      <div className="w-56 text-sm">
+        Annotation offset (ms): {annotationOffset}
+      </div>
+      <div className="flex-1">
+        <Slider
+          value={[annotationOffset]}
+          min={-1500}
+          max={1500}
+          step={50}
+          onValueChange={handleChange}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="ghost" onClick={reset}>
+          Reset
+        </Button>
+        <Button size="sm" onClick={save} disabled={isSaving}>
+          {isSaving
+            ? t("button.saving", { ns: "common" })
+            : t("button.save", { ns: "common" })}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/components/overlay/detail/AnnotationSettingsPane.tsx

@@ -174,7 +174,7 @@ export function AnnotationSettingsPane({
                   {t("objectLifecycle.annotationSettings.offset.label")}
                 </FormLabel>
                 <div className="flex flex-col gap-3 md:flex-row-reverse md:gap-8">
-                  <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-0 md:my-5">
+                  <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-5">
                     <PiWarningCircle className="size-24" />
                     <div>
                       <Trans ns="views/explore">

web/src/components/player/HlsVideoPlayer.tsx

@@ -19,6 +19,8 @@ import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
 import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
 import { useTranslation } from "react-i18next";
+import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay";
+import { useDetailStream } from "@/context/detail-stream-context";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -47,6 +49,7 @@ type HlsVideoPlayerProps = {
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
   onPlaying?: () => void;
+  onSeekToTime?: (timestamp: number) => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
@@ -66,6 +69,7 @@ export default function HlsVideoPlayer({
   onPlayerLoaded,
   onTimeUpdate,
   onPlaying,
+  onSeekToTime,
   setFullResolution,
   onUploadFrame,
   toggleFullscreen,
@@ -73,6 +77,13 @@ export default function HlsVideoPlayer({
 }: HlsVideoPlayerProps) {
   const { t } = useTranslation("components/player");
   const { data: config } = useSWR<FrigateConfig>("config");
+  const {
+    selectedObjectId,
+    selectedObjectTimeline,
+    currentTime,
+    camera,
+    isDetailMode,
+  } = useDetailStream();
 
   // playback
 
@@ -84,17 +95,19 @@ export default function HlsVideoPlayer({
   const handleLoadedMetadata = useCallback(() => {
     setLoadedMetadata(true);
     if (videoRef.current) {
+      const width = videoRef.current.videoWidth;
+      const height = videoRef.current.videoHeight;
+
       if (setFullResolution) {
         setFullResolution({
-          width: videoRef.current.videoWidth,
-          height: videoRef.current.videoHeight,
+          width,
+          height,
         });
       }
 
-      setTallCamera(
-        videoRef.current.videoWidth / videoRef.current.videoHeight <
-          ASPECT_VERTICAL_LAYOUT,
-      );
+      setVideoDimensions({ width, height });
+
+      setTallCamera(width / height < ASPECT_VERTICAL_LAYOUT);
     }
   }, [videoRef, setFullResolution]);
 
@@ -174,6 +187,10 @@ export default function HlsVideoPlayer({
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
   const [zoomScale, setZoomScale] = useState(1.0);
+  const [videoDimensions, setVideoDimensions] = useState<{
+    width: number;
+    height: number;
+  }>({ width: 0, height: 0 });
 
   useEffect(() => {
     if (!isDesktop) {
@@ -296,6 +313,30 @@ export default function HlsVideoPlayer({
           height: isMobile ? "100%" : undefined,
         }}
       >
+        {isDetailMode &&
+          selectedObjectId &&
+          camera &&
+          currentTime &&
+          videoDimensions.width > 0 &&
+          videoDimensions.height > 0 && (
+            <div className="absolute z-50 size-full">
+              <ObjectTrackOverlay
+                key={`${selectedObjectId}-${currentTime}`}
+                camera={camera}
+                selectedObjectId={selectedObjectId}
+                currentTime={currentTime}
+                videoWidth={videoDimensions.width}
+                videoHeight={videoDimensions.height}
+                className="absolute inset-0 z-10"
+                onSeekToTime={(timestamp) => {
+                  if (onSeekToTime) {
+                    onSeekToTime(timestamp);
+                  }
+                }}
+                objectTimeline={selectedObjectTimeline}
+              />
+            </div>
+          )}
         <video
           ref={videoRef}
           className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -32,6 +32,7 @@ type DynamicVideoPlayerProps = {
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
+  onSeekToTime?: (timestamp: number) => void;
   setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   toggleFullscreen: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
@@ -49,6 +50,7 @@ export default function DynamicVideoPlayer({
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
+  onSeekToTime,
   setFullResolution,
   toggleFullscreen,
   containerRef,
@@ -265,6 +267,7 @@ export default function DynamicVideoPlayer({
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}
         onClipEnded={onValidateClipEnd}
+        onSeekToTime={onSeekToTime}
         onPlaying={() => {
           if (isScrubbing) {
             playerRef.current?.pause();

web/src/components/timeline/DetailStream.tsx

@@ -0,0 +1,550 @@
+import { useEffect, useRef, useState } from "react";
+import { ObjectLifecycleSequence } from "@/types/timeline";
+import { LifecycleIcon } from "@/components/overlay/detail/ObjectLifecycle";
+import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
+import { useDetailStream } from "@/context/detail-stream-context";
+import scrollIntoView from "scroll-into-view-if-needed";
+import useUserInteraction from "@/hooks/use-user-interaction";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { useTranslation } from "react-i18next";
+import AnnotationOffsetSlider from "@/components/overlay/detail/AnnotationOffsetSlider";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { Event } from "@/types/event";
+import { getIconForLabel } from "@/utils/iconUtil";
+import { ReviewSegment, REVIEW_PADDING } from "@/types/review";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible";
+import { LuChevronUp, LuChevronDown } from "react-icons/lu";
+import { getTranslatedLabel } from "@/utils/i18n";
+import EventMenu from "@/components/timeline/EventMenu";
+import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
+import { cn } from "@/lib/utils";
+
+type DetailStreamProps = {
+  reviewItems?: ReviewSegment[];
+  currentTime: number;
+  onSeek: (timestamp: number) => void;
+};
+
+export default function DetailStream({
+  reviewItems,
+  currentTime,
+  onSeek,
+}: DetailStreamProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const { t } = useTranslation("views/events");
+  const { annotationOffset } = useDetailStream();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [activeReviewId, setActiveReviewId] = useState<string | undefined>(
+    undefined,
+  );
+  const { userInteracting, setProgrammaticScroll } = useUserInteraction({
+    elementRef: scrollRef,
+  });
+
+  const effectiveTime = currentTime + annotationOffset / 1000;
+  const PAD = 0; // REVIEW_PADDING ?? 2;
+  const [upload, setUpload] = useState<Event | undefined>(undefined);
+
+  // Ensure we initialize the active review when reviewItems first arrive.
+  // This helps when the component mounts while the video is already
+  // playing — it guarantees the matching review is highlighted right
+  // away instead of waiting for a future effectiveTime change.
+  useEffect(() => {
+    if (!reviewItems || reviewItems.length === 0) return;
+    if (activeReviewId) return;
+
+    let target: ReviewSegment | undefined;
+    let closest: { r: ReviewSegment; diff: number } | undefined;
+
+    for (const r of reviewItems) {
+      const start = (r.start_time ?? 0) - PAD;
+      const end = (r.end_time ?? r.start_time ?? start) + PAD;
+      if (effectiveTime >= start && effectiveTime <= end) {
+        target = r;
+        break;
+      }
+      const mid = (start + end) / 2;
+      const diff = Math.abs(effectiveTime - mid);
+      if (!closest || diff < closest.diff) closest = { r, diff };
+    }
+
+    if (!target && closest) target = closest.r;
+
+    if (target) {
+      const start = (target.start_time ?? 0) - PAD;
+      setActiveReviewId(
+        `review-${target.id ?? target.start_time ?? Math.floor(start)}`,
+      );
+    }
+  }, [reviewItems, activeReviewId, effectiveTime, PAD]);
+
+  // Auto-scroll to current time
+  useEffect(() => {
+    if (!scrollRef.current || userInteracting) return;
+    // Prefer the review whose range contains the effectiveTime. If none
+    // contains it, pick the nearest review (by mid-point distance). This is
+    // robust to unordered reviewItems and avoids always picking the last
+    // element.
+    const items = reviewItems ?? [];
+    if (items.length === 0) return;
+
+    let target: ReviewSegment | undefined;
+    let closest: { r: ReviewSegment; diff: number } | undefined;
+
+    for (const r of items) {
+      const start = (r.start_time ?? 0) - PAD;
+      const end = (r.end_time ?? r.start_time ?? start) + PAD;
+      if (effectiveTime >= start && effectiveTime <= end) {
+        target = r;
+        break;
+      }
+      const mid = (start + end) / 2;
+      const diff = Math.abs(effectiveTime - mid);
+      if (!closest || diff < closest.diff) closest = { r, diff };
+    }
+
+    if (!target && closest) target = closest.r;
+
+    if (target) {
+      const start = (target.start_time ?? 0) - PAD;
+      const id = `review-${target.id ?? target.start_time ?? Math.floor(start)}`;
+      const element = scrollRef.current.querySelector(
+        `[data-review-id="${id}"]`,
+      ) as HTMLElement;
+      if (element) {
+        setProgrammaticScroll();
+        scrollIntoView(element, {
+          scrollMode: "if-needed",
+          behavior: "smooth",
+        });
+      }
+    }
+  }, [
+    reviewItems,
+    effectiveTime,
+    annotationOffset,
+    userInteracting,
+    setProgrammaticScroll,
+    PAD,
+  ]);
+
+  // Auto-select active review based on effectiveTime (if inside a review range)
+  useEffect(() => {
+    if (!reviewItems || reviewItems.length === 0) return;
+    for (const r of reviewItems) {
+      const start = (r.start_time ?? 0) - PAD;
+      const end = (r.end_time ?? r.start_time ?? start) + PAD;
+      if (effectiveTime >= start && effectiveTime <= end) {
+        setActiveReviewId(
+          `review-${r.id ?? r.start_time ?? Math.floor(start)}`,
+        );
+        return;
+      }
+    }
+  }, [effectiveTime, reviewItems, PAD]);
+
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="relative">
+      <FrigatePlusDialog
+        upload={upload}
+        onClose={() => setUpload(undefined)}
+        onEventUploaded={() => setUpload(undefined)}
+      />
+
+      <div
+        ref={scrollRef}
+        className="scrollbar-container h-[calc(100vh-70px)] overflow-y-auto bg-secondary"
+      >
+        <div className="space-y-2 p-4">
+          {reviewItems?.length === 0 ? (
+            <div className="py-8 text-center text-muted-foreground">
+              {t("detail.noDataFound")}
+            </div>
+          ) : (
+            reviewItems?.map((review: ReviewSegment) => {
+              const id = `review-${review.id ?? review.start_time ?? Math.floor((review.start_time ?? 0) - PAD)}`;
+              return (
+                <ReviewGroup
+                  key={id}
+                  id={id}
+                  review={review}
+                  config={config}
+                  onSeek={onSeek}
+                  effectiveTime={effectiveTime}
+                  isActive={activeReviewId == id}
+                  onActivate={() => setActiveReviewId(id)}
+                  onOpenUpload={(e) => setUpload(e)}
+                />
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      <AnnotationOffsetSlider />
+    </div>
+  );
+}
+
+type ReviewGroupProps = {
+  review: ReviewSegment;
+  id: string;
+  config: FrigateConfig;
+  onSeek: (timestamp: number) => void;
+  isActive?: boolean;
+  onActivate?: () => void;
+  onOpenUpload?: (e: Event) => void;
+  effectiveTime?: number;
+};
+
+function ReviewGroup({
+  review,
+  id,
+  config,
+  onSeek,
+  isActive = false,
+  onActivate,
+  onOpenUpload,
+  effectiveTime,
+}: ReviewGroupProps) {
+  const { t } = useTranslation("views/events");
+  const PAD = REVIEW_PADDING ?? 2;
+
+  // derive start timestamp from the review
+  const start = (review.start_time ?? 0) - PAD;
+
+  // display time first in the header
+  const displayTime = formatUnixTimestampToDateTime(start, {
+    timezone: config.ui.timezone,
+    date_format:
+      config.ui.time_format == "24hour"
+        ? t("time.formattedTimestamp.24hour", { ns: "common" })
+        : t("time.formattedTimestamp.12hour", { ns: "common" }),
+    time_style: "medium",
+    date_style: "medium",
+  });
+
+  const { data: fetchedEvents } = useSWR<Event[]>(
+    review?.data?.detections?.length
+      ? ["event_ids", { ids: review.data.detections.join(",") }]
+      : null,
+  );
+
+  const rawIconLabels: string[] = fetchedEvents
+    ? fetchedEvents.map((e) => e.label)
+    : (review.data?.objects ?? []);
+
+  // limit to 5 icons
+  const seen = new Set<string>();
+  const iconLabels: string[] = [];
+  for (const lbl of rawIconLabels) {
+    if (!seen.has(lbl)) {
+      seen.add(lbl);
+      iconLabels.push(lbl);
+      if (iconLabels.length >= 5) break;
+    }
+  }
+
+  const objectCount = fetchedEvents
+    ? fetchedEvents.length
+    : (review.data.objects ?? []).length;
+  return (
+    <div
+      data-review-id={id}
+      className={`cursor-pointer rounded-lg border bg-background p-3 outline outline-[3px] -outline-offset-[2.8px] ${
+        isActive
+          ? "shadow-selected outline-selected"
+          : "outline-transparent duration-500"
+      }`}
+    >
+      <div
+        className="flex items-center justify-between"
+        onClick={() => {
+          onActivate?.();
+          onSeek(start);
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <div className="flex flex-col">
+            <div className="text-sm font-medium">{displayTime}</div>
+            <div className="text-xs text-muted-foreground">
+              {objectCount} {t("detail.trackedObject", { count: objectCount })}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {iconLabels.slice(0, 5).map((lbl, idx) => (
+            <span key={`${lbl}-${idx}`}>
+              {getIconForLabel(lbl, "size-4 text-primary dark:text-white")}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {isActive && (
+        <div className="mt-2 space-y-2">
+          {!fetchedEvents ? (
+            <ActivityIndicator />
+          ) : (
+            fetchedEvents.map((event) => {
+              return (
+                <EventCollapsible
+                  key={event.id}
+                  event={event}
+                  effectiveTime={effectiveTime}
+                  onSeek={onSeek}
+                  onOpenUpload={onOpenUpload}
+                />
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type EventCollapsibleProps = {
+  event: Event;
+  effectiveTime?: number;
+  onSeek: (ts: number) => void;
+  onOpenUpload?: (e: Event) => void;
+};
+function EventCollapsible({
+  event,
+  effectiveTime,
+  onSeek,
+  onOpenUpload,
+}: EventCollapsibleProps) {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation("views/events");
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const { selectedObjectId, setSelectedObjectId } = useDetailStream();
+
+  const formattedStart = config
+    ? formatUnixTimestampToDateTime(event.start_time ?? 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 formattedEnd = config
+    ? formatUnixTimestampToDateTime(event.end_time ?? 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",
+      })
+    : "";
+
+  // Clear selectedObjectId when effectiveTime has passed this event's end_time
+  useEffect(() => {
+    if (selectedObjectId === event.id && effectiveTime && event.end_time) {
+      if (effectiveTime > event.end_time) {
+        setSelectedObjectId(undefined);
+      }
+    }
+  }, [
+    selectedObjectId,
+    event.id,
+    event.end_time,
+    effectiveTime,
+    setSelectedObjectId,
+  ]);
+
+  return (
+    <Collapsible open={open} onOpenChange={(o) => setOpen(o)}>
+      <div
+        className={cn(
+          "rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px]",
+          event.id == selectedObjectId
+            ? "shadow-selected outline-selected"
+            : "outline-transparent duration-500",
+          event.id != selectedObjectId &&
+            (effectiveTime ?? 0) >= (event.start_time ?? 0) &&
+            (effectiveTime ?? 0) <= (event.end_time ?? event.start_time ?? 0) &&
+            "bg-secondary-highlight/80 outline-[1px] -outline-offset-[0.8px] outline-primary/40",
+        )}
+      >
+        <div className="flex w-full items-center justify-between">
+          <div
+            className="flex items-center gap-2 text-sm font-medium"
+            onClick={(e) => {
+              e.stopPropagation();
+              onSeek(event.start_time ?? 0);
+              if (event.id) setSelectedObjectId(event.id);
+            }}
+            role="button"
+          >
+            {getIconForLabel(
+              event.label,
+              "size-4 text-primary dark:text-white",
+            )}
+            <div className="flex items-end gap-2">
+              <span>{getTranslatedLabel(event.label)}</span>
+              <span className="text-xs text-secondary-foreground">
+                {formattedStart ?? ""} - {formattedEnd ?? ""}
+              </span>
+            </div>
+          </div>
+          <div className="flex flex-1 flex-row justify-end">
+            <EventMenu
+              event={event}
+              config={config}
+              onOpenUpload={(e) => onOpenUpload?.(e)}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <CollapsibleTrigger asChild>
+              <button
+                onClick={(e) => e.stopPropagation()}
+                className="rounded bg-muted px-2 py-1 text-xs"
+                aria-label={t("detail.aria")}
+              >
+                {open ? (
+                  <LuChevronUp className="size-3" />
+                ) : (
+                  <LuChevronDown className="size-3" />
+                )}
+              </button>
+            </CollapsibleTrigger>
+          </div>
+        </div>
+        <CollapsibleContent>
+          <div className="mt-2">
+            <ObjectTimeline
+              eventId={event.id}
+              onSeek={(ts) => {
+                onSeek(ts);
+              }}
+              effectiveTime={effectiveTime}
+            />
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+type LifecycleItemProps = {
+  event: ObjectLifecycleSequence;
+  onSeek: (timestamp: number) => void;
+  isActive?: boolean;
+};
+
+function LifecycleItem({ event, isActive }: LifecycleItemProps) {
+  const { t } = useTranslation("views/events");
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const formattedEventTimestamp = config
+    ? formatUnixTimestampToDateTime(event.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",
+      })
+    : "";
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 text-sm text-primary-variant",
+        isActive ? "text-white" : "duration-500",
+      )}
+    >
+      <div className="flex size-4 items-center justify-center">
+        <LifecycleIcon lifecycleItem={event} className="size-3" />
+      </div>
+      <div className="flex w-full flex-row justify-between">
+        <div>{getLifecycleItemDescription(event)}</div>
+        <div className={cn("p-1 text-xs")}>{formattedEventTimestamp}</div>
+      </div>
+    </div>
+  );
+}
+
+// Fetch and render timeline entries for a single event id on demand.
+function ObjectTimeline({
+  eventId,
+  onSeek,
+  effectiveTime,
+}: {
+  eventId: string;
+  onSeek: (ts: number) => void;
+  effectiveTime?: number;
+}) {
+  const { t } = useTranslation("views/events");
+  const { data: timeline, isValidating } = useSWR<ObjectLifecycleSequence[]>([
+    "timeline",
+    {
+      source_id: eventId,
+    },
+  ]);
+
+  if ((!timeline || timeline.length === 0) && isValidating) {
+    return <ActivityIndicator className="h-2 w-2" size={2} />;
+  }
+
+  if (!timeline || timeline.length === 0) {
+    return (
+      <div className="py-2 text-sm text-muted-foreground">
+        {t("detail.noObjectDetailData")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-2 mt-4 space-y-2">
+      {timeline.map((event, idx) => {
+        const isActive =
+          Math.abs((effectiveTime ?? 0) - (event.timestamp ?? 0)) <= 0.5;
+        return (
+          <div
+            key={`${event.timestamp}-${event.source_id ?? idx}`}
+            onClick={() => {
+              onSeek(event.timestamp);
+            }}
+          >
+            <LifecycleItem event={event} onSeek={onSeek} isActive={isActive} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/timeline/EventMenu.tsx

@@ -0,0 +1,87 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import { HiDotsHorizontal } from "react-icons/hi";
+import { useApiHost } from "@/api";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { Event } from "@/types/event";
+import type { FrigateConfig } from "@/types/frigateConfig";
+
+type EventMenuProps = {
+  event: Event;
+  config?: FrigateConfig;
+  onOpenUpload?: (e: Event) => void;
+  onOpenSimilarity?: (e: Event) => void;
+};
+
+export default function EventMenu({
+  event,
+  config,
+  onOpenUpload,
+  onOpenSimilarity,
+}: EventMenuProps) {
+  const apiHost = useApiHost();
+  const navigate = useNavigate();
+  const { t } = useTranslation("views/explore");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <button
+          className="mr-2 rounded p-1"
+          aria-label={t("itemMenu.openMenu", { ns: "common" })}
+        >
+          <HiDotsHorizontal className="size-4 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuItem asChild>
+            <a
+              download
+              href={
+                event.has_snapshot
+                  ? `${apiHost}api/events/${event.id}/snapshot.jpg`
+                  : `${apiHost}api/events/${event.id}/thumbnail.webp`
+              }
+            >
+              {t("itemMenu.downloadSnapshot.label")}
+            </a>
+          </DropdownMenuItem>
+
+          {event.has_snapshot &&
+            event.plus_id == undefined &&
+            event.data.type == "object" &&
+            config?.plus?.enabled && (
+              <DropdownMenuItem
+                onSelect={() => {
+                  onOpenUpload?.(event);
+                }}
+              >
+                {t("itemMenu.submitToPlus.label")}
+              </DropdownMenuItem>
+            )}
+
+          {event.has_snapshot && config?.semantic_search?.enabled && (
+            <DropdownMenuItem
+              onSelect={() => {
+                if (onOpenSimilarity) onOpenSimilarity(event);
+                else
+                  navigate(
+                    `/explore?search_type=similarity&event_id=${event.id}`,
+                  );
+              }}
+            >
+              {t("itemMenu.findSimilar.label")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}

web/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }