From 9599450cffe2f0199f8d186c17de5a1545920950 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 16 Oct 2025 07:55:10 -0600
Subject: [PATCH] Add GenAI info to detail stream (#20527)

* Add camera previews back

* Add genai info
---
 web/src/components/timeline/DetailStream.tsx |  21 ++--
 web/src/views/recording/RecordingView.tsx    | 107 +++++++++----------
 2 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index 96ee3d595..396523c0c 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ObjectLifecycleSequence } from "@/types/timeline";
 import { LifecycleIcon } from "@/components/overlay/detail/ObjectLifecycle";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
@@ -256,9 +256,18 @@ function ReviewGroup({
     }
   }
 
-  const objectCount = fetchedEvents
-    ? fetchedEvents.length
-    : (review.data.objects ?? []).length;
+  const reviewInfo = useMemo(() => {
+    if (review.data.metadata?.title) {
+      return review.data.metadata.title;
+    } else {
+      const objectCount = fetchedEvents
+        ? fetchedEvents.length
+        : (review.data.objects ?? []).length;
+
+      return `${objectCount} ${t("detail.trackedObject", { count: objectCount })}`;
+    }
+  }, [review, t, fetchedEvents]);
+
   return (
     <div
       data-review-id={id}
@@ -278,9 +287,7 @@ function ReviewGroup({
         <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 className="text-xs text-muted-foreground">{reviewInfo}</div>
           </div>
         </div>
         <div className="flex items-center gap-2">
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index b495d043b..aa15d693f 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -774,62 +774,61 @@ export function RecordingView({
                   containerRef={mainLayoutRef}
                 />
               </div>
-              {isDesktop &&
-                effectiveCameras.length > 1 &&
-                timelineType !== "detail" && (
-                  <div
-                    ref={previewRowRef}
-                    className={cn(
-                      "scrollbar-container flex gap-2 overflow-auto",
-                      mainCameraAspect == "tall"
-                        ? "h-full w-72 flex-col"
-                        : `h-28 w-full`,
-                      previewRowOverflows ? "" : "items-center justify-center",
-                    )}
-                  >
-                    <div className="w-2" />
-                    {effectiveCameras.map((cam) => {
-                      if (cam == mainCamera || cam == "birdseye") {
-                        return;
-                      }
+              {isDesktop && effectiveCameras.length > 1 && (
+                <div
+                  ref={previewRowRef}
+                  className={cn(
+                    "scrollbar-container flex gap-2 overflow-auto",
+                    mainCameraAspect == "tall"
+                      ? "h-full w-72 flex-col"
+                      : `h-28 w-full`,
+                    previewRowOverflows ? "" : "items-center justify-center",
+                    timelineType == "detail" && "mt-4",
+                  )}
+                >
+                  <div className="w-2" />
+                  {effectiveCameras.map((cam) => {
+                    if (cam == mainCamera || cam == "birdseye") {
+                      return;
+                    }
 
-                      return (
-                        <Tooltip key={cam}>
-                          <TooltipTrigger asChild>
-                            <div
-                              className={
-                                mainCameraAspect == "tall" ? "w-full" : "h-full"
-                              }
-                              style={{
-                                aspectRatio: getCameraAspect(cam),
+                    return (
+                      <Tooltip key={cam}>
+                        <TooltipTrigger asChild>
+                          <div
+                            className={
+                              mainCameraAspect == "tall" ? "w-full" : "h-full"
+                            }
+                            style={{
+                              aspectRatio: getCameraAspect(cam),
+                            }}
+                          >
+                            <PreviewPlayer
+                              previewRef={previewRef}
+                              className="size-full"
+                              camera={cam}
+                              timeRange={currentTimeRange}
+                              cameraPreviews={allPreviews ?? []}
+                              startTime={startTime}
+                              isScrubbing={scrubbing}
+                              isVisible={visiblePreviews.includes(cam)}
+                              onControllerReady={(controller) => {
+                                previewRefs.current[cam] = controller;
+                                controller.scrubToTimestamp(startTime);
                               }}
-                            >
-                              <PreviewPlayer
-                                previewRef={previewRef}
-                                className="size-full"
-                                camera={cam}
-                                timeRange={currentTimeRange}
-                                cameraPreviews={allPreviews ?? []}
-                                startTime={startTime}
-                                isScrubbing={scrubbing}
-                                isVisible={visiblePreviews.includes(cam)}
-                                onControllerReady={(controller) => {
-                                  previewRefs.current[cam] = controller;
-                                  controller.scrubToTimestamp(startTime);
-                                }}
-                                onClick={() => onSelectCamera(cam)}
-                              />
-                            </div>
-                          </TooltipTrigger>
-                          <TooltipContent className="smart-capitalize">
-                            <CameraNameLabel camera={cam} />
-                          </TooltipContent>
-                        </Tooltip>
-                      );
-                    })}
-                    <div className="w-2" />
-                  </div>
-                )}
+                              onClick={() => onSelectCamera(cam)}
+                            />
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent className="smart-capitalize">
+                          <CameraNameLabel camera={cam} />
+                        </TooltipContent>
+                      </Tooltip>
+                    );
+                  })}
+                  <div className="w-2" />
+                </div>
+              )}
             </div>
           </div>
           <Timeline