Merge b5a360be39 into 4171efcd79

* Reduce max frames per second to 1

* Use pydantic but don't fail if some constraints are not met.

* Adjust limits

* Adjust limits

* Cleanup

* add unsaved changes icon/popover to individual settings section

* allow changing camera friendly_name from camera management pane

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

frigate/data_processing/post/review_descriptions.py

@@ -40,7 +40,7 @@ logger = logging.getLogger(__name__)
 RECORDING_BUFFER_EXTENSION_PERCENT = 0.10
 MIN_RECORDING_DURATION = 10
 MAX_IMAGE_TOKENS = 24000
-MAX_FRAMES_PER_SECOND = 2
+MAX_FRAMES_PER_SECOND = 1
 
 
 class ReviewDescriptionProcessor(PostProcessorApi):

frigate/data_processing/post/types.py

@@ -1,25 +1,48 @@
-from pydantic import BaseModel, ConfigDict, Field
+from typing import Annotated
+
+from pydantic import BaseModel, ConfigDict, Field, StringConstraints
+
+ObservationItem = Annotated[str, StringConstraints(min_length=20, max_length=160)]
 
 
 class ReviewMetadata(BaseModel):
     model_config = ConfigDict(extra="ignore", protected_namespaces=())
 
-    observations: list[str] = Field(
-        default_factory=list,
-        description="Chronological list of significant observations from the frames, written before the scene narrative is composed.",
+    observations: list[ObservationItem] = Field(
+        ...,
+        min_length=3,
+        max_length=15,
+        description=(
+            "Enumerate the significant observations across all frames, in "
+            "chronological order, BEFORE composing the scene narrative. "
+            "Include the very start of the activity — for example, a vehicle "
+            "entering the frame or pulling into the driveway — even if it "
+            "lasts only a few frames and the rest of the clip is dominated "
+            "by a longer activity. Include each arrival, departure, motion "
+            "event, object handled, and notable change in position or state. "
+            "Each item is a single concrete fact written as a complete "
+            "sentence. Do not summarize, interpret, or assign meaning here — "
+            "that belongs in the scene field."
+        ),
     )
     title: str = Field(
-        description="A short title characterizing what took place and where, under 10 words."
+        max_length=80,
+        description="A short title characterizing what took place and where, under 10 words.",
     )
     scene: str = Field(
-        description="A chronological narrative of what happens from start to finish.",
+        min_length=150,
+        max_length=600,
+        description="A chronological narrative of what happens from start to finish, drawing directly from the items in observations.",
     )
     shortSummary: str = Field(
-        description="A brief 2-sentence summary of the scene, suitable for notifications."
+        min_length=70,
+        max_length=100,
+        description="A brief 2-sentence summary of the scene, suitable for notifications.",
     )
     confidence: float = Field(
         ge=0.0,
-        description="Confidence in the analysis, from 0 to 1.",
+        le=1.0,
+        description="Confidence in the analysis as a decimal between 0.0 and 1.0, where 0.0 means no confidence and 1.0 means complete confidence. Express ONLY as a decimal.",
     )
     potential_threat_level: int = Field(
         ge=0,

frigate/genai/__init__.py

@@ -2,6 +2,7 @@
 
 import datetime
 import importlib
+import json
 import logging
 import os
 import re
@@ -9,6 +10,7 @@ from typing import Any, Callable, Optional
 
 import numpy as np
 from playhouse.shortcuts import model_to_dict
+from pydantic import ValidationError
 
 from frigate.config import CameraConfig, GenAIConfig, GenAIProviderEnum
 from frigate.const import CLIPS_DIR
@@ -151,50 +153,6 @@ Each line represents a detection state, not necessarily unique individuals. The
             if "other_concerns" in schema.get("required", []):
                 schema["required"].remove("other_concerns")
 
-        # Length hints injected into the schema as suggestions to the model
-        # (enforced by grammar-based providers like llama.cpp) but kept off the
-        # Pydantic model so a non-compliant response does not fail validation.
-        length_hints = {
-            "scene": {"minLength": 120, "maxLength": 600},
-            "shortSummary": {"minLength": 70, "maxLength": 100},
-        }
-        for field, hints in length_hints.items():
-            prop = schema.get("properties", {}).get(field)
-            if prop is not None:
-                prop.update(hints)
-
-        # observations is a chain-of-thought-by-schema field: forcing the model
-        # to enumerate concrete facts before writing scene/title surfaces details
-        # the narrative would otherwise gloss past (e.g. brief vehicle arrivals
-        # overshadowed by a longer activity). The minItems floor scales with
-        # event duration so longer clips get more observations.
-        observations_prop = schema.get("properties", {}).get("observations")
-        if observations_prop is not None:
-            duration_seconds = float(review_data.get("duration") or 0)
-            min_observations = max(3, round(duration_seconds / 5))
-            max_observations = min_observations + 8
-            observations_prop["description"] = (
-                "Enumerate the significant observations across all frames, in "
-                "chronological order, BEFORE composing the scene narrative. "
-                "Include the very start of the activity — for example, a "
-                "vehicle entering the frame or pulling into the driveway — "
-                "even if it lasts only a few frames and the rest of the clip "
-                "is dominated by a longer activity. Include each arrival, "
-                "departure, motion event, object handled, and notable change "
-                "in position or state. Each item is a single concrete fact "
-                "written as a complete sentence (e.g., 'A blue sedan turns "
-                "from the street into the driveway', 'Nick exits the driver "
-                "side carrying a plant pot'). Do not summarize, interpret, or "
-                "assign meaning here — that belongs in the scene field."
-            )
-            observations_prop["minItems"] = min_observations
-            observations_prop["maxItems"] = max_observations
-            observations_prop["items"] = {"type": "string", "minLength": 20}
-
-            required = schema.setdefault("required", [])
-            if "observations" not in required:
-                required.append("observations")
-
         # OpenAI strict mode requires additionalProperties: false on all objects
         schema["additionalProperties"] = False
 
@@ -225,7 +183,35 @@ Each line represents a detection state, not necessarily unique individuals. The
 
             try:
                 metadata = ReviewMetadata.model_validate_json(clean_json)
+            except ValidationError as ve:
+                # Constraint violations (length, item count, ranges) are logged
+                # at debug and the response is kept anyway — a slightly
+                # off-spec answer is still usable, and dropping the whole
+                # response loses the narrative content the model produced.
+                for err in ve.errors():
+                    loc = ".".join(str(p) for p in err["loc"]) or "<root>"
+                    logger.debug(
+                        "Review metadata soft validation: %s — %s (input: %r)",
+                        loc,
+                        err["msg"],
+                        err.get("input"),
+                    )
+                try:
+                    raw = json.loads(clean_json)
+                except json.JSONDecodeError as je:
+                    logger.error("Failed to parse review description JSON: %s", je)
+                    return None
+                # observations is required on the model; fill an empty default
+                # if the response omitted it so attribute access stays safe.
+                raw.setdefault("observations", [])
+                metadata = ReviewMetadata.model_construct(**raw)
+            except Exception as e:
+                logger.error(
+                    f"Failed to parse review description as the response did not match expected format. {e}"
+                )
+                return None
 
+            try:
                 # Normalize confidence if model returned a percentage (e.g. 85 instead of 0.85)
                 if metadata.confidence > 1.0:
                     metadata.confidence = min(metadata.confidence / 100.0, 1.0)
@@ -238,10 +224,7 @@ Each line represents a detection state, not necessarily unique individuals. The
                 metadata.time = review_data["start"]
                 return metadata
             except Exception as e:
-                # rarely LLMs can fail to follow directions on output format
-                logger.warning(
-                    f"Failed to parse review description as the response did not match expected format. {e}"
-                )
+                logger.error(f"Failed to post-process review metadata: {e}")
                 return None
         else:
             logger.debug(

frigate/output/birdseye.py

@@ -594,112 +594,92 @@ class BirdsEyeFrameManager:
     ) -> Optional[list[list[Any]]]:
         """Calculate the optimal layout for 2+ cameras."""
 
-        def map_layout(
-            camera_layout: list[list[Any]], row_height: int
-        ) -> tuple[int, int, Optional[list[list[Any]]]]:
-            """Map the calculated layout."""
-            candidate_layout = []
-            starting_x = 0
-            x = 0
-            max_width = 0
-            y = 0
+        def find_available_x(
+            current_x: int,
+            width: int,
+            reserved_ranges: list[tuple[int, int]],
+            max_width: int,
+        ) -> Optional[int]:
+            """Find the first horizontal slot that does not collide with reservations."""
+            x = current_x
 
-            for row in camera_layout:
-                final_row = []
-                max_width = max(max_width, x)
-                x = starting_x
-                for cameras in row:
-                    camera_dims = self.cameras[cameras[0]]["dimensions"].copy()
-                    camera_aspect = cameras[1]
+            for reserved_start, reserved_end in sorted(reserved_ranges):
+                if x >= reserved_end:
+                    continue
 
-                    if camera_dims[1] > camera_dims[0]:
-                        scaled_height = int(row_height * 2)
-                        scaled_width = int(scaled_height * camera_aspect)
-                        starting_x = scaled_width
-                    else:
-                        scaled_height = row_height
-                        scaled_width = int(scaled_height * camera_aspect)
+                if x + width <= reserved_start:
+                    return x
 
-                    # layout is too large
-                    if (
-                        x + scaled_width > self.canvas.width
-                        or y + scaled_height > self.canvas.height
-                    ):
-                        return x + scaled_width, y + scaled_height, None
+                x = max(x, reserved_end)
 
-                    final_row.append((cameras[0], (x, y, scaled_width, scaled_height)))
-                    x += scaled_width
+            if x + width <= max_width:
+                return x
 
-                y += row_height
-                candidate_layout.append(final_row)
-
-            if max_width == 0:
-                max_width = x
-
-            return max_width, y, candidate_layout
-
-        canvas_aspect_x, canvas_aspect_y = self.canvas.get_aspect(coefficient)
-        camera_layout: list[list[Any]] = []
-        camera_layout.append([])
-        starting_x = 0
-        x = starting_x
-        y = 0
-        y_i = 0
-        max_y = 0
-        for camera in cameras_to_add:
-            camera_dims = self.cameras[camera]["dimensions"].copy()
-            camera_aspect_x, camera_aspect_y = self.canvas.get_camera_aspect(
-                camera, camera_dims[0], camera_dims[1]
-            )
-
-            if camera_dims[1] > camera_dims[0]:
-                portrait = True
-            else:
-                portrait = False
-
-            if (x + camera_aspect_x) <= canvas_aspect_x:
-                # insert if camera can fit on current row
-                camera_layout[y_i].append(
-                    (
-                        camera,
-                        camera_aspect_x / camera_aspect_y,
-                    )
-                )
-
-                if portrait:
-                    starting_x = camera_aspect_x
-                else:
-                    max_y = max(
-                        max_y,
-                        camera_aspect_y,
-                    )
-
-                x += camera_aspect_x
-            else:
-                # move on to the next row and insert
-                y += max_y
-                y_i += 1
-                camera_layout.append([])
-                x = starting_x
-
-                if x + camera_aspect_x > canvas_aspect_x:
-                    return None
-
-                camera_layout[y_i].append(
-                    (
-                        camera,
-                        camera_aspect_x / camera_aspect_y,
-                    )
-                )
-                x += camera_aspect_x
-
-        if y + max_y > canvas_aspect_y:
             return None
 
-        row_height = int(self.canvas.height / coefficient)
-        total_width, total_height, standard_candidate_layout = map_layout(
-            camera_layout, row_height
-        )
+        def map_layout(row_height: int) -> tuple[int, int, Optional[list[list[Any]]]]:
+            """Lay out cameras row by row while reserving portrait spans for the next row."""
+            candidate_layout: list[list[Any]] = []
+            reserved_ranges: dict[int, list[tuple[int, int]]] = {}
+            current_row: list[Any] = []
+            row_index = 0
+            row_y = 0
+            row_x = 0
+            max_width = 0
+            max_height = 0
+
+            for camera in cameras_to_add:
+                camera_dims = self.cameras[camera]["dimensions"].copy()
+                camera_aspect_x, camera_aspect_y = self.canvas.get_camera_aspect(
+                    camera, camera_dims[0], camera_dims[1]
+                )
+                portrait = camera_dims[1] > camera_dims[0]
+                scaled_height = row_height * 2 if portrait else row_height
+                scaled_width = int(scaled_height * (camera_aspect_x / camera_aspect_y))
+
+                while True:
+                    x = find_available_x(
+                        row_x,
+                        scaled_width,
+                        reserved_ranges.get(row_index, []),
+                        self.canvas.width,
+                    )
+
+                    if x is not None and row_y + scaled_height <= self.canvas.height:
+                        current_row.append(
+                            (camera, (x, row_y, scaled_width, scaled_height))
+                        )
+                        row_x = x + scaled_width
+                        max_width = max(max_width, row_x)
+                        max_height = max(max_height, row_y + scaled_height)
+
+                        if portrait:
+                            reserved_ranges.setdefault(row_index + 1, []).append(
+                                (x, row_x)
+                            )
+
+                        break
+
+                    if current_row:
+                        candidate_layout.append(current_row)
+                        current_row = []
+
+                    row_index += 1
+                    row_y = row_index * row_height
+                    row_x = 0
+
+                    if row_y + scaled_height > self.canvas.height:
+                        overflow_width = max(max_width, scaled_width)
+                        overflow_height = row_y + scaled_height
+                        return overflow_width, overflow_height, None
+
+            if current_row:
+                candidate_layout.append(current_row)
+
+            return max_width, max_height, candidate_layout
+
+        row_height = max(1, int(self.canvas.height / coefficient))
+        total_width, total_height, standard_candidate_layout = map_layout(row_height)
 
         if not standard_candidate_layout:
             # if standard layout didn't work
@@ -708,9 +688,9 @@ class BirdsEyeFrameManager:
                 total_width / self.canvas.width,
                 total_height / self.canvas.height,
             )
-            row_height = int(row_height / scale_down_percent)
+            row_height = max(1, int(row_height / scale_down_percent))
             total_width, total_height, standard_candidate_layout = map_layout(
-                camera_layout, row_height
+                row_height
             )
 
             if not standard_candidate_layout:
@@ -724,8 +704,8 @@ class BirdsEyeFrameManager:
             1 / (total_width / self.canvas.width),
             1 / (total_height / self.canvas.height),
         )
