diff --git a/docs/data/object_detectors_models.yaml b/docs/data/object_detectors_models.yaml
index a4458c3091..4b0cad54bf 100644
--- a/docs/data/object_detectors_models.yaml
+++ b/docs/data/object_detectors_models.yaml
@@ -1149,6 +1149,11 @@ rknn:
         | **Model Input D Type**                   | `int` (Frigate's default value)                    |
         | **Object Detection Model Type**          | `yolo-generic`                                     |
       yaml: |-
+        detectors:
+          rknn:
+            type: rknn
+            num_cores: 0
+
         model: # required
           # name of model (will be automatically downloaded) or path to your own .rknn model file
           # possible values are:
@@ -1187,6 +1192,11 @@ rknn:
         | **Model Input D Type**                   | `int` (Frigate's default value)                                         |
         | **Object Detection Model Type**          | `yolonas`                                                               |
       yaml: |-
+        detectors:
+          rknn:
+            type: rknn
+            num_cores: 0
+
         model: # required
           # name of model (will be automatically downloaded) or path to your own .rknn model file
           # possible values are:
@@ -1222,6 +1232,11 @@ rknn:
         | **Model Input D Type**                   | `int` (Frigate's default value)                |
         | **Object Detection Model Type**          | `yolox`                                        |
       yaml: |-
+        detectors:
+          rknn:
+            type: rknn
+            num_cores: 0
+
         model: # required
           # name of model (will be automatically downloaded) or path to your own .rknn model file
           # possible values are:
@@ -1297,11 +1312,12 @@ degirumAiServer:
         | **Zoo** | `degirum/public` |
         | **Token** | your AI Hub token (optional for the public zoo) |
       yaml: |
-        degirum_detector:
-          type: degirum
-          location: degirum
-          zoo: degirum/public
-          token: dg_example_token
+        detectors:
+          degirum_detector:
+            type: degirum
+            location: degirum
+            zoo: degirum/public
+            token: dg_example_token
 degirumLocal:
   title: DeGirum Local
   models:
@@ -1318,11 +1334,12 @@ degirumLocal:
         | **Zoo** | `degirum/public` |
         | **Token** | your AI Hub token (optional for the public zoo) |
       yaml: |
-        degirum_detector:
-          type: degirum
-          location: @local
-          zoo: degirum/public
-          token: dg_example_token
+        detectors:
+          degirum_detector:
+            type: degirum
+            location: "@local"
+            zoo: degirum/public
+            token: dg_example_token
 degirumCloud:
   title: DeGirum AI Hub Cloud
   models:
@@ -1339,8 +1356,9 @@ degirumCloud:
         | **Zoo** | `degirum/public` |
         | **Token** | your AI Hub token (optional for the public zoo) |
       yaml: |
-        degirum_detector:
-          type: degirum
-          location: @cloud
-          zoo: degirum/public
-          token: dg_example_token
+        detectors:
+          degirum_detector:
+            type: degirum
+            location: "@cloud"
+            zoo: degirum/public
+            token: dg_example_token
diff --git a/docs/docs/configuration/license_plate_recognition.md b/docs/docs/configuration/license_plate_recognition.md
index eae92a9815..b385ecbe60 100644
--- a/docs/docs/configuration/license_plate_recognition.md
+++ b/docs/docs/configuration/license_plate_recognition.md
@@ -4,6 +4,7 @@ title: License Plate Recognition (LPR)
 ---
 
 import ConfigTabs from "@site/src/components/ConfigTabs";
+import FrigateConfigMock from "@site/src/components/FrigateConfigMock";
 import TabItem from "@theme/TabItem";
 import NavPath from "@site/src/components/NavPath";
 import FaqItem from "@site/src/components/FaqItem";
@@ -50,9 +51,11 @@ License plate recognition is disabled by default and must be enabled before it c
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- Set **Enable LPR** to on
+<FrigateConfigMock
+  section="lpr"
+  values={{ enabled: true }}
+  targets={["enabled"]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -70,7 +73,17 @@ Like other enrichments in Frigate, LPR **must be enabled globally** to use the f
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > License plate recognition" /> for the desired camera and disable the **Enable LPR** toggle.
+<FrigateConfigMock
+  section="lpr"
+  level="camera"
+  values={{ enabled: false }}
+  targets={[
+    {
+      field: "enabled",
+      hint: "Disable the Enable LPR toggle for this camera.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -99,16 +112,40 @@ Fine-tune the LPR feature using these optional parameters. The only optional par
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- **Detection threshold**: License plate object detection confidence score required before recognition runs. This field only applies to the standalone license plate detection model; `threshold` and `min_score` object filters should be used for models like Frigate+ that have license plate detection built in.
-  - Default: `0.7`
-- **Minimum plate area**: Minimum area (in pixels) a license plate must be before recognition runs. This is an _area_ measurement (length x width). For reference, 1000 pixels represents a ~32x32 pixel square in your camera image. Depending on the resolution of your camera's `detect` stream, you can increase this value to ignore small or distant plates.
-  - Default: `1000` pixels
-- **Device**: Device to use to run license plate detection _and_ recognition models. Auto-selected by Frigate and can be `CPU`, `GPU`, or the GPU's device number. For users without a model that detects license plates natively, using a GPU may increase performance of the YOLOv9 license plate detector model. See the [Hardware Accelerated Enrichments](/configuration/hardware_acceleration_enrichments.md) documentation.
-  - Default: `None`
-- **Model size**: The size of the model used to identify regions of text on plates. The `small` model is fast and identifies groups of Latin and Chinese characters. The `large` model identifies Latin characters only, and uses an enhanced text detector to find characters on multi-line plates. If your country or region does not use multi-line plates, you should use the `small` model.
-  - Default: `small`
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{
+    enabled: true,
+    detection_threshold: 0.7,
+    min_area: 1000,
+    device: "CPU",
+    model_size: "small",
+  }}
+  targets={[
+    {
+      field: "detection_threshold",
+      hint:
+        "License plate object detection confidence score required before recognition runs. This field only applies to the standalone license plate detection model; threshold and min_score object filters should be used for models like Frigate+ that have license plate detection built in.",
+    },
+    {
+      field: "min_area",
+      hint:
+        "Minimum area (in pixels) a license plate must be before recognition runs. This is an area measurement (length x width). For reference, 1000 pixels represents a ~32x32 pixel square in your camera image. Depending on the resolution of your camera's detect stream, you can increase this value to ignore small or distant plates.",
+    },
+    {
+      field: "device",
+      hint:
+        "Device to use to run license plate detection and recognition models. Auto-selected by Frigate and can be CPU, GPU, or the GPU's device number. For users without a model that detects license plates natively, using a GPU may increase performance of the YOLOv9 license plate detector model. See the Hardware Accelerated Enrichments documentation.",
+    },
+    {
+      field: "model_size",
+      hint:
+        "The size of the model used to identify regions of text on plates. The small model is fast and identifies groups of Latin and Chinese characters. The large model identifies Latin characters only, and uses an enhanced text detector to find characters on multi-line plates. If your country or region does not use multi-line plates, you should use the small model.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -130,12 +167,34 @@ lpr:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- **Recognition threshold**: Recognition confidence score required to add the plate to the object as a `recognized_license_plate` and/or `sub_label`.
-  - Default: `0.9`
-- **Min plate length**: Minimum number of characters a detected license plate must have to be added as a `recognized_license_plate` and/or `sub_label`. Use this to filter out short, incomplete, or incorrect detections.
-- **Plate format regex**: A regular expression defining the expected format of detected plates. Plates that do not match this format will be discarded. Websites like https://regex101.com/ can help test regular expressions for your plates.
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{
+    enabled: true,
+    recognition_threshold: 0.9,
+    min_plate_length: 4,
+    format: "^[A-Z]{2}[0-9]{2} [A-Z]{3}$",
+  }}
+  targets={[
+    {
+      field: "recognition_threshold",
+      hint:
+        "Recognition confidence score required to add the plate to the object as a recognized_license_plate and/or sub_label.",
+    },
+    {
+      field: "min_plate_length",
+      hint:
+        "Minimum number of characters a detected license plate must have to be added as a recognized_license_plate and/or sub_label. Use this to filter out short, incomplete, or incorrect detections.",
+    },
+    {
+      field: "format",
+      hint:
+        "A regular expression defining the expected format of detected plates. Plates that do not match this format will be discarded. Websites like https://regex101.com/ can help test regular expressions for your plates.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -156,10 +215,31 @@ lpr:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- **Known plates**: Assign custom `sub_label` values to `car` and `motorcycle` objects when a recognized plate matches a known value. These labels appear in the UI, filters, and notifications. Unknown plates are still saved but are added to the `recognized_license_plate` field rather than the `sub_label`.
-- **Match distance**: Allows for minor variations (missing/incorrect characters) when matching a detected plate to a known plate. For example, setting to `1` allows a plate `ABCDE` to match `ABCBE` or `ABCD`. This parameter will _not_ operate on known plates that are defined as regular expressions.
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{
+    enabled: true,
+    match_distance: 1,
+    known_plates: {
+      "Wife's Car": ["ABC-1234"],
+      Johnny: ["J*N-*234"],
+    },
+  }}
+  targets={[
+    {
+      field: "match_distance",
+      hint:
+        "Allows for minor variations (missing/incorrect characters) when matching a detected plate to a known plate. For example, setting to 1 allows a plate ABCDE to match ABCBE or ABCD. This parameter will not operate on known plates that are defined as regular expressions.",
+    },
+    {
+      field: "known_plates",
+      hint:
+        "Assign custom sub_label values to car and motorcycle objects when a recognized plate matches a known value. These labels appear in the UI, filters, and notifications. Unknown plates are still saved but are added to the recognized_license_plate field rather than the sub_label.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -183,10 +263,19 @@ lpr:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- **Enhancement level**: A value between 0 and 10 that adjusts the level of image enhancement applied to captured license plates before they are processed for recognition. Higher values increase contrast, sharpen details, and reduce noise, but excessive enhancement can blur or distort characters. This setting is best adjusted at the camera level if running LPR on multiple cameras.
-  - Default: `0` (no enhancement)
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{ enabled: true, enhancement: 1 }}
+  targets={[
+    {
+      field: "enhancement",
+      hint:
+        "A value between 0 and 10 that adjusts the level of image enhancement applied to captured license plates before they are processed for recognition. Higher values increase contrast, sharpen details, and reduce noise, but excessive enhancement can blur or distort characters. This setting is best adjusted at the camera level if running LPR on multiple cameras.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -207,17 +296,27 @@ If Frigate is already recognizing plates correctly, leave enhancement at the def
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-Under **Replacement rules**, add regex rules to normalize detected plate strings before matching. Rules fire in order. For example:
-
-| Pattern          | Replacement | Description                                        |
-| ---------------- | ----------- | -------------------------------------------------- |
-| `[%#*?]`         | _(empty)_   | Remove noise symbols                               |
-| `[= ]`           | `-`         | Normalize `=` or space to dash                     |
-| `O`              | `0`         | Swap `O` to `0` (common OCR error)                 |
-| `I`              | `1`         | Swap `I` to `1`                                    |
-| `(\w{3})(\w{3})` | `\1-\2`     | Split 6 chars into groups (e.g., ABC123 → ABC-123) |
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{
+    replace_rules: [
+      { pattern: "[%#*?]", replacement: "" },
+      { pattern: "[= ]", replacement: "-" },
+      { pattern: "O", replacement: "0" },
+      { pattern: "I", replacement: "1" },
+      { pattern: "(\\w{3})(\\w{3})", replacement: "\\1-\\2" },
+    ],
+  }}
+  targets={[
+    {
+      field: "replace_rules",
+      hint:
+        "Add regex rules to normalize detected plate strings before matching. Rules fire in order.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -252,9 +351,19 @@ These rules must be defined at the global level of your `lpr` config.
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- **Save debug plates**: Set to on to save captured text on plates for debugging. These images are stored in `/media/frigate/clips/lpr`, organized into subdirectories by `<camera>/<event_id>`, and named based on the capture timestamp.
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{ enabled: true, debug_save_plates: true }}
+  targets={[
+    {
+      field: "debug_save_plates",
+      hint:
+        "Set to on to save captured text on plates for debugging. These images are stored in /media/frigate/clips/lpr and named based on the capture timestamp.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -279,17 +388,35 @@ These configuration parameters are available at the global level. The only optio
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-| Field                          | Description                                                                                           |
-| ------------------------------ | ----------------------------------------------------------------------------------------------------- |
-| **Enable LPR**                 | Set to on                                                                                             |
-| **Minimum plate area**         | Set to `1500` to ignore plates with an area (length x width) smaller than 1500 pixels                  |
-| **Min plate length**           | Set to `4` to only recognize plates with 4 or more characters                                          |
-| **Known plates > Wife's Car**  | `ABC-1234`, `ABC-I234` (accounts for potential confusion between the number one and capital letter I) |
-| **Known plates > Johnny**      | `J*N-*234` (matches JHN-1234 and JMN-I234; `*` matches any number of characters)                      |
-| **Known plates > Sally**       | `[S5]LL 1234` (matches both SLL 1234 and 5LL 1234)                                                    |
-| **Known plates > Work Trucks** | `EMP-[0-9]{3}[A-Z]` (matches plates like EMP-123A, EMP-456Z)                                          |
+<FrigateConfigMock
+  showNavigationSteps={false}
+  section="lpr"
+  autoPlay={false}
+  values={{
+    enabled: true,
+    min_area: 1500,
+    min_plate_length: 4,
+    known_plates: {
+      "Wife's Car": ["ABC-1234", "ABC-I234"],
+      Johnny: ["J*N-*234"],
+      Sally: ["[S5]LL 1234"],
+      "Work Trucks": ["EMP-[0-9]{3}[A-Z]"],
+    },
+  }}
+  targets={[
+    { field: "enabled", hint: "Set to on." },
+    {
+      field: "min_area",
+      hint:
+        "Set to 1500 to ignore plates with an area (length x width) smaller than 1500 pixels.",
+    },
+    {
+      field: "min_plate_length",
+      hint: "Set to 4 to only recognize plates with 4 or more characters.",
+    },
+    "known_plates",
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -321,7 +448,18 @@ If a camera is configured to detect `car` or `motorcycle` but you don't want Fri
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > License plate recognition" /> for the desired camera and disable the **Enable LPR** toggle.
+<FrigateConfigMock
+  autoPlay={false}
+  section="lpr"
+  level="camera"
+  values={{ enabled: false }}
+  targets={[
+    {
+      field: "enabled",
+      hint: "Disable the Enable LPR toggle for this camera.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -362,48 +500,93 @@ An example configuration for a dedicated LPR camera using a `license_plate`-dete
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" /> and set **Enable LPR** to on. Set **Device** to `CPU` (can also be `GPU` if available).
-
-Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and add your camera streams.
-
-Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
-
-| Field                             | Description                                                                                                                    |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| **Enable object detection**       | Set to on                                                                                                                      |
-| **Detect FPS**                    | Set to `5`. Increase to `10` if vehicles move quickly across your frame. Higher than 10 is unnecessary and is not recommended. |
-| **Minimum initialization frames** | Set to `2`                                                                                                                     |
-| **Detect width**                  | Set to `1920`                                                                                                                  |
-| **Detect height**                 | Set to `1080`                                                                                                                  |
-
-Navigate to <NavPath path="Settings > Camera configuration > Objects" />.
-
-| Field                                          | Description         |
-| ---------------------------------------------- | ------------------- |
-| **Objects to track**                           | Add `license_plate` |
-| **Object filters > License Plate > Threshold** | Set to `0.7`        |
-
-Navigate to <NavPath path="Settings > Camera configuration > Motion detection" />.
-
-| Field                | Description                                                           |
-| -------------------- | --------------------------------------------------------------------- |
-| **Motion threshold** | Set to `30`                                                           |
-| **Contour area**     | Set to `60`. Use an increased value to tune out small motion changes. |
-| **Improve contrast** | Set to off                                                            |
-
-Also add a motion mask over your camera's timestamp so it is not incorrectly detected as a license plate.
-
-Navigate to <NavPath path="Settings > Camera configuration > Recording" />.
-
-| Field                | Description                                              |
-| -------------------- | -------------------------------------------------------- |
-| **Enable recording** | Set to on. Disable recording if you only want snapshots. |
-
-Navigate to <NavPath path="Settings > Camera configuration > Snapshots" />.
-
-| Field                | Description |
-| -------------------- | ----------- |
-| **Enable snapshots** | Set to on   |
+<FrigateConfigMock
+  section="lpr"
+  autoPlay={false}
+  steps={[
+    {
+      section: "lpr",
+      level: "global",
+      values: { enabled: true, device: "CPU" },
+      targets: ["enabled", "device"],
+    },
+    {
+      section: "detect",
+      level: "camera",
+      values: {
+        enabled: true,
+        fps: 5,
+        min_initialized: 2,
+        width: 1920,
+        height: 1080,
+      },
+      targets: [
+        { field: "enabled", hint: "Set to on." },
+        {
+          field: "fps",
+          hint:
+            "Set to 5. Increase to 10 if vehicles move quickly across your frame. Higher than 10 is unnecessary and is not recommended.",
+        },
+        { field: "min_initialized", hint: "Set to 2." },
+        { field: "width", hint: "Set to 1920." },
+        { field: "height", hint: "Set to 1080." },
+      ],
+    },
+    {
+      section: "objects",
+      level: "camera",
+      values: {
+        track: ["license_plate"],
+        filters: { license_plate: { threshold: 0.7 } },
+      },
+      targets: [
+        { field: "track", hint: "Add license_plate." },
+        "filters",
+      ],
+    },
+    {
+      section: "motion",
+      level: "camera",
+      values: {
+        threshold: 30,
+        contour_area: 60,
+        improve_contrast: false,
+      },
+      targets: [
+        { field: "threshold", hint: "Set to 30." },
+        {
+          field: "contour_area",
+          hint:
+            "Set to 60. Use an increased value to tune out small motion changes.",
+        },
+        { field: "improve_contrast", hint: "Set to off." },
+      ],
+    },
+    {
+      section: "record",
+      level: "camera",
+      values: { enabled: true },
+      targets: [
+        {
+          field: "enabled",
+          hint: "Set to on. Disable recording if you only want snapshots.",
+        },
+      ],
+    },
+    {
+      section: "snapshots",
+      level: "camera",
+      values: { enabled: true },
+      targets: [{ field: "enabled", hint: "Set to on." }],
+    },
+    {
+      section: "review",
+      level: "camera",
+      values: { "detections.labels": ["license_plate"] },
+      targets: ["detections.labels"],
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -467,54 +650,104 @@ An example configuration for a dedicated LPR camera using the secondary pipeline
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" /> and set **Enable LPR** to on. Set **Device** to `CPU` (can also be `GPU` if available and the correct Docker image is used). Set **Detection threshold** to `0.7` (change if necessary).
-
-Navigate to <NavPath path="Settings > Camera configuration > License plate recognition" /> for your dedicated LPR camera.
-
-| Field                 | Description                                                                      |
-| --------------------- | -------------------------------------------------------------------------------- |
-| **Enable LPR**        | Set to on                                                                        |
-| **Enhancement level** | Set to `3` (optional, enhances the image before trying to recognize characters) |
-
-Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and add your camera streams.
-
-Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
-
-| Field                       | Description                                                                                                                  |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **Enable object detection** | Set to off to disable Frigate's standard object detection pipeline                                                           |
-| **Detect FPS**              | Set to `5`. Increase if necessary, though high values may slow down Frigate's enrichments pipeline and use considerable CPU. |
-| **Detect width**            | Set to `1920` (recommended value, but depends on your camera)                                                                |
-| **Detect height**           | Set to `1080` (recommended value, but depends on your camera)                                                                |
-
-Navigate to <NavPath path="Settings > Camera configuration > Objects" />.
-
-| Field                | Description                                                                            |
-| -------------------- | -------------------------------------------------------------------------------------- |
-| **Objects to track** | Set to an empty list, required when not using a Frigate+ model for dedicated LPR mode |
-
-Navigate to <NavPath path="Settings > Camera configuration > Motion detection" />.
-
-| Field                | Description                                                           |
-| -------------------- | --------------------------------------------------------------------- |
-| **Motion threshold** | Set to `30`                                                           |
-| **Contour area**     | Set to `60`. Use an increased value to tune out small motion changes. |
-| **Improve contrast** | Set to off                                                            |
-
-Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and add a motion mask over your camera's timestamp so it is not incorrectly detected as a license plate.
-
-Navigate to <NavPath path="Settings > Camera configuration > Recording" />.
-
-| Field                | Description                                              |
-| -------------------- | -------------------------------------------------------- |
-| **Enable recording** | Set to on. Disable recording if you only want snapshots. |
-
-Navigate to <NavPath path="Settings > Camera configuration > Review" />.
-
-| Field                                     | Description     |
-| ----------------------------------------- | --------------- |
-| **Detections config > Enable detections** | Set to on       |
-| **Detections config > Retain > Default**  | Set to `7` days |
+<FrigateConfigMock
+  steps={[
+    {
+      section: "lpr",
+      level: "global",
+      values: {
+        enabled: true,
+        device: "CPU",
+        detection_threshold: 0.7,
+      },
+      targets: ["enabled", "device", "detection_threshold"],
+    },
+    {
+      section: "lpr",
+      level: "camera",
+      values: { enabled: true, enhancement: 3 },
+      targets: [
+        { field: "enabled", hint: "Set to on." },
+        {
+          field: "enhancement",
+          hint:
+            "Set to 3. This optional setting enhances the image before trying to recognize characters.",
+        },
+      ],
+    },
+    {
+      section: "detect",
+      level: "camera",
+      values: { enabled: false, fps: 5, width: 1920, height: 1080 },
+      targets: [
+        {
+          field: "enabled",
+          hint: "Set to off to disable Frigate's standard object detection pipeline.",
+        },
+        {
+          field: "fps",
+          hint:
+            "Set to 5. Increase if necessary, though high values may slow down Frigate's enrichments pipeline and use considerable CPU.",
+        },
+        {
+          field: "width",
+          hint: "Set to 1920. The appropriate value depends on your camera.",
+        },
+        {
+          field: "height",
+          hint: "Set to 1080. The appropriate value depends on your camera.",
+        },
+      ],
+    },
+    {
+      section: "objects",
+      level: "camera",
+      values: { track: [] },
+      targets: [
+        {
+          field: "track",
+          hint:
+            "Set to an empty list. This is required when not using a Frigate+ model for dedicated LPR mode.",
+        },
+      ],
+    },
+    {
+      section: "motion",
+      level: "camera",
+      values: {
+        threshold: 30,
+        contour_area: 60,
+        improve_contrast: false,
+      },
+      targets: [
+        { field: "threshold", hint: "Set to 30." },
+        {
+          field: "contour_area",
+          hint:
+            "Set to 60. Use an increased value to tune out small motion changes.",
+        },
+        { field: "improve_contrast", hint: "Set to off." },
+      ],
+    },
+    {
+      section: "record",
+      level: "camera",
+      values: { enabled: true },
+      targets: [
+        {
+          field: "enabled",
+          hint: "Set to on. Disable recording if you only want snapshots.",
+        },
+      ],
+    },
+    {
+      section: "review",
+      level: "camera",
+      values: { "detections.enabled": true },
+      targets: ["detections.enabled"],
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -655,11 +888,13 @@ Start with ["Why isn't my license plate being detected and recognized?"](#why-is
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Enrichments > License plate recognition" />.
-
-- Set **Enable LPR** to on
-- Set **Device** to `CPU`
-- Set **Save debug plates** to on
+<FrigateConfigMock
+  autoPlay={false}
+  section="lpr"
+  showNavigationSteps={false}
+  values={{ enabled: true, device: "CPU", debug_save_plates: true }}
+  targets={["enabled", "device", "debug_save_plates"]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
diff --git a/docs/docs/configuration/masks.md b/docs/docs/configuration/masks.md
index 50c9fffc31..d0e3cfb83b 100644
--- a/docs/docs/configuration/masks.md
+++ b/docs/docs/configuration/masks.md
@@ -5,7 +5,7 @@ title: Masks
 
 import ConfigTabs from "@site/src/components/ConfigTabs";
 import TabItem from "@theme/TabItem";
-import NavPath from "@site/src/components/NavPath";
+import FrigateConfigMock from "@site/src/components/FrigateConfigMock";
 
 Frigate has two kinds of masks: motion masks and object filter masks. Both are narrow tools for fine-tuning, **not for hiding an area from Frigate**. Masks should be used sparingly; in most cases where users reach for one, a [zone](zones.md) with [`required_zones`](zones.md#restricting-alerts-and-detections-to-specific-zones) is the right tool instead. See [Which tool do I need?](#which-tool-do-i-need) and [Common mistakes](#common-mistakes) below if you're new to Frigate's mask behavior.
 
@@ -25,19 +25,64 @@ Object filter masks can be used to filter out stubborn false positives in fixed
 
 ## Which tool do I need?
 
-| What you're trying to do                                                                                                                                                                  | Recommended tool                                                                                            | How it works                                                                                                                                                                                |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Only get alerts/detections for activity in the areas you care about, ignoring activity elsewhere (e.g., alert when someone enters your yard, but not when they walk past on the sidewalk) | A [zone](zones.md) combined with [`required_zones`](zones.md#restricting-alerts-and-detections-to-specific-zones) | Frigate keeps detecting and tracking activity everywhere in the frame, but a review item is only created once the bottom-center of an object's bounding box enters a required zone. |
-| Stop a stubborn false positive at a specific fixed spot (e.g., a tree base that keeps being detected as a person)                                                                         | An **object filter mask** for that object type                                                              | Any detection of that object type whose bounding-box bottom-center lands inside the mask is treated as a false positive and discarded.                                                      |
-| Ignore motion in an area that obviously isn't an object of interest (e.g., the camera timestamp, sky, flags, treetops swaying)                                                            | A **motion mask**                                                                                           | Motion inside the mask is ignored when deciding whether to run object detection. Objects can still be detected in a motion masked area if motion elsewhere in the frame triggers detection. |
-| Stop tracking an object type altogether on this camera (e.g., you never care about cats)                                                                                                  | Remove the object from the camera's [`objects.track`](objects.md) list                                      | Frigate skips this object type entirely on this camera, regardless of where it appears.                                                                                                     |
+| What you're trying to do                                                                                                                                                                  | Recommended tool                                                                                                  | How it works                                                                                                                                                                                |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Only get alerts/detections for activity in the areas you care about, ignoring activity elsewhere (e.g., alert when someone enters your yard, but not when they walk past on the sidewalk) | A [zone](zones.md) combined with [`required_zones`](zones.md#restricting-alerts-and-detections-to-specific-zones) | Frigate keeps detecting and tracking activity everywhere in the frame, but a review item is only created once the bottom-center of an object's bounding box enters a required zone.         |
+| Stop a stubborn false positive at a specific fixed spot (e.g., a tree base that keeps being detected as a person)                                                                         | An **object filter mask** for that object type                                                                    | Any detection of that object type whose bounding-box bottom-center lands inside the mask is treated as a false positive and discarded.                                                      |
+| Ignore motion in an area that obviously isn't an object of interest (e.g., the camera timestamp, sky, flags, treetops swaying)                                                            | A **motion mask**                                                                                                 | Motion inside the mask is ignored when deciding whether to run object detection. Objects can still be detected in a motion masked area if motion elsewhere in the frame triggers detection. |
+| Stop tracking an object type altogether on this camera (e.g., you never care about cats)                                                                                                  | Remove the object from the camera's [`objects.track`](objects.md) list                                            | Frigate skips this object type entirely on this camera, regardless of where it appears.                                                                                                     |
 
 ## Using the mask creator
 
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select a camera. Use the mask editor to draw motion masks and object filter masks directly on the camera feed. Each mask can be given a friendly name and toggled on or off.
+<FrigateConfigMock
+level="camera"
+section="masksAndZones"
+steps={[
+{
+focus: "motionMasks",
+label: "Motion Mask",
+hint: "Motion masks prevent unwanted motion from triggering detection. Use them sparingly so object tracking is not disrupted.",
+},
+{
+focus: "motionMask.add",
+label: "New Motion Mask",
+hint: "Select the plus button beside Motion Mask to create a mask.",
+},
+{
+focus: "motionMask.canvas",
+label: "Draw the motion mask",
+hint: "Select points on the camera image, then close the polygon by selecting the first point again.",
+},
+{
+focus: "motionMask.options",
+label: "Motion mask options",
+hint: "Give the mask a friendly name and choose whether it is enabled.",
+},
+{
+focus: "objectMasks",
+label: "Object Masks",
+hint: "Object masks filter false positives according to the bottom center of an object's bounding box.",
+},
+{
+focus: "objectMask.add",
+label: "New Object Mask",
+hint: "Select the plus button beside Object Masks to create an object filter mask.",
+},
+{
+focus: "objectMask.canvas",
+label: "Draw the object mask",
+hint: "Draw a precise polygon over the fixed location that produces false positives.",
+},
+{
+focus: "objectMask.options",
+label: "Object mask options",
+hint: "Name the mask, select the object type it applies to, and save it.",
+},
+]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
diff --git a/docs/docs/configuration/motion_detection.md b/docs/docs/configuration/motion_detection.md
index a7928954e2..eaf0e8c606 100644
--- a/docs/docs/configuration/motion_detection.md
+++ b/docs/docs/configuration/motion_detection.md
@@ -4,6 +4,7 @@ title: Motion Detection
 ---
 
 import ConfigTabs from "@site/src/components/ConfigTabs";
+import FrigateConfigMock from "@site/src/components/FrigateConfigMock";
 import TabItem from "@theme/TabItem";
 import NavPath from "@site/src/components/NavPath";
 
@@ -44,13 +45,13 @@ The threshold value dictates how much of a change in a pixels luminance is requi
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > Motion detection" /> to set the threshold globally.
-
-To override for a specific camera, navigate to <NavPath path="Settings > Camera configuration > Motion detection" /> and select the camera, or use the <NavPath path="Settings > Camera configuration > Motion tuner" /> to adjust it live.
-
-| Field                | Description                                                                                                                                                                                                                                                                                  |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Motion threshold** | The threshold passed to cv2.threshold to determine if a pixel is different enough to be counted as motion. Increasing this value will make motion detection less sensitive and decreasing it will make motion detection more sensitive. The value should be between 1 and 255. (default: 30) |
+<FrigateConfigMock
+  section="motion"
+  fields={["threshold"]}
+  values={{ threshold: 30 }}
+  focus="threshold"
+  hint="The threshold passed to cv2.threshold to determine if a pixel is different enough to be counted as motion. Increasing this value will make motion detection less sensitive and decreasing it will make motion detection more sensitive. The value should be between 1 and 255. (default: 30)"
+/>
 
 </TabItem>
 <TabItem value="yaml">
diff --git a/docs/docs/configuration/object_detectors.md b/docs/docs/configuration/object_detectors.md
index 23595ac6e8..dd8d5f493c 100644
--- a/docs/docs/configuration/object_detectors.md
+++ b/docs/docs/configuration/object_detectors.md
@@ -5,6 +5,7 @@ title: Object Detectors
 
 import CommunityBadge from '@site/src/components/CommunityBadge';
 import ConfigTabs from '@site/src/components/ConfigTabs';
+import FrigateConfigMock from '@site/src/components/FrigateConfigMock';
 import TabItem from '@theme/TabItem';
 import NavPath from '@site/src/components/NavPath';
 import ModelConfigDropdown from '@site/src/components/ModelConfigDropdown';
@@ -112,7 +113,17 @@ See [common Edge TPU troubleshooting steps](/troubleshooting/edgetpu) if the Edg
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
+<FrigateConfigMock
+  autoPlay={false}
+  section="model"
+  values={{ detectors: { coral: { type: "edgetpu", device: "usb" } } }}
+  targets={[
+    {
+      field: "detectors",
+      hint: "Add an EdgeTPU detector named coral and set its device to usb.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -132,7 +143,24 @@ detectors:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  section="model"
+  values={{
+    detectors: {
+      coral1: { type: "edgetpu", device: "usb:0" },
+      coral2: { type: "edgetpu", device: "usb:1" },
+    },
+  }}
+  targets={[
+    {
+      field: "detectors",
+      hint:
+        "Add two EdgeTPU detectors and assign usb:0 and usb:1 as their devices.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -157,7 +185,19 @@ _warning: may have [compatibility issues](https://github.com/blakeblackshear/fri
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  section="model"
+  values={{ detectors: { coral: { type: "edgetpu", device: "" } } }}
+  targets={[
+    {
+      field: "detectors",
+      hint:
+        "Add an EdgeTPU detector and leave Device empty so Frigate auto-detects the native Coral.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -177,7 +217,18 @@ detectors:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  section="model"
+  values={{ detectors: { coral: { type: "edgetpu", device: "pci" } } }}
+  targets={[
+    {
+      field: "detectors",
+      hint: "Add an EdgeTPU detector named coral and set its device to pci.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -197,7 +248,24 @@ detectors:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  section="model"
+  values={{
+    detectors: {
+      coral1: { type: "edgetpu", device: "pci:0" },
+      coral2: { type: "edgetpu", device: "pci:1" },
+    },
+  }}
+  targets={[
+    {
+      field: "detectors",
+      hint:
+        "Add two EdgeTPU detectors and assign pci:0 and pci:1 as their devices.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -220,7 +288,24 @@ detectors:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  section="model"
+  values={{
+    detectors: {
+      coral_usb: { type: "edgetpu", device: "usb" },
+      coral_pci: { type: "edgetpu", device: "pci" },
+    },
+  }}
+  targets={[
+    {
+      field: "detectors",
+      hint:
+        "Add two EdgeTPU detectors and assign usb to one device and pci to the other.",
+    },
+  ]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
diff --git a/docs/docs/configuration/zones.md b/docs/docs/configuration/zones.md
index 2a26453203..07f581df0b 100644
--- a/docs/docs/configuration/zones.md
+++ b/docs/docs/configuration/zones.md
@@ -5,7 +5,7 @@ title: Zones
 
 import ConfigTabs from "@site/src/components/ConfigTabs";
 import TabItem from "@theme/TabItem";
-import NavPath from "@site/src/components/NavPath";
+import FrigateConfigMock from "@site/src/components/FrigateConfigMock";
 
 Zones allow you to define a specific area of the frame and apply additional filters for object types so you can determine whether or not an object is within a particular area. Presence in a zone is evaluated based on the bottom center of the bounding box for the object. It does not matter how much of the bounding box overlaps with the zone.
 
@@ -25,11 +25,32 @@ During testing, enable the Zones option for the [Debug view](/usage/live#the-sin
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Under the **Zones** section, click the plus icon to add a new zone.
-3. Click on the camera's latest image to create the points for the zone boundary. Click the first point again to close the polygon.
-4. Configure zone options such as **Friendly name**, **Objects**, **Loitering time**, and **Inertia** in the zone editor.
-5. Press **Save** when finished.
+<FrigateConfigMock
+level="camera"
+section="masksAndZones"
+steps={[
+{
+focus: "zone.add",
+label: "Add Zone",
+hint: "Select the plus button beside Zones to create a zone.",
+},
+{
+focus: "zone.canvas",
+label: "Draw the zone",
+hint: "Select points on the camera image, then close the polygon by selecting the first point again.",
+},
+{
+focus: "zone.options",
+label: "Zone options",
+hint: "Configure the friendly name, objects, loitering time, inertia, and optional speed settings.",
+},
+{
+focus: "zone.save",
+label: "Save",
+hint: "Save the zone after its boundary and options are complete.",
+},
+]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -57,11 +78,14 @@ To create an alert only when an object enters the `entire_yard` zone:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > Review" />.
-
-| Field                              | Description                                                                               |
-| ---------------------------------- | ----------------------------------------------------------------------------------------- |
-| **Alerts config > Required zones** | Set to `entire_yard` so an object must enter that zone to be considered an alert; leave empty to allow alerts anywhere in the frame. |
+<FrigateConfigMock
+autoPlay={false}
+level="camera"
+section="review"
+focus="alerts.required_zones"
+values={{ "alerts.required_zones": ["entire_yard"] }}
+hint="Select entire_yard so an object must enter that zone to be considered an alert."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -87,12 +111,26 @@ You may also want to filter detections to only be created when an object enters
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > Review" />.
-
-| Field                                  | Description                                                                                  |
-| -------------------------------------- | -------------------------------------------------------------------------------------------- |
-| **Alerts config > Required zones**     | Set to `inner_yard` so an object must enter that zone to be considered an alert; leave empty to allow alerts anywhere in the frame.       |
-| **Detections config > Required zones** | Set to `edge_yard` so an object must enter that zone to be considered a detection; leave empty to allow detections anywhere in the frame. |
+<FrigateConfigMock
+autoPlay={false}
+showNavigationSteps={false}
+level="camera"
+section="review"
+values={{
+    "alerts.required_zones": ["inner_yard"],
+    "detections.required_zones": ["edge_yard"],
+  }}
+targets={[
+{
+field: "alerts.required_zones",
+hint: "Select inner_yard so an object must enter the inner area to be considered an alert.",
+},
+{
+field: "detections.required_zones",
+hint: "Select edge_yard so activity in the secondary area can be retained as a detection.",
+},
+]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -126,8 +164,15 @@ To only save snapshots when an object enters a specific zone, for example an `en
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Snapshots" /> and select your camera.
-   - Set **Required zones** to `entire_yard`
+<FrigateConfigMock
+autoPlay={false}
+showNavigationSteps={false}
+level="camera"
+section="snapshots"
+focus="required_zones"
+values={{ required_zones: ["entire_yard"] }}
+hint="Select entire_yard to save snapshots only after an object enters that zone."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -154,11 +199,15 @@ Sometimes you want to limit a zone to specific object types to have more granula
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Create a zone named `entire_yard` covering everywhere you want to track a person.
-   - Under **Objects**, add `person`
-3. Create a second zone named `front_yard_street` covering just the street.
-   - Under **Objects**, add `car`
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  level="camera"
+  section="masksAndZones"
+  focus="zone.objects"
+  label="Objects"
+  hint="Choose which object types apply to the zone. For example, use person for the yard and car for the street."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -198,10 +247,15 @@ When using loitering zones, a review item will behave in the following way:
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Edit or create the zone (e.g., `sidewalk`).
-   - Set **Loitering time** to the desired number of seconds (e.g., `4`)
-   - Under **Objects**, add the relevant object types (e.g., `person`)
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  level="camera"
+  section="masksAndZones"
+  focus="zone.loitering_time"
+  label="Loitering Time"
+  hint="Set the minimum number of seconds an object must remain in the zone before the zone activates."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -227,9 +281,15 @@ Sometimes an objects bounding box may be slightly incorrect and the bottom cente
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Edit or create the zone (e.g., `front_yard`).
-   - Set **Inertia** to the desired number of consecutive frames (e.g., `3`)
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  level="camera"
+  section="masksAndZones"
+  focus="zone.inertia"
+  label="Inertia"
+  hint="Set the number of consecutive frames an object must be inside the zone. The default is 3."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -253,9 +313,15 @@ There may also be cases where you expect an object to quickly enter and exit a z
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Edit or create the zone (e.g., `driveway_entrance`).
-   - Set **Inertia** to `1`
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  level="camera"
+  section="masksAndZones"
+  focus="zone.inertia"
+  label="Inertia"
+  hint="Set Inertia to 1 when an object should be considered inside the zone immediately."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -289,11 +355,23 @@ Accurate real-world distance measurements are required to estimate speeds. These
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Create or edit a zone with exactly 4 points aligned to the ground plane.
-3. In the zone editor, enter the real-world **Distances** between each pair of consecutive points.
-   - For example, if the distance between the first and second points is 10 meters, between the second and third is 12 meters, etc.
-4. Distances are measured in meters (metric) or feet (imperial), depending on the **Unit system** setting.
+<FrigateConfigMock
+level="camera"
+showNavigationSteps={false}
+section="masksAndZones"
+steps={[
+{
+focus: "zone.canvas",
+label: "Draw a four-point zone",
+hint: "Draw exactly four points aligned to the ground plane where objects will travel.",
+},
+{
+focus: "zone.speed",
+label: "Speed Estimation",
+hint: "Enter the real-world distance between each pair of consecutive points. Units follow the UI unit system setting.",
+},
+]}
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -317,11 +395,14 @@ The `distance` values are measured in meters (metric) or feet (imperial), depend
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > UI" />.
-
-| Field           | Description                                                          |
-| --------------- | -------------------------------------------------------------------- |
-| **Unit system** | Set to `metric` (kilometers per hour) or `imperial` (miles per hour) |
+<FrigateConfigMock
+autoPlay={false}
+level="global"
+section="ui"
+focus="unit_system"
+values={{ unit_system: "metric" }}
+hint="Choose metric for kilometers per hour or imperial for miles per hour."
+/>
 
 </TabItem>
 <TabItem value="yaml">
@@ -356,10 +437,15 @@ Zones can be configured with a minimum speed requirement, meaning an object must
 <ConfigTabs>
 <TabItem value="ui">
 
-1. Navigate to <NavPath path="Settings > Camera configuration > Masks / Zones" /> and select the desired camera.
-2. Edit or create the zone with distances configured.
-   - Set **Speed threshold** to the desired minimum speed (e.g., `20`)
-   - The unit is kph or mph, depending on the **Unit system** setting
+<FrigateConfigMock
+  autoPlay={false}
+  showNavigationSteps={false}
+  level="camera"
+  section="masksAndZones"
+  focus="zone.speed_threshold"
+  label="Speed Threshold"
+  hint="Set the minimum speed required for an object to be considered inside the zone. Units follow the UI unit system setting."
+/>
 
 </TabItem>
 <TabItem value="yaml">
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 2310274651..2ea5f28c1e 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -19,10 +19,12 @@
         "docusaurus-plugin-openapi-docs": "^4.5.1",
         "docusaurus-theme-openapi-docs": "^4.5.1",
         "js-yaml": "^4.1.1",
+        "marked": "^16.4.2",
         "prism-react-renderer": "^2.4.1",
         "raw-loader": "^4.0.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.7.0"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.7.0",
@@ -18761,6 +18763,15 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmmirror.com/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/docs/package.json b/docs/package.json
index 1649df7e0c..39ed1a3ab0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,9 +4,11 @@
   "private": true,
   "scripts": {
     "build:config": "node scripts/build-config.mjs",
+    "build:mock": "node scripts/generate-mock-manifest.mjs",
+    "check:mock": "node scripts/generate-mock-manifest.mjs --check",
     "docusaurus": "docusaurus",
-    "start": "npm run build:config && npm run regen-docs && docusaurus start --host 0.0.0.0",
-    "build": "npm run build:config && npm run regen-docs && docusaurus build",
+    "start": "npm run build:config && npm run build:mock && npm run regen-docs && docusaurus start --host 0.0.0.0",
+    "build": "npm run build:config && npm run build:mock && npm run regen-docs && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -33,7 +35,8 @@
     "prism-react-renderer": "^2.4.1",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.7.0"
   },
   "browserslist": {
     "production": [
diff --git a/docs/scripts/generate-mock-manifest.mjs b/docs/scripts/generate-mock-manifest.mjs
new file mode 100644
index 0000000000..7209f9b382
--- /dev/null
+++ b/docs/scripts/generate-mock-manifest.mjs
@@ -0,0 +1,366 @@
+#!/usr/bin/env node
+
+/** Build the compact field catalog used by documentation config mocks. */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const repoRoot = path.resolve(scriptDir, "../..");
+const schemaPath = path.join(
+  repoRoot,
+  "web/e2e/fixtures/mock-data/config-schema.json",
+);
+const localeRoot = path.join(repoRoot, "web/public/locales/en/config");
+const sectionConfigRoot = path.join(
+  repoRoot,
+  "web/src/components/config-form/section-configs",
+);
+const settingsSourcePath = path.join(repoRoot, "web/src/pages/Settings.tsx");
+const settingsLocalePath = path.join(
+  repoRoot,
+  "web/public/locales/en/views/settings.json",
+);
+const outputPath = path.join(
+  repoRoot,
+  "docs/src/components/FrigateConfigMock/manifest.json",
+);
+
+const schema = JSON.parse(fs.readFileSync(schemaPath, "utf8"));
+const translations = {
+  global: JSON.parse(
+    fs.readFileSync(path.join(localeRoot, "global.json"), "utf8"),
+  ),
+  camera: JSON.parse(
+    fs.readFileSync(path.join(localeRoot, "cameras.json"), "utf8"),
+  ),
+  groups: JSON.parse(
+    fs.readFileSync(path.join(localeRoot, "groups.json"), "utf8"),
+  ),
+};
+const settingsTranslations = JSON.parse(
+  fs.readFileSync(settingsLocalePath, "utf8"),
+);
+
+function resolveNode(node) {
+  if (!node || typeof node !== "object") return {};
+
+  if (node.$ref) {
+    const refName = node.$ref.split("/").at(-1);
+    return {
+      ...resolveNode(schema.$defs?.[refName]),
+      ...node,
+      $ref: undefined,
+    };
+  }
+
+  const variants = node.anyOf ?? node.oneOf;
+  if (Array.isArray(variants)) {
+    const concrete = variants.find((variant) => variant.type !== "null");
+    return {
+      ...resolveNode(concrete),
+      ...node,
+      anyOf: undefined,
+      oneOf: undefined,
+    };
+  }
+
+  return node;
+}
+
+function translationAt(level, section, fieldPath) {
+  let current = translations[level]?.[section];
+  for (const segment of fieldPath) {
+    if (!current || typeof current !== "object") return {};
+    current = current[segment];
+  }
+  return current && typeof current === "object" ? current : {};
+}
+
+function inferWidget(node) {
+  if (Array.isArray(node.enum)) return "select";
+  if (node.type === "boolean") return "switch";
+  if (
+    ["integer", "number"].includes(node.type) &&
+    node.minimum !== undefined &&
+    (node.maximum !== undefined || node.exclusiveMaximum !== undefined)
+  ) {
+    return "range";
+  }
+  if (node.type === "integer" || node.type === "number") return "number";
+  if (node.type === "array") return "tags";
+  if (node.type === "object") return "object";
+  return "text";
+}
+
+function extractArray(source, key) {
+  const match = source.match(new RegExp(`${key}\\s*:\\s*\\[([\\s\\S]*?)\\]`));
+  return match
+    ? [...match[1].matchAll(/["']([^"']+)["']/g)].map((item) => item[1])
+    : [];
+}
+
+function extractObjectBlock(source, key) {
+  const match = new RegExp(`\\b${key}\\s*:\\s*\\{`).exec(source);
+  if (!match) return "";
+  const start = source.indexOf("{", match.index);
+  let depth = 0;
+  let quote = null;
+  let escaped = false;
+  for (let index = start; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === "\\") escaped = true;
+      else if (character === quote) quote = null;
+      continue;
+    }
+    if (['"', "'", "`"].includes(character)) {
+      quote = character;
+      continue;
+    }
+    if (character === "{") depth += 1;
+    if (character === "}") {
+      depth -= 1;
+      if (depth === 0) return source.slice(start + 1, index);
+    }
+  }
+  return "";
+}
+
+function extractGroups(source) {
+  const fieldGroups = {};
+  const groupsBlock = extractObjectBlock(source, "fieldGroups");
+  for (const match of groupsBlock.matchAll(/(\w+)\s*:\s*\[([\s\S]*?)\]/g)) {
+    fieldGroups[match[1]] = [...match[2].matchAll(/["']([^"']+)["']/g)].map(
+      (item) => item[1],
+    );
+  }
+  return fieldGroups;
+}
+
+function loadSectionHints(section, level) {
+  const configPath = path.join(sectionConfigRoot, `${section}.ts`);
+  if (!fs.existsSync(configPath)) return {};
+  const source = fs.readFileSync(configPath, "utf8");
+  const base = extractObjectBlock(source, "base");
+  const override = extractObjectBlock(source, level);
+  const overrideHas = (key) => new RegExp(`\\b${key}\\s*:`).test(override);
+  return {
+    order: overrideHas("fieldOrder")
+      ? extractArray(override, "fieldOrder")
+      : extractArray(base, "fieldOrder"),
+    hidden: [
+      ...extractArray(base, "hiddenFields"),
+      ...extractArray(override, "hiddenFields"),
+    ],
+    advanced: overrideHas("advancedFields")
+      ? extractArray(override, "advancedFields")
+      : extractArray(base, "advancedFields"),
+    groups: overrideHas("fieldGroups")
+      ? extractGroups(override)
+      : extractGroups(base),
+    docs: base.match(/sectionDocs\s*:\s*["']([^"']+)["']/)?.[1] ?? null,
+  };
+}
+
+function groupLabel(level, section, group) {
+  const domain = level === "camera" ? "cameras" : "global";
+  return (
+    translations.groups?.[section]?.[domain]?.[group] ??
+    group.replaceAll("_", " ").replace(/^./, (value) => value.toUpperCase())
+  );
+}
+
+function collectFields(level, section, sectionNode, hints) {
+  const fields = {};
+
+  function visit(rawNode, fieldPath = []) {
+    const node = resolveNode(rawNode);
+    const properties = node.properties;
+    if (properties && typeof properties === "object") {
+      for (const [name, child] of Object.entries(properties)) {
+        visit(child, [...fieldPath, name]);
+      }
+      return;
+    }
+
+    if (fieldPath.length === 0) return;
+    const key = fieldPath.join(".");
+    const localized = translationAt(level, section, fieldPath);
+    fields[key] = {
+      label: localized.label ?? node.title ?? fieldPath.at(-1),
+      description: localized.description ?? node.description ?? "",
+      widget: inferWidget(node),
+      default: node.default ?? null,
+      enum: node.enum ?? null,
+      minimum: node.minimum ?? node.exclusiveMinimum ?? null,
+      maximum: node.maximum ?? node.exclusiveMaximum ?? null,
+      advanced: hints.advanced?.includes(key) ?? false,
+    };
+  }
+
+  visit(sectionNode);
+  return fields;
+}
+
+function buildLevel(level) {
+  const rootProperties =
+    level === "camera"
+      ? resolveNode(schema.$defs.CameraConfig).properties
+      : schema.properties;
+  const result = {};
+
+  for (const [section, rawNode] of Object.entries(rootProperties ?? {})) {
+    const node = resolveNode(rawNode);
+    if (!node.properties) continue;
+
+    const hints = loadSectionHints(section, level);
+    const hidden = new Set(hints.hidden ?? []);
+    const fields = collectFields(level, section, node, hints);
+    for (const key of hidden) delete fields[key];
+
+    const localized = translations[level]?.[section] ?? {};
+    result[section] = {
+      label: localized.label ?? rawNode.title ?? node.title ?? section,
+      description: localized.description ?? rawNode.description ?? "",
+      order: hints.order ?? [],
+      groups: Object.entries(hints.groups ?? {}).map(([key, groupFields]) => ({
+        key,
+        label: groupLabel(level, section, key),
+        fields: groupFields,
+      })),
+      docs: hints.docs ?? null,
+      fields,
+    };
+  }
+
+  return result;
+}
+
+function parseSectionMapping(source, constantName, level) {
+  const match = source.match(
+    new RegExp(`const ${constantName}[^=]*=\\s*\\{([\\s\\S]*?)\\n\\};`),
+  );
+  if (!match) return [];
+  return [...match[1].matchAll(/(\w+)\s*:\s*"([^"]+)"/g)].map(
+    ([, section, page]) => ({ section, page, level }),
+  );
+}
+
+function buildNavigation() {
+  const source = fs.readFileSync(settingsSourcePath, "utf8");
+  const settingsBlock = source.match(
+    /const settingsGroups\s*=\s*\[([\s\S]*?)\n\];/,
+  )?.[1];
+  if (!settingsBlock) return { groups: [], pages: {} };
+
+  const mappings = [
+    ...parseSectionMapping(source, "GLOBAL_SECTION_MAPPING", "global"),
+    ...parseSectionMapping(source, "CAMERA_SECTION_MAPPING", "camera"),
+    ...parseSectionMapping(source, "ENRICHMENTS_SECTION_MAPPING", "global"),
+    ...parseSectionMapping(source, "SYSTEM_SECTION_MAPPING", "global"),
+  ];
+  const pages = Object.fromEntries(
+    mappings.map((mapping) => [mapping.page, mapping]),
+  );
+  const groupMatches = [...settingsBlock.matchAll(/\{\s*label:\s*"([^"]+)"/g)];
+  const groups = groupMatches.map((match, index) => {
+    const start = match.index ?? 0;
+    const end = groupMatches[index + 1]?.index ?? settingsBlock.length;
+    const sourceSlice = settingsBlock.slice(start, end);
+    const itemKeys = [...sourceSlice.matchAll(/key:\s*"([^"]+)"/g)].map(
+      (item) => item[1],
+    );
+    return {
+      key: match[1],
+      label: settingsTranslations.menu?.[match[1]] ?? match[1],
+      items: itemKeys.map((key) => ({
+        key,
+        label: settingsTranslations.menu?.[key] ?? key,
+        ...(key === "masksAndZones"
+          ? { section: key, page: key, level: "camera" }
+          : {}),
+        ...(pages[key] ?? {}),
+      })),
+    };
+  });
+
+  return { groups, pages };
+}
+
+function buildDetectorTypes() {
+  const detectorTranslations = translations.global?.detectors ?? {};
+  const reserved = new Set([
+    "label",
+    "description",
+    "type",
+    "model",
+    "model_path",
+  ]);
+
+  return Object.fromEntries(
+    Object.entries(detectorTranslations)
+      .filter(
+        ([key, value]) =>
+          !reserved.has(key) &&
+          value &&
+          typeof value === "object" &&
+          typeof value.label === "string" &&
+          typeof value.description === "string",
+      )
+      .map(([type, value]) => [
+        type,
+        {
+          label: value.label,
+          description: value.description,
+          fields: Object.fromEntries(
+            Object.entries(value)
+              .filter(
+                ([key, field]) =>
+                  !["label", "description"].includes(key) &&
+                  field &&
+                  typeof field === "object" &&
+                  typeof field.label === "string",
+              )
+              .map(([key, field]) => [
+                key,
+                {
+                  label: field.label,
+                  description: field.description ?? "",
+                },
+              ]),
+          ),
+        },
+      ]),
+  );
+}
+
+const manifest = {
+  generatedFrom: path.relative(repoRoot, schemaPath).replaceAll("\\", "/"),
+  detectorTypes: buildDetectorTypes(),
+  levels: {
+    global: buildLevel("global"),
+    camera: buildLevel("camera"),
+  },
+  navigation: buildNavigation(),
+};
+
+const serialized = `${JSON.stringify(manifest, null, 2)}\n`;
+if (process.argv.includes("--check")) {
+  const current = fs.existsSync(outputPath)
+    ? fs.readFileSync(outputPath, "utf8")
+    : "";
+  if (current !== serialized) {
+    console.error(
+      `${path.relative(repoRoot, outputPath)} is stale. Run npm run build:mock.`,
+    );
+    process.exit(1);
+  }
+  console.log(`Checked ${path.relative(repoRoot, outputPath)}`);
+} else {
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, serialized);
+  console.log(`Generated ${path.relative(repoRoot, outputPath)}`);
+}
diff --git a/docs/scripts/generate_ui_tabs.py b/docs/scripts/generate_ui_tabs.py
index fa468922c3..5f2fd443f1 100644
--- a/docs/scripts/generate_ui_tabs.py
+++ b/docs/scripts/generate_ui_tabs.py
@@ -45,7 +45,7 @@ from lib.i18n_loader import load_i18n
 from lib.nav_map import ALL_CONFIG_SECTIONS
 from lib.schema_loader import load_schema
 from lib.section_config_parser import load_section_configs
-from lib.ui_generator import generate_ui_content, wrap_with_config_tabs
+from lib.ui_generator import generate_mock_content, generate_ui_content, wrap_with_config_tabs
 from lib.yaml_extractor import (
     extract_config_tabs_blocks,
     extract_yaml_blocks,
@@ -60,6 +60,7 @@ def process_file(
     inject: bool = False,
     verbose: bool = False,
     outpath: Path | None = None,
+    mock: bool = False,
 ) -> dict:
     """Process a single markdown file for initial injection of bare YAML blocks.
 
@@ -114,7 +115,8 @@ def process_file(
             continue
 
         # Generate UI content
-        ui_content = generate_ui_content(
+        generator = generate_mock_content if mock else generate_ui_content
+        ui_content = generator(
             block, schema, i18n, section_configs
         )
 
@@ -188,6 +190,7 @@ def regenerate_file(
     dry_run: bool = False,
     verbose: bool = False,
     outpath: Path | None = None,
+    mock: bool = False,
 ) -> dict:
     """Regenerate UI tabs in existing ConfigTabs blocks.
 
@@ -233,7 +236,8 @@ def regenerate_file(
             continue
 
         # Generate fresh UI content
-        new_ui = generate_ui_content(
+        generator = generate_mock_content if mock else generate_ui_content
+        new_ui = generator(
             yaml_block, schema, i18n, section_configs
         )
 
@@ -302,6 +306,7 @@ def check_file(
     i18n: dict,
     section_configs: dict,
     verbose: bool = False,
+    mock: bool = False,
 ) -> dict:
     """Check for drift between existing UI tabs and what would be generated.
 
@@ -333,7 +338,8 @@ def check_file(
             stats["skipped"] += 1
             continue
 
-        new_ui = generate_ui_content(
+        generator = generate_mock_content if mock else generate_ui_content
+        new_ui = generator(
             yaml_block, schema, i18n, section_configs
         )
 
@@ -406,6 +412,10 @@ def _ensure_imports(content: str) -> str:
         needed_imports.append(
             'import NavPath from "@site/src/components/NavPath";'
         )
+    if "<FrigateConfigMock" in content and 'import FrigateConfigMock' not in content:
+        needed_imports.append(
+            'import FrigateConfigMock from "@site/src/components/FrigateConfigMock";'
+        )
 
     if not needed_imports:
         return content
@@ -472,6 +482,11 @@ def main():
         action="store_true",
         help="Show detailed warnings and diagnostics",
     )
+    parser.add_argument(
+        "--mock",
+        action="store_true",
+        help="Generate focused Frigate UI mocks instead of text instructions",
+    )
     args = parser.parse_args()
 
     # Collect files and determine base directory for relative path computation
@@ -525,23 +540,25 @@ def main():
     print(f"Processing {len(files)} file(s)...\n", file=sys.stderr)
 
     if args.check:
-        _run_check(files, schema, i18n, section_configs, args.verbose)
+        _run_check(files, schema, i18n, section_configs, args.verbose, args.mock)
     elif args.regenerate:
         _run_regenerate(
             files, schema, i18n, section_configs,
             args.dry_run, args.verbose, file_outpaths,
+            args.mock,
         )
     else:
         _run_inject(
             files, schema, i18n, section_configs,
             args.inject, args.verbose, file_outpaths,
+            args.mock,
         )
 
     if outdir is not None:
         print(f"\nOutput written to: {outdir}", file=sys.stderr)
 
 
-def _run_inject(files, schema, i18n, section_configs, inject, verbose, file_outpaths):
+def _run_inject(files, schema, i18n, section_configs, inject, verbose, file_outpaths, mock):
     """Run default mode: preview or inject bare YAML blocks."""
     total_stats = {
         "files": 0,
@@ -557,6 +574,7 @@ def _run_inject(files, schema, i18n, section_configs, inject, verbose, file_outp
             filepath, schema, i18n, section_configs,
             inject=inject, verbose=verbose,
             outpath=file_outpaths.get(filepath),
+            mock=mock,
         )
 
         total_stats["files"] += 1
@@ -580,7 +598,7 @@ def _run_inject(files, schema, i18n, section_configs, inject, verbose, file_outp
     print("=" * 60, file=sys.stderr)
 
 
-def _run_regenerate(files, schema, i18n, section_configs, dry_run, verbose, file_outpaths):
+def _run_regenerate(files, schema, i18n, section_configs, dry_run, verbose, file_outpaths, mock):
     """Run regenerate mode: update existing ConfigTabs blocks."""
     total_stats = {
         "files": 0,
@@ -595,6 +613,7 @@ def _run_regenerate(files, schema, i18n, section_configs, dry_run, verbose, file
             filepath, schema, i18n, section_configs,
             dry_run=dry_run, verbose=verbose,
             outpath=file_outpaths.get(filepath),
+            mock=mock,
         )
 
         total_stats["files"] += 1
@@ -617,7 +636,7 @@ def _run_regenerate(files, schema, i18n, section_configs, dry_run, verbose, file
     print("=" * 60, file=sys.stderr)
 
 
-def _run_check(files, schema, i18n, section_configs, verbose):
+def _run_check(files, schema, i18n, section_configs, verbose, mock):
     """Run check mode: detect drift without modifying files."""
     total_stats = {
         "files": 0,
@@ -630,6 +649,7 @@ def _run_check(files, schema, i18n, section_configs, verbose):
     for filepath in files:
         stats = check_file(
             filepath, schema, i18n, section_configs, verbose=verbose,
+            mock=mock,
         )
 
         total_stats["files"] += 1
diff --git a/docs/scripts/lib/ui_generator.py b/docs/scripts/lib/ui_generator.py
index 7b9a592865..1f0d0200a0 100644
--- a/docs/scripts/lib/ui_generator.py
+++ b/docs/scripts/lib/ui_generator.py
@@ -1,5 +1,6 @@
-"""Generate UI tab markdown content from parsed YAML blocks."""
+"""Generate UI tab content from parsed YAML blocks."""
 
+import json
 from typing import Any
 
 from .i18n_loader import get_field_description, get_field_label, get_value_label
@@ -9,6 +10,80 @@ from .section_config_parser import get_hidden_fields
 from .yaml_extractor import YamlBlock, get_leaf_paths
 
 
+def generate_mock_content(
+    block: YamlBlock,
+    schema: dict[str, Any],
+    i18n: dict[str, Any],
+    section_configs: dict[str, dict[str, Any]],
+) -> str | None:
+    """Generate a focused Frigate config mock for a YAML block."""
+    if block.section_key is None:
+        return None
+
+    if block.is_camera_level:
+        cameras = block.parsed.get("cameras", {})
+        camera_name = block.camera_name or next(iter(cameras), None)
+        if not camera_name or not isinstance(cameras.get(camera_name), dict):
+            return None
+        config = cameras[camera_name]
+        level = "camera"
+    else:
+        config = block.parsed
+        level = detect_level(block.section_key)
+        if level not in ("global", "camera"):
+            level = "global"
+
+    steps: list[dict[str, object]] = []
+    for section, section_data in config.items():
+        if section not in ALL_CONFIG_SECTIONS or not isinstance(
+            section_data, dict
+        ):
+            continue
+
+        hidden = get_hidden_fields(section_configs, section, level)
+        values: dict[str, object] = {}
+        for path, value in get_leaf_paths(section_data):
+            path_parts = list(path)
+            if not _is_hidden(path_parts[-1], path_parts, hidden):
+                values[".".join(path_parts)] = value
+
+        if values:
+            steps.append(
+                {
+                    "section": section,
+                    "level": level,
+                    "fields": list(values),
+                    "values": values,
+                    "focus": next(iter(values)),
+                }
+            )
+
+    if not steps:
+        return None
+
+    if len(steps) == 1:
+        step = steps[0]
+        return "\n".join(
+            [
+                "<FrigateConfigMock",
+                f'  section="{step["section"]}"',
+                f'  level="{step["level"]}"',
+                f"  fields={{{json.dumps(step['fields'])}}}",
+                f"  values={{{json.dumps(step['values'])}}}",
+                f'  focus="{step["focus"]}"',
+                "/>",
+            ]
+        )
+
+    return "\n".join(
+        [
+            "<FrigateConfigMock",
+            f"  steps={{{json.dumps(steps)}}}",
+            "/>",
+        ]
+    )
+
+
 def _format_value(
     value: object,
     field_schema: dict[str, Any] | None,
diff --git a/docs/scripts/tests/test_ui_generator.py b/docs/scripts/tests/test_ui_generator.py
new file mode 100644
index 0000000000..b2360842ae
--- /dev/null
+++ b/docs/scripts/tests/test_ui_generator.py
@@ -0,0 +1,99 @@
+"""Tests for focused Frigate configuration mock generation."""
+
+import sys
+import types
+import unittest
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+
+try:
+    import yaml  # noqa: F401
+except ModuleNotFoundError:
+    yaml_stub = types.ModuleType("yaml")
+    yaml_stub.YAMLError = ValueError
+    yaml_stub.safe_load = lambda _value: {}
+    sys.modules["yaml"] = yaml_stub
+
+from lib.ui_generator import generate_mock_content
+from lib.yaml_extractor import YamlBlock
+
+
+def make_block(parsed: dict, section: str, camera: bool = False) -> YamlBlock:
+    """Create a parsed YAML block for generator tests."""
+    return YamlBlock(
+        raw="",
+        parsed=parsed,
+        line_start=1,
+        line_end=1,
+        highlight=None,
+        has_comments=False,
+        inside_config_tabs=False,
+        section_key=section,
+        is_camera_level=camera,
+        camera_name="front_door" if camera else None,
+        config_keys=list(parsed),
+    )
+
+
+class TestGenerateMockContent(unittest.TestCase):
+    def test_generates_focused_global_section(self):
+        content = generate_mock_content(
+            make_block({"motion": {"threshold": 30}}, "motion"),
+            {},
+            {},
+            {},
+        )
+
+        self.assertIn('section="motion"', content)
+        self.assertIn('level="global"', content)
+        self.assertIn('fields={["threshold"]}', content)
+        self.assertIn('values={{"threshold": 30}}', content)
+        self.assertIn('focus="threshold"', content)
+
+    def test_unwraps_camera_and_omits_hidden_fields(self):
+        content = generate_mock_content(
+            make_block(
+                {
+                    "cameras": {
+                        "front_door": {
+                            "motion": {
+                                "threshold": 20,
+                                "raw_mask": "ignored",
+                            }
+                        }
+                    }
+                },
+                "motion",
+                camera=True,
+            ),
+            {},
+            {},
+            {"motion": {"hiddenFields": ["raw_mask"]}},
+        )
+
+        self.assertIn('level="camera"', content)
+        self.assertIn('fields={["threshold"]}', content)
+        self.assertNotIn("raw_mask", content)
+
+    def test_generates_steps_for_multiple_sections(self):
+        content = generate_mock_content(
+            make_block(
+                {
+                    "record": {"enabled": True},
+                    "snapshots": {"enabled": True},
+                },
+                "record",
+            ),
+            {},
+            {},
+            {},
+        )
+
+        self.assertIn("steps={", content)
+        self.assertIn('"section": "record"', content)
+        self.assertIn('"section": "snapshots"', content)
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/docs/src/components/FrigateConfigMock/index.jsx b/docs/src/components/FrigateConfigMock/index.jsx
new file mode 100644
index 0000000000..f0be121a5f
--- /dev/null
+++ b/docs/src/components/FrigateConfigMock/index.jsx
@@ -0,0 +1,2314 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import { FaCompactDisc, FaVideo } from "react-icons/fa";
+import { FaDrawPolygon, FaObjectGroup } from "react-icons/fa";
+import { BsPersonBoundingBox } from "react-icons/bs";
+import { IoSearch } from "react-icons/io5";
+import { MdCategory, MdVideoLibrary } from "react-icons/md";
+import { TbFaceId } from "react-icons/tb";
+import {
+  LuActivity,
+  LuChevronDown,
+  LuChevronLeft,
+  LuChevronRight,
+  LuExternalLink,
+  LuGithub,
+  LuInfo,
+  LuLanguages,
+  LuLifeBuoy,
+  LuList,
+  LuPause,
+  LuPlay,
+  LuPlus,
+  LuRotateCw,
+  LuSettings,
+  LuSquarePen,
+  LuSunMoon,
+  LuTrash2,
+} from "react-icons/lu";
+
+import manifest from "./manifest.json";
+import styles from "./styles.module.css";
+
+const formatValue = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return translate({ id: "configMock.notSet", message: "Not set" });
+  }
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+};
+
+function MockControl({ field, value }) {
+  const effectiveValue = value ?? field.default;
+
+  if (field.widget === "switch") {
+    return (
+      <span
+        className={`${styles.switch} ${effectiveValue ? styles.switchOn : ""}`}
+        aria-hidden="true"
+      >
+        <span />
+      </span>
+    );
+  }
+
+  if (field.widget === "range") {
+    const min = field.minimum ?? 0;
+    const max = field.maximum ?? 100;
+    const numericValue = Number(effectiveValue ?? min);
+    const progress = Math.max(
+      0,
+      Math.min(100, ((numericValue - min) / (max - min)) * 100),
+    );
+    return (
+      <div className={styles.rangeControl} aria-hidden="true">
+        <div className={styles.rangeTrack}>
+          <span style={{ width: `${progress}%` }} />
+          <i style={{ left: `${progress}%` }} />
+        </div>
+        <span className={styles.rangeValue}>{formatValue(effectiveValue)}</span>
+      </div>
+    );
+  }
+
+  if (field.widget === "tags") {
+    const values = Array.isArray(effectiveValue)
+      ? effectiveValue
+      : [effectiveValue];
+    return (
+      <div className={styles.tags} aria-hidden="true">
+        {values.filter(Boolean).map((item) => (
+          <span key={String(item)}>{String(item)}</span>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <span className={styles.input} aria-hidden="true">
+      {formatValue(effectiveValue)}
+      {field.widget === "select" && (
+        <span className={styles.chevron}>{"\u2304"}</span>
+      )}
+    </span>
+  );
+}
+
+function normalizeStep(base, step) {
+  return {
+    level: step.level ?? base.level ?? "global",
+    section: step.section ?? base.section,
+    fields: step.fields ?? base.fields,
+    values: { ...(base.values ?? {}), ...(step.values ?? {}) },
+    focus: step.focus ?? base.focus,
+    hint: step.hint ?? base.hint,
+    label: step.label ?? base.label,
+    cameraImage: step.cameraImage ?? base.cameraImage,
+    title: step.title,
+  };
+}
+
+function IconRail({ phase }) {
+  return (
+    <aside className={styles.iconRail} aria-hidden="true">
+      {[
+        ["video", FaVideo],
+        ["review", MdVideoLibrary],
+        ["search", IoSearch],
+        ["explore", FaCompactDisc],
+        ["faces", TbFaceId],
+        ["classification", MdCategory],
+      ].map(([key, Icon]) => (
+        <span className={styles.railIcon} key={key}>
+          <Icon />
+        </span>
+      ))}
+      <span className={styles.railSpacer} />
+      <span
+        className={`${styles.railIcon} ${styles.settingsIcon} ${phase === "settings" ? styles.navigationTarget : ""}`}
+      >
+        <LuSettings />
+      </span>
+    </aside>
+  );
+}
+
+function SettingsNavigation({ step }) {
+  const navigationRef = useRef(null);
+  const activeItemRef = useRef(null);
+  const groups = manifest.navigation?.groups ?? [];
+  const activeGroup = groups.find((group) =>
+    group.items.some(
+      (item) => item.section === step.section && item.level === step.level,
+    ),
+  );
+
+  useEffect(() => {
+    const navigation = navigationRef.current;
+    if (!navigation) return undefined;
+
+    if (step.guidePhase === "settings") {
+      navigation.scrollTop = 0;
+      return undefined;
+    }
+    if (step.guidePhase !== "menu" || !activeItemRef.current) {
+      return undefined;
+    }
+
+    const timer = window.setTimeout(() => {
+      const target = activeItemRef.current;
+      if (!target) return;
+      const reduceMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      navigation.scrollTo({
+        top:
+          target.offsetTop -
+          navigation.clientHeight / 2 +
+          target.offsetHeight / 2,
+        behavior: reduceMotion ? "auto" : "smooth",
+      });
+    }, 40);
+
+    return () => window.clearTimeout(timer);
+  }, [step.guidePhase, step.level, step.section]);
+
+  return (
+    <aside
+      className={styles.settingsNav}
+      aria-hidden="true"
+      ref={navigationRef}
+    >
+      {groups.map((group) => {
+        const expanded = group.key === activeGroup?.key;
+        const singleItem = group.items.length === 1;
+        if (singleItem) {
+          return (
+            <div className={styles.singleMenuItem} key={group.key}>
+              {group.items[0].label}
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles.menuGroup} key={group.key}>
+            <div
+              className={`${styles.menuGroupLabel} ${expanded ? styles.menuGroupLabelActive : ""}`}
+            >
+              <span>{group.label}</span>
+              <span>{expanded ? <LuChevronDown /> : <LuChevronRight />}</span>
+            </div>
+            {expanded && step.level === "camera" && (
+              <div className={styles.cameraName}>
+                <Translate id="configMock.exampleCamera">Front Door</Translate>
+              </div>
+            )}
+            {expanded && (
+              <div className={styles.menuItems}>
+                {group.items.map((item) => {
+                  const active =
+                    item.section === step.section && item.level === step.level;
+                  return (
+                    <div
+                      className={`${styles.menuItem} ${active ? styles.menuItemActive : ""} ${active && step.guidePhase === "menu" ? styles.navigationTarget : ""}`}
+                      key={item.key}
+                      ref={active ? activeItemRef : undefined}
+                    >
+                      <span>{item.label}</span>
+                      {active && <i />}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </aside>
+  );
+}
+
+function SystemMenu({ visible }) {
+  const label = (id, message) => translate({ id, message });
+  const groups = [
+    {
+      label: label("configMock.systemMenu.system", "System"),
+      items: [
+        [
+          LuActivity,
+          label("configMock.systemMenu.systemMetrics", "System metrics"),
+        ],
+        [LuList, label("configMock.systemMenu.systemLogs", "System logs")],
+      ],
+    },
+    {
+      label: label("configMock.systemMenu.configuration", "Configuration"),
+      items: [
+        [LuSettings, label("configMock.settings", "Settings"), true],
+        [
+          LuSquarePen,
+          label(
+            "configMock.systemMenu.configurationEditor",
+            "Configuration Editor",
+          ),
+        ],
+      ],
+    },
+    {
+      label: label("configMock.systemMenu.appearance", "Appearance"),
+      items: [
+        [
+          LuLanguages,
+          label("configMock.systemMenu.languages", "Languages"),
+          false,
+          true,
+        ],
+        [
+          LuSunMoon,
+          label("configMock.systemMenu.darkMode", "Dark Mode"),
+          false,
+          true,
+        ],
+        [LuSunMoon, label("configMock.systemMenu.theme", "Theme"), false, true],
+      ],
+    },
+    {
+      label: label("configMock.systemMenu.help", "Help"),
+      items: [
+        [
+          LuLifeBuoy,
+          label("configMock.systemMenu.documentation", "Documentation"),
+        ],
+        [LuGithub, "GitHub"],
+      ],
+    },
+  ];
+
+  return (
+    <div
+      className={`${styles.systemMenu} ${visible ? styles.systemMenuVisible : ""}`}
+      aria-hidden="true"
+    >
+      {groups.map((group) => (
+        <div className={styles.systemMenuGroup} key={group.label}>
+          <strong>{group.label}</strong>
+          {group.items.map(([Icon, label, target, submenu]) => (
+            <div
+              className={`${styles.systemMenuItem} ${target ? styles.systemMenuTarget : ""}`}
+              key={label}
+            >
+              <span>
+                <Icon />
+              </span>
+              <b>{label}</b>
+              {submenu && (
+                <i>
+                  <LuChevronRight />
+                </i>
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+      <div className={styles.restartItem}>
+        <span>
+          <LuRotateCw />
+        </span>
+        <b>{label("configMock.systemMenu.restart", "Restart Frigate")}</b>
+      </div>
+    </div>
+  );
+}
+
+function HintNavigation({ navigation }) {
+  return (
+    <div className={styles.fieldHintNavigation}>
+      <button
+        type="button"
+        aria-label={translate({
+          id: "configMock.previousStep",
+          message: "Previous step",
+        })}
+        disabled={navigation.current === 0}
+        onClick={navigation.previous}
+      >
+        <LuChevronLeft />
+      </button>
+      <span>
+        {navigation.current + 1} / {navigation.total}
+      </span>
+      <button
+        type="button"
+        aria-label={translate({
+          id: "configMock.nextStep",
+          message: "Next step",
+        })}
+        disabled={navigation.current === navigation.total - 1}
+        onClick={navigation.next}
+      >
+        <LuChevronRight />
+      </button>
+    </div>
+  );
+}
+
+function FieldHint({ navigation, title, text }) {
+  const hintRef = useRef(null);
+  const [placement, setPlacement] = useState(null);
+  const [revealed, setRevealed] = useState(false);
+
+  useEffect(() => {
+    const hint = hintRef.current;
+    const target = hint?.parentElement;
+    const viewport = target?.closest(`.${styles.contentViewport}`);
+    if (!hint || !target || !viewport) return undefined;
+
+    const measure = () => {
+      const targetRect = target.getBoundingClientRect();
+      const viewportRect = viewport.getBoundingClientRect();
+      const hintHeight = hint.getBoundingClientRect().height;
+      const spaceAbove = targetRect.top - viewportRect.top;
+      const spaceBelow = viewportRect.bottom - targetRect.bottom;
+      const requiredSpace = hintHeight + 18;
+
+      if (spaceBelow >= requiredSpace) {
+        setPlacement("below");
+      } else if (spaceAbove >= requiredSpace) {
+        setPlacement("above");
+      } else {
+        setPlacement("overlay");
+      }
+    };
+
+    const initialFrame = window.requestAnimationFrame(measure);
+    const settledTimer = window.setTimeout(measure, 200);
+    const revealTimer = window.setTimeout(() => setRevealed(true), 240);
+    viewport.addEventListener("scroll", measure, { passive: true });
+    window.addEventListener("resize", measure);
+    return () => {
+      window.cancelAnimationFrame(initialFrame);
+      window.clearTimeout(settledTimer);
+      window.clearTimeout(revealTimer);
+      viewport.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+    };
+  }, [text]);
+
+  return (
+    <aside
+      className={`${styles.fieldHint} ${placement === "above" ? styles.fieldHintAbove : ""} ${placement === "overlay" ? styles.fieldHintOverlay : ""} ${placement && revealed ? styles.fieldHintReady : styles.fieldHintMeasuring}`}
+      ref={hintRef}
+    >
+      <span className={styles.fieldHintIcon}>
+        <LuInfo />
+      </span>
+      <div>
+        <strong>{title}</strong>
+        <p>{text}</p>
+        <HintNavigation navigation={navigation} />
+      </div>
+    </aside>
+  );
+}
+
+function NavigationHint({ navigation, step }) {
+  const hintRef = useRef(null);
+  const [position, setPosition] = useState(null);
+  const section = manifest.levels[step.level]?.[step.section];
+  const text =
+    step.guidePhase === "settings"
+      ? translate({
+          id: "configMock.navigation.openSettingsHint",
+          message: "Open the system menu and select Settings.",
+        })
+      : translate(
+          {
+            id: "configMock.navigation.findSectionHint",
+            message: "Select {section} from {group}.",
+          },
+          {
+            section: section?.label ?? step.section,
+            group:
+              step.guideDetail ??
+              translate({
+                id: "configMock.settings",
+                message: "Settings",
+              }),
+          },
+        );
+
+  useEffect(() => {
+    const hint = hintRef.current;
+    const container = hint?.closest(`.${styles.appBody}`);
+    if (!hint || !container) return undefined;
+
+    const measure = () => {
+      const selector =
+        step.guidePhase === "settings"
+          ? `.${styles.systemMenuTarget}`
+          : `.${styles.menuItem}.${styles.navigationTarget}`;
+      const target = container.querySelector(selector);
+      if (!target) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      const hintRect = hint.getBoundingClientRect();
+      const gap = 12;
+      let left = targetRect.right - containerRect.left + gap;
+      if (left + hintRect.width > containerRect.width - gap) {
+        left = targetRect.left - containerRect.left - hintRect.width - gap;
+      }
+      const top = Math.max(
+        gap,
+        Math.min(
+          containerRect.height - hintRect.height - gap,
+          targetRect.top -
+            containerRect.top +
+            targetRect.height / 2 -
+            hintRect.height / 2,
+        ),
+      );
+      setPosition({ left, top });
+    };
+
+    const timer = window.setTimeout(measure, 240);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.clearTimeout(timer);
+      window.removeEventListener("resize", measure);
+    };
+  }, [step.guidePhase, step.level, step.section]);
+
+  return (
+    <aside
+      className={`${styles.fieldHint} ${styles.navigationHint} ${position ? styles.navigationHintReady : styles.fieldHintMeasuring}`}
+      ref={hintRef}
+      style={position ?? undefined}
+    >
+      <span className={styles.fieldHintIcon}>
+        <LuInfo />
+      </span>
+      <div>
+        <strong>{step.guideLabel}</strong>
+        <p>{text}</p>
+        <HintNavigation navigation={navigation} />
+      </div>
+    </aside>
+  );
+}
+
+function ObjectFieldRow({ field, fieldKey, focusRef, navigation, step }) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const objectValue = step.values[fieldKey] ?? field.default ?? {};
+  const entries = Object.entries(objectValue);
+  const displayedEntries = entries.length ? entries : [["", [""]]];
+
+  return (
+    <div
+      className={`${styles.objectField} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.objectFieldHeader}>
+        <div className={styles.fieldCopy}>
+          <strong>{field.label}</strong>
+          {field.description && <p>{field.description}</p>}
+        </div>
+        {focused ? <LuChevronDown /> : <LuChevronRight />}
+      </div>
+      {focused && (
+        <div className={styles.objectFieldContent} aria-hidden="true">
+          {displayedEntries.map(([key, rawValues], entryIndex) => {
+            const objectValues = Array.isArray(rawValues)
+              ? rawValues
+              : [JSON.stringify(rawValues)];
+            return (
+              <div className={styles.objectEntry} key={key || entryIndex}>
+                <div className={styles.objectEntryHeader}>
+                  <span className={styles.objectInput}>
+                    {key ||
+                      translate({
+                        id: "configMock.knownPlates.namePlaceholder",
+                        message: "e.g., Wife's Car",
+                      })}
+                  </span>
+                  <span className={styles.objectDelete}>
+                    <LuTrash2 />
+                  </span>
+                </div>
+                <div className={styles.objectValues}>
+                  {objectValues.map((item, valueIndex) => (
+                    <span
+                      className={styles.objectInput}
+                      key={`${String(item)}-${valueIndex}`}
+                    >
+                      {item ||
+                        translate({
+                          id: "configMock.knownPlates.platePlaceholder",
+                          message: "Plate number or regex",
+                        })}
+                    </span>
+                  ))}
+                  <span className={styles.objectAdd}>
+                    <LuPlus />
+                    <Translate id="configMock.add">Add</Translate>
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+          <span className={styles.objectAdd}>
+            <LuPlus />
+            <Translate id="configMock.add">Add</Translate>
+          </span>
+        </div>
+      )}
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+function RulesFieldRow({ field, fieldKey, focusRef, navigation, step }) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const rules = step.values[fieldKey] ?? field.default ?? [];
+
+  return (
+    <div
+      className={`${styles.objectField} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.objectFieldHeader}>
+        <div className={styles.fieldCopy}>
+          <strong>{field.label}</strong>
+          {field.description && <p>{field.description}</p>}
+        </div>
+        {focused ? <LuChevronDown /> : <LuChevronRight />}
+      </div>
+      {focused && (
+        <div className={styles.rulesContent} aria-hidden="true">
+          <div className={styles.rulesHeader}>
+            <span>
+              <Translate id="configMock.replacementRules.pattern">
+                Regex pattern
+              </Translate>
+            </span>
+            <span>
+              <Translate id="configMock.replacementRules.replacement">
+                Replacement string
+              </Translate>
+            </span>
+          </div>
+          <div className={styles.rulesRows}>
+            {rules.map((rule, index) => (
+              <div className={styles.ruleRow} key={index}>
+                <span className={styles.objectInput}>{rule.pattern}</span>
+                <span className={styles.objectInput}>{rule.replacement}</span>
+                <span className={styles.objectDelete}>
+                  <LuTrash2 />
+                </span>
+              </div>
+            ))}
+          </div>
+          <span className={styles.objectAdd}>
+            <LuPlus />
+            <Translate id="configMock.add">Add</Translate>
+          </span>
+        </div>
+      )}
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+const objectLabelOptions = [
+  "bicycle",
+  "bus",
+  "car",
+  "cat",
+  "dog",
+  "license_plate",
+  "motorcycle",
+  "person",
+];
+
+const reviewLabelOptions = [
+  "bark",
+  "bicycle",
+  "bird",
+  "car",
+  "cat",
+  "dog",
+  "face",
+  "fire_alarm",
+  "license_plate",
+  "motorcycle",
+  "person",
+];
+
+const humanizeKey = (value) =>
+  value
+    .replaceAll("_", " ")
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+
+function TrackFieldRow({ field, fieldKey, focusRef, navigation, step }) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const selected = step.values[fieldKey] ?? field.default ?? [];
+  const options = [...new Set([...objectLabelOptions, ...selected])].sort();
+
+  return (
+    <div
+      className={`${styles.trackField} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.fieldCopy}>
+        <strong>{field.label}</strong>
+      </div>
+      <div className={styles.trackSummary}>
+        <LuChevronDown />
+        <span>
+          {selected.length}{" "}
+          <Translate id="configMock.objectLabels.selected">
+            object types selected
+          </Translate>
+        </span>
+      </div>
+      <div className={styles.trackSelector} aria-hidden="true">
+        <span className={styles.trackSearch}>
+          <Translate id="configMock.search">Search...</Translate>
+        </span>
+        <div className={styles.trackOptions}>
+          {options.map((option) => (
+            <div className={styles.trackOption} key={option}>
+              <span>{humanizeKey(option)}</span>
+              <span
+                className={`${styles.switch} ${selected.includes(option) ? styles.switchOn : ""}`}
+              >
+                <span />
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      {field.description && (
+        <p className={styles.trackDescription}>{field.description}</p>
+      )}
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+function LabelSwitchesFieldRow({
+  field,
+  fieldKey,
+  focusRef,
+  navigation,
+  step,
+}) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const selected = step.values[fieldKey] ?? field.default ?? [];
+  const options = [...new Set([...reviewLabelOptions, ...selected])].sort();
+
+  return (
+    <div
+      className={`${styles.labelSwitchesField} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.fieldCopy}>
+        <strong>{field.label}</strong>
+      </div>
+      <div className={styles.trackSummary}>
+        <LuChevronDown />
+        <span>
+          {selected.length}{" "}
+          <Translate id="configMock.labels.selected">labels selected</Translate>
+        </span>
+      </div>
+      <div className={styles.labelSelector} aria-hidden="true">
+        <div className={styles.trackOptions}>
+          {options.map((option) => (
+            <div className={styles.trackOption} key={option}>
+              <span>{humanizeKey(option)}</span>
+              <span
+                className={`${styles.switch} ${selected.includes(option) ? styles.switchOn : ""}`}
+              >
+                <span />
+              </span>
+            </div>
+          ))}
+        </div>
+        <span className={styles.customLabelInput}>
+          <Translate id="configMock.labels.customPlaceholder">
+            Add custom label...
+          </Translate>
+        </span>
+      </div>
+      {field.description && (
+        <p className={styles.trackDescription}>{field.description}</p>
+      )}
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+function FiltersFieldRow({ field, fieldKey, focusRef, navigation, step }) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const filters = step.values[fieldKey] ?? field.default ?? {};
+
+  return (
+    <div
+      className={`${styles.objectField} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.objectFieldHeader}>
+        <div className={styles.fieldCopy}>
+          <strong>{field.label}</strong>
+          {field.description && <p>{field.description}</p>}
+        </div>
+        {focused ? <LuChevronDown /> : <LuChevronRight />}
+      </div>
+      {focused && (
+        <div className={styles.filtersContent} aria-hidden="true">
+          {Object.entries(filters).map(([label, values]) => (
+            <div className={styles.filterCard} key={label}>
+              <div className={styles.filterCardHeader}>
+                <strong>{humanizeKey(label)}</strong>
+                <LuChevronDown />
+              </div>
+              <div className={styles.filterSettings}>
+                {Object.entries(values).map(([key, value]) => (
+                  <div className={styles.filterSetting} key={key}>
+                    <span>{humanizeKey(key)}</span>
+                    <span className={styles.input}>{formatValue(value)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+function FieldRow({ fieldKey, field, navigation, step, focusRef }) {
+  const focused = step.guidePhase === "field" && step.focus === fieldKey;
+  const fieldValue = step.values[fieldKey] ?? field.default;
+  if (
+    ["alerts.labels", "detections.labels"].includes(fieldKey) &&
+    Array.isArray(fieldValue)
+  ) {
+    return (
+      <LabelSwitchesFieldRow
+        field={field}
+        fieldKey={fieldKey}
+        focusRef={focusRef}
+        navigation={navigation}
+        step={step}
+      />
+    );
+  }
+  if (fieldKey === "track" && Array.isArray(fieldValue)) {
+    return (
+      <TrackFieldRow
+        field={field}
+        fieldKey={fieldKey}
+        focusRef={focusRef}
+        navigation={navigation}
+        step={step}
+      />
+    );
+  }
+  if (fieldKey === "filters" && fieldValue && typeof fieldValue === "object") {
+    return (
+      <FiltersFieldRow
+        field={field}
+        fieldKey={fieldKey}
+        focusRef={focusRef}
+        navigation={navigation}
+        step={step}
+      />
+    );
+  }
+  const isObjectArray =
+    field.widget === "tags" &&
+    Array.isArray(fieldValue) &&
+    fieldValue.some((item) => item && typeof item === "object");
+  if (isObjectArray) {
+    return (
+      <RulesFieldRow
+        field={field}
+        fieldKey={fieldKey}
+        focusRef={focusRef}
+        navigation={navigation}
+        step={step}
+      />
+    );
+  }
+  if (field.widget === "object") {
+    return (
+      <ObjectFieldRow
+        field={field}
+        fieldKey={fieldKey}
+        focusRef={focusRef}
+        navigation={navigation}
+        step={step}
+      />
+    );
+  }
+  return (
+    <div
+      className={`${styles.field} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      <div className={styles.fieldCopy}>
+        <strong>{field.label}</strong>
+        {field.description && <p>{field.description}</p>}
+      </div>
+      <MockControl field={field} value={step.values[fieldKey]} />
+      {focused && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={field.label}
+        />
+      )}
+    </div>
+  );
+}
+
+function ReviewToggle({ enabled, label }) {
+  return (
+    <div className={styles.reviewToggle}>
+      <span
+        className={`${styles.switch} ${enabled ? styles.switchOn : ""}`}
+        aria-hidden="true"
+      >
+        <span />
+      </span>
+      <strong>{label}</strong>
+    </div>
+  );
+}
+
+function ReviewSettingsLayout({ focusRef, navigation, section, step }) {
+  const valueFor = (key) =>
+    step.values[key] ?? section.fields[key]?.default ?? false;
+  const defaultZones = ["Front Door", "Driveway", "Side Yard"];
+  const configuredZones = [
+    ...(Array.isArray(valueFor("alerts.required_zones"))
+      ? valueFor("alerts.required_zones")
+      : []),
+    ...(Array.isArray(valueFor("detections.required_zones"))
+      ? valueFor("detections.required_zones")
+      : []),
+  ];
+  const zones = configuredZones.length
+    ? [...new Set(configuredZones)]
+    : defaultZones;
+  const configGroups = [
+    {
+      title: translate({
+        id: "configMock.review.alertsConfig",
+        message: "Alerts config",
+      }),
+      fields: ["alerts.enabled", "alerts.labels"],
+    },
+    {
+      title: translate({
+        id: "configMock.review.detectionsConfig",
+        message: "Detections config",
+      }),
+      fields: ["detections.enabled", "detections.labels"],
+    },
+  ];
+
+  return (
+    <div className={styles.reviewLayout}>
+      <section className={styles.reviewRuntimeSection}>
+        <h4>
+          <Translate id="configMock.review.cameraSettings">
+            Camera Review Settings
+          </Translate>
+        </h4>
+        <ReviewToggle
+          enabled={Boolean(valueFor("alerts.enabled"))}
+          label={translate({
+            id: "configMock.review.alerts",
+            message: "Alerts",
+          })}
+        />
+        <ReviewToggle
+          enabled={Boolean(valueFor("detections.enabled"))}
+          label={translate({
+            id: "configMock.review.detections",
+            message: "Detections",
+          })}
+        />
+        <p>
+          <Translate id="configMock.review.runtimeDescription">
+            Temporarily enable or disable alerts and detections for this camera
+            until Frigate restarts.
+          </Translate>
+        </p>
+      </section>
+
+      <section className={styles.reviewRuntimeSection}>
+        <h4>
+          <Translate id="configMock.review.genaiTitle">
+            Generative AI Review Descriptions
+          </Translate>
+        </h4>
+        <ReviewToggle
+          enabled={Boolean(valueFor("genai.enabled"))}
+          label={translate({
+            id: "configMock.enabled",
+            message: "Enabled",
+          })}
+        />
+        <p>
+          <Translate id="configMock.review.genaiDescription">
+            Temporarily enable or disable Generative AI review descriptions for
+            this camera until Frigate restarts.
+          </Translate>
+        </p>
+      </section>
+
+      <section className={styles.reviewClassification}>
+        <h4>
+          <Translate id="configMock.review.classificationTitle">
+            Review Classification
+          </Translate>
+        </h4>
+        <p>
+          <Translate id="configMock.review.classificationDescription">
+            Configure which zones classify review items as Alerts and
+            Detections.
+          </Translate>
+        </p>
+        <span className={styles.docsLink}>
+          <Translate id="configMock.readDocumentation">
+            Read the documentation
+          </Translate>{" "}
+          <LuExternalLink aria-hidden="true" />
+        </span>
+        <div className={styles.reviewClassificationGrid}>
+          {[
+            {
+              fieldKey: "alerts.required_zones",
+              label: translate({
+                id: "configMock.review.alerts",
+                message: "Alerts",
+              }),
+              description: translate({
+                id: "configMock.review.selectAlertsZones",
+                message: "Select zones for Alerts",
+              }),
+            },
+            {
+              fieldKey: "detections.required_zones",
+              label: translate({
+                id: "configMock.review.detections",
+                message: "Detections",
+              }),
+              description: translate({
+                id: "configMock.review.selectDetectionZones",
+                message: "Select zones for Detections",
+              }),
+            },
+          ].map(({ description, fieldKey, label }) => {
+            const focused =
+              step.guidePhase === "field" && step.focus === fieldKey;
+            const selectedZones = Array.isArray(valueFor(fieldKey))
+              ? valueFor(fieldKey)
+              : [];
+
+            return (
+              <div
+                className={`${styles.reviewZoneColumn} ${focused ? styles.focused : ""}`}
+                key={fieldKey}
+                ref={focused ? focusRef : undefined}
+              >
+                <strong>{label}</strong>
+                <small>{description}</small>
+                <div className={styles.reviewZones}>
+                  {zones.map((zone) => (
+                    <span key={zone}>
+                      <i
+                        className={
+                          selectedZones.includes(zone)
+                            ? styles.reviewCheckboxChecked
+                            : ""
+                        }
+                      />
+                      {zone}
+                    </span>
+                  ))}
+                </div>
+                {focused && (
+                  <FieldHint
+                    navigation={navigation}
+                    text={step.hint ?? step.guideLabel}
+                    title={section.fields[fieldKey]?.label ?? label}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {configGroups.map((group) => (
+        <section className={styles.reviewConfigCard} key={group.title}>
+          <div className={styles.reviewConfigHeader}>
+            <div>
+              <strong>{group.title}</strong>
+              <small>
+                <Translate id="configMock.review.configDescription">
+                  Configure review generation and retention for this camera.
+                </Translate>
+              </small>
+            </div>
+            <LuChevronDown />
+          </div>
+          <div className={styles.fields}>
+            {group.fields.map((key) => (
+              <FieldRow
+                field={section.fields[key]}
+                fieldKey={key}
+                focusRef={focusRef}
+                key={key}
+                navigation={navigation}
+                step={step}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+function DetectorModelLayout({ focusRef, navigation, section, step }) {
+  const detectors = step.values.detectors ?? {};
+  const detectorLabels = [
+    ...new Set(
+      Object.values(detectors).map((detector) => {
+        const type = detector.type ?? "cpu";
+        return manifest.detectorTypes?.[type]?.label ?? humanizeKey(type);
+      }),
+    ),
+  ];
+  const detectorFocused =
+    step.guidePhase === "field" && step.focus === "detectors";
+  const modelFocused =
+    step.guidePhase === "field" && step.focus === "custom_model";
+  const orderedModelFields = section.order.filter((key) => section.fields[key]);
+  const standardModelFields = orderedModelFields.filter(
+    (key) => !section.fields[key].advanced,
+  );
+  const advancedModelFields = orderedModelFields.filter(
+    (key) => section.fields[key].advanced,
+  );
+
+  return (
+    <div className={styles.detectorModelLayout}>
+      <section
+        className={`${styles.detectorHardwareCard} ${detectorFocused ? styles.focused : ""}`}
+        ref={detectorFocused ? focusRef : undefined}
+      >
+        <div className={styles.detectorCardHeader}>
+          <div>
+            <strong>
+              <Translate id="configMock.detectors.hardware">
+                Detector Hardware
+              </Translate>
+            </strong>
+            <small>
+              <Translate id="configMock.detectors.hardwareDescription">
+                Configure the detector backend that runs object detection.
+              </Translate>
+            </small>
+          </div>
+          <LuChevronDown />
+        </div>
+        <div className={styles.detectorInstances}>
+          {Object.entries(detectors).map(([name, detector]) => {
+            const detectorType = detector.type ?? "cpu";
+            const detectorMetadata = manifest.detectorTypes?.[detectorType];
+            const detectorLabel =
+              detectorMetadata?.label ?? humanizeKey(detectorType);
+            const detectorFields = Object.entries(detector).filter(
+              ([key]) => key !== "type",
+            );
+            return (
+              <div className={styles.detectorInstance} key={name}>
+                <div className={styles.detectorInstanceHeader}>
+                  <LuChevronDown />
+                  <div>
+                    <strong>{detectorLabel}</strong>
+                    <span>{name}</span>
+                    {detectorMetadata?.description && (
+                      <small>{detectorMetadata.description}</small>
+                    )}
+                  </div>
+                  <LuTrash2 />
+                </div>
+                <div className={styles.detectorFields}>
+                  <div>
+                    <span>
+                      <Translate id="configMock.detectors.id">ID</Translate>
+                    </span>
+                    <span className={styles.input}>{name}</span>
+                  </div>
+                  <div>
+                    <span>
+                      <Translate id="configMock.detectors.type">Type</Translate>
+                    </span>
+                    <span className={styles.input}>{detectorLabel}</span>
+                  </div>
+                </div>
+                <div className={styles.detectorSpecificFields}>
+                  {detectorFields.map(([key, value]) => {
+                    const metadata = detectorMetadata?.fields?.[key];
+                    const displayValue =
+                      value === ""
+                        ? ""
+                        : value && typeof value === "object"
+                          ? JSON.stringify(value)
+                          : String(value);
+                    return (
+                      <div className={styles.detectorSpecificField} key={key}>
+                        <div>
+                          <strong>{metadata?.label ?? humanizeKey(key)}</strong>
+                          {metadata?.description && (
+                            <small>{metadata.description}</small>
+                          )}
+                        </div>
+                        <span className={styles.input}>{displayValue}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+                <span className={styles.objectAdd}>
+                  <LuPlus />
+                  <Translate id="configMock.detectors.addCustomKey">
+                    Add custom key
+                  </Translate>
+                </span>
+              </div>
+            );
+          })}
+          <div className={styles.detectorAddPanel}>
+            <span>
+              <Translate id="configMock.detectors.add">Add detector</Translate>
+            </span>
+            <div>
+              <span className={styles.input}>
+                <Translate id="configMock.detectors.type">Type</Translate>
+              </span>
+              <span className={styles.objectAdd}>
+                <LuPlus />
+                <Translate id="configMock.add">Add</Translate>
+              </span>
+            </div>
+          </div>
+        </div>
+        {detectorFocused && (
+          <FieldHint
+            navigation={navigation}
+            text={
+              step.hint ??
+              (detectorLabels.length
+                ? translate(
+                    {
+                      id: "configMock.detectors.configureTypes",
+                      message: "Configure the {detectors} detector hardware.",
+                    },
+                    { detectors: detectorLabels.join(", ") },
+                  )
+                : step.guideLabel)
+            }
+            title={translate({
+              id: "configMock.detectors.hardware",
+              message: "Detector Hardware",
+            })}
+          />
+        )}
+      </section>
+
+      <section
+        className={`${styles.detectorHardwareCard} ${modelFocused ? styles.focused : ""}`}
+        ref={modelFocused ? focusRef : undefined}
+      >
+        <div className={styles.detectorCardHeader}>
+          <div>
+            <strong>
+              <Translate id="configMock.detectors.model">
+                Detection Model
+              </Translate>
+            </strong>
+            <small>
+              <Translate id="configMock.detectors.modelDescription">
+                Configure the model and its input shape.
+              </Translate>
+            </small>
+          </div>
+          <LuChevronDown />
+        </div>
+        <div className={styles.detectorModelTabs}>
+          <span>
+            <Translate id="configMock.detectors.frigatePlus">
+              Frigate+
+            </Translate>
+          </span>
+          <strong>
+            <Translate id="configMock.detectors.customModel">
+              Custom Model
+            </Translate>
+          </strong>
+        </div>
+        <div className={styles.fields}>
+          {standardModelFields.map((key) => (
+            <FieldRow
+              field={section.fields[key]}
+              fieldKey={key}
+              focusRef={focusRef}
+              key={key}
+              navigation={navigation}
+              step={step}
+            />
+          ))}
+        </div>
+        <div className={styles.detectorAdvancedHeader}>
+          <LuChevronDown />
+          <span>
+            <Translate id="configMock.advancedSettings">
+              Advanced Settings
+            </Translate>{" "}
+            ({advancedModelFields.length})
+          </span>
+        </div>
+        <div className={styles.detectorAdvancedFields}>
+          {advancedModelFields.map((key) => (
+            <FieldRow
+              field={section.fields[key]}
+              fieldKey={key}
+              focusRef={focusRef}
+              key={key}
+              navigation={navigation}
+              step={step}
+            />
+          ))}
+        </div>
+        {modelFocused && (
+          <FieldHint
+            navigation={navigation}
+            text={step.hint ?? step.guideLabel}
+            title={translate({
+              id: "configMock.detectors.customModel",
+              message: "Custom Model",
+            })}
+          />
+        )}
+      </section>
+    </div>
+  );
+}
+
+const maskZoneLabels = {
+  zones: "Zones",
+  "zone.add": "Add Zone",
+  "zone.canvas": "Draw the zone",
+  "zone.options": "Zone options",
+  "zone.objects": "Objects",
+  "zone.loitering_time": "Loitering Time",
+  "zone.inertia": "Inertia",
+  "zone.speed": "Speed Estimation",
+  "zone.speed_threshold": "Speed Threshold",
+  "zone.save": "Save",
+  motionMasks: "Motion Mask",
+  "motionMask.add": "New Motion Mask",
+  "motionMask.canvas": "Draw the motion mask",
+  "motionMask.options": "Motion mask options",
+  objectMasks: "Object Masks",
+  "objectMask.add": "New Object Mask",
+  "objectMask.canvas": "Draw the object mask",
+  "objectMask.options": "Object mask options",
+  "objectMask.objects": "Objects",
+};
+
+function MaskZoneTarget({ children, focusRef, id, navigation, step }) {
+  const focused = step.guidePhase === "field" && step.focus === id;
+
+  return (
+    <div
+      className={`${styles.maskZoneTarget} ${focused ? styles.focused : ""}`}
+      ref={focused ? focusRef : undefined}
+    >
+      {children}
+      {focused && !step.maskZoneOverlay && (
+        <FieldHint
+          navigation={navigation}
+          text={step.hint ?? step.guideLabel}
+          title={step.label ?? maskZoneLabels[id] ?? humanizeKey(id)}
+        />
+      )}
+    </div>
+  );
+}
+
+function MaskZoneListSection({
+  addFocus,
+  focusRef,
+  icon: Icon,
+  items,
+  navigation,
+  sectionFocus,
+  step,
+  title,
+}) {
+  return (
+    <MaskZoneTarget
+      focusRef={focusRef}
+      id={sectionFocus}
+      navigation={navigation}
+      step={step}
+    >
+      <section className={styles.maskZoneListSection}>
+        <header>
+          <strong>{title}</strong>
+          <MaskZoneTarget
+            focusRef={focusRef}
+            id={addFocus}
+            navigation={navigation}
+            step={step}
+          >
+            <span className={styles.polygonAdd}>
+              <LuPlus />
+            </span>
+          </MaskZoneTarget>
+        </header>
+        {items.map((item) => (
+          <div className={styles.polygonListItem} key={item.name}>
+            <Icon />
+            <span>
+              <b>{item.name}</b>
+              <small>{item.points} points</small>
+            </span>
+            <span className={`${styles.switch} ${styles.switchOn}`}>
+              <span />
+            </span>
+          </div>
+        ))}
+      </section>
+    </MaskZoneTarget>
+  );
+}
+
+function MaskZoneFormField({
+  children,
+  description,
+  focusRef,
+  id,
+  label,
+  navigation,
+  step,
+}) {
+  return (
+    <MaskZoneTarget
+      focusRef={focusRef}
+      id={id}
+      navigation={navigation}
+      step={step}
+    >
+      <div className={styles.polygonFormField}>
+        <strong>{label}</strong>
+        {description && <small>{description}</small>}
+        {children}
+      </div>
+    </MaskZoneTarget>
+  );
+}
+
+function PolygonEditor({ focusRef, navigation, step, type }) {
+  const isZone = type === "zone";
+  const isMotionMask = type === "motionMask";
+  const name = isZone
+    ? "Driveway"
+    : isMotionMask
+      ? "Timestamp area"
+      : "Roof area";
+  const prefix = type;
+
+  return (
+    <div className={styles.polygonEditor}>
+      <div className={styles.polygonEditorHeader}>
+        <strong>
+          {isZone
+            ? "Edit Zone"
+            : isMotionMask
+              ? "Edit Motion Mask"
+              : "Edit Object Mask"}
+        </strong>
+        <small>Click the image to draw a polygon.</small>
+      </div>
+      <MaskZoneTarget
+        focusRef={focusRef}
+        id={`${prefix}.options`}
+        navigation={navigation}
+        step={step}
+      >
+        <div className={styles.polygonForm}>
+          <MaskZoneFormField
+            focusRef={focusRef}
+            id={`${prefix}.name`}
+            label="Friendly name"
+            navigation={navigation}
+            step={step}
+          >
+            <span className={styles.polygonInput}>{name}</span>
+          </MaskZoneFormField>
+          <div className={styles.polygonToggleRow}>
+            <strong>Enabled</strong>
+            <span className={`${styles.switch} ${styles.switchOn}`}>
+              <span />
+            </span>
+          </div>
+          {isZone && (
+            <>
+              <MaskZoneFormField
+                description="Object types that apply to this zone."
+                focusRef={focusRef}
+                id="zone.objects"
+                label="Objects"
+                navigation={navigation}
+                step={step}
+              >
+                <span className={styles.polygonInput}>person, car</span>
+              </MaskZoneFormField>
+              <MaskZoneFormField
+                focusRef={focusRef}
+                id="zone.loitering_time"
+                label="Loitering Time"
+                navigation={navigation}
+                step={step}
+              >
+                <span className={styles.polygonInput}>4</span>
+              </MaskZoneFormField>
+              <MaskZoneFormField
+                focusRef={focusRef}
+                id="zone.inertia"
+                label="Inertia"
+                navigation={navigation}
+                step={step}
+              >
+                <span className={styles.polygonInput}>3</span>
+              </MaskZoneFormField>
+              <MaskZoneFormField
+                description="Enter a distance for each edge of a four-point zone."
+                focusRef={focusRef}
+                id="zone.speed"
+                label="Speed Estimation"
+                navigation={navigation}
+                step={step}
+              >
+                <div className={styles.distanceGrid}>
+                  {["10", "12", "11", "13.5"].map((value, index) => (
+                    <span className={styles.polygonInput} key={index}>
+                      Line {String.fromCharCode(65 + index)}: {value}
+                    </span>
+                  ))}
+                </div>
+              </MaskZoneFormField>
+              <MaskZoneFormField
+                focusRef={focusRef}
+                id="zone.speed_threshold"
+                label="Speed Threshold (km/h)"
+                navigation={navigation}
+                step={step}
+              >
+                <span className={styles.polygonInput}>20</span>
+              </MaskZoneFormField>
+            </>
+          )}
+          {!isZone && !isMotionMask && (
+            <MaskZoneFormField
+              focusRef={focusRef}
+              id="objectMask.objects"
+              label="Objects"
+              navigation={navigation}
+              step={step}
+            >
+              <span className={styles.polygonInput}>person</span>
+            </MaskZoneFormField>
+          )}
+        </div>
+      </MaskZoneTarget>
+      <MaskZoneTarget
+        focusRef={focusRef}
+        id="zone.save"
+        navigation={navigation}
+        step={step}
+      >
+        <div className={styles.polygonActions}>
+          <span>Cancel</span>
+          <b>Save</b>
+        </div>
+      </MaskZoneTarget>
+    </div>
+  );
+}
+
+function MasksAndZonesLayout({ focusRef, navigation, step }) {
+  const focus = step.focus ?? "zones";
+  const layoutStep = { ...step, maskZoneOverlay: true };
+  const editorType =
+    focus.startsWith("zone.") && focus !== "zone.add"
+      ? "zone"
+      : focus.startsWith("motionMask.") && focus !== "motionMask.add"
+        ? "motionMask"
+        : focus.startsWith("objectMask.") && focus !== "objectMask.add"
+          ? "objectMask"
+          : null;
+  const polygonClass =
+    editorType === "motionMask"
+      ? styles.motionMaskPolygon
+      : editorType === "objectMask"
+        ? styles.objectMaskPolygon
+        : styles.zonePolygon;
+
+  useEffect(() => {
+    if (step.guidePhase !== "field") return undefined;
+    const timer = window.setTimeout(() => {
+      const target = focusRef.current;
+      const sidebar = target?.closest(`.${styles.polygonSidebar}`);
+      if (!target || !sidebar) return;
+      const sidebarRect = sidebar.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      if (
+        targetRect.top >= sidebarRect.top + 12 &&
+        targetRect.bottom <= sidebarRect.bottom - 12
+      ) {
+        return;
+      }
+      sidebar.scrollTo({
+        top: Math.max(
+          0,
+          sidebar.scrollTop + targetRect.top - sidebarRect.top - 18,
+        ),
+        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
+          ? "auto"
+          : "smooth",
+      });
+    }, 40);
+    return () => window.clearTimeout(timer);
+  }, [focusRef, step.focus, step.guidePhase]);
+
+  return (
+    <div className={styles.masksZonesLayout}>
+      <aside className={styles.polygonSidebar}>
+        {editorType ? (
+          <PolygonEditor
+            focusRef={focusRef}
+            navigation={navigation}
+            step={layoutStep}
+            type={editorType}
+          />
+        ) : (
+          <div className={styles.polygonLists}>
+            <div className={styles.polygonPageTitle}>Masks / Zones</div>
+            <MaskZoneListSection
+              addFocus="zone.add"
+              focusRef={focusRef}
+              icon={FaDrawPolygon}
+              items={[{ name: "Driveway", points: 4 }]}
+              navigation={navigation}
+              sectionFocus="zones"
+              step={layoutStep}
+              title="Zones"
+            />
+            <MaskZoneListSection
+              addFocus="motionMask.add"
+              focusRef={focusRef}
+              icon={FaObjectGroup}
+              items={[{ name: "Timestamp area", points: 4 }]}
+              navigation={navigation}
+              sectionFocus="motionMasks"
+              step={layoutStep}
+              title="Motion Mask"
+            />
+            <MaskZoneListSection
+              addFocus="objectMask.add"
+              focusRef={focusRef}
+              icon={BsPersonBoundingBox}
+              items={[{ name: "Roof area", points: 5 }]}
+              navigation={navigation}
+              sectionFocus="objectMasks"
+              step={layoutStep}
+              title="Object Masks"
+            />
+          </div>
+        )}
+      </aside>
+      <MaskZoneTarget
+        focusRef={focusRef}
+        id={`${editorType}.canvas`}
+        navigation={navigation}
+        step={layoutStep}
+      >
+        <div className={styles.polygonCanvas}>
+          <img
+            alt=""
+            loading="lazy"
+            src={step.cameraImage ?? "/img/frigate-autotracking-example.gif"}
+          />
+          <svg aria-hidden="true" viewBox="0 0 640 360">
+            <polygon
+              className={polygonClass}
+              points={
+                editorType === "motionMask"
+                  ? "15,16 625,16 625,78 15,78"
+                  : editorType === "objectMask"
+                    ? "400,75 560,82 600,205 470,235 380,165"
+                    : "80,270 240,150 525,175 595,325"
+              }
+            />
+            {editorType &&
+              (editorType === "motionMask"
+                ? [
+                    [15, 16],
+                    [625, 16],
+                    [625, 78],
+                    [15, 78],
+                  ]
+                : editorType === "objectMask"
+                  ? [
+                      [400, 75],
+                      [560, 82],
+                      [600, 205],
+                      [470, 235],
+                      [380, 165],
+                    ]
+                  : [
+                      [80, 270],
+                      [240, 150],
+                      [525, 175],
+                      [595, 325],
+                    ]
+              ).map(([x, y], index) => (
+                <circle cx={x} cy={y} key={index} r="6" />
+              ))}
+          </svg>
+          <div className={styles.canvasBadge}>Front Door</div>
+          {editorType && (
+            <div className={styles.canvasTools}>
+              <span>Clear points</span>
+              <span>Snap points</span>
+            </div>
+          )}
+        </div>
+      </MaskZoneTarget>
+      {step.guidePhase === "field" && (
+        <aside className={`${styles.fieldHint} ${styles.maskZoneHint}`}>
+          <span className={styles.fieldHintIcon}>
+            <LuInfo />
+          </span>
+          <div>
+            <strong>
+              {step.label ??
+                maskZoneLabels[step.focus] ??
+                humanizeKey(step.focus)}
+            </strong>
+            <p>{step.hint ?? step.guideLabel}</p>
+            <HintNavigation navigation={navigation} />
+          </div>
+        </aside>
+      )}
+    </div>
+  );
+}
+
+function SettingsContent({ navigation, step }) {
+  const section = manifest.levels[step.level]?.[step.section];
+  const viewportRef = useRef(null);
+  const focusRef = useRef(null);
+  const pageRef = useRef(null);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    const target = focusRef.current;
+    if (!viewport) return undefined;
+
+    const page = `${step.level}:${step.section}`;
+    const pageChanged = pageRef.current !== page;
+    pageRef.current = page;
+    if (pageChanged || step.guidePhase !== "field") {
+      viewport.scrollTop = 0;
+    }
+    if (step.guidePhase !== "field" || !target) return undefined;
+    const timer = window.setTimeout(() => {
+      const viewportRect = viewport.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      const outsideViewport =
+        targetRect.top < viewportRect.top + 24 ||
+        targetRect.bottom > viewportRect.bottom - 24;
+      if (!outsideViewport) return;
+
+      const targetIsTall = targetRect.height > viewportRect.height - 48;
+
+      const reduceMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      viewport.scrollTo({
+        top:
+          viewport.scrollTop +
+          targetRect.top -
+          viewportRect.top -
+          (targetIsTall
+            ? 24
+            : viewport.clientHeight / 2 - targetRect.height / 2),
+        behavior: reduceMotion ? "auto" : "smooth",
+      });
+    }, 40);
+
+    return () => window.clearTimeout(timer);
+  }, [step]);
+
+  if (step.section === "masksAndZones" && step.level === "camera") {
+    return (
+      <main className={styles.contentViewport} ref={viewportRef}>
+        <MasksAndZonesLayout
+          focusRef={focusRef}
+          navigation={navigation}
+          step={step}
+        />
+      </main>
+    );
+  }
+
+  if (!section) return null;
+
+  if (step.section === "model" && step.level === "global") {
+    return (
+      <main className={styles.contentViewport} ref={viewportRef}>
+        <div className={styles.scene}>
+          <div className={styles.sectionHeader}>
+            <h3>
+              <Translate id="configMock.detectors.pageTitle">
+                Detectors and model
+              </Translate>
+            </h3>
+            <p>
+              <Translate id="configMock.detectors.pageDescription">
+                Configure the detector backend and the model it uses.
+              </Translate>
+            </p>
+          </div>
+          <DetectorModelLayout
+            focusRef={focusRef}
+            navigation={navigation}
+            section={section}
+            step={step}
+          />
+        </div>
+      </main>
+    );
+  }
+
+  if (step.section === "review" && step.level === "camera") {
+    return (
+      <main className={styles.contentViewport} ref={viewportRef}>
+        <div className={styles.scene}>
+          <div className={styles.sectionHeader}>
+            <h3>{step.title ?? section.label}</h3>
+            {section.description && <p>{section.description}</p>}
+            <span className={styles.docsLink}>
+              <Translate id="configMock.readDocumentation">
+                Read the documentation
+              </Translate>{" "}
+              <LuExternalLink aria-hidden="true" />
+            </span>
+          </div>
+          <ReviewSettingsLayout
+            focusRef={focusRef}
+            navigation={navigation}
+            section={section}
+            step={step}
+          />
+        </div>
+      </main>
+    );
+  }
+
+  const orderedKeys = section.order.length
+    ? section.order.filter((key) => section.fields[key])
+    : Object.keys(section.fields);
+  if (
+    step.focus &&
+    section.fields[step.focus] &&
+    !orderedKeys.includes(step.focus)
+  ) {
+    orderedKeys.push(step.focus);
+  }
+  const advancedKeys = orderedKeys.filter(
+    (key) => section.fields[key]?.advanced,
+  );
+  const standardKeys = orderedKeys.filter(
+    (key) => !section.fields[key]?.advanced,
+  );
+  const groupByField = new Map();
+  (section.groups ?? []).forEach((group) => {
+    group.fields.forEach((key) => groupByField.set(key, group));
+  });
+  const renderedGroups = new Set();
+  const panels = [];
+  standardKeys.forEach((key) => {
+    const group = groupByField.get(key);
+    if (!group) {
+      panels.push({ type: "field", key, fields: [key] });
+      return;
+    }
+    if (renderedGroups.has(group.key)) return;
+    renderedGroups.add(group.key);
+    panels.push({
+      type: "group",
+      key: group.key,
+      label: group.label,
+      fields: group.fields.filter((fieldKey) =>
+        standardKeys.includes(fieldKey),
+      ),
+    });
+  });
+  const focusIsAdvanced =
+    step.guidePhase === "field" && advancedKeys.includes(step.focus);
+
+  return (
+    <main className={styles.contentViewport} ref={viewportRef}>
+      <div className={styles.scene}>
+        <div className={styles.sectionHeader}>
+          <h3>{step.title ?? section.label}</h3>
+          {section.description && <p>{section.description}</p>}
+          {section.docs && (
+            <span className={styles.docsLink}>
+              <Translate id="configMock.readDocumentation">
+                Read the documentation
+              </Translate>{" "}
+              <LuExternalLink aria-hidden="true" />
+            </span>
+          )}
+        </div>
+        <div className={styles.panels}>
+          {panels.map((panel) =>
+            panel.type === "group" ? (
+              <section className={styles.group} key={panel.key}>
+                <div className={styles.groupTitle}>{panel.label}</div>
+                <div className={styles.fields}>
+                  {panel.fields.map((key) => (
+                    <FieldRow
+                      fieldKey={key}
+                      field={section.fields[key]}
+                      focusRef={focusRef}
+                      key={key}
+                      navigation={navigation}
+                      step={step}
+                    />
+                  ))}
+                </div>
+              </section>
+            ) : (
+              <div className={styles.standaloneField} key={panel.key}>
+                <FieldRow
+                  fieldKey={panel.key}
+                  field={section.fields[panel.key]}
+                  focusRef={focusRef}
+                  navigation={navigation}
+                  step={step}
+                />
+              </div>
+            ),
+          )}
+          {advancedKeys.length > 0 &&
+            (focusIsAdvanced ? (
+              <section className={styles.group} key="advanced">
+                <div className={styles.groupTitle}>
+                  <Translate id="configMock.advancedSettings">
+                    Advanced settings
+                  </Translate>{" "}
+                  ({advancedKeys.length})
+                </div>
+                <div className={styles.fields}>
+                  {advancedKeys.map((key) => (
+                    <FieldRow
+                      fieldKey={key}
+                      field={section.fields[key]}
+                      focusRef={focusRef}
+                      key={key}
+                      navigation={navigation}
+                      step={step}
+                    />
+                  ))}
+                </div>
+              </section>
+            ) : (
+              <div className={styles.advancedCollapsed}>
+                <LuChevronRight aria-hidden="true" />{" "}
+                <Translate id="configMock.advancedSettings">
+                  Advanced settings
+                </Translate>{" "}
+                ({advancedKeys.length})
+              </div>
+            ))}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function FocusedSettings({ navigation, step }) {
+  const [cameraReady, setCameraReady] = useState(false);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setCameraReady(true), 40);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  const cameraClass = !cameraReady
+    ? styles.cameraOverview
+    : step.guidePhase === "settings"
+      ? styles.cameraSettings
+      : step.guidePhase === "menu"
+        ? styles.cameraMenu
+        : styles.cameraField;
+
+  return (
+    <div className={`${styles.appFrame} ${cameraClass}`}>
+      <header className={styles.appHeader}>
+        <div className={styles.logoCell}>
+          <img src="/img/branding/logo-dark.svg" alt="" />
+        </div>
+        <div className={styles.settingsTitle}>
+          <Translate id="configMock.settings">Settings</Translate>
+        </div>
+      </header>
+      <div className={styles.appBody}>
+        <IconRail phase={step.guidePhase} />
+        <SettingsNavigation step={step} />
+        <SettingsContent navigation={navigation} step={step} />
+        <SystemMenu visible={cameraReady && step.guidePhase === "settings"} />
+        {step.guidePhase !== "field" && (
+          <NavigationHint
+            key={`${step.guidePhase}-${step.level}-${step.section}`}
+            navigation={navigation}
+            step={step}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function FrigateConfigMock({
+  autoPlay = true,
+  showNavigationSteps = true,
+  section,
+  level,
+  fields,
+  values,
+  focus,
+  hint,
+  label,
+  cameraImage = "/img/frigate-autotracking-example.gif",
+  targets,
+  steps,
+}) {
+  const resolvedSteps = useMemo(() => {
+    const base = {
+      section,
+      level: level ?? "global",
+      fields,
+      values,
+      focus,
+      hint,
+      label,
+      cameraImage,
+    };
+    if (targets?.length) {
+      return targets.map((target) =>
+        normalizeStep(base, {
+          focus: typeof target === "string" ? target : target.field,
+          hint: typeof target === "string" ? undefined : target.hint,
+        }),
+      );
+    }
+    return steps?.length
+      ? steps.flatMap((step) => {
+          const page = normalizeStep(base, step);
+          if (!step.targets?.length) return [page];
+          return step.targets.map((target) =>
+            normalizeStep(page, {
+              focus: typeof target === "string" ? target : target.field,
+              hint: typeof target === "string" ? undefined : target.hint,
+            }),
+          );
+        })
+      : [base];
+  }, [
+    cameraImage,
+    fields,
+    focus,
+    hint,
+    label,
+    level,
+    section,
+    steps,
+    targets,
+    values,
+  ]);
+  const guideSteps = useMemo(
+    () =>
+      resolvedSteps.flatMap((step, index) => {
+        const sectionData = manifest.levels[step.level]?.[step.section];
+        const navigationGroup = manifest.navigation?.groups.find((group) =>
+          group.items.some(
+            (item) =>
+              item.section === step.section && item.level === step.level,
+          ),
+        );
+        const navigationItem = navigationGroup?.items.find(
+          (item) => item.section === step.section && item.level === step.level,
+        );
+        const fieldLabel =
+          step.label ??
+          maskZoneLabels[step.focus] ??
+          sectionData?.fields?.[step.focus]?.label ??
+          (step.focus ? humanizeKey(step.focus.split(".").at(-1)) : undefined);
+        const previous = resolvedSteps[index - 1];
+        const samePage =
+          previous?.section === step.section && previous?.level === step.level;
+        const stages = [];
+        if (!samePage && showNavigationSteps) {
+          if (index === 0) {
+            stages.push({
+              ...step,
+              guidePhase: "settings",
+              guideLabel: translate({
+                id: "configMock.guide.openSettings",
+                message: "Open Settings",
+              }),
+            });
+          }
+          stages.push({
+            ...step,
+            guidePhase: "menu",
+            guideLabel: translate(
+              {
+                id: "configMock.guide.openSection",
+                message: "Find {section}",
+              },
+              {
+                section:
+                  navigationItem?.label ?? sectionData?.label ?? step.section,
+              },
+            ),
+            guideDetail: navigationGroup?.label,
+          });
+        }
+        if (fieldLabel) {
+          stages.push({
+            ...step,
+            guidePhase: "field",
+            guideLabel:
+              step.label ??
+              translate(
+                {
+                  id: "configMock.guide.findField",
+                  message: "Find {field}",
+                },
+                { field: fieldLabel },
+              ),
+          });
+        }
+        return stages;
+      }),
+    [resolvedSteps, showNavigationSteps],
+  );
+  const [activeStep, setActiveStep] = useState(0);
+  const [playing, setPlaying] = useState(autoPlay);
+  const [isVisible, setIsVisible] = useState(false);
+  const mockRef = useRef(null);
+  const guideStepsRef = useRef(null);
+  const activeGuideStepRef = useRef(null);
+  const current = guideSteps[Math.min(activeStep, guideSteps.length - 1)];
+
+  useEffect(() => {
+    const mock = mockRef.current;
+    if (!mock) return undefined;
+    if (!("IntersectionObserver" in window)) {
+      setIsVisible(true);
+      return undefined;
+    }
+
+    const observer = new window.IntersectionObserver(
+      ([entry]) => setIsVisible(entry.intersectionRatio >= 0.35),
+      { threshold: [0, 0.35] },
+    );
+    observer.observe(mock);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!playing || !isVisible || activeStep >= guideSteps.length - 1) {
+      return undefined;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return undefined;
+    }
+    const timer = window.setTimeout(
+      () => {
+        setActiveStep((value) => Math.min(guideSteps.length - 1, value + 1));
+      },
+      current.guidePhase === "settings" ? 3400 : 2600,
+    );
+    return () => window.clearTimeout(timer);
+  }, [activeStep, current.guidePhase, guideSteps.length, isVisible, playing]);
+
+  useEffect(() => {
+    if (activeStep >= guideSteps.length - 1) setPlaying(false);
+  }, [activeStep, guideSteps.length]);
+
+  useEffect(() => {
+    const guide = guideStepsRef.current;
+    const target = activeGuideStepRef.current;
+    if (!guide || !target) return undefined;
+
+    if (activeStep <= 1) {
+      guide.scrollLeft = 0;
+      return undefined;
+    }
+
+    const previous = guide.children[activeStep - 1];
+    if (!previous) return undefined;
+    const guideRect = guide.getBoundingClientRect();
+    const previousRect = previous.getBoundingClientRect();
+    const previousContentLeft =
+      guide.scrollLeft + previousRect.left - guideRect.left;
+    guide.scrollLeft = Math.max(0, previousContentLeft - 14);
+    return undefined;
+  }, [activeStep]);
+
+  const selectStep = (index) => {
+    setPlaying(false);
+    setActiveStep(index);
+  };
+  const navigation = {
+    current: activeStep,
+    total: guideSteps.length,
+    previous: () => selectStep(Math.max(0, activeStep - 1)),
+    next: () => selectStep(Math.min(guideSteps.length - 1, activeStep + 1)),
+  };
+
+  return (
+    <div className={styles.mock} ref={mockRef}>
+      <div className={styles.guidePlayer}>
+        <div className={styles.guideSteps} ref={guideStepsRef}>
+          {guideSteps.map((step, index) => (
+            <button
+              className={`${styles.guideStep} ${index === activeStep ? styles.guideStepActive : ""} ${index < activeStep ? styles.guideStepComplete : ""}`}
+              key={`${step.section}-${step.guidePhase}-${index}`}
+              onClick={() => selectStep(index)}
+              ref={index === activeStep ? activeGuideStepRef : undefined}
+              type="button"
+            >
+              <span>{index + 1}</span>
+              <small>{step.guideLabel}</small>
+            </button>
+          ))}
+        </div>
+        <div className={styles.stepBar}>
+          <div className={styles.currentInstruction}>
+            <span>
+              <Translate id="configMock.step">Step</Translate> {activeStep + 1}{" "}
+              / {guideSteps.length}
+            </span>
+            <strong>{current.guideLabel}</strong>
+            {current.guideDetail && <small>{current.guideDetail}</small>}
+          </div>
+          <div className={styles.stepActions}>
+            <button
+              type="button"
+              aria-label={translate({
+                id: "configMock.previousStep",
+                message: "Previous step",
+              })}
+              disabled={activeStep === 0}
+              onClick={() => selectStep(Math.max(0, activeStep - 1))}
+            >
+              <LuChevronLeft />
+            </button>
+            <button
+              type="button"
+              aria-label={translate({
+                id: playing ? "configMock.pause" : "configMock.play",
+                message: playing ? "Pause steps" : "Play steps",
+              })}
+              onClick={() => {
+                if (!playing && activeStep === guideSteps.length - 1) {
+                  setActiveStep(0);
+                }
+                setPlaying((value) => !value);
+              }}
+            >
+              {playing ? <LuPause /> : <LuPlay />}
+            </button>
+            <button
+              type="button"
+              aria-label={translate({
+                id: "configMock.nextStep",
+                message: "Next step",
+              })}
+              disabled={activeStep === guideSteps.length - 1}
+              onClick={() =>
+                selectStep(Math.min(guideSteps.length - 1, activeStep + 1))
+              }
+            >
+              <LuChevronRight />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className={styles.viewport}>
+        <FocusedSettings navigation={navigation} step={current} />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/components/FrigateConfigMock/manifest.json b/docs/src/components/FrigateConfigMock/manifest.json
new file mode 100644
index 0000000000..a1341f9182
--- /dev/null
+++ b/docs/src/components/FrigateConfigMock/manifest.json
@@ -0,0 +1,5140 @@
+{
+  "generatedFrom": "web/e2e/fixtures/mock-data/config-schema.json",
+  "detectorTypes": {
+    "axengine": {
+      "label": "AXEngine NPU",
+      "description": "AXERA AX650N/AX8850N NPU detector running compiled .axmodel files via the AXEngine runtime.",
+      "fields": {}
+    },
+    "cpu": {
+      "label": "CPU",
+      "description": "CPU TFLite detector that runs TensorFlow Lite models on the host CPU without hardware acceleration. Not recommended.",
+      "fields": {
+        "num_threads": {
+          "label": "Number of detection threads",
+          "description": "The number of threads used for CPU-based inference."
+        }
+      }
+    },
+    "deepstack": {
+      "label": "DeepStack",
+      "description": "DeepStack/CodeProject.AI detector that sends images to a remote DeepStack HTTP API for inference. Not recommended.",
+      "fields": {
+        "api_url": {
+          "label": "DeepStack API URL",
+          "description": "The URL of the DeepStack API."
+        },
+        "api_timeout": {
+          "label": "DeepStack API timeout (in seconds)",
+          "description": "Maximum time allowed for a DeepStack API request."
+        },
+        "api_key": {
+          "label": "DeepStack API key (if required)",
+          "description": "Optional API key for authenticated DeepStack services."
+        }
+      }
+    },
+    "degirum": {
+      "label": "DeGirum",
+      "description": "DeGirum detector for running models via DeGirum cloud or local inference services.",
+      "fields": {
+        "location": {
+          "label": "Inference Location",
+          "description": "Location of the DeGirim inference engine (e.g. '@cloud', '127.0.0.1')."
+        },
+        "zoo": {
+          "label": "Model Zoo",
+          "description": "Path or URL to the DeGirum model zoo."
+        },
+        "token": {
+          "label": "DeGirum Cloud Token",
+          "description": "Token for DeGirum Cloud access."
+        }
+      }
+    },
+    "edgetpu": {
+      "label": "EdgeTPU",
+      "description": "EdgeTPU detector that runs TensorFlow Lite models compiled for Coral EdgeTPU using the EdgeTPU delegate.",
+      "fields": {
+        "device": {
+          "label": "Device Type",
+          "description": "The device to use for EdgeTPU inference (e.g. 'usb', 'pci')."
+        }
+      }
+    },
+    "hailo8l": {
+      "label": "Hailo-8/Hailo-8L",
+      "description": "Hailo-8/Hailo-8L detector using HEF models and the HailoRT SDK for inference on Hailo hardware.",
+      "fields": {
+        "device": {
+          "label": "Device Type",
+          "description": "The device to use for Hailo inference (e.g. 'PCIe', 'M.2')."
+        }
+      }
+    },
+    "memryx": {
+      "label": "MemryX",
+      "description": "MemryX MX3 detector that runs compiled DFP models on MemryX accelerators.",
+      "fields": {
+        "device": {
+          "label": "Device Path",
+          "description": "The device to use for MemryX inference (e.g. 'PCIe')."
+        }
+      }
+    },
+    "onnx": {
+      "label": "ONNX",
+      "description": "ONNX detector for running ONNX models; will use available acceleration backends (CUDA/ROCm/OpenVINO) when available.",
+      "fields": {
+        "device": {
+          "label": "Device Type",
+          "description": "The device to use for ONNX inference (e.g. 'AUTO', 'CPU', 'GPU')."
+        }
+      }
+    },
+    "openvino": {
+      "label": "OpenVINO",
+      "description": "OpenVINO detector for AMD and Intel CPUs, Intel GPUs and Intel VPU hardware.",
+      "fields": {
+        "device": {
+          "label": "Device Type",
+          "description": "The device to use for OpenVINO inference (e.g. 'CPU', 'GPU', 'NPU')."
+        }
+      }
+    },
+    "rknn": {
+      "label": "RKNN",
+      "description": "RKNN detector for Rockchip NPUs; runs compiled RKNN models on Rockchip hardware.",
+      "fields": {
+        "num_cores": {
+          "label": "Number of NPU cores to use.",
+          "description": "The number of NPU cores to use (0 for auto)."
+        }
+      }
+    },
+    "synaptics": {
+      "label": "Synaptics",
+      "description": "Synaptics NPU detector for models in .synap format using the Synap SDK on Synaptics hardware.",
+      "fields": {}
+    },
+    "teflon_tfl": {
+      "label": "Teflon",
+      "description": "Teflon delegate detector for TFLite using Mesa Teflon delegate library to accelerate inference on supported GPUs.",
+      "fields": {}
+    },
+    "tensorrt": {
+      "label": "TensorRT",
+      "description": "TensorRT detector for Nvidia Jetson devices using serialized TensorRT engines for accelerated inference.",
+      "fields": {
+        "device": {
+          "label": "GPU Device Index",
+          "description": "The GPU device index to use."
+        }
+      }
+    },
+    "zmq": {
+      "label": "ZMQ IPC",
+      "description": "ZMQ IPC detector that offloads inference to an external process via a ZeroMQ IPC endpoint.",
+      "fields": {
+        "endpoint": {
+          "label": "ZMQ IPC endpoint",
+          "description": "The ZMQ endpoint to connect to."
+        },
+        "request_timeout_ms": {
+          "label": "ZMQ request timeout in milliseconds",
+          "description": "Timeout for ZMQ requests in milliseconds."
+        },
+        "linger_ms": {
+          "label": "ZMQ socket linger in milliseconds",
+          "description": "Socket linger period in milliseconds."
+        }
+      }
+    }
+  },
+  "levels": {
+    "global": {
+      "logger": {
+        "label": "Logging",
+        "description": "Controls default log verbosity and per-component log level overrides.",
+        "order": [
+          "default",
+          "logs"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/system#frigate-logger",
+        "fields": {
+          "default": {
+            "label": "Logging level",
+            "description": "Default global log verbosity (debug, info, warning, error).",
+            "widget": "select",
+            "default": "info",
+            "enum": [
+              "debug",
+              "info",
+              "warning",
+              "error",
+              "critical"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "logs": {
+            "label": "Per-process log level",
+            "description": "Per-component log level overrides to increase or decrease verbosity for specific modules.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "auth": {
+        "label": "Authentication",
+        "description": "Authentication and session-related settings including cookie and rate limit options.",
+        "order": [
+          "enabled",
+          "reset_admin_password",
+          "cookie_name",
+          "cookie_secure",
+          "session_length",
+          "refresh_time",
+          "native_oauth_url",
+          "failed_login_rate_limit",
+          "trusted_proxies",
+          "hash_iterations",
+          "roles"
+        ],
+        "groups": [],
+        "docs": "/configuration/authentication",
+        "fields": {
+          "enabled": {
+            "label": "Enable authentication",
+            "description": "Enable native authentication for the Frigate UI.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "reset_admin_password": {
+            "label": "Reset admin password",
+            "description": "If true, reset the admin user's password on startup and print the new password in logs.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "cookie_name": {
+            "label": "JWT cookie name",
+            "description": "Name of the cookie used to store the JWT token for native authentication.",
+            "widget": "text",
+            "default": "frigate_token",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "cookie_secure": {
+            "label": "Secure cookie flag",
+            "description": "Set the secure flag on the auth cookie; should be true when using TLS.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "session_length": {
+            "label": "Session length",
+            "description": "Session duration in seconds for JWT-based sessions.",
+            "widget": "number",
+            "default": 86400,
+            "enum": null,
+            "minimum": 60,
+            "maximum": null,
+            "advanced": true
+          },
+          "refresh_time": {
+            "label": "Session refresh window",
+            "description": "When a session is within this many seconds of expiring, refresh it back to full length.",
+            "widget": "number",
+            "default": 1800,
+            "enum": null,
+            "minimum": 30,
+            "maximum": null,
+            "advanced": true
+          },
+          "failed_login_rate_limit": {
+            "label": "Failed login limits",
+            "description": "Rate limiting rules for failed login attempts to reduce brute-force attacks.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "trusted_proxies": {
+            "label": "Trusted proxies",
+            "description": "List of trusted proxy IPs used when determining client IP for rate limiting.",
+            "widget": "tags",
+            "default": [],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "hash_iterations": {
+            "label": "Hash iterations",
+            "description": "Number of PBKDF2-SHA256 iterations to use when hashing user passwords.",
+            "widget": "number",
+            "default": 600000,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "database": {
+        "label": "Database",
+        "description": "Settings for the SQLite database used by Frigate to store tracked object and recording metadata.",
+        "order": [
+          "path"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/system#database",
+        "fields": {
+          "path": {
+            "label": "Database path",
+            "description": "Filesystem path where the Frigate SQLite database file will be stored.",
+            "widget": "text",
+            "default": "/config/frigate.db",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "go2rtc": {
+        "label": "go2rtc",
+        "description": "Settings for the integrated go2rtc restreaming service used for live stream relaying and translation.",
+        "order": [],
+        "groups": [],
+        "docs": null,
+        "fields": {}
+      },
+      "mqtt": {
+        "label": "MQTT",
+        "description": "Settings for connecting and publishing telemetry, snapshots, and event details to an MQTT broker.",
+        "order": [
+          "enabled",
+          "host",
+          "port",
+          "user",
+          "password",
+          "topic_prefix",
+          "client_id",
+          "stats_interval",
+          "qos",
+          "tls_ca_certs",
+          "tls_client_cert",
+          "tls_client_key",
+          "tls_insecure"
+        ],
+        "groups": [],
+        "docs": "/integrations/mqtt",
+        "fields": {
+          "enabled": {
+            "label": "Enable MQTT",
+            "description": "Enable or disable MQTT integration for state, events, and snapshots.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "host": {
+            "label": "MQTT host",
+            "description": "Hostname or IP address of the MQTT broker.",
+            "widget": "text",
+            "default": "",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "port": {
+            "label": "MQTT port",
+            "description": "Port of the MQTT broker (usually 1883 for plain MQTT).",
+            "widget": "number",
+            "default": 1883,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "topic_prefix": {
+            "label": "Topic prefix",
+            "description": "MQTT topic prefix for all Frigate topics; must be unique if running multiple instances.",
+            "widget": "text",
+            "default": "frigate",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "client_id": {
+            "label": "Client ID",
+            "description": "Client identifier used when connecting to the MQTT broker; should be unique per instance.",
+            "widget": "text",
+            "default": "frigate",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stats_interval": {
+            "label": "Stats interval",
+            "description": "Interval in seconds for publishing system and camera stats to MQTT.",
+            "widget": "number",
+            "default": 60,
+            "enum": null,
+            "minimum": 15,
+            "maximum": null,
+            "advanced": true
+          },
+          "user": {
+            "label": "MQTT username",
+            "description": "Optional MQTT username; can be provided via environment variables or secrets.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "password": {
+            "label": "MQTT password",
+            "description": "Optional MQTT password; can be provided via environment variables or secrets.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "tls_ca_certs": {
+            "label": "TLS CA certs",
+            "description": "Path to CA certificate for TLS connections to the broker (for self-signed certs).",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "tls_client_cert": {
+            "label": "Client cert",
+            "description": "Client certificate path for TLS mutual authentication; do not set user/password when using client certs.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "tls_client_key": {
+            "label": "Client key",
+            "description": "Private key path for the client certificate.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "tls_insecure": {
+            "label": "TLS insecure",
+            "description": "Allow insecure TLS connections by skipping hostname verification (not recommended).",
+            "widget": "switch",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "qos": {
+            "label": "MQTT QoS",
+            "description": "Quality of Service level for MQTT publishes/subscriptions (0, 1, or 2).",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "notifications": {
+        "label": "Notifications",
+        "description": "Settings to enable and control notifications for all cameras; can be overridden per-camera.",
+        "order": [
+          "enabled",
+          "email"
+        ],
+        "groups": [],
+        "docs": "/configuration/notifications",
+        "fields": {
+          "enabled": {
+            "label": "Enable notifications",
+            "description": "Enable or disable notifications for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "email": {
+            "label": "Notification email",
+            "description": "Email address used for push notifications or required by certain notification providers.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "cooldown": {
+            "label": "Cooldown period",
+            "description": "Cooldown (seconds) between notifications to avoid spamming recipients.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "networking": {
+        "label": "Networking",
+        "description": "Network-related settings such as IPv6 enablement for Frigate endpoints.",
+        "order": [],
+        "groups": [],
+        "docs": "/configuration/advanced/system#network-configuration",
+        "fields": {
+          "ipv6.enabled": {
+            "label": "Enable IPv6",
+            "description": "Enable IPv6 support for Frigate services (API and UI) where applicable.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "listen.internal": {
+            "label": "Internal port",
+            "description": "Internal listening port for Frigate (default 5000).",
+            "widget": "number",
+            "default": 5000,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "listen.external": {
+            "label": "External port",
+            "description": "External listening port for Frigate (default 8971).",
+            "widget": "number",
+            "default": 8971,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "proxy": {
+        "label": "Proxy",
+        "description": "Settings for integrating Frigate behind a reverse proxy that passes authenticated user headers.",
+        "order": [
+          "header_map",
+          "logout_url",
+          "auth_secret",
+          "default_role",
+          "separator"
+        ],
+        "groups": [],
+        "docs": "/configuration/authentication#proxy",
+        "fields": {
+          "header_map.user": {
+            "label": "User header",
+            "description": "Header containing the authenticated username provided by the upstream proxy.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "header_map.role": {
+            "label": "Role header",
+            "description": "Header containing the authenticated user's role or groups from the upstream proxy.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "header_map.role_map": {
+            "label": "Role mapping",
+            "description": "Map upstream group values to Frigate roles (for example map admin groups to the admin role).",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "logout_url": {
+            "label": "Logout URL",
+            "description": "URL to redirect users to when logging out via the proxy.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "auth_secret": {
+            "label": "Proxy secret",
+            "description": "Optional secret checked against the X-Proxy-Secret header to verify trusted proxies.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "default_role": {
+            "label": "Default role",
+            "description": "Default role assigned to proxy-authenticated users when no role mapping applies.",
+            "widget": "text",
+            "default": "viewer",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "separator": {
+            "label": "Separator character",
+            "description": "Character used to split multiple values provided in proxy headers.",
+            "widget": "text",
+            "default": ",",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "telemetry": {
+        "label": "Telemetry",
+        "description": "System telemetry and stats options including GPU and network bandwidth monitoring.",
+        "order": [
+          "network_interfaces",
+          "stats",
+          "version_check"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/reference",
+        "fields": {
+          "network_interfaces": {
+            "label": "Network interfaces",
+            "description": "List of network interface name prefixes to monitor for bandwidth statistics.",
+            "widget": "tags",
+            "default": [],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stats.amd_gpu_stats": {
+            "label": "AMD GPU stats",
+            "description": "Enable collection of AMD GPU statistics if an AMD GPU is present.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stats.intel_gpu_stats": {
+            "label": "Intel GPU stats",
+            "description": "Enable collection of Intel GPU statistics if an Intel GPU is present.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stats.network_bandwidth": {
+            "label": "Network bandwidth",
+            "description": "Enable per-process network bandwidth monitoring for camera ffmpeg processes and detectors (requires capabilities).",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stats.intel_gpu_device": {
+            "label": "Intel GPU device",
+            "description": "PCI bus address or DRM device path (e.g. /dev/dri/card1) used to pin Intel GPU stats to a specific device when multiple are present.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "version_check": {
+            "label": "Version check",
+            "description": "Enable an outbound check to detect if a newer Frigate version is available.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "tls": {
+        "label": "TLS",
+        "description": "TLS settings for Frigate's web endpoints (port 8971).",
+        "order": [
+          "enabled",
+          "cert",
+          "key"
+        ],
+        "groups": [],
+        "docs": "/configuration/tls",
+        "fields": {
+          "enabled": {
+            "label": "Enable TLS",
+            "description": "Enable TLS for Frigate's web UI and API on the configured TLS port.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "ui": {
+        "label": "UI",
+        "description": "User interface preferences such as timezone, time/date formatting, and units.",
+        "order": [
+          "timezone",
+          "time_format",
+          "unit_system"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/reference",
+        "fields": {
+          "timezone": {
+            "label": "Timezone",
+            "description": "Optional timezone to display across the UI (defaults to browser local time if unset).",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "time_format": {
+            "label": "Time format",
+            "description": "Time format to use in the UI (browser, 12hour, or 24hour).",
+            "widget": "select",
+            "default": "browser",
+            "enum": [
+              "browser",
+              "12hour",
+              "24hour"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "unit_system": {
+            "label": "Unit system",
+            "description": "Unit system for display (metric or imperial) used in the UI and MQTT.",
+            "widget": "select",
+            "default": "metric",
+            "enum": [
+              "imperial",
+              "metric"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "model": {
+        "label": "Detection model",
+        "description": "Settings to configure a custom object detection model and its input shape.",
+        "order": [
+          "path",
+          "labelmap_path",
+          "width",
+          "height",
+          "input_pixel_format",
+          "input_tensor",
+          "input_dtype",
+          "model_type"
+        ],
+        "groups": [],
+        "docs": "/configuration/object_detectors#model",
+        "fields": {
+          "path": {
+            "label": "Custom object detector model path",
+            "description": "Path to a custom detection model file (or plus://<model_id> for Frigate+ models).",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "labelmap_path": {
+            "label": "Label map for custom object detector",
+            "description": "Path to a labelmap file that maps numeric classes to string labels for the detector.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "width": {
+            "label": "Object detection model input width",
+            "description": "Width of the model input tensor in pixels.",
+            "widget": "number",
+            "default": 320,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Object detection model input height",
+            "description": "Height of the model input tensor in pixels.",
+            "widget": "number",
+            "default": 320,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "input_tensor": {
+            "label": "Model Input Tensor Shape",
+            "description": "Tensor format expected by the model: 'nhwc' or 'nchw'.",
+            "widget": "select",
+            "default": "nhwc",
+            "enum": [
+              "nchw",
+              "nhwc",
+              "hwnc",
+              "hwcn"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "input_pixel_format": {
+            "label": "Model Input Pixel Color Format",
+            "description": "Pixel colorspace expected by the model: 'rgb', 'bgr', or 'yuv'.",
+            "widget": "select",
+            "default": "rgb",
+            "enum": [
+              "rgb",
+              "bgr",
+              "yuv"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "input_dtype": {
+            "label": "Model Input D Type",
+            "description": "Data type of the model input tensor (for example 'float32').",
+            "widget": "select",
+            "default": "int",
+            "enum": [
+              "float",
+              "float_denorm",
+              "int"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "model_type": {
+            "label": "Object Detection Model Type",
+            "description": "Detector model architecture type (ssd, yolox, yolonas) used by some detectors for optimization.",
+            "widget": "select",
+            "default": "ssd",
+            "enum": [
+              "dfine",
+              "rfdetr",
+              "ssd",
+              "yolox",
+              "yolonas",
+              "yolo-generic"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "audio": {
+        "label": "Audio detection",
+        "description": "Settings for audio-based event detection for all cameras; can be overridden per-camera.",
+        "order": [
+          "enabled",
+          "listen",
+          "filters",
+          "min_volume",
+          "max_not_heard",
+          "num_threads"
+        ],
+        "groups": [
+          {
+            "key": "detection",
+            "label": "Global Detection",
+            "fields": [
+              "listen",
+              "filters"
+            ]
+          },
+          {
+            "key": "sensitivity",
+            "label": "Global Sensitivity",
+            "fields": [
+              "min_volume",
+              "max_not_heard"
+            ]
+          }
+        ],
+        "docs": "/configuration/audio_detectors",
+        "fields": {
+          "enabled": {
+            "label": "Enable audio detection",
+            "description": "Enable or disable audio event detection for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "max_not_heard": {
+            "label": "End timeout",
+            "description": "Amount of seconds without the configured audio type before the audio event is ended.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "min_volume": {
+            "label": "Minimum volume",
+            "description": "Minimum RMS volume threshold required to run audio detection; lower values increase sensitivity (e.g., 200 high, 500 medium, 1000 low).",
+            "widget": "number",
+            "default": 500,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "listen": {
+            "label": "Listen types",
+            "description": "List of audio event types to detect (for example: bark, fire_alarm, speech, yell).",
+            "widget": "tags",
+            "default": [
+              "bark",
+              "fire_alarm",
+              "speech",
+              "yell"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "filters": {
+            "label": "Audio filters",
+            "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "num_threads": {
+            "label": "Detection threads",
+            "description": "Number of threads to use for audio detection processing.",
+            "widget": "number",
+            "default": 2,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "birdseye": {
+        "label": "Birdseye",
+        "description": "Settings for the Birdseye composite view that composes multiple camera feeds into a single layout.",
+        "order": [
+          "enabled",
+          "restream",
+          "width",
+          "height",
+          "quality",
+          "mode",
+          "layout",
+          "inactivity_threshold",
+          "idle_heartbeat_fps"
+        ],
+        "groups": [],
+        "docs": "/configuration/birdseye",
+        "fields": {
+          "enabled": {
+            "label": "Enable Birdseye",
+            "description": "Enable or disable the Birdseye view feature.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "mode": {
+            "label": "Tracking mode",
+            "description": "Mode for including cameras in Birdseye: 'objects', 'motion', or 'continuous'.",
+            "widget": "select",
+            "default": "objects",
+            "enum": [
+              "objects",
+              "motion",
+              "continuous"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "restream": {
+            "label": "Restream RTSP",
+            "description": "Re-stream the Birdseye output as an RTSP feed; enabling this will keep Birdseye running continuously.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "width": {
+            "label": "Width",
+            "description": "Output width (pixels) of the composed Birdseye frame.",
+            "widget": "number",
+            "default": 1280,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "height": {
+            "label": "Height",
+            "description": "Output height (pixels) of the composed Birdseye frame.",
+            "widget": "number",
+            "default": 720,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "quality": {
+            "label": "Encoding quality",
+            "description": "Encoding quality for the Birdseye mpeg1 feed (1 highest quality, 31 lowest).",
+            "widget": "range",
+            "default": 8,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 31,
+            "advanced": true
+          },
+          "inactivity_threshold": {
+            "label": "Inactivity threshold",
+            "description": "Seconds of inactivity after which a camera will stop being shown in Birdseye.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": true
+          },
+          "layout.scaling_factor": {
+            "label": "Scaling factor",
+            "description": "Scaling factor used by the layout calculator (range 1.0 to 5.0).",
+            "widget": "range",
+            "default": 2,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 5,
+            "advanced": false
+          },
+          "layout.max_cameras": {
+            "label": "Max cameras",
+            "description": "Maximum number of cameras to display at once in Birdseye; shows the most recent cameras.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "idle_heartbeat_fps": {
+            "label": "Idle heartbeat FPS",
+            "description": "Frames-per-second to resend the last composed Birdseye frame when idle; set to 0 to disable.",
+            "widget": "range",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 10,
+            "advanced": false
+          }
+        }
+      },
+      "detect": {
+        "label": "Object Detection",
+        "description": "Settings for the detection/detect role used to run object detection and initialize trackers.",
+        "order": [
+          "enabled",
+          "width",
+          "height",
+          "fps",
+          "min_initialized",
+          "max_disappeared",
+          "annotation_offset",
+          "stationary",
+          "stationary.interval",
+          "stationary.threshold",
+          "stationary.max_frames"
+        ],
+        "groups": [
+          {
+            "key": "resolution",
+            "label": "Global Resolution",
+            "fields": [
+              "width",
+              "height",
+              "fps"
+            ]
+          },
+          {
+            "key": "tracking",
+            "label": "Global Tracking",
+            "fields": [
+              "min_initialized",
+              "max_disappeared"
+            ]
+          }
+        ],
+        "docs": "/configuration/camera_specific",
+        "fields": {
+          "enabled": {
+            "label": "Enable object detection",
+            "description": "Enable or disable object detection for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Detect height",
+            "description": "Height (pixels) of frames used for the detect stream; leave empty to use the native stream resolution.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "width": {
+            "label": "Detect width",
+            "description": "Width (pixels) of frames used for the detect stream; leave empty to use the native stream resolution.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "fps": {
+            "label": "Detect FPS",
+            "description": "Desired frames per second to run detection on; lower values reduce CPU usage (recommended value is 5, only set higher - at most 10 - if tracking extremely fast moving objects).",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "min_initialized": {
+            "label": "Minimum initialization frames",
+            "description": "Number of consecutive detection hits required before creating a tracked object. Increase to reduce false initializations. Default value is fps divided by 2.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 2,
+            "maximum": null,
+            "advanced": true
+          },
+          "max_disappeared": {
+            "label": "Maximum disappeared frames",
+            "description": "Number of frames without a detection before a tracked object is considered gone.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "stationary.interval": {
+            "label": "Stationary interval",
+            "description": "How often (in frames) to run a detection check to confirm a stationary object.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.threshold": {
+            "label": "Stationary threshold",
+            "description": "Number of frames with no position change required to mark an object as stationary.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.max_frames.default": {
+            "label": "Default max frames",
+            "description": "Default maximum frames to track a stationary object before stopping.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.max_frames.objects": {
+            "label": "Object max frames",
+            "description": "Per-object overrides for maximum frames to track stationary objects.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.classifier": {
+            "label": "Enable visual classifier",
+            "description": "Use a visual classifier to detect truly stationary objects even when bounding boxes jitter.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "annotation_offset": {
+            "label": "Annotation offset",
+            "description": "Milliseconds to shift detect annotations to better align timeline bounding boxes with recordings; can be positive or negative.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "ffmpeg": {
+        "label": "FFmpeg",
+        "description": "FFmpeg settings including binary path, args, hwaccel options, and per-role output args.",
+        "order": [
+          "hwaccel_args",
+          "path",
+          "global_args",
+          "input_args",
+          "output_args",
+          "apple_compatibility",
+          "gpu"
+        ],
+        "groups": [],
+        "docs": "/configuration/ffmpeg_presets",
+        "fields": {
+          "path": {
+            "label": "FFmpeg path",
+            "description": "Path to the FFmpeg binary to use or a version alias (\"7.0\" or \"8.0\").",
+            "widget": "text",
+            "default": "default",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "global_args": {
+            "label": "FFmpeg global arguments",
+            "description": "Global arguments passed to FFmpeg processes.",
+            "widget": "text",
+            "default": [
+              "-hide_banner",
+              "-loglevel",
+              "warning",
+              "-threads",
+              "2"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "hwaccel_args": {
+            "label": "Hardware acceleration arguments",
+            "description": "Hardware acceleration arguments for FFmpeg. Provider-specific presets are recommended.",
+            "widget": "text",
+            "default": "auto",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "input_args": {
+            "label": "Input arguments",
+            "description": "Input arguments applied to FFmpeg input streams.",
+            "widget": "text",
+            "default": "preset-rtsp-generic",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "output_args.detect": {
+            "label": "Detect output arguments",
+            "description": "Default output arguments for detect role streams.",
+            "widget": "text",
+            "default": [
+              "-threads",
+              "2",
+              "-f",
+              "rawvideo",
+              "-pix_fmt",
+              "yuv420p"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "output_args.record": {
+            "label": "Record output arguments",
+            "description": "Default output arguments for record role streams.",
+            "widget": "text",
+            "default": "preset-record-generic-audio-aac",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "apple_compatibility": {
+            "label": "Apple compatibility",
+            "description": "Enable HEVC tagging for better Apple player compatibility when recording H.265.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "gpu": {
+            "label": "GPU index",
+            "description": "Default GPU index used for hardware acceleration if available.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "live": {
+        "label": "Live playback",
+        "description": "Settings to control the jsmpeg live stream resolution and quality. This does not affect restreamed cameras that use go2rtc for live view.",
+        "order": [
+          "streams",
+          "height",
+          "quality"
+        ],
+        "groups": [],
+        "docs": "/configuration/live",
+        "fields": {
+          "height": {
+            "label": "Live height",
+            "description": "Height (pixels) to render the jsmpeg live stream in the Web UI; must be <= detect stream height.",
+            "widget": "number",
+            "default": 720,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "quality": {
+            "label": "Live quality",
+            "description": "Encoding quality for the jsmpeg stream (1 highest, 31 lowest).",
+            "widget": "range",
+            "default": 8,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 31,
+            "advanced": true
+          }
+        }
+      },
+      "motion": {
+        "label": "Motion detection",
+        "description": "Default motion detection settings applied to cameras unless overridden per-camera.",
+        "order": [
+          "enabled",
+          "threshold",
+          "lightning_threshold",
+          "skip_motion_threshold",
+          "improve_contrast",
+          "contour_area",
+          "delta_alpha",
+          "frame_alpha",
+          "frame_height",
+          "mqtt_off_delay"
+        ],
+        "groups": [
+          {
+            "key": "sensitivity",
+            "label": "Global Sensitivity",
+            "fields": [
+              "threshold",
+              "contour_area"
+            ]
+          },
+          {
+            "key": "algorithm",
+            "label": "Global Algorithm",
+            "fields": [
+              "improve_contrast",
+              "delta_alpha",
+              "frame_alpha"
+            ]
+          }
+        ],
+        "docs": "/configuration/motion_detection",
+        "fields": {
+          "enabled": {
+            "label": "Enable motion detection",
+            "description": "Enable or disable motion detection for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "threshold": {
+            "label": "Motion threshold",
+            "description": "Pixel difference threshold used by the motion detector; higher values reduce sensitivity (range 1-255).",
+            "widget": "range",
+            "default": 30,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 255,
+            "advanced": false
+          },
+          "lightning_threshold": {
+            "label": "Lightning threshold",
+            "description": "Threshold to detect and ignore brief lighting spikes (lower is more sensitive, values between 0.3 and 1.0). This does not prevent motion detection entirely; it merely causes the detector to stop analyzing additional frames once the threshold is exceeded. Motion-based recordings are still created during these events.",
+            "widget": "range",
+            "default": 0.8,
+            "enum": null,
+            "minimum": 0.3,
+            "maximum": 1,
+            "advanced": true
+          },
+          "skip_motion_threshold": {
+            "label": "Skip motion threshold",
+            "description": "If set to a value between 0.0 and 1.0, and more than this fraction of the image changes in a single frame, the detector will return no motion boxes and immediately recalibrate. This can save CPU and reduce false positives during lightning, storms, etc., but may miss real events such as a PTZ camera auto‑tracking an object. The trade‑off is between dropping a few megabytes of recordings versus reviewing a couple short clips. Leave unset (None) to disable this feature.",
+            "widget": "range",
+            "default": null,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "improve_contrast": {
+            "label": "Improve contrast",
+            "description": "Apply contrast improvement to frames before motion analysis to help detection.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "contour_area": {
+            "label": "Contour area",
+            "description": "Minimum contour area in pixels required for a motion contour to be counted.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "delta_alpha": {
+            "label": "Delta alpha",
+            "description": "Alpha blending factor used in frame differencing for motion calculation.",
+            "widget": "number",
+            "default": 0.2,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "frame_alpha": {
+            "label": "Frame alpha",
+            "description": "Alpha value used when blending frames for motion preprocessing.",
+            "widget": "number",
+            "default": 0.01,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "frame_height": {
+            "label": "Frame height",
+            "description": "Height in pixels to scale frames to when computing motion.",
+            "widget": "number",
+            "default": 100,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "mqtt_off_delay": {
+            "label": "MQTT off delay",
+            "description": "Seconds to wait after last motion before publishing an MQTT 'off' state.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "objects": {
+        "label": "Objects",
+        "description": "Object tracking defaults including which labels to track and per-object filters.",
+        "order": [
+          "track",
+          "alert",
+          "detect",
+          "filters"
+        ],
+        "groups": [
+          {
+            "key": "tracking",
+            "label": "Global Tracking",
+            "fields": [
+              "track",
+              "alert",
+              "detect"
+            ]
+          },
+          {
+            "key": "filtering",
+            "label": "Global Filtering",
+            "fields": [
+              "filters"
+            ]
+          }
+        ],
+        "docs": "/configuration/object_filters",
+        "fields": {
+          "track": {
+            "label": "Objects to track",
+            "description": "List of object labels to track for all cameras; can be overridden per-camera.",
+            "widget": "tags",
+            "default": [
+              "person"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "filters": {
+            "label": "Object filters",
+            "description": "Filters applied to detected objects to reduce false positives (area, ratio, confidence).",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.enabled": {
+            "label": "Enable GenAI",
+            "description": "Enable GenAI generation of descriptions for tracked objects by default.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.use_snapshot": {
+            "label": "Use snapshots",
+            "description": "Use object snapshots instead of thumbnails for GenAI description generation.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.prompt": {
+            "label": "Caption prompt",
+            "description": "Default prompt template used when generating descriptions with GenAI.",
+            "widget": "text",
+            "default": "Analyze the sequence of images containing the {label}. Focus on the likely intent or behavior of the {label} based on its actions and movement, rather than describing its appearance or the surroundings. Consider what the {label} is doing, why, and what it might do next.",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.object_prompts": {
+            "label": "Object prompts",
+            "description": "Per-object prompts to customize GenAI outputs for specific labels.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.objects": {
+            "label": "GenAI objects",
+            "description": "List of object labels to send to GenAI by default.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.debug_save_thumbnails": {
+            "label": "Save thumbnails",
+            "description": "Save thumbnails sent to GenAI for debugging and review.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.send_triggers.tracked_object_end": {
+            "label": "Send on end",
+            "description": "Send a request to GenAI when the tracked object ends.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.send_triggers.after_significant_updates": {
+            "label": "Early GenAI trigger",
+            "description": "Send a request to GenAI after a specified number of significant updates for the tracked object.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "record": {
+        "label": "Recording",
+        "description": "Recording and retention settings applied to cameras unless overridden per-camera.",
+        "order": [
+          "enabled",
+          "expire_interval",
+          "continuous",
+          "motion",
+          "alerts",
+          "detections",
+          "preview",
+          "export"
+        ],
+        "groups": [
+          {
+            "key": "retention",
+            "label": "Global Retention",
+            "fields": [
+              "continuous",
+              "motion"
+            ]
+          },
+          {
+            "key": "events",
+            "label": "Global Events",
+            "fields": [
+              "alerts",
+              "detections"
+            ]
+          }
+        ],
+        "docs": "/configuration/record",
+        "fields": {
+          "enabled": {
+            "label": "Enable recording",
+            "description": "Enable or disable recording for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "expire_interval": {
+            "label": "Record cleanup interval",
+            "description": "Minutes between cleanup passes that remove expired recording segments.",
+            "widget": "number",
+            "default": 60,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "continuous.days": {
+            "label": "Retention days",
+            "description": "Days to retain recordings.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "motion.days": {
+            "label": "Retention days",
+            "description": "Days to retain recordings.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.pre_capture": {
+            "label": "Pre-capture seconds",
+            "description": "Number of seconds before the detection event to include in the recording.",
+            "widget": "range",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 60,
+            "advanced": false
+          },
+          "detections.post_capture": {
+            "label": "Post-capture seconds",
+            "description": "Number of seconds after the detection event to include in the recording.",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.retain.days": {
+            "label": "Retention days",
+            "description": "Number of days to retain recordings of detection events.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.retain.mode": {
+            "label": "Retention mode",
+            "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
+            "widget": "select",
+            "default": "motion",
+            "enum": [
+              "all",
+              "motion",
+              "active_objects"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.pre_capture": {
+            "label": "Pre-capture seconds",
+            "description": "Number of seconds before the detection event to include in the recording.",
+            "widget": "range",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 60,
+            "advanced": false
+          },
+          "alerts.post_capture": {
+            "label": "Post-capture seconds",
+            "description": "Number of seconds after the detection event to include in the recording.",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.retain.days": {
+            "label": "Retention days",
+            "description": "Number of days to retain recordings of detection events.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.retain.mode": {
+            "label": "Retention mode",
+            "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
+            "widget": "select",
+            "default": "motion",
+            "enum": [
+              "all",
+              "motion",
+              "active_objects"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "export.hwaccel_args": {
+            "label": "Export hwaccel args",
+            "description": "Hardware acceleration args to use for export/transcode operations.",
+            "widget": "text",
+            "default": "auto",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "export.max_concurrent": {
+            "label": "Maximum concurrent exports",
+            "description": "Maximum number of export jobs to process at the same time.",
+            "widget": "number",
+            "default": 3,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          },
+          "preview.quality": {
+            "label": "Preview quality",
+            "description": "Preview quality level (very_low, low, medium, high, very_high).",
+            "widget": "select",
+            "default": "medium",
+            "enum": [
+              "very_low",
+              "low",
+              "medium",
+              "high",
+              "very_high"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "review": {
+        "label": "Review",
+        "description": "Settings that control alerts, detections, and GenAI review summaries used by the UI and storage.",
+        "order": [
+          "alerts",
+          "detections",
+          "genai",
+          "genai.enabled"
+        ],
+        "groups": [],
+        "docs": "/configuration/review",
+        "fields": {
+          "alerts.enabled": {
+            "label": "Enable alerts",
+            "description": "Enable or disable alert generation for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.labels": {
+            "label": "Alert labels",
+            "description": "List of object labels that qualify as alerts (for example: car, person).",
+            "widget": "tags",
+            "default": [
+              "person",
+              "car"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.required_zones": {
+            "label": "Required zones",
+            "description": "Zones that an object must enter to be considered an alert; leave empty to allow any zone.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.cutoff_time": {
+            "label": "Alerts cutoff time",
+            "description": "Seconds to wait after no alert-causing activity before cutting off an alert.",
+            "widget": "number",
+            "default": 40,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.enabled": {
+            "label": "Enable detections",
+            "description": "Enable or disable detection events for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.labels": {
+            "label": "Detection labels",
+            "description": "List of object labels that qualify as detection events.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.required_zones": {
+            "label": "Required zones",
+            "description": "Zones that an object must enter to be considered a detection; leave empty to allow any zone.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.cutoff_time": {
+            "label": "Detections cutoff time",
+            "description": "Seconds to wait after no detection-causing activity before cutting off a detection.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.enabled": {
+            "label": "Enable GenAI descriptions",
+            "description": "Enable or disable GenAI-generated descriptions and summaries for review items.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.alerts": {
+            "label": "Enable GenAI for alerts",
+            "description": "Use GenAI to generate descriptions for alert items.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.detections": {
+            "label": "Enable GenAI for detections",
+            "description": "Use GenAI to generate descriptions for detection items.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.image_source": {
+            "label": "Review image source",
+            "description": "Source of images sent to GenAI ('preview' or 'recordings'); 'recordings' uses higher quality frames but more tokens.",
+            "widget": "select",
+            "default": "preview",
+            "enum": [
+              "preview",
+              "recordings"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.additional_concerns": {
+            "label": "Additional concerns",
+            "description": "A list of additional concerns or notes the GenAI should consider when evaluating activity on this camera.",
+            "widget": "tags",
+            "default": [],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.debug_save_thumbnails": {
+            "label": "Save thumbnails",
+            "description": "Save thumbnails that are sent to the GenAI provider for debugging and review.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.preferred_language": {
+            "label": "Preferred language",
+            "description": "Preferred language to request from the GenAI provider for generated responses.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.activity_context_prompt": {
+            "label": "Activity context prompt",
+            "description": "Custom prompt describing what is and is not suspicious activity to provide context for GenAI summaries.",
+            "widget": "text",
+            "default": "### Normal Activity Indicators (Level 0)\n- Known/verified people in any zone at any time\n- People with pets in residential areas\n- Routine residential vehicle access during daytime/evening (6 AM - 10 PM): entering, exiting, loading/unloading items — normal commute and travel patterns\n- Deliveries or services during daytime/evening (6 AM - 10 PM): carrying packages to doors/porches, placing items, leaving\n- Services/maintenance workers with visible tools, uniforms, or service vehicles during daytime\n- Activity confined to public areas only (sidewalks, streets) without entering property at any time\n\n### Suspicious Activity Indicators (Level 1)\n- **Checking or probing vehicle/building access**: trying handles without entering, peering through windows, examining multiple vehicles, or possessing break-in tools — Level 1\n- **Unidentified person in private areas (driveways, near vehicles/buildings) during late night/early morning (11 PM - 5 AM)** — ALWAYS Level 1 regardless of activity or duration\n- Taking items that don't belong to them (packages, objects from porches/driveways)\n- Climbing or jumping fences/barriers to access property\n- Attempting to conceal actions or items from view\n- Prolonged loitering: remaining in same area without visible purpose throughout most of the sequence\n\n### Critical Threat Indicators (Level 2)\n- Holding break-in tools (crowbars, pry bars, bolt cutters)\n- Weapons visible (guns, knives, bats used aggressively)\n- Forced entry in progress\n- Physical aggression or violence\n- Active property damage or theft in progress\n\n### Assessment Guidance\nEvaluate in this order:\n\n1. **If person is verified/known** → Level 0 regardless of time or activity\n2. **If person is unidentified:**\n   - Check time: If late night/early morning (11 PM - 5 AM) AND in private areas (driveways, near vehicles/buildings) → Level 1\n   - Check actions: If probing access (trying handles without entering, checking multiple vehicles), taking items, climbing → Level 1\n   - Otherwise, if daytime/evening (6 AM - 10 PM) with clear legitimate purpose (delivery, service, routine vehicle access) → Level 0\n3. **Escalate to Level 2 if:** Weapons, break-in tools, forced entry in progress, violence, or active property damage visible (escalates from Level 0 or 1)\n\nThe mere presence of an unidentified person in private areas during late night hours is inherently suspicious and warrants human review, regardless of what activity they appear to be doing or how brief the sequence is.",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "snapshots": {
+        "label": "Snapshots",
+        "description": "Settings for API-generated snapshots of tracked objects for all cameras; can be overridden per-camera.",
+        "order": [
+          "enabled",
+          "bounding_box",
+          "crop",
+          "quality",
+          "timestamp",
+          "required_zones",
+          "retain"
+        ],
+        "groups": [
+          {
+            "key": "display",
+            "label": "Global Display",
+            "fields": [
+              "bounding_box",
+              "crop",
+              "quality",
+              "timestamp"
+            ]
+          }
+        ],
+        "docs": "/configuration/snapshots",
+        "fields": {
+          "enabled": {
+            "label": "Enable snapshots",
+            "description": "Enable or disable saving snapshots for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "timestamp": {
+            "label": "Timestamp overlay",
+            "description": "Overlay a timestamp on snapshots from API.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "bounding_box": {
+            "label": "Bounding box overlay",
+            "description": "Draw bounding boxes for tracked objects on snapshots from API.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "crop": {
+            "label": "Crop snapshot",
+            "description": "Crop snapshots from API to the detected object's bounding box.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Snapshot height",
+            "description": "Height (pixels) to resize snapshots from API to; leave empty to preserve original size.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "retain.default": {
+            "label": "Default retention",
+            "description": "Default number of days to retain snapshots.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "retain.objects": {
+            "label": "Object retention",
+            "description": "Per-object overrides for snapshot retention days.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "quality": {
+            "label": "Snapshot quality",
+            "description": "Encode quality for saved snapshots (0-100).",
+            "widget": "range",
+            "default": 60,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 100,
+            "advanced": true
+          }
+        }
+      },
+      "timestamp_style": {
+        "label": "Timestamp style",
+        "description": "Styling options for in-feed timestamps applied to debug view and snapshots.",
+        "order": [
+          "position",
+          "format",
+          "thickness",
+          "color"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/reference",
+        "fields": {
+          "position": {
+            "label": "Timestamp position",
+            "description": "Position of the timestamp on the image (tl/tr/bl/br).",
+            "widget": "select",
+            "default": "tl",
+            "enum": [
+              "tl",
+              "tr",
+              "bl",
+              "br"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "format": {
+            "label": "Timestamp format",
+            "description": "Datetime format string used for timestamps (Python datetime format codes).",
+            "widget": "text",
+            "default": "%m/%d/%Y %H:%M:%S",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "color.red": {
+            "label": "Red",
+            "description": "Red component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "color.green": {
+            "label": "Green",
+            "description": "Green component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "color.blue": {
+            "label": "Blue",
+            "description": "Blue component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "thickness": {
+            "label": "Timestamp thickness",
+            "description": "Line thickness of the timestamp text.",
+            "widget": "number",
+            "default": 2,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "audio_transcription": {
+        "label": "Audio transcription",
+        "description": "Settings for live and speech audio transcription used for events and live captions.",
+        "order": [
+          "enabled",
+          "language",
+          "device",
+          "model_size"
+        ],
+        "groups": [],
+        "docs": "/configuration/audio_detectors#audio-transcription",
+        "fields": {
+          "enabled": {
+            "label": "Enable audio transcription",
+            "description": "Enable or disable automatic audio transcription for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "language": {
+            "label": "Transcription language",
+            "description": "Language code used for transcription/translation (for example 'en' for English). See https://whisper-api.com/docs/languages/ for supported language codes.",
+            "widget": "text",
+            "default": "en",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "device": {
+            "label": "Transcription device",
+            "description": "Device key (CPU/GPU) to run the transcription model on. Only NVIDIA CUDA GPUs are currently supported for transcription.",
+            "widget": "select",
+            "default": "CPU",
+            "enum": [
+              "GPU",
+              "CPU"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "model_size": {
+            "label": "Model size",
+            "description": "Model size to use for offline audio event transcription.",
+            "widget": "select",
+            "default": "small",
+            "enum": [
+              "small",
+              "large"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "classification": {
+        "label": "Object classification",
+        "description": "Settings for classification models used to refine object labels or state classification.",
+        "order": [],
+        "groups": [],
+        "docs": "/configuration/custom_classification/object_classification",
+        "fields": {
+          "bird.enabled": {
+            "label": "Bird classification",
+            "description": "Enable or disable bird classification.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "bird.threshold": {
+            "label": "Minimum score",
+            "description": "Minimum classification score required to accept a bird classification.",
+            "widget": "number",
+            "default": 0.9,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": false
+          }
+        }
+      },
+      "semantic_search": {
+        "label": "Semantic Search",
+        "description": "Settings for Semantic Search which builds and queries object embeddings to find similar items.",
+        "order": [
+          "enabled",
+          "reindex",
+          "model",
+          "model_size",
+          "device"
+        ],
+        "groups": [],
+        "docs": "/configuration/semantic_search",
+        "fields": {
+          "enabled": {
+            "label": "Enable semantic search",
+            "description": "Enable or disable the semantic search feature.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "model": {
+            "label": "Semantic search model or GenAI provider name",
+            "description": "The embeddings model to use for semantic search (for example 'jinav1'), or the name of a GenAI provider with the embeddings role.",
+            "widget": "select",
+            "default": "jinav1",
+            "enum": [
+              "jinav1",
+              "jinav2"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "model_size": {
+            "label": "Model size",
+            "description": "Select model size; 'small' runs on CPU and 'large' typically requires GPU.",
+            "widget": "select",
+            "default": "small",
+            "enum": [
+              "small",
+              "large"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "device": {
+            "label": "Device",
+            "description": "This is an override, to target a specific device. See https://onnxruntime.ai/docs/execution-providers/ for more information",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "face_recognition": {
+        "label": "Face recognition",
+        "description": "Settings for face detection and recognition for all cameras; can be overridden per-camera.",
+        "order": [
+          "enabled",
+          "model_size",
+          "unknown_score",
+          "detection_threshold",
+          "recognition_threshold",
+          "min_area",
+          "min_faces",
+          "save_attempts",
+          "blur_confidence_filter",
+          "device"
+        ],
+        "groups": [],
+        "docs": "/configuration/face_recognition",
+        "fields": {
+          "enabled": {
+            "label": "Enable face recognition",
+            "description": "Enable or disable face recognition for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "model_size": {
+            "label": "Model size",
+            "description": "Model size to use for face embeddings (small/large); larger may require GPU.",
+            "widget": "select",
+            "default": "small",
+            "enum": [
+              "small",
+              "large"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "unknown_score": {
+            "label": "Unknown score threshold",
+            "description": "Distance threshold below which a face is considered a potential match (higher = stricter).",
+            "widget": "number",
+            "default": 0.8,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "detection_threshold": {
+            "label": "Detection threshold",
+            "description": "Minimum detection confidence required to consider a face detection valid.",
+            "widget": "number",
+            "default": 0.7,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "recognition_threshold": {
+            "label": "Recognition threshold",
+            "description": "Face embedding distance threshold to consider two faces a match.",
+            "widget": "number",
+            "default": 0.9,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "min_area": {
+            "label": "Minimum face area",
+            "description": "Minimum area (pixels) of a detected face box required to attempt recognition.",
+            "widget": "number",
+            "default": 750,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "min_faces": {
+            "label": "Minimum faces",
+            "description": "Minimum number of face recognitions required before applying a recognized sub-label to a person.",
+            "widget": "number",
+            "default": 1,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 6,
+            "advanced": true
+          },
+          "save_attempts": {
+            "label": "Save attempts",
+            "description": "Number of face recognition attempts to retain for recent recognition UI.",
+            "widget": "number",
+            "default": 200,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": true
+          },
+          "blur_confidence_filter": {
+            "label": "Blur confidence filter",
+            "description": "Adjust confidence scores based on image blur to reduce false positives for poor quality faces.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "device": {
+            "label": "Device",
+            "description": "This is an override, to target a specific device. See https://onnxruntime.ai/docs/execution-providers/ for more information",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "lpr": {
+        "label": "License Plate Recognition",
+        "description": "License plate recognition settings including detection thresholds, formatting, and known plates.",
+        "order": [
+          "enabled",
+          "model_size",
+          "detection_threshold",
+          "min_area",
+          "recognition_threshold",
+          "min_plate_length",
+          "format",
+          "match_distance",
+          "known_plates",
+          "enhancement",
+          "debug_save_plates",
+          "device",
+          "replace_rules"
+        ],
+        "groups": [],
+        "docs": "/configuration/license_plate_recognition",
+        "fields": {
+          "enabled": {
+            "label": "Enable LPR",
+            "description": "Enable or disable license plate recognition for all cameras; can be overridden per-camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "model_size": {
+            "label": "Model size",
+            "description": "Model size used for text detection/recognition. Most users should use 'small'.",
+            "widget": "select",
+            "default": "small",
+            "enum": [
+              "small",
+              "large"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detection_threshold": {
+            "label": "Detection threshold",
+            "description": "Detection confidence threshold to begin running OCR on a suspected plate.",
+            "widget": "number",
+            "default": 0.7,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "min_area": {
+            "label": "Minimum plate area",
+            "description": "Minimum plate area (pixels) required to attempt recognition.",
+            "widget": "number",
+            "default": 1000,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "recognition_threshold": {
+            "label": "Recognition threshold",
+            "description": "Confidence threshold required for recognized plate text to be attached as a sub-label.",
+            "widget": "number",
+            "default": 0.9,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "min_plate_length": {
+            "label": "Min plate length",
+            "description": "Minimum number of characters a recognized plate must contain to be considered valid.",
+            "widget": "number",
+            "default": 4,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "format": {
+            "label": "Plate format regex",
+            "description": "Optional regex to validate recognized plate strings against an expected format.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "match_distance": {
+            "label": "Match distance",
+            "description": "Number of character mismatches allowed when comparing detected plates to known plates.",
+            "widget": "number",
+            "default": 1,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": true
+          },
+          "known_plates": {
+            "label": "Known plates",
+            "description": "List of plates or regexes to specially track or alert on.",
+            "widget": "object",
+            "default": {},
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "enhancement": {
+            "label": "Enhancement level",
+            "description": "Enhancement level (0-10) to apply to plate crops prior to OCR; higher values may not always improve results, levels above 5 may only work with night time plates and should be used with caution.",
+            "widget": "range",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 10,
+            "advanced": true
+          },
+          "debug_save_plates": {
+            "label": "Save debug plates",
+            "description": "Save plate crop images for debugging LPR performance.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "device": {
+            "label": "Device",
+            "description": "This is an override, to target a specific device. See https://onnxruntime.ai/docs/execution-providers/ for more information",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "replace_rules": {
+            "label": "Replacement rules",
+            "description": "Regex replacement rules used to normalize detected plate strings before matching.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      }
+    },
+    "camera": {
+      "audio": {
+        "label": "Audio detection",
+        "description": "Settings for audio-based event detection for this camera.",
+        "order": [
+          "enabled",
+          "listen",
+          "filters",
+          "min_volume",
+          "max_not_heard",
+          "num_threads"
+        ],
+        "groups": [
+          {
+            "key": "detection",
+            "label": "Detection",
+            "fields": [
+              "listen",
+              "filters"
+            ]
+          },
+          {
+            "key": "sensitivity",
+            "label": "Sensitivity",
+            "fields": [
+              "min_volume",
+              "max_not_heard"
+            ]
+          }
+        ],
+        "docs": "/configuration/audio_detectors",
+        "fields": {
+          "enabled": {
+            "label": "Enable audio detection",
+            "description": "Enable or disable audio event detection for this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "max_not_heard": {
+            "label": "End timeout",
+            "description": "Amount of seconds without the configured audio type before the audio event is ended.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "min_volume": {
+            "label": "Minimum volume",
+            "description": "Minimum RMS volume threshold required to run audio detection; lower values increase sensitivity (e.g., 200 high, 500 medium, 1000 low).",
+            "widget": "number",
+            "default": 500,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "listen": {
+            "label": "Listen types",
+            "description": "List of audio event types to detect (for example: bark, fire_alarm, speech, yell).",
+            "widget": "tags",
+            "default": [
+              "bark",
+              "fire_alarm",
+              "speech",
+              "yell"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "filters": {
+            "label": "Audio filters",
+            "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "num_threads": {
+            "label": "Detection threads",
+            "description": "Number of threads to use for audio detection processing.",
+            "widget": "number",
+            "default": 2,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "audio_transcription": {
+        "label": "Audio transcription",
+        "description": "Settings for live and speech audio transcription used for events and live captions.",
+        "order": [
+          "enabled",
+          "language",
+          "device",
+          "model_size"
+        ],
+        "groups": [],
+        "docs": "/configuration/audio_detectors#audio-transcription",
+        "fields": {
+          "enabled": {
+            "label": "Enable transcription",
+            "description": "Enable or disable manually triggered audio event transcription.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "birdseye": {
+        "label": "Birdseye",
+        "description": "Settings for the Birdseye composite view that composes multiple camera feeds into a single layout.",
+        "order": [
+          "enabled",
+          "mode",
+          "order"
+        ],
+        "groups": [],
+        "docs": "/configuration/birdseye",
+        "fields": {
+          "enabled": {
+            "label": "Enable Birdseye",
+            "description": "Enable or disable the Birdseye view feature.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "mode": {
+            "label": "Tracking mode",
+            "description": "Mode for including cameras in Birdseye: 'objects', 'motion', or 'continuous'.",
+            "widget": "select",
+            "default": "objects",
+            "enum": [
+              "objects",
+              "motion",
+              "continuous"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "detect": {
+        "label": "Object Detection",
+        "description": "Settings for the detection/detect role used to run object detection and initialize trackers.",
+        "order": [
+          "enabled",
+          "width",
+          "height",
+          "fps",
+          "min_initialized",
+          "max_disappeared",
+          "annotation_offset",
+          "stationary",
+          "stationary.interval",
+          "stationary.threshold",
+          "stationary.max_frames"
+        ],
+        "groups": [
+          {
+            "key": "resolution",
+            "label": "Resolution",
+            "fields": [
+              "width",
+              "height",
+              "fps"
+            ]
+          },
+          {
+            "key": "tracking",
+            "label": "Tracking",
+            "fields": [
+              "min_initialized",
+              "max_disappeared"
+            ]
+          }
+        ],
+        "docs": "/configuration/camera_specific",
+        "fields": {
+          "enabled": {
+            "label": "Enable object detection",
+            "description": "Enable or disable object detection for this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Detect height",
+            "description": "Height (pixels) of frames used for the detect stream; leave empty to use the native stream resolution.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "width": {
+            "label": "Detect width",
+            "description": "Width (pixels) of frames used for the detect stream; leave empty to use the native stream resolution.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "fps": {
+            "label": "Detect FPS",
+            "description": "Desired frames per second to run detection on; lower values reduce CPU usage (recommended value is 5, only set higher - at most 10 - if tracking extremely fast moving objects).",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "min_initialized": {
+            "label": "Minimum initialization frames",
+            "description": "Number of consecutive detection hits required before creating a tracked object. Increase to reduce false initializations. Default value is fps divided by 2.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 2,
+            "maximum": null,
+            "advanced": true
+          },
+          "max_disappeared": {
+            "label": "Maximum disappeared frames",
+            "description": "Number of frames without a detection before a tracked object is considered gone.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "stationary.interval": {
+            "label": "Stationary interval",
+            "description": "How often (in frames) to run a detection check to confirm a stationary object.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.threshold": {
+            "label": "Stationary threshold",
+            "description": "Number of frames with no position change required to mark an object as stationary.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.max_frames.default": {
+            "label": "Default max frames",
+            "description": "Default maximum frames to track a stationary object before stopping.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.max_frames.objects": {
+            "label": "Object max frames",
+            "description": "Per-object overrides for maximum frames to track stationary objects.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "stationary.classifier": {
+            "label": "Enable visual classifier",
+            "description": "Use a visual classifier to detect truly stationary objects even when bounding boxes jitter.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "annotation_offset": {
+            "label": "Annotation offset",
+            "description": "Milliseconds to shift detect annotations to better align timeline bounding boxes with recordings; can be positive or negative.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "face_recognition": {
+        "label": "Face recognition",
+        "description": "Settings for face detection and recognition for this camera.",
+        "order": [
+          "enabled",
+          "min_area"
+        ],
+        "groups": [],
+        "docs": "/configuration/face_recognition",
+        "fields": {
+          "enabled": {
+            "label": "Enable face recognition",
+            "description": "Enable or disable face recognition.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "min_area": {
+            "label": "Minimum face area",
+            "description": "Minimum area (pixels) of a detected face box required to attempt recognition.",
+            "widget": "number",
+            "default": 750,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "ffmpeg": {
+        "label": "Streams (FFmpeg)",
+        "description": "Camera stream inputs and FFmpeg options, including binary path, args, hwaccel, and per-role output args.",
+        "order": [
+          "inputs",
+          "global_args",
+          "input_args",
+          "hwaccel_args",
+          "output_args",
+          "apple_compatibility",
+          "path",
+          "gpu"
+        ],
+        "groups": [
+          {
+            "key": "cameraFfmpeg",
+            "label": "Camera-specific FFmpeg arguments",
+            "fields": [
+              "input_args",
+              "hwaccel_args",
+              "output_args"
+            ]
+          }
+        ],
+        "docs": "/configuration/ffmpeg_presets",
+        "fields": {
+          "path": {
+            "label": "FFmpeg path",
+            "description": "Path to the FFmpeg binary to use or a version alias (\"7.0\" or \"8.0\").",
+            "widget": "text",
+            "default": "default",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "global_args": {
+            "label": "FFmpeg global arguments",
+            "description": "Global arguments passed to FFmpeg processes.",
+            "widget": "text",
+            "default": [
+              "-hide_banner",
+              "-loglevel",
+              "warning",
+              "-threads",
+              "2"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "hwaccel_args": {
+            "label": "Hardware acceleration arguments",
+            "description": "Hardware acceleration arguments for FFmpeg. Provider-specific presets are recommended.",
+            "widget": "text",
+            "default": "auto",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "input_args": {
+            "label": "Input arguments",
+            "description": "Input arguments applied to FFmpeg input streams.",
+            "widget": "text",
+            "default": "preset-rtsp-generic",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "output_args.detect": {
+            "label": "Detect output arguments",
+            "description": "Default output arguments for detect role streams.",
+            "widget": "text",
+            "default": [
+              "-threads",
+              "2",
+              "-f",
+              "rawvideo",
+              "-pix_fmt",
+              "yuv420p"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "output_args.record": {
+            "label": "Record output arguments",
+            "description": "Default output arguments for record role streams.",
+            "widget": "text",
+            "default": "preset-record-generic-audio-aac",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "apple_compatibility": {
+            "label": "Apple compatibility",
+            "description": "Enable HEVC tagging for better Apple player compatibility when recording H.265.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "gpu": {
+            "label": "GPU index",
+            "description": "Default GPU index used for hardware acceleration if available.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "inputs": {
+            "label": "Camera inputs",
+            "description": "List of input stream definitions (paths and roles) for this camera.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "live": {
+        "label": "Live playback",
+        "description": "Settings used by the Web UI to control live stream selection, resolution and quality.",
+        "order": [
+          "streams",
+          "height",
+          "quality"
+        ],
+        "groups": [],
+        "docs": "/configuration/live",
+        "fields": {
+          "streams": {
+            "label": "Live stream names",
+            "description": "Mapping of configured stream names to restream/go2rtc names used for live playback.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Live height",
+            "description": "Height (pixels) to render the jsmpeg live stream in the Web UI; must be <= detect stream height.",
+            "widget": "number",
+            "default": 720,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "quality": {
+            "label": "Live quality",
+            "description": "Encoding quality for the jsmpeg stream (1 highest, 31 lowest).",
+            "widget": "range",
+            "default": 8,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 31,
+            "advanced": true
+          }
+        }
+      },
+      "lpr": {
+        "label": "License Plate Recognition",
+        "description": "License plate recognition settings including detection thresholds, formatting, and known plates.",
+        "order": [
+          "enabled",
+          "min_area",
+          "enhancement",
+          "expire_time"
+        ],
+        "groups": [],
+        "docs": "/configuration/license_plate_recognition",
+        "fields": {
+          "enabled": {
+            "label": "Enable LPR",
+            "description": "Enable or disable LPR on this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "min_area": {
+            "label": "Minimum plate area",
+            "description": "Minimum plate area (pixels) required to attempt recognition.",
+            "widget": "number",
+            "default": 1000,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "enhancement": {
+            "label": "Enhancement level",
+            "description": "Enhancement level (0-10) to apply to plate crops prior to OCR; higher values may not always improve results, levels above 5 may only work with night time plates and should be used with caution.",
+            "widget": "range",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 10,
+            "advanced": true
+          }
+        }
+      },
+      "motion": {
+        "label": "Motion detection",
+        "description": "Default motion detection settings for this camera.",
+        "order": [
+          "enabled",
+          "threshold",
+          "lightning_threshold",
+          "skip_motion_threshold",
+          "improve_contrast",
+          "contour_area",
+          "delta_alpha",
+          "frame_alpha",
+          "frame_height",
+          "mqtt_off_delay"
+        ],
+        "groups": [
+          {
+            "key": "sensitivity",
+            "label": "Sensitivity",
+            "fields": [
+              "threshold",
+              "contour_area"
+            ]
+          },
+          {
+            "key": "algorithm",
+            "label": "Algorithm",
+            "fields": [
+              "improve_contrast",
+              "delta_alpha",
+              "frame_alpha"
+            ]
+          }
+        ],
+        "docs": "/configuration/motion_detection",
+        "fields": {
+          "enabled": {
+            "label": "Enable motion detection",
+            "description": "Enable or disable motion detection for this camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "threshold": {
+            "label": "Motion threshold",
+            "description": "Pixel difference threshold used by the motion detector; higher values reduce sensitivity (range 1-255).",
+            "widget": "range",
+            "default": 30,
+            "enum": null,
+            "minimum": 1,
+            "maximum": 255,
+            "advanced": false
+          },
+          "lightning_threshold": {
+            "label": "Lightning threshold",
+            "description": "Threshold to detect and ignore brief lighting spikes (lower is more sensitive, values between 0.3 and 1.0). This does not prevent motion detection entirely; it merely causes the detector to stop analyzing additional frames once the threshold is exceeded. Motion-based recordings are still created during these events.",
+            "widget": "range",
+            "default": 0.8,
+            "enum": null,
+            "minimum": 0.3,
+            "maximum": 1,
+            "advanced": true
+          },
+          "skip_motion_threshold": {
+            "label": "Skip motion threshold",
+            "description": "If set to a value between 0.0 and 1.0, and more than this fraction of the image changes in a single frame, the detector will return no motion boxes and immediately recalibrate. This can save CPU and reduce false positives during lightning, storms, etc., but may miss real events such as a PTZ camera auto‑tracking an object. The trade‑off is between dropping a few megabytes of recordings versus reviewing a couple short clips. Leave unset (None) to disable this feature.",
+            "widget": "range",
+            "default": null,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 1,
+            "advanced": true
+          },
+          "improve_contrast": {
+            "label": "Improve contrast",
+            "description": "Apply contrast improvement to frames before motion analysis to help detection.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "contour_area": {
+            "label": "Contour area",
+            "description": "Minimum contour area in pixels required for a motion contour to be counted.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "delta_alpha": {
+            "label": "Delta alpha",
+            "description": "Alpha blending factor used in frame differencing for motion calculation.",
+            "widget": "number",
+            "default": 0.2,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "frame_alpha": {
+            "label": "Frame alpha",
+            "description": "Alpha value used when blending frames for motion preprocessing.",
+            "widget": "number",
+            "default": 0.01,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "frame_height": {
+            "label": "Frame height",
+            "description": "Height in pixels to scale frames to when computing motion.",
+            "widget": "number",
+            "default": 100,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "mqtt_off_delay": {
+            "label": "MQTT off delay",
+            "description": "Seconds to wait after last motion before publishing an MQTT 'off' state.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "objects": {
+        "label": "Objects",
+        "description": "Object tracking defaults including which labels to track and per-object filters.",
+        "order": [
+          "track",
+          "alert",
+          "detect",
+          "filters"
+        ],
+        "groups": [
+          {
+            "key": "tracking",
+            "label": "Tracking",
+            "fields": [
+              "track",
+              "alert",
+              "detect"
+            ]
+          },
+          {
+            "key": "filtering",
+            "label": "Filtering",
+            "fields": [
+              "filters"
+            ]
+          }
+        ],
+        "docs": "/configuration/object_filters",
+        "fields": {
+          "track": {
+            "label": "Objects to track",
+            "description": "List of object labels to track for this camera.",
+            "widget": "tags",
+            "default": [
+              "person"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "filters": {
+            "label": "Object filters",
+            "description": "Filters applied to detected objects to reduce false positives (area, ratio, confidence).",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.enabled": {
+            "label": "Enable GenAI",
+            "description": "Enable GenAI generation of descriptions for tracked objects by default.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.use_snapshot": {
+            "label": "Use snapshots",
+            "description": "Use object snapshots instead of thumbnails for GenAI description generation.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.prompt": {
+            "label": "Caption prompt",
+            "description": "Default prompt template used when generating descriptions with GenAI.",
+            "widget": "text",
+            "default": "Analyze the sequence of images containing the {label}. Focus on the likely intent or behavior of the {label} based on its actions and movement, rather than describing its appearance or the surroundings. Consider what the {label} is doing, why, and what it might do next.",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.object_prompts": {
+            "label": "Object prompts",
+            "description": "Per-object prompts to customize GenAI outputs for specific labels.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.objects": {
+            "label": "GenAI objects",
+            "description": "List of object labels to send to GenAI by default.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.required_zones": {
+            "label": "Required zones",
+            "description": "Zones that must be entered for objects to qualify for GenAI description generation.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.debug_save_thumbnails": {
+            "label": "Save thumbnails",
+            "description": "Save thumbnails sent to GenAI for debugging and review.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.send_triggers.tracked_object_end": {
+            "label": "Send on end",
+            "description": "Send a request to GenAI when the tracked object ends.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.send_triggers.after_significant_updates": {
+            "label": "Early GenAI trigger",
+            "description": "Send a request to GenAI after a specified number of significant updates for the tracked object.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": 1,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "record": {
+        "label": "Recording",
+        "description": "Recording and retention settings for this camera.",
+        "order": [
+          "enabled",
+          "expire_interval",
+          "continuous",
+          "motion",
+          "alerts",
+          "detections",
+          "preview",
+          "export"
+        ],
+        "groups": [
+          {
+            "key": "retention",
+            "label": "Retention",
+            "fields": [
+              "continuous",
+              "motion"
+            ]
+          },
+          {
+            "key": "events",
+            "label": "Events",
+            "fields": [
+              "alerts",
+              "detections"
+            ]
+          }
+        ],
+        "docs": "/configuration/record",
+        "fields": {
+          "enabled": {
+            "label": "Enable recording",
+            "description": "Enable or disable recording for this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "expire_interval": {
+            "label": "Record cleanup interval",
+            "description": "Minutes between cleanup passes that remove expired recording segments.",
+            "widget": "number",
+            "default": 60,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "continuous.days": {
+            "label": "Retention days",
+            "description": "Days to retain recordings.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "motion.days": {
+            "label": "Retention days",
+            "description": "Days to retain recordings.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.pre_capture": {
+            "label": "Pre-capture seconds",
+            "description": "Number of seconds before the detection event to include in the recording.",
+            "widget": "range",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 60,
+            "advanced": false
+          },
+          "detections.post_capture": {
+            "label": "Post-capture seconds",
+            "description": "Number of seconds after the detection event to include in the recording.",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.retain.days": {
+            "label": "Retention days",
+            "description": "Number of days to retain recordings of detection events.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.retain.mode": {
+            "label": "Retention mode",
+            "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
+            "widget": "select",
+            "default": "motion",
+            "enum": [
+              "all",
+              "motion",
+              "active_objects"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.pre_capture": {
+            "label": "Pre-capture seconds",
+            "description": "Number of seconds before the detection event to include in the recording.",
+            "widget": "range",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 60,
+            "advanced": false
+          },
+          "alerts.post_capture": {
+            "label": "Post-capture seconds",
+            "description": "Number of seconds after the detection event to include in the recording.",
+            "widget": "number",
+            "default": 5,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.retain.days": {
+            "label": "Retention days",
+            "description": "Number of days to retain recordings of detection events.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.retain.mode": {
+            "label": "Retention mode",
+            "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
+            "widget": "select",
+            "default": "motion",
+            "enum": [
+              "all",
+              "motion",
+              "active_objects"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "export.hwaccel_args": {
+            "label": "Export hwaccel args",
+            "description": "Hardware acceleration args to use for export/transcode operations.",
+            "widget": "text",
+            "default": "auto",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "preview.quality": {
+            "label": "Preview quality",
+            "description": "Preview quality level (very_low, low, medium, high, very_high).",
+            "widget": "select",
+            "default": "medium",
+            "enum": [
+              "very_low",
+              "low",
+              "medium",
+              "high",
+              "very_high"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "review": {
+        "label": "Review",
+        "description": "Settings that control alerts, detections, and GenAI review summaries used by the UI and storage for this camera.",
+        "order": [
+          "alerts",
+          "detections",
+          "genai",
+          "genai.enabled"
+        ],
+        "groups": [],
+        "docs": "/configuration/review",
+        "fields": {
+          "alerts.enabled": {
+            "label": "Enable alerts",
+            "description": "Enable or disable alert generation for this camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.labels": {
+            "label": "Alert labels",
+            "description": "List of object labels that qualify as alerts (for example: car, person).",
+            "widget": "tags",
+            "default": [
+              "person",
+              "car"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.required_zones": {
+            "label": "Required zones",
+            "description": "Zones that an object must enter to be considered an alert; leave empty to allow any zone.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "alerts.cutoff_time": {
+            "label": "Alerts cutoff time",
+            "description": "Seconds to wait after no alert-causing activity before cutting off an alert.",
+            "widget": "number",
+            "default": 40,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.enabled": {
+            "label": "Enable detections",
+            "description": "Enable or disable detection events for this camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.labels": {
+            "label": "Detection labels",
+            "description": "List of object labels that qualify as detection events.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.required_zones": {
+            "label": "Required zones",
+            "description": "Zones that an object must enter to be considered a detection; leave empty to allow any zone.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "detections.cutoff_time": {
+            "label": "Detections cutoff time",
+            "description": "Seconds to wait after no detection-causing activity before cutting off a detection.",
+            "widget": "number",
+            "default": 30,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.enabled": {
+            "label": "Enable GenAI descriptions",
+            "description": "Enable or disable GenAI-generated descriptions and summaries for review items.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.alerts": {
+            "label": "Enable GenAI for alerts",
+            "description": "Use GenAI to generate descriptions for alert items.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.detections": {
+            "label": "Enable GenAI for detections",
+            "description": "Use GenAI to generate descriptions for detection items.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.image_source": {
+            "label": "Review image source",
+            "description": "Source of images sent to GenAI ('preview' or 'recordings'); 'recordings' uses higher quality frames but more tokens.",
+            "widget": "select",
+            "default": "preview",
+            "enum": [
+              "preview",
+              "recordings"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.additional_concerns": {
+            "label": "Additional concerns",
+            "description": "A list of additional concerns or notes the GenAI should consider when evaluating activity on this camera.",
+            "widget": "tags",
+            "default": [],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.debug_save_thumbnails": {
+            "label": "Save thumbnails",
+            "description": "Save thumbnails that are sent to the GenAI provider for debugging and review.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.preferred_language": {
+            "label": "Preferred language",
+            "description": "Preferred language to request from the GenAI provider for generated responses.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "genai.activity_context_prompt": {
+            "label": "Activity context prompt",
+            "description": "Custom prompt describing what is and is not suspicious activity to provide context for GenAI summaries.",
+            "widget": "text",
+            "default": "### Normal Activity Indicators (Level 0)\n- Known/verified people in any zone at any time\n- People with pets in residential areas\n- Routine residential vehicle access during daytime/evening (6 AM - 10 PM): entering, exiting, loading/unloading items — normal commute and travel patterns\n- Deliveries or services during daytime/evening (6 AM - 10 PM): carrying packages to doors/porches, placing items, leaving\n- Services/maintenance workers with visible tools, uniforms, or service vehicles during daytime\n- Activity confined to public areas only (sidewalks, streets) without entering property at any time\n\n### Suspicious Activity Indicators (Level 1)\n- **Checking or probing vehicle/building access**: trying handles without entering, peering through windows, examining multiple vehicles, or possessing break-in tools — Level 1\n- **Unidentified person in private areas (driveways, near vehicles/buildings) during late night/early morning (11 PM - 5 AM)** — ALWAYS Level 1 regardless of activity or duration\n- Taking items that don't belong to them (packages, objects from porches/driveways)\n- Climbing or jumping fences/barriers to access property\n- Attempting to conceal actions or items from view\n- Prolonged loitering: remaining in same area without visible purpose throughout most of the sequence\n\n### Critical Threat Indicators (Level 2)\n- Holding break-in tools (crowbars, pry bars, bolt cutters)\n- Weapons visible (guns, knives, bats used aggressively)\n- Forced entry in progress\n- Physical aggression or violence\n- Active property damage or theft in progress\n\n### Assessment Guidance\nEvaluate in this order:\n\n1. **If person is verified/known** → Level 0 regardless of time or activity\n2. **If person is unidentified:**\n   - Check time: If late night/early morning (11 PM - 5 AM) AND in private areas (driveways, near vehicles/buildings) → Level 1\n   - Check actions: If probing access (trying handles without entering, checking multiple vehicles), taking items, climbing → Level 1\n   - Otherwise, if daytime/evening (6 AM - 10 PM) with clear legitimate purpose (delivery, service, routine vehicle access) → Level 0\n3. **Escalate to Level 2 if:** Weapons, break-in tools, forced entry in progress, violence, or active property damage visible (escalates from Level 0 or 1)\n\nThe mere presence of an unidentified person in private areas during late night hours is inherently suspicious and warrants human review, regardless of what activity they appear to be doing or how brief the sequence is.",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "semantic_search": {
+        "label": "Semantic Search",
+        "description": "Settings for semantic search which builds and queries object embeddings to find similar items.",
+        "order": [],
+        "groups": [],
+        "docs": "/configuration/semantic_search",
+        "fields": {
+          "triggers": {
+            "label": "Triggers",
+            "description": "Actions and matching criteria for camera-specific semantic search triggers.",
+            "widget": "object",
+            "default": {},
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "snapshots": {
+        "label": "Snapshots",
+        "description": "Settings for API-generated snapshots of tracked objects for this camera.",
+        "order": [
+          "enabled",
+          "bounding_box",
+          "crop",
+          "quality",
+          "timestamp",
+          "required_zones",
+          "retain"
+        ],
+        "groups": [
+          {
+            "key": "display",
+            "label": "Display",
+            "fields": [
+              "bounding_box",
+              "crop",
+              "quality",
+              "timestamp"
+            ]
+          }
+        ],
+        "docs": "/configuration/snapshots",
+        "fields": {
+          "enabled": {
+            "label": "Enable snapshots",
+            "description": "Enable or disable saving snapshots for this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "timestamp": {
+            "label": "Timestamp overlay",
+            "description": "Overlay a timestamp on snapshots from API.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "bounding_box": {
+            "label": "Bounding box overlay",
+            "description": "Draw bounding boxes for tracked objects on snapshots from API.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "crop": {
+            "label": "Crop snapshot",
+            "description": "Crop snapshots from API to the detected object's bounding box.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "required_zones": {
+            "label": "Required zones",
+            "description": "Zones an object must enter for a snapshot to be saved.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Snapshot height",
+            "description": "Height (pixels) to resize snapshots from API to; leave empty to preserve original size.",
+            "widget": "number",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "retain.default": {
+            "label": "Default retention",
+            "description": "Default number of days to retain snapshots.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "retain.objects": {
+            "label": "Object retention",
+            "description": "Per-object overrides for snapshot retention days.",
+            "widget": "object",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "quality": {
+            "label": "Snapshot quality",
+            "description": "Encode quality for saved snapshots (0-100).",
+            "widget": "range",
+            "default": 60,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 100,
+            "advanced": true
+          }
+        }
+      },
+      "timestamp_style": {
+        "label": "Timestamp style",
+        "description": "Styling options for timestamps applied to snapshots and Debug view.",
+        "order": [
+          "position",
+          "format",
+          "thickness",
+          "color"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/reference",
+        "fields": {
+          "position": {
+            "label": "Timestamp position",
+            "description": "Position of the timestamp on the image (tl/tr/bl/br).",
+            "widget": "select",
+            "default": "tl",
+            "enum": [
+              "tl",
+              "tr",
+              "bl",
+              "br"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "format": {
+            "label": "Timestamp format",
+            "description": "Datetime format string used for timestamps (Python datetime format codes).",
+            "widget": "text",
+            "default": "%m/%d/%Y %H:%M:%S",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "color.red": {
+            "label": "Red",
+            "description": "Red component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "color.green": {
+            "label": "Green",
+            "description": "Green component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "color.blue": {
+            "label": "Blue",
+            "description": "Blue component (0-255) for timestamp color.",
+            "widget": "range",
+            "default": 255,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 255,
+            "advanced": false
+          },
+          "thickness": {
+            "label": "Timestamp thickness",
+            "description": "Line thickness of the timestamp text.",
+            "widget": "number",
+            "default": 2,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "mqtt": {
+        "label": "MQTT",
+        "description": "MQTT image publishing settings.",
+        "order": [
+          "enabled",
+          "timestamp",
+          "bounding_box",
+          "crop",
+          "height",
+          "required_zones",
+          "quality"
+        ],
+        "groups": [],
+        "docs": "/integrations/mqtt",
+        "fields": {
+          "enabled": {
+            "label": "Send image",
+            "description": "Enable publishing image snapshots for objects to MQTT topics for this camera.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "timestamp": {
+            "label": "Add timestamp",
+            "description": "Overlay a timestamp on images published to MQTT.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "bounding_box": {
+            "label": "Add bounding box",
+            "description": "Draw bounding boxes on images published over MQTT.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "crop": {
+            "label": "Crop image",
+            "description": "Crop images published to MQTT to the detected object's bounding box.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "height": {
+            "label": "Image height",
+            "description": "Height (pixels) to resize images published over MQTT.",
+            "widget": "number",
+            "default": 270,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "required_zones": {
+            "label": "Required zones",
+            "description": "Zones that an object must enter for an MQTT image to be published.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "quality": {
+            "label": "JPEG quality",
+            "description": "JPEG quality for images published to MQTT (0-100).",
+            "widget": "range",
+            "default": 70,
+            "enum": null,
+            "minimum": 0,
+            "maximum": 100,
+            "advanced": true
+          }
+        }
+      },
+      "notifications": {
+        "label": "Notifications",
+        "description": "Settings to enable and control notifications for this camera.",
+        "order": [
+          "enabled",
+          "email"
+        ],
+        "groups": [],
+        "docs": "/configuration/notifications",
+        "fields": {
+          "enabled": {
+            "label": "Enable notifications",
+            "description": "Enable or disable notifications for this camera.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "cooldown": {
+            "label": "Cooldown period",
+            "description": "Cooldown (seconds) between notifications to avoid spamming recipients.",
+            "widget": "number",
+            "default": 0,
+            "enum": null,
+            "minimum": 0,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      },
+      "onvif": {
+        "label": "ONVIF",
+        "description": "ONVIF connection and PTZ autotracking settings for this camera.",
+        "order": [
+          "host",
+          "port",
+          "user",
+          "password",
+          "profile",
+          "tls_insecure",
+          "ignore_time_mismatch",
+          "autotracking"
+        ],
+        "groups": [],
+        "docs": "/configuration/cameras#setting-up-camera-ptz-controls",
+        "fields": {
+          "host": {
+            "label": "ONVIF host",
+            "description": "Host (and optional scheme) for the ONVIF service for this camera.",
+            "widget": "text",
+            "default": "",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "port": {
+            "label": "ONVIF port",
+            "description": "Port number for the ONVIF service.",
+            "widget": "number",
+            "default": 8000,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "user": {
+            "label": "ONVIF username",
+            "description": "Username for ONVIF authentication; some devices require admin user for ONVIF.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "password": {
+            "label": "ONVIF password",
+            "description": "Password for ONVIF authentication.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "tls_insecure": {
+            "label": "Disable TLS verify",
+            "description": "Skip TLS verification and disable digest auth for ONVIF (unsafe; use in safe networks only).",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          },
+          "profile": {
+            "label": "ONVIF profile",
+            "description": "Specific ONVIF media profile to use for PTZ control, matched by token or name. If not set, the first profile with valid PTZ configuration is selected automatically.",
+            "widget": "text",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.enabled": {
+            "label": "Enable Autotracking",
+            "description": "Enable or disable automatic PTZ camera tracking of detected objects.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.calibrate_on_startup": {
+            "label": "Calibrate on start",
+            "description": "Measure PTZ motor speeds on startup to improve tracking accuracy. Frigate will update config with movement_weights after calibration.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.zooming": {
+            "label": "Zoom mode",
+            "description": "Control zoom behavior: disabled (pan/tilt only), absolute (most compatible), or relative (concurrent pan/tilt/zoom).",
+            "widget": "select",
+            "default": "disabled",
+            "enum": [
+              "disabled",
+              "absolute",
+              "relative"
+            ],
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.zoom_factor": {
+            "label": "Zoom factor",
+            "description": "Control zoom level on tracked objects. Lower values keep more scene in view; higher values zoom in closer but may lose tracking. Values between 0.1 and 0.75.",
+            "widget": "range",
+            "default": 0.3,
+            "enum": null,
+            "minimum": 0.1,
+            "maximum": 0.75,
+            "advanced": false
+          },
+          "autotracking.track": {
+            "label": "Tracked objects",
+            "description": "List of object types that should trigger autotracking.",
+            "widget": "tags",
+            "default": [
+              "person"
+            ],
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.required_zones": {
+            "label": "Required zones",
+            "description": "Objects must enter one of these zones before autotracking begins.",
+            "widget": "tags",
+            "default": null,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.return_preset": {
+            "label": "Return preset",
+            "description": "ONVIF preset name configured in camera firmware to return to after tracking ends.",
+            "widget": "text",
+            "default": "home",
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "autotracking.timeout": {
+            "label": "Return timeout",
+            "description": "Wait this many seconds after losing tracking before returning camera to preset position.",
+            "widget": "number",
+            "default": 10,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "ignore_time_mismatch": {
+            "label": "Ignore time mismatch",
+            "description": "Ignore time synchronization differences between camera and Frigate server for ONVIF communication.",
+            "widget": "switch",
+            "default": false,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": true
+          }
+        }
+      },
+      "ui": {
+        "label": "Camera UI",
+        "description": "Display ordering and visibility for this camera in the UI. Ordering affects the default dashboard. For more granular control, use camera groups.",
+        "order": [
+          "dashboard",
+          "order"
+        ],
+        "groups": [],
+        "docs": "/configuration/advanced/reference",
+        "fields": {
+          "dashboard": {
+            "label": "Show in UI",
+            "description": "Toggle whether this camera is visible everywhere in the Frigate UI. Disabling this will require manually editing the config to view this camera in the UI again.",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          },
+          "review": {
+            "label": "Show in review",
+            "description": "Toggle whether this camera is visible in review (the review page and its camera filter, motion review, and the history view).",
+            "widget": "switch",
+            "default": true,
+            "enum": null,
+            "minimum": null,
+            "maximum": null,
+            "advanced": false
+          }
+        }
+      }
+    }
+  },
+  "navigation": {
+    "groups": [
+      {
+        "key": "general",
+        "label": "General",
+        "items": [
+          {
+            "key": "uiSettings",
+            "label": "UI settings"
+          }
+        ]
+      },
+      {
+        "key": "globalConfig",
+        "label": "Global configuration",
+        "items": [
+          {
+            "key": "profiles",
+            "label": "Profiles"
+          },
+          {
+            "key": "cameraManagement",
+            "label": "Camera management"
+          },
+          {
+            "key": "globalDetect",
+            "label": "Object detection",
+            "section": "detect",
+            "page": "globalDetect",
+            "level": "global"
+          },
+          {
+            "key": "globalObjects",
+            "label": "Objects",
+            "section": "objects",
+            "page": "globalObjects",
+            "level": "global"
+          },
+          {
+            "key": "globalMotion",
+            "label": "Motion detection",
+            "section": "motion",
+            "page": "globalMotion",
+            "level": "global"
+          },
+          {
+            "key": "globalFfmpeg",
+            "label": "FFmpeg",
+            "section": "ffmpeg",
+            "page": "globalFfmpeg",
+            "level": "global"
+          },
+          {
+            "key": "globalRecording",
+            "label": "Recording",
+            "section": "record",
+            "page": "globalRecording",
+            "level": "global"
+          },
+          {
+            "key": "globalSnapshots",
+            "label": "Snapshots",
+            "section": "snapshots",
+            "page": "globalSnapshots",
+            "level": "global"
+          },
+          {
+            "key": "globalReview",
+            "label": "Review",
+            "section": "review",
+            "page": "globalReview",
+            "level": "global"
+          },
+          {
+            "key": "globalAudioEvents",
+            "label": "Audio detection",
+            "section": "audio",
+            "page": "globalAudioEvents",
+            "level": "global"
+          },
+          {
+            "key": "globalLivePlayback",
+            "label": "Live playback",
+            "section": "live",
+            "page": "globalLivePlayback",
+            "level": "global"
+          },
+          {
+            "key": "globalTimestampStyle",
+            "label": "Timestamp style",
+            "section": "timestamp_style",
+            "page": "globalTimestampStyle",
+            "level": "global"
+          }
+        ]
+      },
+      {
+        "key": "cameras",
+        "label": "Camera configuration",
+        "items": [
+          {
+            "key": "cameraDetect",
+            "label": "Object detection",
+            "section": "detect",
+            "page": "cameraDetect",
+            "level": "camera"
+          },
+          {
+            "key": "cameraObjects",
+            "label": "Objects",
+            "section": "objects",
+            "page": "cameraObjects",
+            "level": "camera"
+          },
+          {
+            "key": "cameraMotion",
+            "label": "Motion detection",
+            "section": "motion",
+            "page": "cameraMotion",
+            "level": "camera"
+          },
+          {
+            "key": "motionTuner",
+            "label": "Motion tuner"
+          },
+          {
+            "key": "cameraFfmpeg",
+            "label": "Streams (FFmpeg)",
+            "section": "ffmpeg",
+            "page": "cameraFfmpeg",
+            "level": "camera"
+          },
+          {
+            "key": "cameraRecording",
+            "label": "Recording",
+            "section": "record",
+            "page": "cameraRecording",
+            "level": "camera"
+          },
+          {
+            "key": "cameraSnapshots",
+            "label": "Snapshots",
+            "section": "snapshots",
+            "page": "cameraSnapshots",
+            "level": "camera"
+          },
+          {
+            "key": "masksAndZones",
+            "label": "Masks / Zones",
+            "section": "masksAndZones",
+            "page": "masksAndZones",
+            "level": "camera"
+          },
+          {
+            "key": "cameraReview",
+            "label": "Review",
+            "section": "review",
+            "page": "cameraReview",
+            "level": "camera"
+          },
+          {
+            "key": "cameraAudioEvents",
+            "label": "Audio detection",
+            "section": "audio",
+            "page": "cameraAudioEvents",
+            "level": "camera"
+          },
+          {
+            "key": "cameraAudioTranscription",
+            "label": "Audio transcription",
+            "section": "audio_transcription",
+            "page": "cameraAudioTranscription",
+            "level": "camera"
+          },
+          {
+            "key": "cameraBirdseye",
+            "label": "Birdseye",
+            "section": "birdseye",
+            "page": "cameraBirdseye",
+            "level": "camera"
+          },
+          {
+            "key": "cameraLivePlayback",
+            "label": "Live playback",
+            "section": "live",
+            "page": "cameraLivePlayback",
+            "level": "camera"
+          },
+          {
+            "key": "cameraNotifications",
+            "label": "Notifications",
+            "section": "notifications",
+            "page": "cameraNotifications",
+            "level": "camera"
+          },
+          {
+            "key": "cameraFaceRecognition",
+            "label": "Face recognition",
+            "section": "face_recognition",
+            "page": "cameraFaceRecognition",
+            "level": "camera"
+          },
+          {
+            "key": "cameraLpr",
+            "label": "License plate recognition",
+            "section": "lpr",
+            "page": "cameraLpr",
+            "level": "camera"
+          },
+          {
+            "key": "cameraOnvif",
+            "label": "ONVIF",
+            "section": "onvif",
+            "page": "cameraOnvif",
+            "level": "camera"
+          },
+          {
+            "key": "cameraMqttConfig",
+            "label": "MQTT",
+            "section": "mqtt",
+            "page": "cameraMqttConfig",
+            "level": "camera"
+          },
+          {
+            "key": "cameraTimestampStyle",
+            "label": "Timestamp style",
+            "section": "timestamp_style",
+            "page": "cameraTimestampStyle",
+            "level": "camera"
+          }
+        ]
+      },
+      {
+        "key": "enrichments",
+        "label": "Enrichments",
+        "items": [
+          {
+            "key": "integrationSemanticSearch",
+            "label": "Semantic search",
+            "section": "semantic_search",
+            "page": "integrationSemanticSearch",
+            "level": "global"
+          },
+          {
+            "key": "integrationGenerativeAi",
+            "label": "Generative AI",
+            "section": "genai",
+            "page": "integrationGenerativeAi",
+            "level": "global"
+          },
+          {
+            "key": "integrationFaceRecognition",
+            "label": "Face recognition",
+            "section": "face_recognition",
+            "page": "integrationFaceRecognition",
+            "level": "global"
+          },
+          {
+            "key": "integrationLpr",
+            "label": "License plate recognition",
+            "section": "lpr",
+            "page": "integrationLpr",
+            "level": "global"
+          },
+          {
+            "key": "integrationObjectClassification",
+            "label": "Object classification",
+            "section": "classification",
+            "page": "integrationObjectClassification",
+            "level": "global"
+          },
+          {
+            "key": "triggers",
+            "label": "Triggers"
+          },
+          {
+            "key": "integrationAudioTranscription",
+            "label": "Audio transcription",
+            "section": "audio_transcription",
+            "page": "integrationAudioTranscription",
+            "level": "global"
+          }
+        ]
+      },
+      {
+        "key": "system",
+        "label": "System",
+        "items": [
+          {
+            "key": "systemGo2rtcStreams",
+            "label": "go2rtc streams",
+            "section": "go2rtc_streams",
+            "page": "systemGo2rtcStreams",
+            "level": "global"
+          },
+          {
+            "key": "systemDetectorsAndModel",
+            "label": "Detectors and model",
+            "section": "model",
+            "page": "systemDetectorsAndModel",
+            "level": "global"
+          },
+          {
+            "key": "systemDatabase",
+            "label": "Database",
+            "section": "database",
+            "page": "systemDatabase",
+            "level": "global"
+          },
+          {
+            "key": "systemMqtt",
+            "label": "MQTT",
+            "section": "mqtt",
+            "page": "systemMqtt",
+            "level": "global"
+          },
+          {
+            "key": "systemBirdseye",
+            "label": "Birdseye",
+            "section": "birdseye",
+            "page": "systemBirdseye",
+            "level": "global"
+          },
+          {
+            "key": "systemTls",
+            "label": "TLS",
+            "section": "tls",
+            "page": "systemTls",
+            "level": "global"
+          },
+          {
+            "key": "systemAuthentication",
+            "label": "Authentication",
+            "section": "auth",
+            "page": "systemAuthentication",
+            "level": "global"
+          },
+          {
+            "key": "systemNetworking",
+            "label": "Networking",
+            "section": "networking",
+            "page": "systemNetworking",
+            "level": "global"
+          },
+          {
+            "key": "systemProxy",
+            "label": "Proxy",
+            "section": "proxy",
+            "page": "systemProxy",
+            "level": "global"
+          },
+          {
+            "key": "systemUi",
+            "label": "UI",
+            "section": "ui",
+            "page": "systemUi",
+            "level": "global"
+          },
+          {
+            "key": "systemLogging",
+            "label": "Logging",
+            "section": "logger",
+            "page": "systemLogging",
+            "level": "global"
+          },
+          {
+            "key": "systemEnvironmentVariables",
+            "label": "Environment variables",
+            "section": "environment_vars",
+            "page": "systemEnvironmentVariables",
+            "level": "global"
+          },
+          {
+            "key": "systemTelemetry",
+            "label": "Telemetry",
+            "section": "telemetry",
+            "page": "systemTelemetry",
+            "level": "global"
+          }
+        ]
+      },
+      {
+        "key": "users",
+        "label": "Users",
+        "items": [
+          {
+            "key": "users",
+            "label": "Users"
+          },
+          {
+            "key": "roles",
+            "label": "Roles"
+          }
+        ]
+      },
+      {
+        "key": "notifications",
+        "label": "Notifications",
+        "items": [
+          {
+            "key": "notifications",
+            "label": "Notifications",
+            "section": "notifications",
+            "page": "notifications",
+            "level": "global"
+          }
+        ]
+      },
+      {
+        "key": "frigateplus",
+        "label": "Frigate+",
+        "items": [
+          {
+            "key": "frigateplus",
+            "label": "Frigate+"
+          }
+        ]
+      },
+      {
+        "key": "maintenance",
+        "label": "Maintenance",
+        "items": [
+          {
+            "key": "mediaSync",
+            "label": "Media sync"
+          },
+          {
+            "key": "regionGrid",
+            "label": "Region grid"
+          }
+        ]
+      }
+    ],
+    "pages": {
+      "globalDetect": {
+        "section": "detect",
+        "page": "globalDetect",
+        "level": "global"
+      },
+      "globalFfmpeg": {
+        "section": "ffmpeg",
+        "page": "globalFfmpeg",
+        "level": "global"
+      },
+      "globalRecording": {
+        "section": "record",
+        "page": "globalRecording",
+        "level": "global"
+      },
+      "globalSnapshots": {
+        "section": "snapshots",
+        "page": "globalSnapshots",
+        "level": "global"
+      },
+      "globalMotion": {
+        "section": "motion",
+        "page": "globalMotion",
+        "level": "global"
+      },
+      "globalObjects": {
+        "section": "objects",
+        "page": "globalObjects",
+        "level": "global"
+      },
+      "globalReview": {
+        "section": "review",
+        "page": "globalReview",
+        "level": "global"
+      },
+      "globalAudioEvents": {
+        "section": "audio",
+        "page": "globalAudioEvents",
+        "level": "global"
+      },
+      "globalLivePlayback": {
+        "section": "live",
+        "page": "globalLivePlayback",
+        "level": "global"
+      },
+      "globalTimestampStyle": {
+        "section": "timestamp_style",
+        "page": "globalTimestampStyle",
+        "level": "global"
+      },
+      "notifications": {
+        "section": "notifications",
+        "page": "notifications",
+        "level": "global"
+      },
+      "cameraDetect": {
+        "section": "detect",
+        "page": "cameraDetect",
+        "level": "camera"
+      },
+      "cameraFfmpeg": {
+        "section": "ffmpeg",
+        "page": "cameraFfmpeg",
+        "level": "camera"
+      },
+      "cameraRecording": {
+        "section": "record",
+        "page": "cameraRecording",
+        "level": "camera"
+      },
+      "cameraSnapshots": {
+        "section": "snapshots",
+        "page": "cameraSnapshots",
+        "level": "camera"
+      },
+      "cameraMotion": {
+        "section": "motion",
+        "page": "cameraMotion",
+        "level": "camera"
+      },
+      "cameraObjects": {
+        "section": "objects",
+        "page": "cameraObjects",
+        "level": "camera"
+      },
+      "cameraReview": {
+        "section": "review",
+        "page": "cameraReview",
+        "level": "camera"
+      },
+      "cameraAudioEvents": {
+        "section": "audio",
+        "page": "cameraAudioEvents",
+        "level": "camera"
+      },
+      "cameraAudioTranscription": {
+        "section": "audio_transcription",
+        "page": "cameraAudioTranscription",
+        "level": "camera"
+      },
+      "cameraNotifications": {
+        "section": "notifications",
+        "page": "cameraNotifications",
+        "level": "camera"
+      },
+      "cameraLivePlayback": {
+        "section": "live",
+        "page": "cameraLivePlayback",
+        "level": "camera"
+      },
+      "cameraBirdseye": {
+        "section": "birdseye",
+        "page": "cameraBirdseye",
+        "level": "camera"
+      },
+      "cameraFaceRecognition": {
+        "section": "face_recognition",
+        "page": "cameraFaceRecognition",
+        "level": "camera"
+      },
+      "cameraLpr": {
+        "section": "lpr",
+        "page": "cameraLpr",
+        "level": "camera"
+      },
+      "cameraMqttConfig": {
+        "section": "mqtt",
+        "page": "cameraMqttConfig",
+        "level": "camera"
+      },
+      "cameraOnvif": {
+        "section": "onvif",
+        "page": "cameraOnvif",
+        "level": "camera"
+      },
+      "cameraTimestampStyle": {
+        "section": "timestamp_style",
+        "page": "cameraTimestampStyle",
+        "level": "camera"
+      },
+      "integrationSemanticSearch": {
+        "section": "semantic_search",
+        "page": "integrationSemanticSearch",
+        "level": "global"
+      },
+      "integrationGenerativeAi": {
+        "section": "genai",
+        "page": "integrationGenerativeAi",
+        "level": "global"
+      },
+      "integrationFaceRecognition": {
+        "section": "face_recognition",
+        "page": "integrationFaceRecognition",
+        "level": "global"
+      },
+      "integrationLpr": {
+        "section": "lpr",
+        "page": "integrationLpr",
+        "level": "global"
+      },
+      "integrationObjectClassification": {
+        "section": "classification",
+        "page": "integrationObjectClassification",
+        "level": "global"
+      },
+      "integrationAudioTranscription": {
+        "section": "audio_transcription",
+        "page": "integrationAudioTranscription",
+        "level": "global"
+      },
+      "systemGo2rtcStreams": {
+        "section": "go2rtc_streams",
+        "page": "systemGo2rtcStreams",
+        "level": "global"
+      },
+      "systemDatabase": {
+        "section": "database",
+        "page": "systemDatabase",
+        "level": "global"
+      },
+      "systemMqtt": {
+        "section": "mqtt",
+        "page": "systemMqtt",
+        "level": "global"
+      },
+      "systemTls": {
+        "section": "tls",
+        "page": "systemTls",
+        "level": "global"
+      },
+      "systemAuthentication": {
+        "section": "auth",
+        "page": "systemAuthentication",
+        "level": "global"
+      },
+      "systemNetworking": {
+        "section": "networking",
+        "page": "systemNetworking",
+        "level": "global"
+      },
+      "systemProxy": {
+        "section": "proxy",
+        "page": "systemProxy",
+        "level": "global"
+      },
+      "systemUi": {
+        "section": "ui",
+        "page": "systemUi",
+        "level": "global"
+      },
+      "systemLogging": {
+        "section": "logger",
+        "page": "systemLogging",
+        "level": "global"
+      },
+      "systemEnvironmentVariables": {
+        "section": "environment_vars",
+        "page": "systemEnvironmentVariables",
+        "level": "global"
+      },
+      "systemTelemetry": {
+        "section": "telemetry",
+        "page": "systemTelemetry",
+        "level": "global"
+      },
+      "systemBirdseye": {
+        "section": "birdseye",
+        "page": "systemBirdseye",
+        "level": "global"
+      },
+      "systemDetectorsAndModel": {
+        "section": "model",
+        "page": "systemDetectorsAndModel",
+        "level": "global"
+      }
+    }
+  }
+}
diff --git a/docs/src/components/FrigateConfigMock/styles.module.css b/docs/src/components/FrigateConfigMock/styles.module.css
new file mode 100644
index 0000000000..5a6776a4f0
--- /dev/null
+++ b/docs/src/components/FrigateConfigMock/styles.module.css
@@ -0,0 +1,1828 @@
+.mock {
+  --mock-background: #000;
+  --mock-card: #090909;
+  --mock-border: #525252;
+  --mock-border-soft: #343434;
+  --mock-input: #191919;
+  --mock-muted: #6b6b6b;
+  --mock-primary-variant: #a3a3a3;
+  --mock-foreground: #fff;
+  --mock-selected: #526ff5;
+  overflow-x: auto;
+  color: var(--mock-foreground);
+  background: var(--mock-background);
+  border: 1px solid var(--mock-border-soft);
+  border-radius: 6px;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-size: 14px;
+}
+
+.stepBar,
+.rangeControl,
+.stepActions,
+.menuGroupLabel,
+.menuItem,
+.singleMenuItem {
+  display: flex;
+  align-items: center;
+}
+
+.guidePlayer {
+  min-width: 760px;
+  background: #101010;
+  border-bottom: 1px solid var(--mock-border-soft);
+}
+
+.guideSteps {
+  display: flex;
+  overflow-x: auto;
+  gap: 14px;
+  padding: 10px 14px 8px;
+  scroll-padding-inline: 14px;
+  scrollbar-width: thin;
+}
+
+.guideStep {
+  position: relative;
+  display: grid;
+  flex: 0 0 auto;
+  min-width: 0;
+  grid-template-columns: 24px minmax(0, 1fr);
+  align-items: center;
+  gap: 7px;
+  padding: 0 8px 0 0;
+  color: var(--mock-muted);
+  background: transparent;
+  border: 0;
+  text-align: left;
+}
+
+.guideStep::after {
+  position: absolute;
+  z-index: 0;
+  top: 11px;
+  right: -14px;
+  left: 24px;
+  height: 1px;
+  background: var(--mock-border-soft);
+  content: "";
+}
+
+.guideStep:last-child::after {
+  display: none;
+}
+
+.guideStep span {
+  z-index: 1;
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  color: var(--mock-primary-variant);
+  background: #1c1c1c;
+  border: 1px solid var(--mock-border);
+  border-radius: 50%;
+  font-size: 11px;
+}
+
+.guideStep small {
+  z-index: 1;
+  overflow: visible;
+  padding-right: 0;
+  background: #101010;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.guideStepActive {
+  color: var(--mock-foreground);
+}
+
+.guideStepActive span {
+  color: white;
+  background: var(--mock-selected);
+  border-color: var(--mock-selected);
+}
+
+.guideStepComplete span {
+  color: #dbe2ff;
+  border-color: var(--mock-selected);
+}
+
+.stepBar {
+  min-width: 760px;
+  min-height: 42px;
+  justify-content: space-between;
+  padding: 0 14px;
+  color: var(--mock-primary-variant);
+  border-top: 1px solid var(--mock-border-soft);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.currentInstruction {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.currentInstruction > span,
+.currentInstruction small {
+  color: var(--mock-muted);
+  font-size: 11px;
+}
+
+.currentInstruction strong {
+  overflow: hidden;
+  color: var(--mock-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stepActions {
+  gap: 6px;
+}
+
+.stepActions button {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--mock-foreground);
+  background: transparent;
+  border: 1px solid var(--mock-border);
+  border-radius: 4px;
+  font-size: 22px;
+  line-height: 1;
+  place-items: center;
+}
+
+.stepActions button svg {
+  width: 15px;
+  height: 15px;
+}
+
+.stepActions button:disabled {
+  color: var(--mock-muted);
+  border-color: var(--mock-border-soft);
+}
+
+.viewport {
+  position: relative;
+  overflow: hidden;
+  height: 578px;
+  min-width: 760px;
+  background: #080808;
+}
+
+.appFrame {
+  position: absolute;
+  inset: 0;
+  min-width: 760px;
+  background: var(--mock-background);
+  scale: 1;
+  transform: translate(0, 0);
+  transition:
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    scale 240ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform, scale;
+}
+
+.cameraOverview {
+  scale: 0.92;
+}
+
+.cameraSettings {
+  scale: 1;
+  transform: translate(3px, -3px);
+}
+
+.cameraMenu {
+  scale: 1;
+  transform: translate(-5px, 0);
+  animation: camera-reframe-out 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cameraField {
+  scale: 1;
+  transform: translate(-14px, 0);
+  animation: camera-reframe-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.appHeader {
+  display: grid;
+  height: 58px;
+  grid-template-columns: 48px 220px minmax(0, 1fr);
+  border-bottom: 1px solid var(--mock-border-soft);
+}
+
+.logoCell {
+  display: grid;
+  place-items: center;
+  background: #1b1b1b;
+  border-right: 1px solid var(--mock-border-soft);
+}
+
+.logoCell img {
+  width: 28px;
+  height: 28px;
+}
+
+.settingsTitle {
+  display: flex;
+  grid-column: 2 / -1;
+  align-items: center;
+  padding: 0 14px;
+  color: var(--mock-foreground);
+  font-size: 21px;
+  font-weight: 600;
+}
+
+.appBody {
+  position: relative;
+  display: grid;
+  height: 520px;
+  grid-template-columns: 48px 220px minmax(0, 1fr);
+}
+
+.systemMenu {
+  position: absolute;
+  z-index: 20;
+  top: 5px;
+  bottom: 43px;
+  left: 5px;
+  overflow: hidden;
+  width: 288px;
+  color: #ededed;
+  background: #242424;
+  border: 1px solid #454545;
+  border-radius: 5px;
+  box-shadow: 0 12px 30px rgb(0 0 0 / 55%);
+  opacity: 0;
+  transform: translateY(14px) scale(0.98);
+  transform-origin: 0 100%;
+  transition:
+    opacity 240ms ease,
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+  pointer-events: none;
+}
+
+.systemMenuVisible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition-delay: 0ms;
+}
+
+.systemMenuGroup {
+  padding: 5px 0 3px;
+}
+
+.systemMenuGroup strong {
+  display: block;
+  padding: 5px 11px 7px;
+  border-bottom: 1px solid #303030;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.systemMenuItem,
+.restartItem {
+  display: grid;
+  min-height: 29px;
+  grid-template-columns: 18px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 7px;
+  margin: 1px 5px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.systemMenuItem > span,
+.restartItem > span {
+  display: grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  color: #dedede;
+  font-size: 15px;
+}
+
+.systemMenuItem b,
+.restartItem b {
+  font-weight: 500;
+}
+
+.systemMenuItem i {
+  display: grid;
+  place-items: center;
+  color: #d8d8d8;
+  font-size: 17px;
+  font-style: normal;
+  text-align: right;
+}
+
+.systemMenuTarget {
+  color: white;
+  background: #303030;
+  outline: 2px solid var(--mock-selected);
+  outline-offset: -1px;
+  animation: focus-breathe 2s ease-in-out infinite;
+}
+
+.restartItem {
+  min-height: 36px;
+  margin: 3px 0 0;
+  padding: 0 12px;
+  border-top: 1px solid #343434;
+  border-radius: 0;
+}
+
+.iconRail {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 12px;
+  background: #1b1b1b;
+  border-right: 1px solid var(--mock-border-soft);
+}
+
+.railSpacer {
+  flex: 1;
+}
+
+.settingsIcon {
+  margin-bottom: 12px;
+}
+
+.railIcon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  color: #868686;
+  background: #2c2c2c;
+  border-radius: 7px;
+  font-size: 15px;
+}
+
+.railIcon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.settingsNav {
+  overflow: hidden;
+  padding: 10px 9px 20px 10px;
+  color: var(--mock-muted);
+  background: var(--mock-background);
+  border-right: 1px solid var(--mock-border-soft);
+}
+
+.singleMenuItem,
+.menuGroupLabel,
+.menuItem {
+  min-height: 32px;
+  padding: 0 8px;
+  line-height: 1.2;
+}
+
+.singleMenuItem {
+  margin-bottom: 3px;
+}
+
+.menuGroup {
+  margin-bottom: 4px;
+}
+
+.menuGroupLabel {
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.menuGroupLabelActive {
+  color: var(--mock-foreground);
+  font-weight: 600;
+}
+
+.cameraName {
+  padding: 0 8px 5px;
+  color: var(--mock-primary-variant);
+  font-size: 12px;
+}
+
+.menuItems {
+  padding-left: 8px;
+}
+
+.menuItem {
+  position: relative;
+  justify-content: space-between;
+  margin: 1px 0;
+  border-radius: 5px;
+  font-size: 13px;
+}
+
+.menuItemActive {
+  color: var(--mock-foreground);
+  background: #1b1b1b;
+  font-weight: 500;
+}
+
+.menuItem i {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  background: var(--mock-selected);
+  border-radius: 50%;
+}
+
+.navigationTarget {
+  outline: 2px solid var(--mock-selected);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgb(82 111 245 / 14%);
+  animation: focus-breathe 2s ease-in-out infinite;
+}
+
+.contentViewport {
+  overflow-y: hidden;
+  min-width: 0;
+  background: var(--mock-background);
+  scroll-behavior: smooth;
+}
+
+.masksZonesLayout {
+  position: relative;
+  display: grid;
+  height: 100%;
+  grid-template-columns: minmax(174px, 32%) minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
+
+.fieldHint.maskZoneHint {
+  z-index: 12;
+  top: 16px;
+  right: 16px;
+  bottom: auto;
+  width: min(330px, calc(68% - 32px));
+  animation: hint-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.fieldHint.maskZoneHint::before {
+  display: none;
+}
+
+.polygonSidebar {
+  overflow: hidden auto;
+  min-width: 0;
+  background: #101010;
+  border: 1px solid var(--mock-border-soft);
+  border-radius: 6px;
+  scrollbar-width: thin;
+}
+
+.polygonLists,
+.polygonEditor {
+  display: grid;
+  align-content: start;
+}
+
+.polygonPageTitle,
+.polygonEditorHeader {
+  padding: 12px;
+  border-bottom: 1px solid var(--mock-border-soft);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.polygonEditorHeader {
+  display: grid;
+  gap: 3px;
+}
+
+.polygonEditorHeader small {
+  color: var(--mock-muted);
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.maskZoneTarget {
+  position: relative;
+  min-width: 0;
+}
+
+.maskZoneListSection {
+  padding: 10px;
+  border-bottom: 1px solid var(--mock-border-soft);
+}
+
+.maskZoneListSection > header {
+  display: flex;
+  min-height: 28px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--mock-foreground);
+  font-size: 11px;
+}
+
+.polygonAdd {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  color: #080808;
+  background: #dadada;
+  border-radius: 4px;
+  place-items: center;
+}
+
+.polygonAdd svg {
+  width: 15px;
+  height: 15px;
+}
+
+.polygonListItem {
+  display: grid;
+  min-height: 42px;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  margin-top: 5px;
+  padding: 6px 7px;
+  color: var(--mock-foreground);
+  background: #202020;
+  border: 1px solid #3f3f3f;
+  border-radius: 5px;
+}
+
+.polygonListItem > svg {
+  width: 15px;
+  height: 15px;
+  color: var(--mock-primary-variant);
+}
+
+.polygonListItem > span:nth-child(2) {
+  display: grid;
+  min-width: 0;
+}
+
+.polygonListItem b,
+.polygonListItem small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.polygonListItem b {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.polygonListItem small {
+  color: var(--mock-muted);
+  font-size: 9px;
+}
+
+.polygonListItem .switch {
+  width: 28px;
+  height: 16px;
+}
+
+.polygonListItem .switch span {
+  width: 12px;
+  height: 12px;
+}
+
+.polygonListItem .switchOn span {
+  transform: translateX(12px);
+}
+
+.polygonForm {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+}
+
+.polygonFormField {
+  display: grid;
+  gap: 5px;
+}
+
+.polygonFormField strong,
+.polygonToggleRow strong {
+  color: var(--mock-foreground);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.polygonFormField small {
+  color: var(--mock-muted);
+  font-size: 9px;
+  line-height: 1.35;
+}
+
+.polygonInput {
+  display: flex;
+  min-height: 30px;
+  align-items: center;
+  padding: 5px 8px;
+  color: var(--mock-foreground);
+  background: #1a1a1a;
+  border: 1px solid #484848;
+  border-radius: 5px;
+  font-size: 10px;
+}
+
+.polygonToggleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.distanceGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 5px;
+}
+
+.polygonActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--mock-border-soft);
+  font-size: 10px;
+}
+
+.polygonActions span,
+.polygonActions b {
+  padding: 6px 10px;
+  border: 1px solid var(--mock-border);
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.polygonActions b {
+  background: var(--mock-selected);
+  border-color: var(--mock-selected);
+}
+
+.masksZonesLayout > .maskZoneTarget {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+}
+
+.polygonCanvas {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  background: #111;
+  border: 1px solid var(--mock-border-soft);
+  border-radius: 6px;
+}
+
+.polygonCanvas img,
+.polygonCanvas svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.polygonCanvas img {
+  object-fit: cover;
+}
+
+.polygonCanvas svg {
+  overflow: visible;
+}
+
+.polygonCanvas polygon {
+  vector-effect: non-scaling-stroke;
+  stroke-width: 3px;
+}
+
+.polygonCanvas circle {
+  fill: white;
+  stroke: var(--mock-selected);
+  stroke-width: 3px;
+  vector-effect: non-scaling-stroke;
+}
+
+.zonePolygon {
+  fill: rgb(212 182 52 / 24%);
+  stroke: #e0c139;
+}
+
+.motionMaskPolygon {
+  fill: rgb(53 105 255 / 34%);
+  stroke: #4774ff;
+}
+
+.objectMaskPolygon {
+  fill: rgb(205 205 205 / 28%);
+  stroke: #d7d7d7;
+}
+
+.canvasBadge,
+.canvasTools {
+  position: absolute;
+  color: white;
+  background: rgb(0 0 0 / 72%);
+  border: 1px solid rgb(255 255 255 / 22%);
+  border-radius: 4px;
+  font-size: 10px;
+}
+
+.canvasBadge {
+  top: 9px;
+  left: 9px;
+  padding: 5px 8px;
+}
+
+.canvasTools {
+  right: 9px;
+  bottom: 9px;
+  display: flex;
+  gap: 10px;
+  padding: 6px 8px;
+}
+
+.scene {
+  width: 100%;
+  padding: 14px 16px 28px;
+}
+
+.sectionHeader {
+  margin-bottom: 22px;
+}
+
+.sectionHeader h3 {
+  margin: 0;
+  color: var(--mock-foreground);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.sectionHeader p {
+  margin: 5px 0 0;
+  color: var(--mock-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.docsLink {
+  display: inline-block;
+  margin-top: 4px;
+  color: var(--mock-primary-variant);
+  font-size: 12px;
+}
+
+.docsLink span {
+  margin-left: 3px;
+  font-size: 10px;
+}
+
+.docsLink svg {
+  display: inline;
+  width: 11px;
+  height: 11px;
+  margin-left: 3px;
+  vertical-align: -1px;
+}
+
+.panels {
+  display: grid;
+  gap: 20px;
+}
+
+.reviewLayout {
+  display: grid;
+  gap: 18px;
+}
+
+.reviewRuntimeSection,
+.reviewClassification {
+  display: grid;
+  gap: 10px;
+  padding: 0 0 18px;
+  border-bottom: 1px solid var(--mock-border-soft);
+}
+
+.reviewRuntimeSection h4,
+.reviewClassification h4 {
+  margin: 0 0 4px;
+  color: var(--mock-foreground);
+  font-size: 17px;
+}
+
+.reviewRuntimeSection p,
+.reviewClassification > p {
+  margin: 0;
+  color: var(--mock-muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.reviewToggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.reviewToggle strong {
+  color: var(--mock-foreground);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.reviewClassificationGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 7px;
+}
+
+.reviewClassificationGrid > div {
+  display: grid;
+  gap: 5px;
+}
+
+.reviewZoneColumn {
+  position: relative;
+}
+
+.reviewClassificationGrid strong {
+  color: var(--mock-foreground);
+  font-size: 13px;
+}
+
+.reviewClassificationGrid small {
+  color: var(--mock-muted);
+  font-size: 11px;
+}
+
+.reviewZones {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  background: #242424;
+  border-radius: 6px;
+}
+
+.reviewZones span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--mock-foreground);
+  font-size: 11px;
+}
+
+.reviewZones i {
+  position: relative;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #8a8a8a;
+  border-radius: 2px;
+}
+
+.reviewZones .reviewCheckboxChecked {
+  background: var(--mock-selected);
+  border-color: #8ea2ff;
+}
+
+.reviewZones .reviewCheckboxChecked::after {
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.reviewConfigCard {
+  padding: 14px;
+  background: #202020;
+  border: 1px solid #4a4a4a;
+  border-radius: 7px;
+}
+
+.reviewConfigHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #414141;
+}
+
+.reviewConfigHeader > div {
+  display: grid;
+  gap: 4px;
+}
+
+.reviewConfigHeader strong {
+  color: var(--mock-foreground);
+  font-size: 13px;
+}
+
+.reviewConfigHeader small {
+  color: var(--mock-muted);
+  font-size: 10px;
+}
+
+.reviewConfigHeader svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+
+.reviewConfigCard .fields {
+  padding-top: 15px;
+}
+
+.detectorModelLayout {
+  display: grid;
+  gap: 18px;
+}
+
+.detectorHardwareCard {
+  position: relative;
+  padding: 14px;
+  background: #202020;
+  border: 1px solid #4a4a4a;
+  border-radius: 7px;
+}
+
+.detectorCardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #414141;
+}
+
+.detectorCardHeader > div {
+  display: grid;
+  gap: 4px;
+}
+
+.detectorCardHeader strong {
+  color: var(--mock-foreground);
+  font-size: 13px;
+}
+
+.detectorCardHeader small {
+  color: var(--mock-muted);
+  font-size: 10px;
+}
+
+.detectorCardHeader svg {
+  width: 15px;
+  height: 15px;
+}
+
+.detectorInstances {
+  display: grid;
+  gap: 12px;
+  padding-top: 14px;
+}
+
+.detectorInstance {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid #4a4a4a;
+  border-radius: 6px;
+}
+
+.detectorInstanceHeader {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 18px;
+  align-items: start;
+  gap: 9px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #414141;
+}
+
+.detectorInstanceHeader > svg {
+  width: 15px;
+  height: 15px;
+  color: var(--mock-muted);
+}
+
+.detectorInstanceHeader > div {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 5px 8px;
+}
+
+.detectorInstanceHeader strong {
+  color: var(--mock-foreground);
+  font-size: 12px;
+}
+
+.detectorInstanceHeader span,
+.detectorInstanceHeader small {
+  color: var(--mock-muted);
+  font-size: 10px;
+}
+
+.detectorInstanceHeader small {
+  width: 100%;
+  line-height: 1.35;
+}
+
+.detectorFields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.detectorFields > div {
+  display: grid;
+  gap: 6px;
+  color: var(--mock-muted);
+  font-size: 10px;
+}
+
+.detectorSpecificFields {
+  display: grid;
+  gap: 14px;
+}
+
+.detectorSpecificField {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(150px, 48%);
+  align-items: center;
+  gap: 18px;
+}
+
+.detectorSpecificField > div {
+  display: grid;
+  gap: 4px;
+}
+
+.detectorSpecificField strong {
+  color: var(--mock-foreground);
+  font-size: 11px;
+}
+
+.detectorSpecificField small {
+  color: var(--mock-muted);
+  font-size: 9px;
+  line-height: 1.35;
+}
+
+.detectorAddPanel {
+  display: grid;
+  width: min(280px, 100%);
+  gap: 9px;
+  padding: 12px;
+  color: var(--mock-muted);
+  background: #202020;
+  border: 1px solid #4a4a4a;
+  border-radius: 6px;
+  font-size: 11px;
+}
+
+.detectorAddPanel > div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.detectorModelTabs {
+  display: flex;
+  gap: 18px;
+  padding: 13px 0 4px;
+  color: var(--mock-muted);
+  border-bottom: 1px solid #414141;
+  font-size: 11px;
+}
+
+.detectorModelTabs strong {
+  padding-bottom: 8px;
+  color: var(--mock-foreground);
+  border-bottom: 2px solid var(--mock-selected);
+  font-weight: 500;
+}
+
+.detectorHardwareCard > .fields {
+  padding-top: 15px;
+}
+
+.detectorAdvancedHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+  padding: 10px 2px;
+  color: var(--mock-muted);
+  border-top: 1px solid #414141;
+  font-size: 11px;
+}
+
+.detectorAdvancedHeader svg {
+  width: 14px;
+  height: 14px;
+}
+
+.detectorAdvancedFields {
+  display: grid;
+  gap: 20px;
+  padding: 15px;
+  background: #171717;
+  border: 1px solid #454545;
+  border-radius: 6px;
+}
+
+.standaloneField {
+  padding: 0 14px;
+}
+
+.group {
+  margin: 0;
+  padding: 14px;
+  background: color-mix(in srgb, var(--mock-card) 30%, transparent);
+  border: 1px solid var(--mock-border);
+  border-radius: 7px;
+}
+
+.groupTitle {
+  padding-bottom: 13px;
+  color: var(--mock-primary-variant);
+  border-bottom: 1px solid var(--mock-border-soft);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.fields {
+  display: grid;
+  gap: 22px;
+  padding-top: 17px;
+}
+
+.field {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr);
+  align-items: start;
+  column-gap: 20px;
+}
+
+.objectField {
+  position: relative;
+  overflow: visible;
+  background: #202020;
+  border: 1px solid #4a4a4a;
+  border-radius: 7px;
+}
+
+.objectFieldHeader {
+  display: flex;
+  min-height: 70px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 13px 15px;
+}
+
+.objectFieldHeader > svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--mock-foreground);
+}
+
+.objectFieldContent {
+  display: grid;
+  gap: 12px;
+  padding: 0 15px 15px;
+}
+
+.objectEntry {
+  display: grid;
+  gap: 8px;
+  padding: 11px;
+  border: 1px solid #4a4a4a;
+  border-radius: 6px;
+}
+
+.objectEntryHeader {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+}
+
+.objectValues {
+  display: grid;
+  gap: 8px;
+  margin-left: 5px;
+  padding-left: 11px;
+  border-left: 2px solid #3a3a3a;
+}
+
+.objectInput {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  padding: 7px 10px;
+  overflow: hidden;
+  color: var(--mock-foreground);
+  background: #171717;
+  border: 1px solid #454545;
+  border-radius: 5px;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.objectDelete {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  color: #848484;
+}
+
+.objectDelete svg {
+  width: 15px;
+  height: 15px;
+}
+
+.objectAdd {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 32px;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px;
+  color: var(--mock-foreground);
+  background: #090909;
+  border: 1px solid #555;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.objectAdd svg {
+  width: 15px;
+  height: 15px;
+}
+
+.rulesContent {
+  display: grid;
+  gap: 10px;
+  padding: 0 15px 15px;
+}
+
+.rulesHeader,
+.ruleRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
+  gap: 8px;
+}
+
+.rulesHeader {
+  color: var(--mock-muted);
+  font-size: 11px;
+}
+
+.rulesHeader span:last-child {
+  grid-column: 2;
+}
+
+.rulesRows {
+  display: grid;
+  gap: 8px;
+}
+
+.ruleRow {
+  align-items: center;
+}
+
+.trackField,
+.labelSwitchesField {
+  position: relative;
+  display: grid;
+  gap: 8px;
+}
+
+.trackSummary {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--mock-muted);
+  font-size: 12px;
+}
+
+.trackSummary svg {
+  width: 14px;
+  height: 14px;
+}
+
+.trackSelector {
+  overflow: hidden;
+  width: min(448px, 100%);
+  padding: 8px 6px 5px;
+  background: #242424;
+  border: 1px solid #4b4b4b;
+  border-radius: 7px;
+}
+
+.trackSearch {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  margin: 0 2px 7px;
+  padding: 8px 10px;
+  color: #858b96;
+  background: #181818;
+  border: 1px solid #484848;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+.trackOptions {
+  display: grid;
+  max-height: 206px;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.trackOption {
+  display: flex;
+  min-height: 30px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 2px 8px;
+  color: var(--mock-foreground);
+  font-size: 12px;
+}
+
+.trackDescription {
+  margin: 0;
+  color: var(--mock-muted);
+  font-size: 11px;
+}
+
+.labelSelector {
+  display: grid;
+  overflow: hidden;
+  width: min(448px, 100%);
+  gap: 8px;
+  padding: 8px 6px;
+  background: #242424;
+  border: 1px solid #4b4b4b;
+  border-radius: 7px;
+}
+
+.customLabelInput {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  padding: 8px 10px;
+  color: #858b96;
+  background: #181818;
+  border: 1px solid #484848;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+.filtersContent {
+  display: grid;
+  gap: 12px;
+  padding: 0 15px 15px;
+}
+
+.filterCard {
+  overflow: hidden;
+  border: 1px solid #4a4a4a;
+  border-radius: 6px;
+}
+
+.filterCardHeader {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 13px;
+}
+
+.filterCardHeader strong {
+  color: var(--mock-foreground);
+  font-size: 12px;
+}
+
+.filterCardHeader svg {
+  width: 15px;
+  height: 15px;
+}
+
+.filterSettings {
+  display: grid;
+  gap: 13px;
+  padding: 4px 13px 14px;
+}
+
+.filterSetting {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(130px, 46%);
+  align-items: center;
+  gap: 18px;
+  color: var(--mock-foreground);
+  font-size: 12px;
+}
+
+.focused::after {
+  position: absolute;
+  z-index: 2;
+  inset: -9px;
+  border: 2px solid var(--mock-selected);
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px rgb(82 111 245 / 16%);
+  content: "";
+  pointer-events: none;
+  animation: focus-breathe 2s ease-in-out infinite;
+}
+
+.fieldHint {
+  position: absolute;
+  z-index: 7;
+  top: calc(100% + 16px);
+  right: 0;
+  display: flex;
+  width: min(410px, 86%);
+  gap: 9px;
+  padding: 10px 12px;
+  color: #e8ebf8;
+  background: #171a25;
+  border: 1px solid #526ff5;
+  border-radius: 6px;
+  box-shadow: 0 10px 26px rgb(0 0 0 / 45%);
+  pointer-events: auto;
+}
+
+.fieldHint::before {
+  position: absolute;
+  top: -6px;
+  right: 28px;
+  width: 10px;
+  height: 10px;
+  background: #171a25;
+  border-top: 1px solid #526ff5;
+  border-left: 1px solid #526ff5;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.fieldHintAbove {
+  top: auto;
+  bottom: calc(100% + 16px);
+}
+
+.fieldHintAbove::before {
+  top: auto;
+  bottom: -6px;
+  border-top: 0;
+  border-right: 1px solid #526ff5;
+  border-bottom: 1px solid #526ff5;
+  border-left: 0;
+}
+
+.fieldHintOverlay {
+  top: 14px;
+  right: 14px;
+  bottom: auto;
+  width: min(360px, calc(100% - 28px));
+}
+
+.fieldHintOverlay::before {
+  display: none;
+}
+
+.navigationHint {
+  z-index: 30;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  width: min(330px, calc(100% - 300px));
+}
+
+.navigationHint::before {
+  top: calc(50% - 5px);
+  right: auto;
+  left: -6px;
+  display: block;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #526ff5;
+  border-left: 1px solid #526ff5;
+}
+
+.navigationHintReady {
+  animation: hint-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.fieldHintMeasuring {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.fieldHintReady {
+  animation: hint-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.fieldHintIcon {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex: none;
+  place-items: center;
+  color: #8ea2ff;
+  font-size: 16px;
+}
+
+.fieldHint > div {
+  min-width: 0;
+  flex: 1;
+}
+
+.fieldHint strong {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fieldHint p {
+  margin: 3px 0 0;
+  color: #aeb5c8;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.fieldHintNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 9px;
+  padding-top: 8px;
+  color: #c9cede;
+  border-top: 1px solid rgb(142 162 255 / 20%);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.fieldHintNavigation button {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: #e8ebf8;
+  background: #222735;
+  border: 1px solid #424b68;
+  border-radius: 4px;
+  cursor: pointer;
+  place-items: center;
+}
+
+.fieldHintNavigation button:hover:not(:disabled) {
+  background: #2b3245;
+  border-color: #7185e9;
+}
+
+.fieldHintNavigation button:disabled {
+  cursor: default;
+  opacity: 0.35;
+}
+
+.fieldHintNavigation button svg {
+  width: 15px;
+  height: 15px;
+}
+
+.fieldCopy {
+  min-width: 0;
+}
+
+.fieldCopy strong {
+  display: block;
+  color: var(--mock-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.fieldCopy p {
+  margin: 4px 0 0;
+  color: var(--mock-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  flex: none;
+  background: #404040;
+  border: 2px solid transparent;
+  border-radius: 12px;
+}
+
+.switch span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background: var(--mock-primary-variant);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 45%);
+  transition: transform 220ms ease;
+}
+
+.switchOn {
+  background: var(--mock-selected);
+}
+
+.switchOn span {
+  background: #e8e8e8;
+  transform: translateX(20px);
+}
+
+.rangeControl {
+  width: 100%;
+  max-width: 42rem;
+  gap: 14px;
+  padding-top: 3px;
+}
+
+.rangeTrack {
+  position: relative;
+  height: 8px;
+  flex: 1;
+  overflow: visible;
+  background: #292929;
+  border-radius: 999px;
+}
+
+.rangeTrack span {
+  display: block;
+  height: 100%;
+  background: #e8e8e8;
+  border-radius: inherit;
+}
+
+.rangeTrack i {
+  position: absolute;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  background: #e8e8e8;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.rangeValue {
+  width: 36px;
+  flex: none;
+  color: var(--mock-muted);
+  font-size: 13px;
+  text-align: right;
+}
+
+.input {
+  display: inline-flex;
+  width: 100%;
+  min-height: 38px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 8px 11px;
+  color: var(--mock-foreground);
+  background: var(--mock-input);
+  border: 1px solid var(--mock-border);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.chevron {
+  color: var(--mock-muted);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tags span {
+  padding: 5px 8px;
+  color: var(--mock-foreground);
+  background: var(--mock-input);
+  border: 1px solid var(--mock-border-soft);
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.advancedCollapsed {
+  padding: 10px 4px;
+  color: var(--mock-muted);
+  border-top: 1px solid var(--mock-border-soft);
+  font-size: 12px;
+}
+
+@keyframes camera-reframe-out {
+  0% {
+    scale: 1;
+    transform: translate(3px, -3px);
+  }
+  50% {
+    scale: 0.98;
+  }
+  100% {
+    scale: 1;
+    transform: translate(-5px, 0);
+  }
+}
+
+@keyframes camera-reframe-in {
+  0% {
+    scale: 1;
+    transform: translate(-5px, 0);
+  }
+  50% {
+    scale: 1.025;
+  }
+  100% {
+    scale: 1;
+    transform: translate(-14px, 0);
+  }
+}
+
+@keyframes focus-breathe {
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px rgb(82 111 245 / 12%);
+  }
+  50% {
+    box-shadow:
+      0 0 0 5px rgb(82 111 245 / 20%),
+      0 0 18px 3px rgb(82 111 245 / 42%);
+  }
+}
+
+@keyframes hint-in {
+  from {
+    opacity: 0;
+    transform: translateY(-7px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (max-width: 700px) {
+  .mock {
+    border-radius: 4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appFrame,
+  .systemMenu,
+  .cameraMenu,
+  .cameraField,
+  .focused::after,
+  .navigationTarget,
+  .systemMenuTarget,
+  .fieldHint,
+  .switch span {
+    animation: none;
+    transition: none;
+  }
+}
diff --git a/docs/src/components/ModelConfigDropdown/index.jsx b/docs/src/components/ModelConfigDropdown/index.jsx
index 737f47ec23..b78d6c4d77 100644
--- a/docs/src/components/ModelConfigDropdown/index.jsx
+++ b/docs/src/components/ModelConfigDropdown/index.jsx
@@ -1,7 +1,9 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import CodeBlock from "@theme/CodeBlock";
 import ConfigTabs from "@site/src/components/ConfigTabs";
+import FrigateConfigMock from "@site/src/components/FrigateConfigMock";
 import TabItem from "@theme/TabItem";
+import { load } from "js-yaml";
 import { marked } from "marked";
 import styles from "./styles.module.css";
 
@@ -103,6 +105,40 @@ export default function ModelConfigDropdown({ models }) {
 
   const selectedModel = models[selectedModelIndex];
   const hasChoices = models.length > 1;
+  const mockConfig = useMemo(() => {
+    try {
+      const parsed = load(selectedModel.yaml) ?? {};
+      const model = parsed.model ?? {};
+      const legacyDetectors = Object.fromEntries(
+        Object.entries(parsed).filter(
+          ([key, value]) =>
+            key !== "model" &&
+            value &&
+            typeof value === "object" &&
+            typeof value.type === "string",
+        ),
+      );
+      const detectors = parsed.detectors ?? legacyDetectors;
+      const values = {
+        detectors,
+        ...model,
+      };
+      const targets = [
+        ...(Object.keys(detectors).length ? ["detectors"] : []),
+        ...(Object.keys(model).length
+          ? [
+              {
+                field: "custom_model",
+                hint: `Configure the custom detection model, input size, and input format for ${selectedModel.label}.`,
+              },
+            ]
+          : []),
+      ];
+      return { targets, values };
+    } catch {
+      return { targets: ["detectors"], values: { detectors: {} } };
+    }
+  }, [selectedModel.label, selectedModel.yaml]);
 
   const handleModelSelect = (index) => {
     setSelectedModelIndex(index);
@@ -158,7 +194,13 @@ export default function ModelConfigDropdown({ models }) {
           <h4 className={styles.stepTitle}>Step 3 — Configure the detector</h4>
           <ConfigTabs>
             <TabItem value="ui">
-              <Markdown>{selectedModel.ui}</Markdown>
+              <FrigateConfigMock
+                autoPlay={false}
+                key={selectedModel.key}
+                section="model"
+                targets={mockConfig.targets}
+                values={mockConfig.values}
+              />
             </TabItem>
             <TabItem value="yaml">
               <CodeBlock language="yaml">{selectedModel.yaml}</CodeBlock>