Debug replay (#22212)

* debug replay implementation

* fix masks after dev rebase

* fix squash merge issues

* fix

* fix

* fix

* no need to write debug replay camera to config

* camera and filter button and dropdown

* add filters

* add ability to edit motion and object config for debug replay

* add debug draw overlay to debug replay

* add guard to prevent crash when camera is no longer in camera_states

* fix overflow due to radix absolutely positioned elements

* increase number of messages

* ensure deep_merge replaces existing list values when override is true

* add back button

* add debug replay to explore and review menus

* clean up

* clean up

* update instructions to prevent exposing exception info

* fix typing

* refactor output logic

* refactor with helper function

* move init to function for consistency

web/src/utils/cameraUtil.ts

@@ -148,3 +148,15 @@ export function detectCameraAudioFeatures(
     audioOutput: !!audioOutput,
   };
 }
+
+const REPLAY_CAMERA_PREFIX = "_replay_";
+
+/**
+ * Check if a camera name is a debug replay camera.
+ *
+ * @param name - The camera name to check
+ * @returns true if the camera is a replay camera
+ */
+export function isReplayCamera(name: string): boolean {
+  return name.startsWith(REPLAY_CAMERA_PREFIX);
+}

web/src/utils/configUtil.ts

@@ -514,13 +514,18 @@ const mergeSectionConfig = (
 
 export function getSectionConfig(
   sectionKey: string,
-  level: "global" | "camera",
+  level: "global" | "camera" | "replay",
 ): SectionConfig {
   const entry = sectionConfigs[sectionKey];
   if (!entry) {
     return {};
   }
 
-  const overrides = level === "global" ? entry.global : entry.camera;
+  const overrides =
+    level === "global"
+      ? entry.global
+      : level === "replay"
+        ? entry.replay
+        : entry.camera;
   return mergeSectionConfig(entry.base, overrides);
 }

web/src/utils/wsUtil.ts

@@ -0,0 +1,53 @@
+import { WsFeedMessage } from "@/api/ws";
+
+const EVENT_TOPICS = new Set([
+  "events",
+  "reviews",
+  "tracked_object_update",
+  "triggers",
+]);
+
+const SYSTEM_TOPICS = new Set([
+  "stats",
+  "model_state",
+  "job_state",
+  "embeddings_reindex_progress",
+  "audio_transcription_state",
+  "birdseye_layout",
+]);
+
+export function extractCameraName(message: WsFeedMessage): string | null {
+  // Try extracting from topic pattern: {camera}/motion, {camera}/audio/rms, etc.
+  const topicParts = message.topic.split("/");
+  if (
+    topicParts.length >= 2 &&
+    !EVENT_TOPICS.has(message.topic) &&
+    !SYSTEM_TOPICS.has(message.topic) &&
+    message.topic !== "camera_activity" &&
+    message.topic !== "audio_detections" &&
+    message.topic !== "restart" &&
+    message.topic !== "notification_test"
+  ) {
+    return topicParts[0];
+  }
+
+  // Try extracting from payload
+  try {
+    const data =
+      typeof message.payload === "string"
+        ? JSON.parse(message.payload)
+        : message.payload;
+
+    if (typeof data === "object" && data !== null) {
+      if ("camera" in data) return data.camera as string;
+      if ("after" in data && data.after?.camera)
+        return data.after.camera as string;
+      if ("before" in data && data.before?.camera)
+        return data.before.camera as string;
+    }
+  } catch {
+    // ignore parse errors
+  }
+
+  return null;
+}