-        row_height = int(row_height * scale_up_percent)
-        _, _, scaled_layout = map_layout(camera_layout, row_height)
+        row_height = max(1, int(row_height * scale_up_percent))
+        _, _, scaled_layout = map_layout(row_height)
 
         if scaled_layout:
             return scaled_layout

frigate/test/test_birdseye.py

@@ -1,11 +1,64 @@
-"""Test camera user and password cleanup."""
+"""Tests for Birdseye canvas sizing and layout behavior."""
 
 import unittest
+from multiprocessing import Event
 
-from frigate.output.birdseye import get_canvas_shape
+from frigate.config import FrigateConfig
+from frigate.output.birdseye import BirdsEyeFrameManager, get_canvas_shape
 
 
 class TestBirdseye(unittest.TestCase):
+    def _build_manager(
+        self, camera_dimensions: dict[str, tuple[int, int]]
+    ) -> BirdsEyeFrameManager:
+        config = {
+            "mqtt": {"host": "mqtt"},
+            "birdseye": {"width": 1280, "height": 720},
+            "cameras": {},
+        }
+
+        for order, (camera, dimensions) in enumerate(
+            camera_dimensions.items(), start=1
+        ):
+            config["cameras"][camera] = {
+                "ffmpeg": {
+                    "inputs": [
+                        {
+                            "path": f"rtsp://10.0.0.1:554/{camera}",
+                            "roles": ["detect"],
+                        }
+                    ]
+                },
+                "detect": {
+                    "width": dimensions[0],
+                    "height": dimensions[1],
+                    "fps": 5,
+                },
+                "birdseye": {"order": order},
+            }
+
+        return BirdsEyeFrameManager(FrigateConfig(**config), Event())
+
+    def _assert_no_overlaps(
+        self, layout: list[list[tuple[str, tuple[int, int, int, int]]]]
+    ):
+        rectangles = [position for row in layout for _, position in row]
+
+        for index, rect in enumerate(rectangles):
+            x1, y1, width1, height1 = rect
+            for other in rectangles[index + 1 :]:
+                x2, y2, width2, height2 = other
+                overlap = (
+                    x1 < x2 + width2
+                    and x2 < x1 + width1
+                    and y1 < y2 + height2
+                    and y2 < y1 + height1
+                )
+                self.assertFalse(
+                    overlap,
+                    msg=f"Overlapping rectangles found: {rect} and {other}",
+                )
+
     def test_16x9(self):
         """Test 16x9 aspect ratio works as expected for birdseye."""
         width = 1280
