Fix EU DST bug (#22698)

* add config messages to sections and fields

* add alert variants

* add messages to types

* add detect fps, review, and audio messages

* add a basic set of messages

* remove emptySelectionHintKey from switches widget

use the new messages framework and revert the changes made in #22664

frigate/camera/state.py

@@ -54,6 +54,28 @@ class CameraState:
         self.ptz_autotracker_thread = ptz_autotracker_thread
         self.prev_enabled = self.camera_config.enabled
 
+        # Minimum object area thresholds for fast-tracking updates to secondary
+        # face/LPR pipelines when using a model without built-in detection.
+        self.face_recognition_min_obj_area: int = 0
+        self.lpr_min_obj_area: int = 0
+
+        if (
+            self.camera_config.face_recognition.enabled
+            and "face" not in config.objects.all_objects
+        ):
+            # A face is roughly 1/8 of person box area; use a conservative
+            # multiplier so fast-tracking starts slightly before the optimal zone
+            self.face_recognition_min_obj_area = (
+                self.camera_config.face_recognition.min_area * 6
+            )
+
+        if (
+            self.camera_config.lpr.enabled
+            and "license_plate" not in self.camera_config.objects.track
+        ):
+            # A plate is a smaller fraction of a vehicle box; use ~20x multiplier
+            self.lpr_min_obj_area = self.camera_config.lpr.min_area * 20
+
     def get_current_frame(self, draw_options: dict[str, Any] = {}) -> np.ndarray:
         with self.current_frame_lock:
             frame_copy = np.copy(self._current_frame)
@@ -372,13 +394,30 @@ class CameraState:
 
                 updated_obj.last_updated = frame_time
 
-            # if it has been more than 5 seconds since the last thumb update
-            # and the last update is greater than the last publish or
-            # the object has changed significantly or
-            # the object moved enough to update the path
+            # Determine the staleness threshold for publishing updates.
+            # Fast-track to 1s for objects in the optimal size range for
+            # secondary face/LPR recognition that don't yet have a sub_label.
+            obj_area = updated_obj.obj_data.get("area", 0)
+            obj_label = updated_obj.obj_data.get("label")
+            publish_threshold = 5
+
+            if (
+                obj_label == "person"
+                and self.face_recognition_min_obj_area > 0
+                and obj_area >= self.face_recognition_min_obj_area
+                and updated_obj.obj_data.get("sub_label") is None
+            ) or (
+                obj_label in ("car", "motorcycle")
+                and self.lpr_min_obj_area > 0
+                and obj_area >= self.lpr_min_obj_area
+                and updated_obj.obj_data.get("sub_label") is None
+                and updated_obj.obj_data.get("recognized_license_plate") is None
+            ):
+                publish_threshold = 1
+
             if (
                 (
-                    frame_time - updated_obj.last_published > 5
+                    frame_time - updated_obj.last_published > publish_threshold
                     and updated_obj.last_updated > updated_obj.last_published
                 )
                 or significant_update
@@ -389,6 +428,18 @@ class CameraState:
                     c(self.name, updated_obj, frame_name)
                 updated_obj.last_published = frame_time
 
+            # send MQTT snapshot when object first enters a required zone,
+            # since the initial snapshot at creation time is blocked before
+            # zone evaluation has run
+            if updated_obj.new_zone_entered and not updated_obj.false_positive:
+                mqtt_required = self.camera_config.mqtt.required_zones
+                if mqtt_required and set(updated_obj.entered_zones) & set(
+                    mqtt_required
+                ):
+                    object_type = updated_obj.obj_data["label"]
+                    self.send_mqtt_snapshot(updated_obj, object_type)
+                updated_obj.new_zone_entered = False
+
         for id in removed_ids:
             # publish events to mqtt
             removed_obj = tracked_objects[id]

frigate/data_processing/common/license_plate/mixin.py

@@ -1095,7 +1095,7 @@ class LicensePlateProcessingMixin:
             logger.debug(
                 f"{camera}: Found license plate. Bounding box: {expanded_box.astype(int)}"
             )
-            return tuple(expanded_box.astype(int))  # type: ignore[return-value]
+            return tuple(int(x) for x in expanded_box)  # type: ignore[return-value]
         else:
             return None  # No detection above the threshold
 

frigate/data_processing/post/review_descriptions.py

@@ -149,10 +149,13 @@ class ReviewDescriptionProcessor(PostProcessorApi):
                     additional_buffer_per_side = (MIN_RECORDING_DURATION - duration) / 2
                     buffer_extension = min(5, additional_buffer_per_side)
 
+                final_data["start_time"] -= buffer_extension
+                final_data["end_time"] += buffer_extension
+
                 thumbs = self.get_recording_frames(
                     camera,
-                    final_data["start_time"] - buffer_extension,
-                    final_data["end_time"] + buffer_extension,
+                    final_data["start_time"],
+                    final_data["end_time"],
                     height=480,  # Use 480p for good balance between quality and token usage
                 )
 

frigate/output/preview.py

@@ -249,10 +249,9 @@ class PreviewRecorder:
             "v2": v2,
         }
 
-        # end segment at end of hour
+        # end segment at end of hour (use UTC to avoid DST issues)
         self.segment_end = (
-            (datetime.datetime.now() + datetime.timedelta(hours=1))
-            .astimezone(datetime.timezone.utc)
+            (datetime.datetime.now(datetime.timezone.utc) + datetime.timedelta(hours=1))
             .replace(minute=0, second=0, microsecond=0)
             .timestamp()
         )
@@ -264,8 +263,7 @@ class PreviewRecorder:
 
         # check for existing items in cache
         start_ts = (
-            datetime.datetime.now()
-            .astimezone(datetime.timezone.utc)
+            datetime.datetime.now(datetime.timezone.utc)
             .replace(minute=0, second=0, microsecond=0)
             .timestamp()
         )
@@ -299,8 +297,10 @@ class PreviewRecorder:
 
     def reset_frame_cache(self, frame_time: float) -> None:
         self.segment_end = (
-            (datetime.datetime.now() + datetime.timedelta(hours=1))
-            .astimezone(datetime.timezone.utc)
+            (
+                datetime.datetime.fromtimestamp(frame_time, tz=datetime.timezone.utc)
+                + datetime.timedelta(hours=1)
+            )
             .replace(minute=0, second=0, microsecond=0)
             .timestamp()
         )

frigate/stats/emitter.py

@@ -52,18 +52,66 @@ class StatsEmitter(threading.Thread):
     def get_stats_history(
         self, keys: Optional[list[str]] = None
     ) -> list[dict[str, Any]]:
-        """Get stats history."""
+        """Get stats history.
+
+        Supports dot-notation for nested keys to avoid returning large objects
+        when only specific subfields are needed. Handles two patterns:
+
+        - Flat dict: "service.last_updated" returns {"service": {"last_updated": ...}}
+        - Dict-of-dicts: "cameras.camera_fps" returns each camera entry filtered
+          to only include "camera_fps"
+        """
         if not keys:
             return self.stats_history
 
+        # Pre-parse keys into top-level keys and dot-notation fields
+        top_level_keys: list[str] = []
+        nested_keys: dict[str, list[str]] = {}
+
+        for k in keys:
+            if "." in k:
+                parent_key, child_key = k.split(".", 1)
+                nested_keys.setdefault(parent_key, []).append(child_key)
+            else:
+                top_level_keys.append(k)
+
         selected_stats: list[dict[str, Any]] = []
 
         for s in self.stats_history:
-            selected = {}
+            selected: dict[str, Any] = {}
 
-            for k in keys:
+            for k in top_level_keys:
                 selected[k] = s.get(k)
 
+            for parent_key, child_keys in nested_keys.items():
+                parent = s.get(parent_key)
+
+                if not isinstance(parent, dict):
+                    selected[parent_key] = parent
+                    continue
+
+                # Check if values are dicts (dict-of-dicts like cameras/detectors)
+                first_value = next(iter(parent.values()), None)
+
+                if isinstance(first_value, dict):
+                    # Filter each nested entry to only requested fields,
+                    # omitting None values to preserve key-absence semantics
+                    selected[parent_key] = {
+                        entry_key: {
+                            field: val
+                            for field in child_keys
+                            if (val := entry.get(field)) is not None
+                        }
+                        for entry_key, entry in parent.items()
+                    }
+                else:
+                    # Flat dict (like service) - pick individual fields
+                    if parent_key not in selected:
+                        selected[parent_key] = {}
+
+                    for child_key in child_keys:
+                        selected[parent_key][child_key] = parent.get(child_key)
+
             selected_stats.append(selected)
 
         return selected_stats

frigate/stats/prometheus.py

@@ -355,16 +355,37 @@ class CustomCollector(object):
         gpu_mem_usages = GaugeMetricFamily(
             "frigate_gpu_mem_usage_percent", "GPU memory usage %", labels=["gpu_name"]
         )
+        gpu_enc_usages = GaugeMetricFamily(
+            "frigate_gpu_encoder_usage_percent",
+            "GPU encoder utilisation %",
+            labels=["gpu_name"],
+        )
+        gpu_compute_usages = GaugeMetricFamily(
+            "frigate_gpu_compute_usage_percent",
+            "GPU compute / encode utilisation %",
+            labels=["gpu_name"],
+        )
+        gpu_dec_usages = GaugeMetricFamily(
+            "frigate_gpu_decoder_usage_percent",
+            "GPU decoder utilisation %",
+            labels=["gpu_name"],
+        )
 
         try:
             for gpu_name, gpu_stats in stats["gpu_usages"].items():
                 self.add_metric(gpu_usages, [gpu_name], gpu_stats, "gpu")
                 self.add_metric(gpu_mem_usages, [gpu_name], gpu_stats, "mem")
+                self.add_metric(gpu_enc_usages, [gpu_name], gpu_stats, "enc")
+                self.add_metric(gpu_compute_usages, [gpu_name], gpu_stats, "compute")
+                self.add_metric(gpu_dec_usages, [gpu_name], gpu_stats, "dec")
         except KeyError:
             pass
 
         yield gpu_usages
         yield gpu_mem_usages
+        yield gpu_enc_usages
+        yield gpu_compute_usages
+        yield gpu_dec_usages
 
         # service stats
         uptime_seconds = GaugeMetricFamily(

frigate/stats/util.py

@@ -261,45 +261,33 @@ async def set_gpu_stats(
             else:
                 stats["jetson-gpu"] = {"gpu": "", "mem": ""}
                 hwaccel_errors.append(args)
-        elif "qsv" in args:
+        elif "qsv" in args or ("vaapi" in args and not is_vaapi_amd_driver()):
             if not config.telemetry.stats.intel_gpu_stats:
                 continue
 
-            # intel QSV GPU
-            intel_usage = get_intel_gpu_stats(config.telemetry.stats.intel_gpu_device)
-
-            if intel_usage is not None:
-                stats["intel-qsv"] = intel_usage or {"gpu": "", "mem": ""}
-            else:
-                stats["intel-qsv"] = {"gpu": "", "mem": ""}
-                hwaccel_errors.append(args)
-        elif "vaapi" in args:
-            if is_vaapi_amd_driver():
-                if not config.telemetry.stats.amd_gpu_stats:
-                    continue
-
-                # AMD VAAPI GPU
-                amd_usage = get_amd_gpu_stats()
-
-                if amd_usage:
-                    stats["amd-vaapi"] = amd_usage
-                else:
-                    stats["amd-vaapi"] = {"gpu": "", "mem": ""}
-                    hwaccel_errors.append(args)
-            else:
-                if not config.telemetry.stats.intel_gpu_stats:
-                    continue
-
-                # intel VAAPI GPU
+            if "intel-gpu" not in stats:
+                # intel GPU (QSV or VAAPI both use the same physical GPU)
                 intel_usage = get_intel_gpu_stats(
                     config.telemetry.stats.intel_gpu_device
                 )
 
                 if intel_usage is not None:
-                    stats["intel-vaapi"] = intel_usage or {"gpu": "", "mem": ""}
+                    stats["intel-gpu"] = intel_usage or {"gpu": "", "mem": ""}
                 else:
-                    stats["intel-vaapi"] = {"gpu": "", "mem": ""}
+                    stats["intel-gpu"] = {"gpu": "", "mem": ""}
                     hwaccel_errors.append(args)
+        elif "vaapi" in args:
+            if not config.telemetry.stats.amd_gpu_stats:
+                continue
+
+            # AMD VAAPI GPU
+            amd_usage = get_amd_gpu_stats()
+
+            if amd_usage:
+                stats["amd-vaapi"] = amd_usage
+            else:
+                stats["amd-vaapi"] = {"gpu": "", "mem": ""}
+                hwaccel_errors.append(args)
         elif "preset-rk" in args:
             rga_usage = get_rockchip_gpu_stats()
 
@@ -510,4 +498,30 @@ def stats_snapshot(
             "pid": pid,
         }
 
+    # Embed cpu/mem stats into detectors, cameras, and processes
+    # so history consumers don't need the full cpu_usages dict
+    cpu_usages = stats.get("cpu_usages", {})
+
+    for det_stats in stats["detectors"].values():
+        pid_str = str(det_stats.get("pid", ""))
+        usage = cpu_usages.get(pid_str, {})
+        det_stats["cpu"] = usage.get("cpu")
+        det_stats["mem"] = usage.get("mem")
+
+    for cam_stats in stats["cameras"].values():
+        for pid_key, field in [
+            ("ffmpeg_pid", "ffmpeg_cpu"),
+            ("capture_pid", "capture_cpu"),
+            ("pid", "detect_cpu"),
+        ]:
+            pid_str = str(cam_stats.get(pid_key, ""))
+            usage = cpu_usages.get(pid_str, {})
+            cam_stats[field] = usage.get("cpu")
+
+    for proc_stats in stats["processes"].values():
+        pid_str = str(proc_stats.get("pid", ""))
+        usage = cpu_usages.get(pid_str, {})
+        proc_stats["cpu"] = usage.get("cpu")
+        proc_stats["mem"] = usage.get("mem")
+
     return stats

frigate/test/test_gpu_stats.py

@@ -39,8 +39,12 @@ class TestGpuStats(unittest.TestCase):
         process.stdout = self.intel_results
         sp.return_value = process
         intel_stats = get_intel_gpu_stats(False)
-        print(f"the intel stats are {intel_stats}")
+        # rc6 values: 47.844741 and 100.0 → avg 73.92 → gpu = 100 - 73.92 = 26.08%
+        # Render/3D/0: 0.0 and 0.0 → enc = 0.0%
+        # Video/0: 4.533124 and 0.0 → dec = 2.27%
         assert intel_stats == {
-            "gpu": "1.13%",
+            "gpu": "26.08%",
             "mem": "-%",
+            "compute": "0.0%",
+            "dec": "2.27%",
         }

frigate/track/tracked_object.py

@@ -61,6 +61,7 @@ class TrackedObject:
         self.zone_loitering: dict[str, int] = {}
         self.current_zones: list[str] = []
         self.entered_zones: list[str] = []
+        self.new_zone_entered: bool = False
         self.attributes: dict[str, float] = defaultdict(float)
         self.false_positive = True
         self.has_clip = False
@@ -278,6 +279,7 @@ class TrackedObject:
 
                             if name not in self.entered_zones:
                                 self.entered_zones.append(name)
+                                self.new_zone_entered = True
                         else:
                             self.zone_loitering[name] = loitering_score
 

frigate/util/services.py

@@ -265,14 +265,30 @@ def get_amd_gpu_stats() -> Optional[dict[str, str]]:
 
 
 def get_intel_gpu_stats(intel_gpu_device: Optional[str]) -> Optional[dict[str, str]]:
-    """Get stats using intel_gpu_top."""
+    """Get stats using intel_gpu_top.
+
+    Returns overall GPU usage derived from rc6 residency (idle time),
+    plus individual engine breakdowns:
+      - enc: Render/3D engine (compute/shader encoder, used by QSV)
+      - dec: Video engines (fixed-function codec, used by VAAPI)
+    """
 
     def get_stats_manually(output: str) -> dict[str, str]:
         """Find global stats via regex when json fails to parse."""
         reading = "".join(output)
         results: dict[str, str] = {}
 
-        # render is used for qsv
+        # rc6 residency for overall GPU usage
+        rc6_match = re.search(r'"rc6":\{"value":([\d.]+)', reading)
+        if rc6_match:
+            rc6_value = float(rc6_match.group(1))
+            results["gpu"] = f"{round(100.0 - rc6_value, 2)}%"
+        else:
+            results["gpu"] = "-%"
+
+        results["mem"] = "-%"
+
+        # Render/3D is the compute/encode engine
         render = []
         for result in re.findall(r'"Render/3D/0":{[a-z":\d.,%]+}', reading):
             packet = json.loads(result[14:])
@@ -280,11 +296,9 @@ def get_intel_gpu_stats(intel_gpu_device: Optional[str]) -> Optional[dict[str, s
             render.append(float(single))
 
         if render:
-            render_avg = sum(render) / len(render)
-        else:
-            render_avg = 1
+            results["compute"] = f"{round(sum(render) / len(render), 2)}%"
 
-        # video is used for vaapi
+        # Video engines are the fixed-function decode engines
         video = []
         for result in re.findall(r'"Video/\d":{[a-z":\d.,%]+}', reading):
             packet = json.loads(result[10:])
@@ -292,12 +306,8 @@ def get_intel_gpu_stats(intel_gpu_device: Optional[str]) -> Optional[dict[str, s
             video.append(float(single))
 
         if video:
-            video_avg = sum(video) / len(video)
-        else:
-            video_avg = 1
+            results["dec"] = f"{round(sum(video) / len(video), 2)}%"
 
-        results["gpu"] = f"{round((video_avg + render_avg) / 2, 2)}%"
-        results["mem"] = "-%"
         return results
 
     intel_gpu_top_command = [
@@ -336,10 +346,18 @@ def get_intel_gpu_stats(intel_gpu_device: Optional[str]) -> Optional[dict[str, s
             return get_stats_manually(output)
 
         results: dict[str, str] = {}
-        render = {"global": []}
-        video = {"global": []}
+        rc6_values = []
+        render_global = []
+        video_global = []
+        # per-client: {pid: [total_busy_per_sample, ...]}
+        client_usages: dict[str, list[float]] = {}
 
         for block in data:
+            # rc6 residency: percentage of time GPU is idle
+            rc6 = block.get("rc6", {}).get("value")
+            if rc6 is not None:
+                rc6_values.append(float(rc6))
+
             global_engine = block.get("engines")
 
             if global_engine:
@@ -347,48 +365,53 @@ def get_intel_gpu_stats(intel_gpu_device: Optional[str]) -> Optional[dict[str, s
                 video_frame = global_engine.get("Video/0", {}).get("busy")
 
                 if render_frame is not None:
-                    render["global"].append(float(render_frame))
+                    render_global.append(float(render_frame))
 
                 if video_frame is not None:
-                    video["global"].append(float(video_frame))
+                    video_global.append(float(video_frame))
 
             clients = block.get("clients", {})
 
-            if clients and len(clients):
+            if clients:
                 for client_block in clients.values():
-                    key = client_block["pid"]
+                    pid = client_block["pid"]
 
-                    if render.get(key) is None:
-                        render[key] = []
-                        video[key] = []
+                    if pid not in client_usages:
+                        client_usages[pid] = []
 
-                    client_engine = client_block.get("engine-classes", {})
+                    # Sum all engine-class busy values for this client
+                    total_busy = 0.0
+                    for engine in client_block.get("engine-classes", {}).values():
+                        busy = engine.get("busy")
+                        if busy is not None:
+                            total_busy += float(busy)
 
-                    render_frame = client_engine.get("Render/3D", {}).get("busy")
-                    video_frame = client_engine.get("Video", {}).get("busy")
+                    client_usages[pid].append(total_busy)
 
-                    if render_frame is not None:
-                        render[key].append(float(render_frame))
+        # Overall GPU usage from rc6 (idle) residency
+        if rc6_values:
+            rc6_avg = sum(rc6_values) / len(rc6_values)
+            results["gpu"] = f"{round(100.0 - rc6_avg, 2)}%"
 
-                    if video_frame is not None:
-                        video[key].append(float(video_frame))
+        results["mem"] = "-%"
 
-        if render["global"] and video["global"]:
-            results["gpu"] = (
-                f"{round(((sum(render['global']) / len(render['global'])) + (sum(video['global']) / len(video['global']))) / 2, 2)}%"
-            )
-            results["mem"] = "-%"
+        # Compute: Render/3D engine (compute/shader workloads and QSV encode)
+        if render_global:
+            results["compute"] = f"{round(sum(render_global) / len(render_global), 2)}%"
 
-        if len(render.keys()) > 1:
+        # Decoder: Video engine (fixed-function codec)
+        if video_global:
+            results["dec"] = f"{round(sum(video_global) / len(video_global), 2)}%"
+
+        # Per-client GPU usage (sum of all engines per process)
+        if client_usages:
             results["clients"] = {}
 
-            for key in render.keys():
-                if key == "global" or not render[key] or not video[key]:
-                    continue
-
-                results["clients"][key] = (
-                    f"{round(((sum(render[key]) / len(render[key])) + (sum(video[key]) / len(video[key]))) / 2, 2)}%"
-                )
+            for pid, samples in client_usages.items():
+                if samples:
+                    results["clients"][pid] = (
+                        f"{round(sum(samples) / len(samples), 2)}%"
+                    )
 
         return results
 

web/public/locales/en/views/settings.json

@@ -1433,8 +1433,7 @@
     },
     "reviewLabels": {
       "summary": "{{count}} labels selected",
-      "empty": "No labels available",
-      "allNonAlertDetections": "All non-alert activity will be included as detections."
+      "empty": "No labels available"
     },
     "filters": {
       "objectFieldLabel": "{{field}} for {{label}}"
@@ -1606,5 +1605,38 @@
   "onvif": {
     "profileAuto": "Auto",
     "profileLoading": "Loading profiles..."
+  },
+  "configMessages": {
+    "review": {
+      "recordDisabled": "Recording is disabled, review items will not be generated.",
+      "detectDisabled": "Object detection is disabled. Review items require detected objects to categorize alerts and detections.",
+      "allNonAlertDetections": "All non-alert activity will be included as detections."
+    },
+    "audio": {
+      "noAudioRole": "No streams have the audio role defined. You must enable the audio role for audio detection to function."
+    },
+    "audioTranscription": {
+      "audioDetectionDisabled": "Audio detection is not enabled for this camera. Audio transcription requires audio detection to be active."
+    },
+    "detect": {
+      "fpsGreaterThanFive": "Setting the detect FPS higher than 5 is not recommended."
+    },
+    "faceRecognition": {
+      "globalDisabled": "Face recognition is not enabled at the global level. Enable it in global settings for camera-level face recognition to function.",
+      "personNotTracked": "Face recognition requires the 'person' object to be tracked. Ensure 'person' is in the object tracking list."
+    },
+    "lpr": {
+      "globalDisabled": "License plate recognition is not enabled at the global level. Enable it in global settings for camera-level LPR to function.",
+      "vehicleNotTracked": "License plate recognition requires 'car' or 'motorcycle' to be tracked."
+    },
+    "record": {
+      "noRecordRole": "No streams have the record role defined. Recording will not function."
+    },
+    "birdseye": {
+      "objectsModeDetectDisabled": "Birdseye is set to 'objects' mode, but object detection is disabled for this camera. The camera will not appear in Birdseye."
+    },
+    "snapshots": {
+      "detectDisabled": "Object detection is disabled. Snapshots are generated from tracked objects and will not be created."
+    }
   }
 }

web/public/locales/en/views/system.json

@@ -78,6 +78,7 @@
       "gpuUsage": "GPU Usage",
       "gpuMemory": "GPU Memory",
       "gpuEncoder": "GPU Encoder",
+      "gpuCompute": "GPU Compute / Encode",
       "gpuDecoder": "GPU Decoder",
       "gpuTemperature": "GPU Temperature",
       "gpuInfo": {
@@ -188,6 +189,7 @@
       "cameraFfmpeg": "{{camName}} FFmpeg",
       "cameraCapture": "{{camName}} capture",
       "cameraDetect": "{{camName}} detect",
+      "cameraGpu": "{{camName}} GPU",
       "cameraFramesPerSecond": "{{camName}} frames per second",
       "cameraDetectionsPerSecond": "{{camName}} detections per second",
       "cameraSkippedDetectionsPerSecond": "{{camName}} skipped detections per second"

web/src/components/Statusbar.tsx

@@ -116,8 +116,7 @@ export default function Statusbar() {
             case "amd-vaapi":
               gpuTitle = "AMD GPU";
               break;
-            case "intel-vaapi":
-            case "intel-qsv":
+            case "intel-gpu":
               gpuTitle = "Intel GPU";
               break;
             case "rockchip":

web/src/components/audio/AudioLevelGraph.tsx

@@ -8,6 +8,7 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useTranslation } from "react-i18next";
+import { useTimeFormat } from "@/hooks/use-date-utils";
 
 const GRAPH_COLORS = ["#3b82f6", "#ef4444"]; // RMS, dBFS
 
@@ -72,7 +73,7 @@ export function AudioLevelGraph({ cameraName }: AudioLevelGraphProps) {
     return [last.rms, last.dBFS];
   }, [audioData]);
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const formatString = useMemo(
     () =>
       t(`time.formattedTimestampHourMinuteSecond.${timeFormat}`, {

web/src/components/button/DownloadVideoButton.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useDateLocale } from "@/hooks/use-date-locale";
+import { useTimeFormat } from "@/hooks/use-date-utils";
 import { useMemo } from "react";
 
 type DownloadVideoButtonProps = {
@@ -26,7 +27,7 @@ export function DownloadVideoButton({
   const { data: config } = useSWR<FrigateConfig>("config");
   const locale = useDateLocale();
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     return t(`time.formattedTimestampFilename.${timeFormat}`, { ns: "common" });
   }, [t, timeFormat]);

web/src/components/card/ReviewCard.tsx

@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
 import { getIconForLabel } from "@/utils/iconUtil";
@@ -55,9 +55,10 @@ export default function ReviewCard({
   const { t } = useTranslation(["components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     event.start_time,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampHourMinute.24hour", { ns: "common" })
       : t("time.formattedTimestampHourMinute.12hour", { ns: "common" }),
     config?.ui.timezone,

web/src/components/card/SearchThumbnailFooter.tsx

@@ -1,7 +1,7 @@
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { SearchResult } from "@/types/search";
 import ActivityIndicator from "../indicators/activity-indicator";
 import SearchResultActions from "../menu/SearchResultActions";
@@ -29,9 +29,10 @@ export default function SearchThumbnailFooter({
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // date
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     searchResult.start_time,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
       : t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
     config?.ui.timezone,

web/src/components/config-form/ConfigFieldMessage.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { LuInfo, LuTriangleAlert, LuCircleAlert } from "react-icons/lu";
+import type { MessageSeverity } from "./section-configs/types";
+
+const severityVariantMap: Record<
+  MessageSeverity,
+  "info" | "warning" | "destructive"
+> = {
+  info: "info",
+  warning: "warning",
+  error: "destructive",
+};
+
+function SeverityIcon({ severity }: { severity: string }) {
+  switch (severity) {
+    case "info":
+      return <LuInfo className="size-4" />;
+    case "warning":
+      return <LuTriangleAlert className="size-4" />;
+    case "error":
+      return <LuCircleAlert className="size-4" />;
+    default:
+      return <LuInfo className="size-4" />;
+  }
+}
+
+type ConfigFieldMessageProps = {
+  messageKey: string;
+  severity: string;
+};
+
+export function ConfigFieldMessage({
+  messageKey,
+  severity,
+}: ConfigFieldMessageProps) {
+  const { t } = useTranslation("views/settings");
+
+  return (
+    <Alert
+      variant={severityVariantMap[severity as MessageSeverity] ?? "info"}
+      className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2"
+    >
+      <SeverityIcon severity={severity} />
+      <AlertDescription>{t(messageKey)}</AlertDescription>
+    </Alert>
+  );
+}

web/src/components/config-form/ConfigMessageBanner.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "react-i18next";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { LuInfo, LuTriangleAlert, LuCircleAlert } from "react-icons/lu";
+import type {
+  ConditionalMessage,
+  MessageSeverity,
+} from "./section-configs/types";
+
+const severityVariantMap: Record<
+  MessageSeverity,
+  "info" | "warning" | "destructive"
+> = {
+  info: "info",
+  warning: "warning",
+  error: "destructive",
+};
+
+function SeverityIcon({ severity }: { severity: MessageSeverity }) {
+  switch (severity) {
+    case "info":
+      return <LuInfo className="size-4" />;
+    case "warning":
+      return <LuTriangleAlert className="size-4" />;
+    case "error":
+      return <LuCircleAlert className="size-4" />;
+  }
+}
+
+type ConfigMessageBannerProps = {
+  messages: ConditionalMessage[];
+};
+
+export function ConfigMessageBanner({ messages }: ConfigMessageBannerProps) {
+  const { t } = useTranslation("views/settings");
+
+  if (messages.length === 0) return null;
+
+  return (
+    <div className="max-w-5xl space-y-2">
+      {messages.map((msg) => (
+        <Alert
+          key={msg.key}
+          variant={severityVariantMap[msg.severity]}
+          className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2"
+        >
+          <SeverityIcon severity={msg.severity} />
+          <AlertDescription>{t(msg.messageKey)}</AlertDescription>
+        </Alert>
+      ))}
+    </div>
+  );
+}

web/src/components/config-form/section-configs/audio.ts

@@ -3,6 +3,21 @@ import type { SectionConfigOverrides } from "./types";
 const audio: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/audio_detectors",
+    messages: [
+      {
+        key: "no-audio-role",
+        messageKey: "configMessages.audio.noAudioRole",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level === "camera" && ctx.fullCameraConfig) {
+            return !ctx.fullCameraConfig.ffmpeg?.inputs?.some((input) =>
+              input.roles?.includes("audio"),
+            );
+          }
+          return false;
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: [
       "enabled",

web/src/components/config-form/section-configs/audio_transcription.ts

@@ -3,6 +3,19 @@ import type { SectionConfigOverrides } from "./types";
 const audioTranscription: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/audio_detectors#audio-transcription",
+    messages: [
+      {
+        key: "audio-detection-disabled",
+        messageKey: "configMessages.audioTranscription.audioDetectionDisabled",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level === "camera" && ctx.fullCameraConfig) {
+            return ctx.fullCameraConfig.audio.enabled === false;
+          }
+          return false;
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: ["enabled", "language", "device", "model_size"],
     hiddenFields: ["enabled_in_config", "live_enabled"],

web/src/components/config-form/section-configs/birdseye.ts

@@ -3,6 +3,20 @@ import type { SectionConfigOverrides } from "./types";
 const birdseye: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/birdseye",
+    messages: [
+      {
+        key: "objects-mode-detect-disabled",
+        messageKey: "configMessages.birdseye.objectsModeDetectDisabled",
+        severity: "info",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          return (
+            ctx.formData?.mode === "objects" &&
+            ctx.fullCameraConfig.detect?.enabled === false
+          );
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: ["enabled", "mode", "order"],
     hiddenFields: [],

web/src/components/config-form/section-configs/detect.ts

@@ -3,6 +3,21 @@ import type { SectionConfigOverrides } from "./types";
 const detect: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/camera_specific",
+    fieldMessages: [
+      {
+        key: "fps-greater-than-five",
+        field: "fps",
+        messageKey: "configMessages.detect.fpsGreaterThanFive",
+        severity: "info",
+        position: "after",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          const detectFps = ctx.formData?.fps as number | undefined;
+          const streamFps = ctx.fullCameraConfig.detect?.fps;
+          return detectFps != null && streamFps != null && detectFps > 5;
+        },
+      },
+    ],
     fieldOrder: [
       "enabled",
       "width",

web/src/components/config-form/section-configs/face_recognition.ts

@@ -3,6 +3,26 @@ import type { SectionConfigOverrides } from "./types";
 const faceRecognition: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/face_recognition",
+    messages: [
+      {
+        key: "global-disabled",
+        messageKey: "configMessages.faceRecognition.globalDisabled",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level !== "camera") return false;
+          return ctx.fullConfig.face_recognition?.enabled === false;
+        },
+      },
+      {
+        key: "person-not-tracked",
+        messageKey: "configMessages.faceRecognition.personNotTracked",
+        severity: "info",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          return !ctx.fullCameraConfig.objects?.track?.includes("person");
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: ["enabled", "min_area"],
     hiddenFields: [],

web/src/components/config-form/section-configs/lpr.ts

@@ -3,6 +3,28 @@ import type { SectionConfigOverrides } from "./types";
 const lpr: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/license_plate_recognition",
+    messages: [
+      {
+        key: "global-disabled",
+        messageKey: "configMessages.lpr.globalDisabled",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level !== "camera") return false;
+          return ctx.fullConfig.lpr?.enabled === false;
+        },
+      },
+      {
+        key: "vehicle-not-tracked",
+        messageKey: "configMessages.lpr.vehicleNotTracked",
+        severity: "info",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          if (ctx.fullCameraConfig.type === "lpr") return false;
+          const tracked = ctx.fullCameraConfig.objects?.track ?? [];
+          return !tracked.some((o) => ["car", "motorcycle"].includes(o));
+        },
+      },
+    ],
     fieldDocs: {
       enhancement: "/configuration/license_plate_recognition#enhancement",
     },

web/src/components/config-form/section-configs/record.ts

@@ -3,6 +3,19 @@ import type { SectionConfigOverrides } from "./types";
 const record: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/record",
+    messages: [
+      {
+        key: "no-record-role",
+        messageKey: "configMessages.record.noRecordRole",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          return !ctx.fullCameraConfig.ffmpeg?.inputs?.some((i) =>
+            i.roles?.includes("record"),
+          );
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: [
       "enabled",

web/src/components/config-form/section-configs/review.ts

@@ -3,6 +3,45 @@ import type { SectionConfigOverrides } from "./types";
 const review: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/review",
+    messages: [
+      {
+        key: "record-disabled",
+        messageKey: "configMessages.review.recordDisabled",
+        severity: "warning",
+        condition: (ctx) => {
+          if (ctx.level === "camera" && ctx.fullCameraConfig) {
+            return ctx.fullCameraConfig.record.enabled === false;
+          }
+          return ctx.fullConfig.record?.enabled === false;
+        },
+      },
+      {
+        key: "detect-disabled",
+        messageKey: "configMessages.review.detectDisabled",
+        severity: "info",
+        condition: (ctx) => {
+          if (ctx.level === "camera" && ctx.fullCameraConfig) {
+            return ctx.fullCameraConfig.detect?.enabled === false;
+          }
+          return false;
+        },
+      },
+    ],
+    fieldMessages: [
+      {
+        key: "detections-all-non-alert",
+        field: "detections.labels",
+        messageKey: "configMessages.review.allNonAlertDetections",
+        severity: "info",
+        position: "after",
+        condition: (ctx) => {
+          const labels = (
+            ctx.formData?.detections as Record<string, unknown> | undefined
+          )?.labels;
+          return !Array.isArray(labels) || labels.length === 0;
+        },
+      },
+    ],
     fieldDocs: {
       "alerts.labels": "/configuration/review/#alerts-and-detections",
       "detections.labels": "/configuration/review/#alerts-and-detections",
@@ -35,8 +74,6 @@ const review: SectionConfigOverrides = {
           "ui:widget": "reviewLabels",
           "ui:options": {
             suppressMultiSchema: true,
-            emptySelectionHintKey:
-              "configForm.reviewLabels.allNonAlertDetections",
           },
         },
         required_zones: {

web/src/components/config-form/section-configs/snapshots.ts

@@ -3,6 +3,17 @@ import type { SectionConfigOverrides } from "./types";
 const snapshots: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/snapshots",
+    messages: [
+      {
+        key: "detect-disabled",
+        messageKey: "configMessages.snapshots.detectDisabled",
+        severity: "info",
+        condition: (ctx) => {
+          if (ctx.level !== "camera" || !ctx.fullCameraConfig) return false;
+          return ctx.fullCameraConfig.detect?.enabled === false;
+        },
+      },
+    ],
     restartRequired: [],
     fieldOrder: [
       "enabled",

web/src/components/config-form/section-configs/types.ts

@@ -1,5 +1,39 @@
+import type { FrigateConfig, CameraConfig } from "@/types/frigateConfig";
+import type { ConfigSectionData } from "@/types/configForm";
 import type { SectionConfig } from "../sections/BaseSection";
 
+/** Context provided to message condition functions */
+export type MessageConditionContext = {
+  fullConfig: FrigateConfig;
+  fullCameraConfig?: CameraConfig;
+  level: "global" | "camera";
+  cameraName?: string;
+  formData: ConfigSectionData;
+};
+
+/** Severity levels for conditional messages */
+export type MessageSeverity = "info" | "warning" | "error";
+
+/** A conditional message definition */
+export type ConditionalMessage = {
+  /** Unique key for React list rendering and deduplication */
+  key: string;
+  /** Translation key resolved via t() in the views/settings namespace */
+  messageKey: string;
+  /** Severity level controlling visual styling */
+  severity: MessageSeverity;
+  /** Function returning true when the message should be shown */
+  condition: (ctx: MessageConditionContext) => boolean;
+};
+
+/** Field-level conditional message, adds field targeting */
+export type FieldConditionalMessage = ConditionalMessage & {
+  /** Dot-separated field path (e.g., "enabled", "alerts.labels") */
+  field: string;
+  /** Whether to render before or after the field (default: "before") */
+  position?: "before" | "after";
+};
+
 export type SectionConfigOverrides = {
   base?: SectionConfig;
   global?: Partial<SectionConfig>;

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -43,6 +43,7 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
@@ -752,6 +753,7 @@ export function CameraNotificationSwitch({
   };
 
   const locale = useDateLocale();
+  const is24Hour = use24HourTime(config);
 
   const formatSuspendedUntil = (timestamp: string) => {
     if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -760,14 +762,13 @@ export function CameraNotificationSwitch({
       time_style: "medium",
       date_style: "medium",
       timezone: config?.ui.timezone,
-      date_format:
-        config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
-              ns: "common",
-            })
-          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
-              ns: "common",
-            }),
+      date_format: is24Hour
+        ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+            ns: "common",
+          })
+        : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+            ns: "common",
+          }),
       locale: locale,
     });
     return t("time.untilForTime", { ns: "common", time });

web/src/components/config-form/sections/BaseSection.tsx

@@ -71,6 +71,13 @@ import {
 } from "@/utils/configUtil";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import { useRestart } from "@/api/ws";
+import type {
+  ConditionalMessage,
+  FieldConditionalMessage,
+  MessageConditionContext,
+} from "../section-configs/types";
+import { useConfigMessages } from "@/hooks/use-config-messages";
+import { ConfigMessageBanner } from "../ConfigMessageBanner";
 
 export interface SectionConfig {
   /** Field ordering within the section */
@@ -100,6 +107,10 @@ export interface SectionConfig {
     formData: unknown,
     errors: FormValidation,
   ) => FormValidation;
+  /** Conditional messages displayed as banners above the section form */
+  messages?: ConditionalMessage[];
+  /** Conditional messages displayed inline with specific fields */
+  fieldMessages?: FieldConditionalMessage[];
 }
 
 export interface BaseSectionProps {
@@ -536,6 +547,65 @@ export function ConfigSection({
   const currentFormData = pendingData || formData;
   const effectiveBaselineFormData = baselineSnapshot;
 
+  // Build context for conditional messages
+  const messageContext = useMemo<MessageConditionContext | undefined>(() => {
+    if (!config || !currentFormData) return undefined;
+    return {
+      fullConfig: config,
+      fullCameraConfig:
+        effectiveLevel === "camera" && cameraName
+          ? config.cameras?.[cameraName]
+          : undefined,
+      level: effectiveLevel,
+      cameraName,
+      formData: currentFormData as ConfigSectionData,
+    };
+  }, [config, currentFormData, effectiveLevel, cameraName]);
+
+  const { activeMessages, activeFieldMessages } = useConfigMessages(
+    sectionConfig.messages,
+    sectionConfig.fieldMessages,
+    messageContext,
+  );
+
+  // Merge field-level conditional messages into uiSchema
+  const effectiveUiSchema = useMemo(() => {
+    if (activeFieldMessages.length === 0) return sectionConfig.uiSchema;
+    const merged = { ...(sectionConfig.uiSchema ?? {}) };
+    for (const msg of activeFieldMessages) {
+      const segments = msg.field.split(".");
+      // Navigate to the nested uiSchema node, shallow-cloning along the way
+      let node = merged;
+      for (let i = 0; i < segments.length - 1; i++) {
+        const seg = segments[i];
+        node[seg] = { ...(node[seg] as Record<string, unknown>) };
+        node = node[seg] as Record<string, unknown>;
+      }
+      const leafKey = segments[segments.length - 1];
+      const existing = node[leafKey] as Record<string, unknown> | undefined;
+      const existingMessages = ((existing?.["ui:messages"] as unknown[]) ??
+        []) as Array<{
+        key: string;
+        messageKey: string;
+        severity: string;
+        position?: string;
+      }>;
+      node[leafKey] = {
+        ...existing,
+        "ui:messages": [
+          ...existingMessages,
+          {
+            key: msg.key,
+            messageKey: msg.messageKey,
+            severity: msg.severity,
+            position: msg.position ?? "before",
+          },
+        ],
+      };
+    }
+    return merged;
+  }, [sectionConfig.uiSchema, activeFieldMessages]);
+
   const currentOverrides = useMemo(() => {
     if (!currentFormData || typeof currentFormData !== "object") {
       return undefined;
@@ -874,6 +944,7 @@ export function ConfigSection({
 
   const sectionContent = (
     <div className="space-y-6">
+      <ConfigMessageBanner messages={activeMessages} />
       <ConfigForm
         key={formKey}
         schema={modifiedSchema}
@@ -885,7 +956,7 @@ export function ConfigSection({
         hiddenFields={effectiveHiddenFields}
         advancedFields={sectionConfig.advancedFields}
         liveValidate={sectionConfig.liveValidate}
-        uiSchema={sectionConfig.uiSchema}
+        uiSchema={effectiveUiSchema}
         disabled={disabled || isSaving}
         readonly={readonly}
         showSubmit={false}

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -28,6 +28,7 @@ import {
 } from "../utils";
 import { normalizeOverridePath } from "../utils/overrides";
 import get from "lodash/get";
+import { ConfigFieldMessage } from "../../ConfigFieldMessage";
 import isEqual from "lodash/isEqual";
 import { SPLIT_ROW_CLASS_NAME } from "@/components/card/SettingsGroupCard";
 
@@ -382,6 +383,46 @@ export function FieldTemplate(props: FieldTemplateProps) {
 
   const beforeContent = renderCustom(beforeSpec);
   const afterContent = renderCustom(afterSpec);
+
+  // Render conditional field messages from ui:messages
+  const fieldMessageSpecs = uiSchema?.["ui:messages"] as
+    | Array<{
+        key: string;
+        messageKey: string;
+        severity: string;
+        position?: string;
+      }>
+    | undefined;
+  const beforeMessages = fieldMessageSpecs?.filter(
+    (m) => (m.position ?? "before") === "before",
+  );
+  const afterMessages = fieldMessageSpecs?.filter(
+    (m) => m.position === "after",
+  );
+  const beforeMessagesContent =
+    beforeMessages && beforeMessages.length > 0 ? (
+      <div className="space-y-2">
+        {beforeMessages.map((m) => (
+          <ConfigFieldMessage
+            key={m.key}
+            messageKey={m.messageKey}
+            severity={m.severity}
+          />
+        ))}
+      </div>
+    ) : null;
+  const afterMessagesContent =
+    afterMessages && afterMessages.length > 0 ? (
+      <div className="space-y-2">
+        {afterMessages.map((m) => (
+          <ConfigFieldMessage
+            key={m.key}
+            messageKey={m.messageKey}
+            severity={m.severity}
+          />
+        ))}
+      </div>
+    ) : null;
   const WrapIfAdditionalTemplate = getTemplate(
     "WrapIfAdditionalTemplate",
     registry,
@@ -600,6 +641,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
     >
       <div className="flex flex-col space-y-6">
         {beforeContent}
+        {beforeMessagesContent}
         <div className={cn("space-y-1")} data-field-id={translationPath}>
           {renderStandardLabel()}
           {renderFieldLayout()}
@@ -607,6 +649,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
           {errors}
           {help}
         </div>
+        {afterMessagesContent}
         {afterContent}
       </div>
     </WrapIfAdditionalTemplate>

web/src/components/config-form/theme/widgets/SwitchesWidget.tsx

@@ -45,8 +45,6 @@ export type SwitchesWidgetOptions = {
   enableSearch?: boolean;
   /** Allow users to add custom entries not in the predefined list */
   allowCustomEntries?: boolean;
-  /** i18n key for a hint shown when no entities are selected */
-  emptySelectionHintKey?: string;
 };
 
 function normalizeValue(value: unknown): string[] {
@@ -131,11 +129,6 @@ export function SwitchesWidget(props: WidgetProps) {
     [props.options],
   );
 
-  const emptySelectionHintKey = useMemo(
-    () => props.options?.emptySelectionHintKey as string | undefined,
-    [props.options],
-  );
-
   const selectedEntities = useMemo(() => normalizeValue(value), [value]);
   const [isOpen, setIsOpen] = useState(selectedEntities.length > 0);
   const [searchTerm, setSearchTerm] = useState("");
@@ -215,12 +208,6 @@ export function SwitchesWidget(props: WidgetProps) {
           </Button>
         </CollapsibleTrigger>
 
-        {emptySelectionHintKey && selectedEntities.length === 0 && t && (
-          <div className="mt-0 pb-2 text-sm text-success">
-            {t(emptySelectionHintKey, { ns: namespace })}
-          </div>
-        )}
-
         <CollapsibleContent className="rounded-lg border border-input bg-secondary pb-1 pr-0 pt-2 md:max-w-md">
           {allEntities.length === 0 && !allowCustomEntries ? (
             <div className="text-sm text-muted-foreground">{emptyMessage}</div>

web/src/components/graph/LineGraph.tsx

@@ -2,12 +2,13 @@ import { useTheme } from "@/context/theme-provider";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
+import { useTimeFormat } from "@/hooks/use-date-utils";
 
 const GRAPH_COLORS = ["#5C7CFA", "#ED5CFA", "#FAD75C"];
 
@@ -17,6 +18,7 @@ type CameraLineGraphProps = {
   dataLabels: string[];
   updateTimes: number[];
   data: ApexAxisChartSeries;
+  isActive?: boolean;
 };
 export function CameraLineGraph({
   graphId,
@@ -24,6 +26,7 @@ export function CameraLineGraph({
   dataLabels,
   updateTimes,
   data,
+  isActive = true,
 }: CameraLineGraphProps) {
   const { t } = useTranslation(["views/system", "common"]);
   const { data: config } = useSWR<FrigateConfig>("config", {
@@ -46,7 +49,7 @@ export function CameraLineGraph({
 
   const locale = useDateLocale();
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
       ns: "common",
@@ -134,6 +137,16 @@ export function CameraLineGraph({
     ApexCharts.exec(graphId, "updateOptions", options, true, true);
   }, [graphId, options]);
 
+  const hasBeenActive = useRef(isActive);
+  useEffect(() => {
+    if (isActive && hasBeenActive.current === false) {
+      ApexCharts.exec(graphId, "updateSeries", data, true);
+    }
+    hasBeenActive.current = isActive;
+    // only replay animation on visibility change, not data updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive, graphId]);
+
   return (
     <div className="flex w-full flex-col">
       {lastValues && (
@@ -166,6 +179,7 @@ type EventsPerSecondLineGraphProps = {
   name: string;
   updateTimes: number[];
   data: ApexAxisChartSeries;
+  isActive?: boolean;
 };
 export function EventsPerSecondsLineGraph({
   graphId,
@@ -173,6 +187,7 @@ export function EventsPerSecondsLineGraph({
   name,
   updateTimes,
   data,
+  isActive = true,
 }: EventsPerSecondLineGraphProps) {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
@@ -189,7 +204,7 @@ export function EventsPerSecondsLineGraph({
   const locale = useDateLocale();
   const { t } = useTranslation(["common"]);
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
       ns: "common",
@@ -277,6 +292,16 @@ export function EventsPerSecondsLineGraph({
     ApexCharts.exec(graphId, "updateOptions", options, true, true);
   }, [graphId, options]);
 
+  const hasBeenActive = useRef(isActive);
+  useEffect(() => {
+    if (isActive && hasBeenActive.current === false) {
+      ApexCharts.exec(graphId, "updateSeries", data, true);
+    }
+    hasBeenActive.current = isActive;
+    // only replay animation on visibility change, not data updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive, graphId]);
+
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">

web/src/components/graph/SystemGraph.tsx

@@ -3,11 +3,12 @@ import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
+import { useTimeFormat } from "@/hooks/use-date-utils";
 
 type ThresholdBarGraphProps = {
   graphId: string;
@@ -16,6 +17,7 @@ type ThresholdBarGraphProps = {
   threshold: Threshold;
   updateTimes: number[];
   data: ApexAxisChartSeries;
+  isActive?: boolean;
 };
 export function ThresholdBarGraph({
   graphId,
@@ -24,6 +26,7 @@ export function ThresholdBarGraph({
   threshold,
   updateTimes,
   data,
+  isActive = true,
 }: ThresholdBarGraphProps) {
   const displayName = name || data[0]?.name || "";
   const { data: config } = useSWR<FrigateConfig>("config", {
@@ -51,7 +54,7 @@ export function ThresholdBarGraph({
   const locale = useDateLocale();
   const { t } = useTranslation(["common"]);
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
       ns: "common",
@@ -173,17 +176,29 @@ export function ThresholdBarGraph({
       return data;
     }
 
-    const copiedData = [...data];
+    const dataPointCount = data[0].data.length;
     const fakeData = [];
-    for (let i = data.length; i < 30; i++) {
+    for (let i = dataPointCount; i < 30; i++) {
       fakeData.push({ x: i - 30, y: 0 });
     }
 
-    // @ts-expect-error data types are not obvious
-    copiedData[0].data = [...fakeData, ...data[0].data];
-    return copiedData;
+    const paddedFirst = {
+      ...data[0],
+      data: [...fakeData, ...data[0].data],
+    };
+    return [paddedFirst, ...data.slice(1)] as ApexAxisChartSeries;
   }, [data]);
 
+  const hasBeenActive = useRef(isActive);
+  useEffect(() => {
+    if (isActive && hasBeenActive.current === false) {
+      ApexCharts.exec(graphId, "updateSeries", chartData, true);
+    }
+    hasBeenActive.current = isActive;
+    // only replay animation on visibility change, not data updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive, graphId]);
+
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">

web/src/components/input/InputWithTags.tsx

@@ -50,6 +50,7 @@ import {
 import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { MdImageSearch } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -80,6 +81,8 @@ export default function InputWithTags({
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+  const is24Hour = use24HourTime(config);
+  const resolvedTimeFormat = is24Hour ? "24hour" : ("12hour" as const);
 
   const allAudioListenLabels = useMemo<Set<string>>(() => {
     if (!config) {
@@ -431,12 +434,8 @@ export default function InputWithTags({
       const [startTime, endTime] = (filterValues as string)
         .replace("-", ",")
         .split(",");
-      return `${
-        config?.ui.time_format === "24hour"
-          ? startTime
-          : convertTo12Hour(startTime)
-      } - ${
-        config?.ui.time_format === "24hour" ? endTime : convertTo12Hour(endTime)
+      return `${is24Hour ? startTime : convertTo12Hour(startTime)} - ${
+        is24Hour ? endTime : convertTo12Hour(endTime)
       }`;
     } else if (filterType === "min_score" || filterType === "max_score") {
       return Math.round(Number(filterValues) * 100).toString() + "%";
@@ -478,7 +477,7 @@ export default function InputWithTags({
         (filterType === "time_range" &&
           isValidTimeRange(
             trimmedValue.replace("-", ","),
-            config?.ui.time_format,
+            resolvedTimeFormat,
           )) ||
         ((filterType === "min_score" || filterType === "max_score") &&
           !isNaN(Number(trimmedValue)) &&
@@ -495,7 +494,7 @@ export default function InputWithTags({
             ? trimmedValue
                 .replace("-", ",")
                 .split(",")
-                .map((time) => to24Hour(time.trim(), config?.ui.time_format))
+                .map((time) => to24Hour(time.trim(), resolvedTimeFormat))
                 .join(",")
             : trimmedValue,
         );
@@ -511,7 +510,7 @@ export default function InputWithTags({
         setCurrentFilterType(null);
       }
     },
-    [allSuggestions, createFilter, config],
+    [allSuggestions, createFilter, resolvedTimeFormat],
   );
 
   const handleInputChange = useCallback(
@@ -598,7 +597,7 @@ export default function InputWithTags({
           suggestion = suggestion
             .replace("-", ",")
             .split(",")
-            .map((time) => to24Hour(time.trim(), config?.ui.time_format))
+            .map((time) => to24Hour(time.trim(), resolvedTimeFormat))
             .join(",");
         }
         createFilter(currentFilterType, suggestion);
@@ -627,7 +626,7 @@ export default function InputWithTags({
 
       inputRef.current?.focus();
     },
-    [createFilter, currentFilterType, allSuggestions, config],
+    [createFilter, currentFilterType, allSuggestions, resolvedTimeFormat],
   );
 
   const handleSearch = useCallback(
@@ -779,10 +778,7 @@ export default function InputWithTags({
                     </li>
                     <li>
                       {t("filter.tips.desc.step5", {
-                        exampleTime:
-                          config?.ui.time_format == "24hour"
-                            ? "15:00-16:00"
-                            : "3:00PM-4:00PM",
+                        exampleTime: is24Hour ? "15:00-16:00" : "3:00PM-4:00PM",
                       })}
                     </li>
                     <li>{t("filter.tips.desc.step6")}</li>

web/src/components/menu/LiveContextMenu.tsx

@@ -46,6 +46,7 @@ import {
 } from "@/api/ws";
 import { useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
 import { LiveStreamMetadata } from "@/types/live";
@@ -247,6 +248,8 @@ export default function LiveContextMenu({
 
   const locale = useDateLocale();
 
+  const is24Hour = use24HourTime(config);
+
   const formatSuspendedUntil = (timestamp: string) => {
     // Some languages require a change in word order
     if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -255,14 +258,13 @@ export default function LiveContextMenu({
       time_style: "medium",
       date_style: "medium",
       timezone: config?.ui.timezone,
-      date_format:
-        config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
-              ns: "common",
-            })
-          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
-              ns: "common",
-            }),
+      date_format: is24Hour
+        ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+            ns: "common",
+          })
+        : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+            ns: "common",
+          }),
       locale: locale,
     });
     return t("time.untilForTime", { ns: "common", time });

web/src/components/overlay/CustomTimeSelector.tsx

@@ -3,7 +3,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SelectSeparator } from "../ui/select";
 import { TimeRange } from "@/types/timeline";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
 import { FaArrowRight, FaCalendarAlt } from "react-icons/fa";
@@ -69,16 +69,18 @@ export function CustomTimeSelector({
     return time;
   }, [range, latestTime, timezoneOffset, localTimeOffset]);
 
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = useFormattedTimestamp(
     startTime,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
   );
 
   const formattedEnd = useFormattedTimestamp(
     endTime,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
   );

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

@@ -2,7 +2,7 @@ import { isDesktop, isIOS, isMobile, isSafari } from "react-device-detect";
 import { SearchResult } from "@/types/search";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { Button } from "../../ui/button";
@@ -769,9 +769,10 @@ function ObjectDetailsTab({
     setShowNavigationButtons,
   ]);
 
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     search?.start_time ?? 0,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
           ns: "common",
         })

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

@@ -7,6 +7,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { TrackingDetailsSequence } from "@/types/timeline";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { LuCircle, LuFolderX } from "react-icons/lu";
 import { cn } from "@/lib/utils";
@@ -428,17 +429,18 @@ export function TrackingDetails({
     [annotationOffset, displaySource, timestampToVideoTime],
   );
 
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = config
     ? formatUnixTimestampToDateTime(event.start_time ?? 0, {
         timezone: config.ui.timezone,
-        date_format:
-          config.ui.time_format == "24hour"
-            ? t("time.formattedTimestamp.24hour", {
-                ns: "common",
-              })
-            : t("time.formattedTimestamp.12hour", {
-                ns: "common",
-              }),
+        date_format: is24Hour
+          ? t("time.formattedTimestamp.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestamp.12hour", {
+              ns: "common",
+            }),
         time_style: "medium",
         date_style: "medium",
       })
@@ -448,14 +450,13 @@ export function TrackingDetails({
     config && event.end_time != null
       ? formatUnixTimestampToDateTime(event.end_time, {
           timezone: config.ui.timezone,
-          date_format:
-            config.ui.time_format == "24hour"
-              ? t("time.formattedTimestamp.24hour", {
-                  ns: "common",
-                })
-              : t("time.formattedTimestamp.12hour", {
-                  ns: "common",
-                }),
+          date_format: is24Hour
+            ? t("time.formattedTimestamp.24hour", {
+                ns: "common",
+              })
+            : t("time.formattedTimestamp.12hour", {
+                ns: "common",
+              }),
           time_style: "medium",
           date_style: "medium",
         })
@@ -917,24 +918,25 @@ function LifecycleIconRow({
     [effectiveTime, item.timestamp],
   );
 
+  const is24Hour = use24HourTime(config);
+
   const formattedEventTimestamp = useMemo(
     () =>
       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",
-                  }),
+            date_format: is24Hour
+              ? t("time.formattedTimestampHourMinuteSecond.24hour", {
+                  ns: "common",
+                })
+              : t("time.formattedTimestampHourMinuteSecond.12hour", {
+                  ns: "common",
+                }),
             time_style: "medium",
             date_style: "medium",
           })
         : "",
-    [config, item.timestamp, t],
+    [config, is24Hour, item.timestamp, t],
   );
 
   const ratio = useMemo(

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -12,7 +12,7 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { isIOS, isMobile, isSafari } from "react-device-detect";
 import Chip from "@/components/indicators/Chip";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import { useSwipeable } from "react-swipeable";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
@@ -174,9 +174,10 @@ export default function PreviewThumbnailPlayer({
 
   // date
 
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     review.start_time,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
       : t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
     config?.ui?.timezone,

web/src/components/timeline/DetailStream.tsx

@@ -8,6 +8,7 @@ import {
   formatUnixTimestampToDateTime,
   getDurationFromTimestamps,
 } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { useTranslation } from "react-i18next";
 import AnnotationOffsetSlider from "@/components/overlay/detail/AnnotationOffsetSlider";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -398,12 +399,12 @@ function ReviewGroup({
     }
   }, [isActive, alwaysExpandActive]);
 
+  const is24Hour = use24HourTime(config);
   const displayTime = formatUnixTimestampToDateTime(start, {
     timezone: config.ui.timezone,
-    date_format:
-      config.ui.time_format == "24hour"
-        ? t("time.formattedTimestampHourMinuteSecond.24hour", { ns: "common" })
-        : t("time.formattedTimestampHourMinuteSecond.12hour", { ns: "common" }),
+    date_format: is24Hour
+      ? t("time.formattedTimestampHourMinuteSecond.24hour", { ns: "common" })
+      : t("time.formattedTimestampHourMinuteSecond.12hour", { ns: "common" }),
     time_style: "medium",
     date_style: "medium",
   });
@@ -787,17 +788,17 @@ function LifecycleItem({
     );
   }, [config, item]);
 
+  const is24Hour = use24HourTime(config);
   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",
-              }),
+        date_format: is24Hour
+          ? t("time.formattedTimestampHourMinuteSecond.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestampHourMinuteSecond.12hour", {
+              ns: "common",
+            }),
         time_style: "medium",
         date_style: "medium",
       })

web/src/components/timeline/segment-metadata.tsx

@@ -1,4 +1,4 @@
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, useTimeFormat } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -36,7 +36,7 @@ export function MinimapBounds({
 }: MinimapSegmentProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const { t } = useTranslation(["common"]);
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
 
   const formatKey = dense
     ? `time.formattedTimestampHourMinute.${timeFormat}`
@@ -104,7 +104,7 @@ export function Timestamp({
   const { t } = useTranslation(["common"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = t(`time.formattedTimestampHourMinute.${timeFormat}`);
 
   const formattedTimestamp = useFormattedTimestamp(

web/src/components/ui/alert.tsx

@@ -11,6 +11,9 @@ const alertVariants = cva(
         default: "bg-background text-foreground",
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        warning:
+          "border-amber-500/50 bg-amber-50 text-amber-800 dark:bg-amber-950/20 dark:text-amber-400 dark:border-amber-500/30 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400",
+        info: "border-blue-500/50 bg-blue-50 text-blue-800 dark:bg-blue-950/20 dark:text-blue-400 dark:border-blue-500/30 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
       },
     },
     defaultVariants: {

web/src/hooks/use-config-messages.ts

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import type {
+  ConditionalMessage,
+  FieldConditionalMessage,
+  MessageConditionContext,
+} from "@/components/config-form/section-configs/types";
+
+export function useConfigMessages(
+  messages: ConditionalMessage[] | undefined,
+  fieldMessages: FieldConditionalMessage[] | undefined,
+  context: MessageConditionContext | undefined,
+): {
+  activeMessages: ConditionalMessage[];
+  activeFieldMessages: FieldConditionalMessage[];
+} {
+  const activeMessages = useMemo(() => {
+    if (!messages || !context) return [];
+    return messages.filter((msg) => msg.condition(context));
+  }, [messages, context]);
+
+  const activeFieldMessages = useMemo(() => {
+    if (!fieldMessages || !context) return [];
+    return fieldMessages.filter((msg) => msg.condition(context));
+  }, [fieldMessages, context]);
+
+  return { activeMessages, activeFieldMessages };
+}

web/src/hooks/use-date-utils.ts

@@ -84,6 +84,18 @@ export function use24HourTime(config: FrigateConfig | undefined) {
   }, [config, localeUses24HourTime]);
 }
 
+/**
+ * Returns the resolved time format key ("24hour" | "12hour") based on config
+ * and browser locale. Use this instead of checking config.ui.time_format directly
+ * to correctly handle the "browser" setting.
+ */
+export function useTimeFormat(
+  config: FrigateConfig | undefined,
+): "24hour" | "12hour" {
+  const is24Hour = use24HourTime(config);
+  return is24Hour ? "24hour" : "12hour";
+}
+
 export function useFormattedHour(
   config: FrigateConfig | undefined,
   time: string, // hour is assumed to be in 24 hour format per the Date object

web/src/hooks/use-draggable-element.ts

@@ -4,6 +4,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useDateLocale } from "./use-date-locale";
+import { useTimeFormat } from "./use-date-utils";
 import { useTranslation } from "react-i18next";
 import useUserInteraction from "./use-user-interaction";
 
@@ -168,7 +169,7 @@ function useDraggableElement({
   const { t } = useTranslation(["common"]);
   const locale = useDateLocale();
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     const formatKey = `time.${
       segmentDuration < 60 && !dense

web/src/pages/System.tsx

@@ -1,6 +1,6 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { isDesktop, isMobile } from "react-device-detect";
@@ -49,7 +49,17 @@ function System() {
     setPage,
     100,
   );
-  const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
+  const [lastUpdated, setLastUpdated] = useState<number>(
+    Math.floor(Date.now() / 1000),
+  );
+
+  // Track which tabs have been visited so we can keep them mounted after first visit.
+  // Using a ref updated during render avoids extra render cycles from state/effects.
+  const visitedTabsRef = useRef(new Set<string>());
+  if (page) {
+    visitedTabsRef.current.add(page);
+  }
+  const visitedTabs = visitedTabsRef.current;
 
   useEffect(() => {
     if (pageToggle) {
@@ -116,24 +126,37 @@ function System() {
           </div>
         )}
       </div>
-      {page == "general" && (
-        <GeneralMetrics
-          lastUpdated={lastUpdated}
-          setLastUpdated={setLastUpdated}
-        />
+      {visitedTabs.has("general") && (
+        <div className={page == "general" ? "contents" : "hidden"}>
+          <GeneralMetrics
+            lastUpdated={lastUpdated}
+            setLastUpdated={setLastUpdated}
+            isActive={page == "general"}
+          />
+        </div>
       )}
-      {page == "enrichments" && (
-        <EnrichmentMetrics
-          lastUpdated={lastUpdated}
-          setLastUpdated={setLastUpdated}
-        />
+      {metrics.includes("enrichments") && visitedTabs.has("enrichments") && (
+        <div className={page == "enrichments" ? "contents" : "hidden"}>
+          <EnrichmentMetrics
+            lastUpdated={lastUpdated}
+            setLastUpdated={setLastUpdated}
+            isActive={page == "enrichments"}
+          />
+        </div>
       )}
-      {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
-      {page == "cameras" && (
-        <CameraMetrics
-          lastUpdated={lastUpdated}
-          setLastUpdated={setLastUpdated}
-        />
+      {visitedTabs.has("storage") && (
+        <div className={page == "storage" ? "contents" : "hidden"}>
+          <StorageMetrics setLastUpdated={setLastUpdated} />
+        </div>
+      )}
+      {visitedTabs.has("cameras") && (
+        <div className={page == "cameras" ? "contents" : "hidden"}>
+          <CameraMetrics
+            lastUpdated={lastUpdated}
+            setLastUpdated={setLastUpdated}
+            isActive={page == "cameras"}
+          />
+        </div>
       )}
     </div>
   );

web/src/types/stats.ts

@@ -28,6 +28,9 @@ export type CameraStats = {
   expected_fps: number;
   reconnects_last_hour: number;
   stalls_last_hour: number;
+  ffmpeg_cpu?: string;
+  capture_cpu?: string;
+  detect_cpu?: string;
 };
 
 export type CpuStats = {
@@ -42,6 +45,8 @@ export type DetectorStats = {
   inference_speed: number;
   pid: number;
   temperature?: number;
+  cpu?: string;
+  mem?: string;
 };
 
 export type EmbeddingsStats = {
@@ -53,6 +58,8 @@ export type EmbeddingsStats = {
 
 export type ExtraProcessStats = {
   pid: number;
+  cpu?: string;
+  mem?: string;
 };
 
 export type GpuStats = {
@@ -60,8 +67,10 @@ export type GpuStats = {
   mem: string;
   enc?: string;
   dec?: string;
+  compute?: string;
   pstate?: string;
   temp?: number;
+  clients?: { [pid: string]: string };
 };
 
 export type NpuStats = {

web/src/views/events/MotionPreviewsPane.tsx

@@ -19,7 +19,7 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import { Skeleton } from "@/components/ui/skeleton";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import TimeAgo from "@/components/dynamic/TimeAgo";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 
 const MOTION_HEATMAP_GRID_SIZE = 16;
@@ -165,9 +165,10 @@ function MotionPreviewClip({
   const [fallbackFrameIndex, setFallbackFrameIndex] = useState(0);
   const [fallbackFramesReady, setFallbackFramesReady] = useState(false);
 
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     range.start_time,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
           ns: "common",
         })

web/src/views/motion-search/MotionSearchDialog.tsx

@@ -43,8 +43,9 @@ import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalend
 
 import { useApiHost } from "@/api";
 import { useResizeObserver } from "@/hooks/resize-observer";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
+import useSWR from "swr";
 import { cn } from "@/lib/utils";
 import MotionSearchROICanvas from "./MotionSearchROICanvas";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -452,7 +453,6 @@ export default function MotionSearchDialog({
                 range={searchRange}
                 setRange={setSearchRange}
                 defaultRange={defaultRange}
-                timeFormat={config.ui?.time_format}
                 timezone={timezone}
               />
 
@@ -476,7 +476,6 @@ type SearchRangeSelectorProps = {
   range?: TimeRange;
   setRange: React.Dispatch<React.SetStateAction<TimeRange | undefined>>;
   defaultRange: TimeRange;
-  timeFormat?: "browser" | "12hour" | "24hour";
   timezone?: string;
 };
 
@@ -484,7 +483,6 @@ function SearchRangeSelector({
   range,
   setRange,
   defaultRange,
-  timeFormat,
   timezone,
 }: SearchRangeSelectorProps) {
   const { t } = useTranslation(["views/motionSearch", "common"]);
@@ -527,15 +525,18 @@ function SearchRangeSelector({
     return time;
   }, [range, defaultRange, timezoneOffset, localTimeOffset]);
 
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = useFormattedTimestamp(
     startTime,
-    timeFormat === "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour", { ns: "common" })
       : t("time.formattedTimestamp.12hour", { ns: "common" }),
   );
   const formattedEnd = useFormattedTimestamp(
     endTime,
-    timeFormat === "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour", { ns: "common" })
       : t("time.formattedTimestamp.12hour", { ns: "common" }),
   );

web/src/views/motion-search/MotionSearchView.tsx

@@ -51,7 +51,7 @@ import {
   RecordingSegment,
 } from "@/types/record";
 import { VideoResolutionType } from "@/types/live";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import MotionSearchROICanvas from "./MotionSearchROICanvas";
 import MotionSearchDialog from "./MotionSearchDialog";
 import { IoMdArrowRoundBack } from "react-icons/io";
@@ -94,12 +94,13 @@ export default function MotionSearchView({
   ]);
   const navigate = useNavigate();
 
+  const is24Hour = use24HourTime(config);
   const resultTimestampFormat = useMemo(
     () =>
-      config.ui?.time_format === "24hour"
+      is24Hour
         ? t("time.formattedTimestamp.24hour", { ns: "common" })
         : t("time.formattedTimestamp.12hour", { ns: "common" }),
-    [config.ui?.time_format, t],
+    [is24Hour, t],
   );
 
   // Refs

web/src/views/search/SearchView.tsx

@@ -31,6 +31,7 @@ import Chip from "@/components/indicators/Chip";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import SearchActionGroup from "@/components/filter/SearchActionGroup";
 import { Trans, useTranslation } from "react-i18next";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { useNavigate } from "react-router-dom";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
@@ -77,6 +78,7 @@ export default function SearchView({
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+  const is24Hour = use24HourTime(config);
   const navigate = useNavigate();
 
   const { data: exploreEvents } = useSWR<SearchResult[]>(
@@ -191,10 +193,7 @@ export default function SearchView({
       sub_labels: allSubLabels,
       ...(hasCustomClassificationModels && { attributes: allAttributes }),
       search_type: ["thumbnail", "description"] as SearchSource[],
-      time_range:
-        config?.ui.time_format == "24hour"
-          ? ["00:00-23:59"]
-          : ["12:00AM-11:59PM"],
+      time_range: is24Hour ? ["00:00-23:59"] : ["12:00AM-11:59PM"],
       before: [formatDateToLocaleString()],
       after: [formatDateToLocaleString(-5)],
       min_score: ["50"],
@@ -209,6 +208,7 @@ export default function SearchView({
     }),
     [
       config,
+      is24Hour,
       allLabels,
       allZones,
       allSubLabels,

web/src/views/settings/TriggerView.tsx

@@ -39,6 +39,7 @@ import { Trigger, TriggerAction, TriggerType } from "@/types/trigger";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { Link } from "react-router-dom";
 import { useTriggers } from "@/api/ws";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
@@ -89,6 +90,7 @@ export default function TriggerView({
   const { t } = useTranslation("views/settings");
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
+  const is24Hour = use24HourTime(config);
   const { data: trigger_status, mutate } = useSWR(
     config?.cameras[selectedCamera]?.semantic_search?.triggers &&
       Object.keys(config.cameras[selectedCamera].semantic_search.triggers)
@@ -581,20 +583,19 @@ export default function TriggerView({
                                           ?.last_triggered,
                                         {
                                           timezone: config.ui.timezone,
-                                          date_format:
-                                            config.ui.time_format == "24hour"
-                                              ? t(
-                                                  "time.formattedTimestamp2.24hour",
-                                                  {
-                                                    ns: "common",
-                                                  },
-                                                )
-                                              : t(
-                                                  "time.formattedTimestamp2.12hour",
-                                                  {
-                                                    ns: "common",
-                                                  },
-                                                ),
+                                          date_format: is24Hour
+                                            ? t(
+                                                "time.formattedTimestamp2.24hour",
+                                                {
+                                                  ns: "common",
+                                                },
+                                              )
+                                            : t(
+                                                "time.formattedTimestamp2.12hour",
+                                                {
+                                                  ns: "common",
+                                                },
+                                              ),
                                           time_style: "medium",
                                           date_style: "medium",
                                         },
@@ -742,20 +743,19 @@ export default function TriggerView({
                                           ?.last_triggered,
                                         {
                                           timezone: config.ui.timezone,
-                                          date_format:
-                                            config.ui.time_format == "24hour"
-                                              ? t(
-                                                  "time.formattedTimestamp2.24hour",
-                                                  {
-                                                    ns: "common",
-                                                  },
-                                                )
-                                              : t(
-                                                  "time.formattedTimestamp2.12hour",
-                                                  {
-                                                    ns: "common",
-                                                  },
-                                                ),
+                                          date_format: is24Hour
+                                            ? t(
+                                                "time.formattedTimestamp2.24hour",
+                                                {
+                                                  ns: "common",
+                                                },
+                                              )
+                                            : t(
+                                                "time.formattedTimestamp2.12hour",
+                                                {
+                                                  ns: "common",
+                                                },
+                                              ),
                                           time_style: "medium",
                                           date_style: "medium",
                                         },

web/src/views/system/CameraMetrics.tsx

@@ -5,7 +5,14 @@ import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualit
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Fragment,
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { MdInfo } from "react-icons/md";
 import {
   Tooltip,
@@ -20,10 +27,12 @@ import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
 type CameraMetricsProps = {
   lastUpdated: number;
   setLastUpdated: (last: number) => void;
+  isActive: boolean;
 };
 export default function CameraMetrics({
   lastUpdated,
   setLastUpdated,
+  isActive,
 }: CameraMetricsProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const { t } = useTranslation(["views/system"]);
@@ -39,11 +48,11 @@ export default function CameraMetrics({
 
   // stats
 
-  const { data: initialStats } = useSWR<FrigateStats[]>(
+  const { data: initialStats, mutate: refreshStats } = useSWR<FrigateStats[]>(
     [
       "stats/history",
       {
-        keys: "cpu_usages,cameras,camera_fps,detection_fps,skipped_fps,service",
+        keys: "cameras.camera_fps,cameras.detection_fps,cameras.skipped_fps,cameras.ffmpeg_cpu,cameras.capture_cpu,cameras.detect_cpu,cameras.connection_quality,cameras.expected_fps,cameras.reconnects_last_hour,cameras.stalls_last_hour,camera_fps,detection_fps,skipped_fps,service.last_updated",
       },
     ],
     {
@@ -60,19 +69,38 @@ export default function CameraMetrics({
     }
 
     if (statsHistory.length == 0) {
-      setStatsHistory(initialStats);
+      startTransition(() => setStatsHistory(initialStats));
       return;
     }
 
-    if (!updatedStats) {
+    if (!isActive || !updatedStats) {
       return;
     }
 
     if (updatedStats.service.last_updated > lastUpdated) {
       setStatsHistory([...statsHistory.slice(1), updatedStats]);
-      setLastUpdated(Date.now() / 1000);
+      setLastUpdated(updatedStats.service.last_updated);
     }
-  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+  }, [
+    initialStats,
+    updatedStats,
+    statsHistory,
+    lastUpdated,
+    setLastUpdated,
+    isActive,
+  ]);
+
+  useEffect(() => {
+    if (isActive && statsHistory.length > 0) {
+      refreshStats().then((freshStats) => {
+        if (freshStats && freshStats.length > 0) {
+          setStatsHistory(freshStats);
+        }
+      });
+    }
+    // only re-fetch when tab becomes active, not on data changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive]);
 
   // timestamps
 
@@ -168,15 +196,15 @@ export default function CameraMetrics({
 
         series[key]["ffmpeg"].data.push({
           x: statsIdx,
-          y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
+          y: camStats.ffmpeg_cpu ?? "0",
         });
         series[key]["capture"].data.push({
           x: statsIdx,
-          y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
+          y: camStats.capture_cpu ?? "0",
         });
         series[key]["detect"].data.push({
           x: statsIdx,
-          y: stats.cpu_usages[camStats.pid?.toString()]?.cpu,
+          y: camStats.detect_cpu ?? "0",
         });
       });
     });
@@ -261,6 +289,7 @@ export default function CameraMetrics({
               dataLabels={["camera", "detect", "skipped"]}
               updateTimes={updateTimes}
               data={overallFpsSeries}
+              isActive={isActive}
             />
           </div>
         ) : (
@@ -272,10 +301,9 @@ export default function CameraMetrics({
           Object.values(config.cameras).map((camera) => {
             if (camera.enabled) {
               return (
-                <>
+                <Fragment key={camera.name}>
                   {probeCameraName == camera.name && (
                     <CameraInfoDialog
-                      key={camera.name}
                       camera={camera}
                       showCameraInfoDialog={showCameraInfoDialog}
                       setShowCameraInfoDialog={setShowCameraInfoDialog}
@@ -345,6 +373,7 @@ export default function CameraMetrics({
                             data={Object.values(
                               cameraCpuSeries[camera.name] || {},
                             )}
+                            isActive={isActive}
                           />
                         </div>
                       ) : (
@@ -363,6 +392,7 @@ export default function CameraMetrics({
                             data={Object.values(
                               cameraFpsSeries[camera.name] || {},
                             )}
+                            isActive={isActive}
                           />
                         </div>
                       ) : (
@@ -370,7 +400,7 @@ export default function CameraMetrics({
                       )}
                     </div>
                   </div>
-                </>
+                </Fragment>
               );
             }
 

web/src/views/system/EnrichmentMetrics.tsx

@@ -1,6 +1,12 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useFrigateStats } from "@/api/ws";
 import { EmbeddingThreshold, GenAIThreshold, Threshold } from "@/types/graph";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -12,16 +18,18 @@ import { EventsPerSecondsLineGraph } from "@/components/graph/LineGraph";
 type EnrichmentMetricsProps = {
   lastUpdated: number;
   setLastUpdated: (last: number) => void;
+  isActive: boolean;
 };
 export default function EnrichmentMetrics({
   lastUpdated,
   setLastUpdated,
+  isActive,
 }: EnrichmentMetricsProps) {
   // stats
   const { t } = useTranslation(["views/system"]);
 
-  const { data: initialStats } = useSWR<FrigateStats[]>(
-    ["stats/history", { keys: "embeddings,service" }],
+  const { data: initialStats, mutate: refreshStats } = useSWR<FrigateStats[]>(
+    ["stats/history", { keys: "embeddings,service.last_updated" }],
     {
       revalidateOnFocus: false,
     },
@@ -36,19 +44,38 @@ export default function EnrichmentMetrics({
     }
 
     if (statsHistory.length == 0) {
-      setStatsHistory(initialStats);
+      startTransition(() => setStatsHistory(initialStats));
       return;
     }
 
-    if (!updatedStats) {
+    if (!isActive || !updatedStats) {
       return;
     }
 
     if (updatedStats.service.last_updated > lastUpdated) {
       setStatsHistory([...statsHistory.slice(1), updatedStats]);
-      setLastUpdated(Date.now() / 1000);
+      setLastUpdated(updatedStats.service.last_updated);
     }
-  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+  }, [
+    initialStats,
+    updatedStats,
+    statsHistory,
+    lastUpdated,
+    setLastUpdated,
+    isActive,
+  ]);
+
+  useEffect(() => {
+    if (isActive && statsHistory.length > 0) {
+      refreshStats().then((freshStats) => {
+        if (freshStats && freshStats.length > 0) {
+          setStatsHistory(freshStats);
+        }
+      });
+    }
+    // only re-fetch when tab becomes active, not on data changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive]);
 
   const getThreshold = useCallback((key: string) => {
     if (key.includes("description")) {
@@ -205,6 +232,7 @@ export default function EnrichmentMetrics({
                         threshold={group.speedSeries.metrics}
                         updateTimes={updateTimes}
                         data={[group.speedSeries]}
+                        isActive={isActive}
                       />
                     )}
                     {group.eventsSeries && (
@@ -215,6 +243,7 @@ export default function EnrichmentMetrics({
                         name={t("enrichments.infPerSecond")}
                         updateTimes={updateTimes}
                         data={[group.eventsSeries]}
+                        isActive={isActive}
                       />
                     )}
                   </div>

web/src/views/system/GeneralMetrics.tsx

@@ -1,6 +1,6 @@
 import useSWR from "swr";
 import { FrigateStats, GpuInfo } from "@/types/stats";
-import { useEffect, useMemo, useState } from "react";
+import { startTransition, useEffect, useMemo, useState } from "react";
 import { useFrigateStats } from "@/api/ws";
 import {
   DetectorCpuThreshold,
@@ -26,10 +26,12 @@ import { CiCircleAlert } from "react-icons/ci";
 type GeneralMetricsProps = {
   lastUpdated: number;
   setLastUpdated: (last: number) => void;
+  isActive: boolean;
 };
 export default function GeneralMetrics({
   lastUpdated,
   setLastUpdated,
+  isActive,
 }: GeneralMetricsProps) {
   // extra info
   const { t } = useTranslation(["views/system"]);
@@ -37,10 +39,12 @@ export default function GeneralMetrics({
 
   // stats
 
-  const { data: initialStats } = useSWR<FrigateStats[]>(
+  const { data: initialStats, mutate: refreshStats } = useSWR<FrigateStats[]>(
     [
       "stats/history",
-      { keys: "cpu_usages,detectors,gpu_usages,npu_usages,processes,service" },
+      {
+        keys: "detectors.inference_speed,detectors.temperature,detectors.cpu,detectors.mem,gpu_usages,npu_usages,processes.cpu,processes.mem,service.last_updated",
+      },
     ],
     {
       revalidateOnFocus: false,
@@ -56,19 +60,38 @@ export default function GeneralMetrics({
     }
 
     if (statsHistory.length == 0) {
-      setStatsHistory(initialStats);
+      startTransition(() => setStatsHistory(initialStats));
       return;
     }
 
-    if (!updatedStats) {
+    if (!isActive || !updatedStats) {
       return;
     }
 
     if (updatedStats.service.last_updated > lastUpdated) {
       setStatsHistory([...statsHistory.slice(1), updatedStats]);
-      setLastUpdated(Date.now() / 1000);
+      setLastUpdated(updatedStats.service.last_updated);
     }
-  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+  }, [
+    initialStats,
+    updatedStats,
+    statsHistory,
+    lastUpdated,
+    setLastUpdated,
+    isActive,
+  ]);
+
+  useEffect(() => {
+    if (isActive && statsHistory.length > 0) {
+      refreshStats().then((freshStats) => {
+        if (freshStats && freshStats.length > 0) {
+          setStatsHistory(freshStats);
+        }
+      });
+    }
+    // only re-fetch when tab becomes active, not on data changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive]);
 
   const [canGetGpuInfo, gpuType] = useMemo<[boolean, GpuInfo]>(() => {
     let vaCount = 0;
@@ -76,7 +99,7 @@ export default function GeneralMetrics({
 
     statsHistory.length > 0 &&
       Object.keys(statsHistory[0]?.gpu_usages ?? {}).forEach((key) => {
-        if (key == "amd-vaapi" || key == "intel-vaapi" || key == "intel-qsv") {
+        if (key == "amd-vaapi" || key == "intel-gpu") {
           vaCount += 1;
         }
 
@@ -181,7 +204,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        const data = stats.cpu_usages[detStats.pid.toString()]?.cpu;
+        const data = detStats.cpu;
 
         if (data != undefined) {
           series[key].data.push({
@@ -213,10 +236,12 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({
-          x: statsIdx + 1,
-          y: stats.cpu_usages[detStats.pid.toString()].mem,
-        });
+        if (detStats.mem != undefined) {
+          series[key].data.push({
+            x: statsIdx + 1,
+            y: detStats.mem,
+          });
+        }
       });
     });
     return Object.values(series);
@@ -265,7 +290,7 @@ export default function GeneralMetrics({
 
     if (
       Object.keys(statsHistory?.at(0)?.gpu_usages ?? {}).length == 1 &&
-      Object.keys(statsHistory?.at(0)?.gpu_usages ?? {})[0].includes("intel")
+      Object.keys(statsHistory?.at(0)?.gpu_usages ?? {})[0] === "intel-gpu"
     ) {
       // intel gpu stats do not support memory
       return undefined;
@@ -334,6 +359,43 @@ export default function GeneralMetrics({
     return Object.keys(series).length > 0 ? Object.values(series) : undefined;
   }, [statsHistory]);
 
+  const gpuComputeSeries = useMemo(() => {
+    if (!statsHistory) {
+      return [];
+    }
+
+    const series: {
+      [key: string]: { name: string; data: { x: number; y: string }[] };
+    } = {};
+    let hasValidGpu = false;
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
+        if (!(key in series)) {
+          series[key] = { name: key, data: [] };
+        }
+
+        if (stats.compute) {
+          hasValidGpu = true;
+          series[key].data.push({
+            x: statsIdx + 1,
+            y: stats.compute.slice(0, -1),
+          });
+        }
+      });
+    });
+
+    if (!hasValidGpu) {
+      return [];
+    }
+
+    return Object.keys(series).length > 0 ? Object.values(series) : undefined;
+  }, [statsHistory]);
+
   const gpuDecSeries = useMemo(() => {
     if (!statsHistory) {
       return [];
@@ -409,9 +471,7 @@ export default function GeneralMetrics({
     }
 
     const gpuKeys = Object.keys(statsHistory[0]?.gpu_usages ?? {});
-    const hasIntelGpu = gpuKeys.some(
-      (key) => key === "intel-vaapi" || key === "intel-qsv",
-    );
+    const hasIntelGpu = gpuKeys.some((key) => key === "intel-gpu");
 
     if (!hasIntelGpu) {
       return false;
@@ -427,7 +487,7 @@ export default function GeneralMetrics({
       }
 
       Object.entries(stats.gpu_usages || {}).forEach(([key, gpuStats]) => {
-        if (key === "intel-vaapi" || key === "intel-qsv") {
+        if (key === "intel-gpu") {
           if (gpuStats.gpu) {
             hasDataPoints = true;
             const gpuValue = parseFloat(gpuStats.gpu.slice(0, -1));
@@ -546,22 +606,18 @@ export default function GeneralMetrics({
       }
 
       Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = {
-              name: t(`general.otherProcesses.series.${key}`),
-              data: [],
-            };
-          }
+        if (!(key in series)) {
+          series[key] = {
+            name: t(`general.otherProcesses.series.${key}`),
+            data: [],
+          };
+        }
 
-          const data = stats.cpu_usages[procStats.pid.toString()]?.cpu;
-
-          if (data != undefined) {
-            series[key].data.push({
-              x: statsIdx + 1,
-              y: data,
-            });
-          }
+        if (procStats.cpu != undefined) {
+          series[key].data.push({
+            x: statsIdx + 1,
+            y: procStats.cpu,
+          });
         }
       });
     });
@@ -583,22 +639,18 @@ export default function GeneralMetrics({
       }
 
       Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = {
-              name: t(`general.otherProcesses.series.${key}`),
-              data: [],
-            };
-          }
+        if (!(key in series)) {
+          series[key] = {
+            name: t(`general.otherProcesses.series.${key}`),
+            data: [],
+          };
+        }
 
-          const data = stats.cpu_usages[procStats.pid.toString()]?.mem;
-
-          if (data) {
-            series[key].data.push({
-              x: statsIdx + 1,
-              y: data,
-            });
-          }
+        if (procStats.mem) {
+          series[key].data.push({
+            x: statsIdx + 1,
+            y: procStats.mem,
+          });
         }
       });
     });
@@ -635,6 +687,7 @@ export default function GeneralMetrics({
                   threshold={InferenceThreshold}
                   updateTimes={updateTimes}
                   data={[series]}
+                  isActive={isActive}
                 />
               ))}
             </div>
@@ -657,6 +710,7 @@ export default function GeneralMetrics({
                       threshold={DetectorTempThreshold}
                       updateTimes={updateTimes}
                       data={[series]}
+                      isActive={isActive}
                     />
                   ))}
                 </div>
@@ -695,6 +749,7 @@ export default function GeneralMetrics({
                   threshold={DetectorCpuThreshold}
                   updateTimes={updateTimes}
                   data={[series]}
+                  isActive={isActive}
                 />
               ))}
             </div>
@@ -713,6 +768,7 @@ export default function GeneralMetrics({
                   threshold={DetectorMemThreshold}
                   updateTimes={updateTimes}
                   data={[series]}
+                  isActive={isActive}
                 />
               ))}
             </div>
@@ -744,8 +800,9 @@ export default function GeneralMetrics({
               className={cn(
                 "mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2",
                 gpuTempSeries?.length && "md:grid-cols-3",
-                gpuEncSeries?.length && "xl:grid-cols-4",
-                gpuEncSeries?.length &&
+                (gpuEncSeries?.length || gpuComputeSeries?.length) &&
+                  "xl:grid-cols-4",
+                (gpuEncSeries?.length || gpuComputeSeries?.length) &&
                   gpuTempSeries?.length &&
                   "3xl:grid-cols-5",
               )}
@@ -804,6 +861,7 @@ export default function GeneralMetrics({
                           threshold={GPUUsageThreshold}
                           updateTimes={updateTimes}
                           data={[series]}
+                          isActive={isActive}
                         />
                       ))}
                     </div>
@@ -826,6 +884,7 @@ export default function GeneralMetrics({
                               threshold={GPUMemThreshold}
                               updateTimes={updateTimes}
                               data={[series]}
+                              isActive={isActive}
                             />
                           ))}
                         </div>
@@ -850,6 +909,32 @@ export default function GeneralMetrics({
                               threshold={GPUMemThreshold}
                               updateTimes={updateTimes}
                               data={[series]}
+                              isActive={isActive}
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <Skeleton className="aspect-video w-full" />
+                  )}
+                  {statsHistory.length != 0 ? (
+                    <>
+                      {gpuComputeSeries && gpuComputeSeries?.length != 0 && (
+                        <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                          <div className="mb-5">
+                            {t("general.hardwareInfo.gpuCompute")}
+                          </div>
+                          {gpuComputeSeries.map((series) => (
+                            <ThresholdBarGraph
+                              key={series.name}
+                              graphId={`${series.name}-compute`}
+                              unit="%"
+                              name={series.name}
+                              threshold={GPUMemThreshold}
+                              updateTimes={updateTimes}
+                              data={[series]}
+                              isActive={isActive}
                             />
                           ))}
                         </div>
@@ -874,6 +959,7 @@ export default function GeneralMetrics({
                               threshold={GPUMemThreshold}
                               updateTimes={updateTimes}
                               data={[series]}
+                              isActive={isActive}
                             />
                           ))}
                         </div>
@@ -898,6 +984,7 @@ export default function GeneralMetrics({
                               threshold={DetectorTempThreshold}
                               updateTimes={updateTimes}
                               data={[series]}
+                              isActive={isActive}
                             />
                           ))}
                         </div>
@@ -923,6 +1010,7 @@ export default function GeneralMetrics({
                               threshold={GPUUsageThreshold}
                               updateTimes={updateTimes}
                               data={[series]}
+                              isActive={isActive}
                             />
                           ))}
                         </div>
@@ -945,6 +1033,7 @@ export default function GeneralMetrics({
                                   threshold={DetectorTempThreshold}
                                   updateTimes={updateTimes}
                                   data={[series]}
+                                  isActive={isActive}
                                 />
                               ))}
                             </div>
@@ -978,6 +1067,7 @@ export default function GeneralMetrics({
                   threshold={DetectorCpuThreshold}
                   updateTimes={updateTimes}
                   data={[series]}
+                  isActive={isActive}
                 />
               ))}
             </div>
@@ -997,6 +1087,7 @@ export default function GeneralMetrics({
                   threshold={DetectorMemThreshold}
                   updateTimes={updateTimes}
                   data={[series]}
+                  isActive={isActive}
                 />
               ))}
             </div>

web/src/views/system/StorageMetrics.tsx

@@ -1,7 +1,7 @@
 import { CombinedStorageGraph } from "@/components/graph/CombinedStorageGraph";
 import { StorageGraph } from "@/components/graph/StorageGraph";
 import { FrigateStats } from "@/types/stats";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   Popover,
   PopoverContent,
@@ -10,7 +10,11 @@ import {
 import useSWR from "swr";
 import { CiCircleAlert } from "react-icons/ci";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp, useTimezone } from "@/hooks/use-date-utils";
+import {
+  useFormattedTimestamp,
+  useTimeFormat,
+  useTimezone,
+} from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
 import { useTranslation } from "react-i18next";
 import { TZDate } from "react-day-picker";
@@ -56,9 +60,14 @@ export default function StorageMetrics({
     Object.values(cameraStorage).forEach(
       (cam) => (totalStorage.camera += cam.usage),
     );
-    setLastUpdated(Date.now() / 1000);
     return totalStorage;
-  }, [cameraStorage, stats, setLastUpdated]);
+  }, [cameraStorage, stats]);
+
+  useEffect(() => {
+    if (totalStorage) {
+      setLastUpdated(Math.floor(Date.now() / 1000));
+    }
+  }, [totalStorage, setLastUpdated]);
 
   // recordings summary
 
@@ -76,7 +85,7 @@ export default function StorageMetrics({
       : null;
   }, [recordingsSummary, timezone]);
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     return t(`time.formattedTimestampMonthDayYear.${timeFormat}`, {
       ns: "common",