@@ -45,3 +98,104 @@ class TestBirdseye(unittest.TestCase):
         canvas_width, canvas_height = get_canvas_shape(width, height)
         assert canvas_width == width  # width will be the same
         assert canvas_height != height
+
+    def test_portrait_camera_does_not_overlap_next_row(self):
+        """Portrait cameras should reserve their real horizontal position on the next row."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_b": (1280, 720),
+                "cam_c": (640, 480),
+            }
+        )
+
+        layout = manager.calculate_layout(["cam_a", "cam_p", "cam_b", "cam_c"], 3)
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_c = [
+            position for row in layout for camera, position in row if camera == "cam_c"
+        ][0]
+        self.assertEqual(cam_c[0], 0)
+
+    def test_portrait_reservation_only_applies_to_next_row(self):
+        """Portrait reservations should not push later rows after the span ends."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_b": (1280, 720),
+                "cam_c": (1280, 720),
+                "cam_d": (1280, 720),
+                "cam_e": (1280, 720),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_p", "cam_b", "cam_c", "cam_d", "cam_e"],
+            3,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_e = [
+            position for row in layout for camera, position in row if camera == "cam_e"
+        ][0]
+        self.assertEqual(cam_e[0], 0)
+
+    def test_multiple_portraits_reserve_distinct_ranges(self):
+        """Multiple portrait cameras in one row should reserve separate spans below them."""
+        manager = self._build_manager(
+            {
+                "cam_a": (640, 480),
+                "cam_p1": (360, 640),
+                "cam_p2": (360, 640),
+                "cam_b": (640, 480),
+                "cam_c": (1280, 720),
+                "cam_d": (640, 480),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_p1", "cam_p2", "cam_b", "cam_c", "cam_d"],
+            4,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+    def test_two_landscapes_then_portrait_then_two_landscapes(self):
+        """A portrait after two landscapes should reserve only its own tail span."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_b": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_c": (1280, 720),
+                "cam_d": (1280, 720),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_b", "cam_p", "cam_c", "cam_d"],
+            3,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_c = [
+            position for row in layout for camera, position in row if camera == "cam_c"
+        ][0]
+        cam_d = [
+            position for row in layout for camera, position in row if camera == "cam_d"
+        ][0]
+        self.assertEqual(cam_c[0], 0)
+        self.assertEqual(cam_d[0], cam_c[0] + cam_c[2])

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

@@ -457,7 +457,13 @@
       "enableDesc": "Temporarily disable an enabled camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>",
       "disableLabel": "Disabled cameras",
       "disableDesc": "Enable a camera that is currently not visible in the UI and disabled in the configuration. A restart of Frigate is required after enabling.",
-      "enableSuccess": "Enabled {{cameraName}} in configuration. Restart Frigate to apply the changes."
+      "enableSuccess": "Enabled {{cameraName}} in configuration. Restart Frigate to apply the changes.",
+      "friendlyName": {
+        "edit": "Edit camera display name",
+        "title": "Edit Display Name",
+        "description": "Set the friendly name shown for this camera throughout the Frigate UI. Leave blank to use the camera ID.",
+        "rename": "Rename"
+      }
     },
     "cameraConfig": {
       "add": "Add Camera",

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

@@ -65,10 +65,14 @@ import {
   globalCameraDefaultSections,
   buildOverrides,
   buildConfigDataForPath,
+  flattenOverrides,
   getBaseCameraSectionValue,
   sanitizeSectionData as sharedSanitizeSectionData,
   requiresRestartForOverrides as sharedRequiresRestartForOverrides,
 } from "@/utils/configUtil";
+import SaveAllPreviewPopover, {
+  type SaveAllPreviewItem,
+} from "@/components/overlay/detail/SaveAllPreviewPopover";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import { useRestart } from "@/api/ws";
 import type {
@@ -913,6 +917,34 @@ export function ConfigSection({
     );
   }, [sectionConfig?.renderers, sectionPath, cameraName, setPendingData]);
 
+  // Build a flat list of pending field changes for this section only.
+  // Mirrors the global Save All preview but scoped to the current section so
+  // users can inspect what will be saved without leaving the section.
+  const sectionPreviewItems = useMemo<SaveAllPreviewItem[]>(() => {
+    if (!hasChanges) return [];
+    if (!effectiveOverrides || typeof effectiveOverrides !== "object") {
+      return [];
+    }
+    const flattened = flattenOverrides(effectiveOverrides as JsonValue);
+    return flattened.map(({ path, value }) => ({
+      scope: effectiveLevel,
+      cameraName,
+      profileName: profileName
+        ? (profileFriendlyName ?? profileName)
+        : undefined,
+      fieldPath: path ? `${sectionPath}.${path}` : sectionPath,
+      value,
+    }));
+  }, [
+    hasChanges,
+    effectiveOverrides,
+    effectiveLevel,
+    cameraName,
+    profileName,
+    profileFriendlyName,
+    sectionPath,
+  ]);
+
   if (!modifiedSchema) {
     return null;
   }
@@ -1018,6 +1050,12 @@ export function ConfigSection({
                   defaultValue: "You have unsaved changes",
                 })}
               </span>
+              <SaveAllPreviewPopover
+                items={sectionPreviewItems}
+                className="h-7 w-7"
+                align="start"
+                side="top"
+              />
             </div>
           )}
           <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">

web/src/components/overlay/dialog/TextEntryDialog.tsx

@@ -1,3 +1,4 @@
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import TextEntry from "@/components/input/TextEntry";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,7 +20,9 @@ type TextEntryDialogProps = {
   setOpen: (open: boolean) => void;
   onSave: (text: string) => void;
   defaultValue?: string;
+  placeholder?: string;
   allowEmpty?: boolean;
+  isSaving?: boolean;
   regexPattern?: RegExp;
   regexErrorMessage?: string;
   forbiddenPattern?: RegExp;
@@ -33,7 +36,9 @@ export default function TextEntryDialog({
   setOpen,
   onSave,
   defaultValue = "",
+  placeholder,
   allowEmpty = false,
+  isSaving = false,
   regexPattern,
   regexErrorMessage,
   forbiddenPattern,
@@ -50,6 +55,7 @@ export default function TextEntryDialog({
         </DialogHeader>
         <TextEntry
           defaultValue={defaultValue}
+          placeholder={placeholder}
           allowEmpty={allowEmpty}
           onSave={onSave}
           regexPattern={regexPattern}
@@ -58,11 +64,22 @@ export default function TextEntryDialog({
           forbiddenErrorMessage={forbiddenErrorMessage}
         >
           <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
-            <Button type="button" onClick={() => setOpen(false)}>
+            <Button
+              type="button"
+              disabled={isSaving}
+              onClick={() => setOpen(false)}
+            >
               {t("button.cancel")}
             </Button>
-            <Button variant="select" type="submit">
-              {t("button.save")}
+            <Button variant="select" type="submit" disabled={isSaving}>
+              {isSaving ? (
+                <div className="flex flex-row items-center gap-2">
+                  <ActivityIndicator className="size-4" />
+                  <span>{t("button.saving")}</span>
+                </div>
+              ) : (
+                t("button.save")
+              )}
             </Button>
           </DialogFooter>
         </TextEntry>

web/src/pages/Settings.tsx

@@ -28,11 +28,7 @@ import useOptimisticState from "@/hooks/use-optimistic-state";
 import { isMobile } from "react-device-detect";
 import { FaVideo } from "react-icons/fa";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
-import type {
-  ConfigSectionData,
-  JsonObject,
-  JsonValue,
-} from "@/types/configForm";
+import type { ConfigSectionData, JsonObject } from "@/types/configForm";
 import useSWR from "swr";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
@@ -93,6 +89,7 @@ import { mutate } from "swr";
 import { RJSFSchema } from "@rjsf/utils";
 import {
   buildConfigDataForPath,
+  flattenOverrides,
   parseProfileFromSectionPath,
   prepareSectionSavePayload,
   PROFILE_ELIGIBLE_SECTIONS,
@@ -190,25 +187,6 @@ const parsePendingDataKey = (pendingDataKey: string) => {
   };
 };
 
-const flattenOverrides = (
-  value: JsonValue | undefined,
-  path: string[] = [],
-): Array<{ path: string; value: JsonValue }> => {
-  if (value === undefined) return [];
-  if (value === null || typeof value !== "object" || Array.isArray(value)) {
-    return [{ path: path.join("."), value }];
-  }
-
-  const entries = Object.entries(value);
-  if (entries.length === 0) {
-    return [{ path: path.join("."), value: {} }];
-  }
-
-  return entries.flatMap(([key, entryValue]) =>
-    flattenOverrides(entryValue, [...path, key]),
-  );
-};
-
 const createSectionPage = (
   sectionKey: string,
   level: "global" | "camera",

web/src/utils/configUtil.ts

@@ -219,6 +219,32 @@ export function buildOverrides(
   return current;
 }
 
+// ---------------------------------------------------------------------------
+// flattenOverrides — turn an overrides object into a list of leaf paths
+// ---------------------------------------------------------------------------
+
+// Walks a nested overrides value and produces a flat list of `{ path, value }`
+// entries, one per leaf.  Used by save/preview UIs to enumerate the individual
+// fields that will be changed.
+export function flattenOverrides(
+  value: JsonValue | undefined,
+  path: string[] = [],
+): Array<{ path: string; value: JsonValue }> {
+  if (value === undefined) return [];
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return [{ path: path.join("."), value }];
+  }
+
+  const entries = Object.entries(value);
+  if (entries.length === 0) {
+    return [{ path: path.join("."), value: {} }];
+  }
+
+  return entries.flatMap(([key, entryValue]) =>
+    flattenOverrides(entryValue, [...path, key]),
+  );
+}
+
 // ---------------------------------------------------------------------------
 // sanitizeSectionData — normalize config values and strip hidden fields
 // ---------------------------------------------------------------------------

web/src/views/settings/CameraManagementView.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 import CameraEditForm from "@/components/settings/CameraEditForm";
 import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
 import DeleteCameraDialog from "@/components/overlay/dialog/DeleteCameraDialog";
-import { LuPlus, LuTrash2 } from "react-icons/lu";
+import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { isDesktop } from "react-device-detect";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
@@ -26,6 +26,12 @@ import axios from "axios";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import RestartRequiredIndicator from "@/components/indicators/RestartRequiredIndicator";
+import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { ProfileState } from "@/types/profile";
 import { getProfileColor } from "@/utils/profileColors";
 import { cn } from "@/lib/utils";
@@ -161,7 +167,13 @@ export default function CameraManagementView({
                             key={camera}
                             className="flex flex-row items-center justify-between"
                           >
-                            <CameraNameLabel camera={camera} />
+                            <div className="flex items-center gap-1">
+                              <CameraNameLabel camera={camera} />
+                              <CameraFriendlyNameEditor
+                                cameraName={camera}
+                                onConfigChanged={updateConfig}
+                              />
+                            </div>
                             <CameraEnableSwitch cameraName={camera} />
                           </div>
                         ))}
@@ -297,6 +309,103 @@ function CameraEnableSwitch({ cameraName }: CameraEnableSwitchProps) {
   );
 }
 
+type CameraFriendlyNameEditorProps = {
+  cameraName: string;
+  onConfigChanged: () => Promise<unknown>;
+};
+
+function CameraFriendlyNameEditor({
+  cameraName,
+  onConfigChanged,
+}: CameraFriendlyNameEditorProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const [open, setOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const currentFriendlyName = config?.cameras?.[cameraName]?.friendly_name;
+
+  const onSave = useCallback(
+    async (text: string) => {
+      if (isSaving) return;
+      setIsSaving(true);
+
+      try {
+        await axios.put("config/set", {
+          requires_restart: 0,
+          config_data: {
+            cameras: {
+              [cameraName]: {
+                friendly_name: text.trim() || null,
+              },
+            },
+          },
+        });
+
+        await onConfigChanged();
+        setOpen(false);
+
+        toast.success(t("toast.save.success", { ns: "common" }), {
+          position: "top-center",
+        });
+      } catch (error) {
+        const errorMessage =
+          axios.isAxiosError(error) &&
+          (error.response?.data?.message || error.response?.data?.detail)
+            ? error.response?.data?.message || error.response?.data?.detail
+            : t("toast.save.error.noMessage", { ns: "common" });
+
+        toast.error(
+          t("toast.save.error.title", { errorMessage, ns: "common" }),
+          { position: "top-center" },
+        );
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [cameraName, isSaving, onConfigChanged, t],
+  );
+
+  const renameLabel = t("cameraManagement.streams.friendlyName.rename", {
+    ns: "views/settings",
+  });
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            aria-label={renameLabel}
+            onClick={() => setOpen(true)}
+            disabled={isSaving}
+          >
+            <LuPencil className="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{renameLabel}</TooltipContent>
+      </Tooltip>
+      <TextEntryDialog
+        open={open}
+        setOpen={setOpen}
+        title={t("cameraManagement.streams.friendlyName.title", {
+          ns: "views/settings",
+        })}
+        description={t("cameraManagement.streams.friendlyName.description", {
+          ns: "views/settings",
+        })}
+        defaultValue={currentFriendlyName ?? ""}
+        placeholder={currentFriendlyName ? undefined : cameraName}
+        allowEmpty
+        isSaving={isSaving}
+        onSave={onSave}
+      />
+    </>
+  );
+}
+
 type CameraConfigEnableSwitchProps = {
   cameraName: string;
   setRestartDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;