Merge 781dcfdf6d into 282e70d4bf

* add go2rtc stream selection to camera ffmpeg config

* i18n

* add config-schema.json to generated e2e mock data

* e2e test

* docs

* fix test

docs/docs/configuration/advanced/reference.md

@@ -655,11 +655,6 @@ snapshots:
   retain:
     # Required: Default retention days (default: shown below)
     default: 10
-    # Optional: Mode for retention. (default: shown below)
-    #   all - save all snapshots regardless of activity
-    #   motion - save snapshots for any detected motion
-    #   active_objects - save snapshots for active/moving objects
-    mode: motion
     # Optional: Per object retention days
     objects:
       person: 15

docs/docs/configuration/audio_detectors.md

@@ -54,7 +54,7 @@ The ffmpeg process for capturing audio will be a separate connection to the came
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > FFmpeg" /> and add an input with the `audio` role pointing to a stream that includes audio.
+Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and add an input with the `audio` role pointing to a stream that includes audio.
 
 </TabItem>
 <TabItem value="yaml">

docs/docs/configuration/cameras.md

@@ -24,12 +24,14 @@ Each role can only be assigned to one input per camera. The options for roles ar
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 | Field             | Description                                                         |
 | ----------------- | ------------------------------------------------------------------- |
 | **Camera inputs** | List of input stream definitions (paths and roles) for this camera. |
 
+For each input you can choose its source: select **Restream (go2rtc)** to pick an existing [go2rtc stream](restream.md) from a dropdown (Frigate uses the `rtsp://127.0.0.1:8554/<stream>` path and `preset-rtsp-restream` input args for that input automatically), or **Manual input path** to type the stream URL directly.
+
 Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
 
 | Field             | Description                                                                                            |

docs/docs/configuration/ffmpeg_presets.md

@@ -33,7 +33,7 @@ Select the appropriate hwaccel preset for your hardware.
 <TabItem value="ui">
 
 1. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to the appropriate preset for your hardware.
-2. To override for a specific camera, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" /> and set **Hardware acceleration arguments** for that camera.
+2. To override for a specific camera, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and set **Hardware acceleration arguments** for that camera.
 
 </TabItem>
 <TabItem value="yaml">

docs/docs/configuration/hardware_acceleration_video.md

@@ -85,7 +85,7 @@ VAAPI supports automatic profile selection so it will work automatically with bo
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -105,7 +105,7 @@ ffmpeg:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Intel QuickSync (H.264)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Intel QuickSync (H.264)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -123,7 +123,7 @@ ffmpeg:
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Intel QuickSync (H.265)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Intel QuickSync (H.265)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -178,7 +178,7 @@ VAAPI supports automatic profile selection so it will work automatically with bo
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -237,7 +237,7 @@ Using `preset-nvidia` ffmpeg will automatically select the necessary profile for
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `NVIDIA GPU`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `NVIDIA GPU`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -300,7 +300,7 @@ If you are using the HA App, you may need to use the full access variant and tur
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Raspberry Pi (H.264)` (for H.264 streams) or `Raspberry Pi (H.265)` (for H.265/HEVC streams). For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Raspberry Pi (H.264)` (for H.264 streams) or `Raspberry Pi (H.265)` (for H.265/HEVC streams). For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -420,7 +420,7 @@ For example, for H264 video, you'll select `preset-jetson-h264`.
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `NVIDIA Jetson (H.264)` (or `NVIDIA Jetson (H.265)` for HEVC streams). For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `NVIDIA Jetson (H.264)` (or `NVIDIA Jetson (H.265)` for HEVC streams). For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -452,7 +452,7 @@ Set the FFmpeg hwaccel preset to enable hardware video processing.
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Rockchip RKMPP`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Rockchip RKMPP`. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">
@@ -519,7 +519,7 @@ Set the FFmpeg hwaccel args to enable hardware video processing.
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and configure the hardware acceleration args and input args manually for Synaptics hardware. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and configure the hardware acceleration args and input args manually for Synaptics hardware. For per-camera overrides, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />.
 
 </TabItem>
 <TabItem value="yaml">

docs/docs/configuration/license_plate_recognition.md

@@ -363,7 +363,7 @@ An example configuration for a dedicated LPR camera using a `license_plate`-dete
 
 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 > FFmpeg" /> and add your camera streams.
+Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and add your camera streams.
 
 Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
 
@@ -475,7 +475,7 @@ Navigate to <NavPath path="Settings > Camera configuration > License plate recog
 | **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 > FFmpeg" /> and add your camera streams.
+Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> and add your camera streams.
 
 Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
 

docs/docs/configuration/restream.md

@@ -61,7 +61,7 @@ Configure the go2rtc stream and point the camera inputs at the local restream.
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera. Then navigate to <NavPath path="Settings > Camera configuration > FFmpeg" /> for each camera and set the input paths to use the local restream URL (`rtsp://127.0.0.1:8554/<camera_name>`).
+Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera. For each input, choose **Restream (go2rtc)** and pick the matching stream from the dropdown — Frigate uses the local restream URL (`rtsp://127.0.0.1:8554/<camera_name>`) and the `preset-rtsp-restream` input args for that input automatically. (Choose **Manual input path** instead to type a URL directly.)
 
 </TabItem>
 <TabItem value="yaml">
@@ -111,7 +111,7 @@ Two connections are made to the camera. One for the sub stream, one for the rest
 <ConfigTabs>
 <TabItem value="ui">
 
-Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera and its sub stream. Then navigate to <NavPath path="Settings > Camera configuration > FFmpeg" /> for each camera and configure separate inputs for the main and sub streams using the local restream URLs.
+Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera and its sub stream. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera and add separate inputs for the main and sub streams. Set each input's source to **Restream (go2rtc)** and pick the matching stream from the dropdown — Frigate uses the local restream URL and the `preset-rtsp-restream` input args for that input automatically.
 
 </TabItem>
 <TabItem value="yaml">

docs/docs/configuration/snapshots.md

@@ -111,7 +111,6 @@ Navigate to <NavPath path="Settings > Global configuration > Snapshots" />.
 | Field                                              | Description                                                                         |
 | -------------------------------------------------- | ----------------------------------------------------------------------------------- |
 | **Snapshot retention > Default retention**         | Number of days to retain snapshots (default: 10)                                    |
-| **Snapshot retention > Retention mode**            | Retention mode: `all`, `motion`, or `active_objects`                                |
 | **Snapshot retention > Object retention > Person** | Per-object overrides for retention days (e.g., keep `person` snapshots for 15 days) |
 
 </TabItem>
@@ -122,7 +121,6 @@ snapshots:
   enabled: True
   retain:
     default: 10
-    mode: motion
     objects:
       person: 15
 ```

docs/docs/guides/getting_started.md

@@ -348,7 +348,7 @@ In order to review activity in the Frigate UI, recordings need to be enabled.
 <ConfigTabs>
 <TabItem value="ui">
 
-1. If you have separate streams for detect and record, navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />, select your camera, and add a second input with the `record` role pointing to your high-resolution stream
+1. If you have separate streams for detect and record, navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" />, select your camera, and add a second input with the `record` role pointing to your high-resolution stream
 2. Navigate to <NavPath path="Settings > Global configuration > Recording" /> (or <NavPath path="Settings > Camera configuration > Recording" /> for a specific camera) and set **Enable recording** to on
 
 </TabItem>

frigate/config/camera/camera.py

@@ -100,8 +100,8 @@ class CameraConfig(FrigateBaseModel):
         description="Settings for face detection and recognition for this camera.",
     )
     ffmpeg: CameraFfmpegConfig = Field(
-        title="FFmpeg",
-        description="FFmpeg settings including binary path, args, hwaccel options, and per-role output args.",
+        title="Streams (FFmpeg)",
+        description="Camera stream inputs and FFmpeg options, including binary path, args, hwaccel, and per-role output args.",
     )
     live: CameraLiveConfig = Field(
         default_factory=CameraLiveConfig,

frigate/config/camera/snapshots.py

@@ -3,7 +3,6 @@ from typing import Optional
 from pydantic import Field
 
 from ..base import FrigateBaseModel
-from .record import RetainModeEnum
 
 __all__ = ["SnapshotsConfig", "RetainConfig"]
 
@@ -14,11 +13,6 @@ class RetainConfig(FrigateBaseModel):
         title="Default retention",
         description="Default number of days to retain snapshots.",
     )
-    mode: RetainModeEnum = Field(
-        default=RetainModeEnum.motion,
-        title="Retention mode",
-        description="Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
-    )
     objects: dict[str, float] = Field(
         default_factory=dict,
         title="Object retention",

web/e2e/fixtures/mock-data/generate-mock-data.py

@@ -111,6 +111,18 @@ def generate_config():
     return snapshot
 
 
+def generate_config_schema():
+    """Generate the JSON Schema for FrigateConfig from the backend model.
+
+    This is what the app fetches from /api/config/schema.json to drive the
+    RJSF-based config form. Generating it here keeps the e2e fixture in sync
+    with the backend whenever config models change.
+    """
+    from frigate.config import FrigateConfig
+
+    return FrigateConfig.model_json_schema()
+
+
 def generate_reviews():
     """Generate ReviewSegmentResponse[] validated against Pydantic + Peewee."""
     from frigate.api.defs.response.review_response import ReviewSegmentResponse
@@ -411,6 +423,7 @@ def main():
     print()
 
     write_json("config-snapshot.json", generate_config())
+    write_json("config-schema.json", generate_config_schema())
     write_json("reviews.json", generate_reviews())
     write_json("events.json", generate_events())
     write_json("exports.json", generate_exports())

web/e2e/specs/settings/camera-ffmpeg-streams.spec.ts

@@ -0,0 +1,203 @@
+/**
+ * Camera ffmpeg streams settings tests -- MEDIUM tier.
+ *
+ * Covers the input-path source toggle: each ffmpeg input can either point at a
+ * go2rtc restream (picked from a dropdown, which writes the rtsp://127.0.0.1:8554
+ * path plus the preset-rtsp-restream input_args) or use a manually typed path.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { test, expect } from "../../fixtures/frigate-test";
+import type { Page } from "@playwright/test";
+import { configFactory } from "../../fixtures/mock-data/config";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CONFIG_SCHEMA = JSON.parse(
+  readFileSync(
+    resolve(__dirname, "../../fixtures/mock-data/config-schema.json"),
+    "utf-8",
+  ),
+);
+
+const GO2RTC_STREAMS = {
+  dome_main: ["rtsp://user:pass@192.168.0.20:554/Stream1"],
+  dome_sub: ["rtsp://user:pass@192.168.0.20:554/Stream2"],
+};
+
+type CameraInput = {
+  path: string;
+  roles: string[];
+  input_args?: string;
+};
+
+async function installRoutes(page: Page, frontDoorInputs: CameraInput[]) {
+  const config = configFactory({
+    go2rtc: { streams: GO2RTC_STREAMS },
+    cameras: {
+      front_door: {
+        ffmpeg: { inputs: frontDoorInputs },
+      },
+    },
+  });
+
+  let lastSavedConfig: unknown = null;
+
+  await page.route("**/api/config/schema.json", (route) =>
+    route.fulfill({ json: CONFIG_SCHEMA }),
+  );
+  await page.route("**/api/config", (route) => {
+    if (route.request().method() === "GET") {
+      return route.fulfill({ json: config });
+    }
+    return route.fulfill({ json: { success: true } });
+  });
+  await page.route("**/api/config/raw_paths", (route) =>
+    route.fulfill({
+      json: {
+        cameras: { front_door: { ffmpeg: { inputs: frontDoorInputs } } },
+        go2rtc: { streams: GO2RTC_STREAMS },
+      },
+    }),
+  );
+  await page.route("**/api/config/set", async (route) => {
+    lastSavedConfig = route.request().postDataJSON();
+    await route.fulfill({ json: { success: true, require_restart: false } });
+  });
+  await page.route("**/api/ffmpeg/presets", (route) =>
+    route.fulfill({
+      json: {
+        hwaccel_args: [],
+        input_args: ["preset-rtsp-restream", "preset-rtsp-generic"],
+        output_args: { record: [], detect: [] },
+      },
+    }),
+  );
+
+  return { capturedConfig: () => lastSavedConfig };
+}
+
+const RESTREAM_RADIO = "Restream (go2rtc)";
+const MANUAL_RADIO = "Manual input path";
+
+test.describe("camera ffmpeg input source toggle @medium", () => {
+  test("manual input defaults to the manual text field", async ({
+    frigateApp,
+  }) => {
+    await installRoutes(frigateApp.page, [
+      { path: "rtsp://10.0.0.1:554/video", roles: ["detect"] },
+    ]);
+    await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
+
+    await expect(
+      frigateApp.page.getByRole("radio", { name: MANUAL_RADIO }),
+    ).toBeChecked();
+    await expect(
+      frigateApp.page.getByRole("textbox", { name: "Input path" }),
+    ).toHaveValue("rtsp://10.0.0.1:554/video");
+  });
+
+  test("an existing restream path auto-detects into restream mode", async ({
+    frigateApp,
+  }) => {
+    await installRoutes(frigateApp.page, [
+      {
+        path: "rtsp://127.0.0.1:8554/dome_main",
+        roles: ["detect"],
+        input_args: "preset-rtsp-restream",
+      },
+    ]);
+    await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
+
+    await expect(
+      frigateApp.page.getByRole("radio", { name: RESTREAM_RADIO }),
+    ).toBeChecked();
+    // The dropdown is preselected to the matching go2rtc stream.
+    await expect(
+      frigateApp.page.getByRole("combobox", { name: /go2rtc stream/i }),
+    ).toContainText("dome_main");
+  });
+
+  test("selecting a restream writes the path and preset", async ({
+    frigateApp,
+  }) => {
+    const capture = await installRoutes(frigateApp.page, [
+      { path: "rtsp://10.0.0.1:554/video", roles: ["detect"] },
+    ]);
+    await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
+
+    await frigateApp.page.getByRole("radio", { name: RESTREAM_RADIO }).click();
+    await frigateApp.page
+      .getByRole("combobox", { name: /go2rtc stream/i })
+      .click();
+
+    // The dropdown is searchable: typing narrows the list to matches only,
+    // with no option to enter a custom stream name.
+    await frigateApp.page.getByPlaceholder("Search streams...").fill("sub");
+    await expect(
+      frigateApp.page.getByRole("option", { name: "dome_main" }),
+    ).toBeHidden();
+    await frigateApp.page.getByRole("option", { name: "dome_sub" }).click();
+
+    await frigateApp.page.getByRole("button", { name: "Save" }).click();
+
+    await expect
+      .poll(() => capture.capturedConfig(), { timeout: 5_000 })
+      .toMatchObject({
+        config_data: {
+          cameras: {
+            front_door: {
+              ffmpeg: {
+                inputs: [
+                  {
+                    path: "rtsp://127.0.0.1:8554/dome_sub",
+                    input_args: "preset-rtsp-restream",
+                  },
+                ],
+              },
+            },
+          },
+        },
+      });
+  });
+
+  test("switching a restream back to manual reverts the preset", async ({
+    frigateApp,
+  }) => {
+    const capture = await installRoutes(frigateApp.page, [
+      {
+        path: "rtsp://127.0.0.1:8554/dome_main",
+        roles: ["detect"],
+        input_args: "preset-rtsp-restream",
+      },
+    ]);
+    await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
+
+    await frigateApp.page.getByRole("radio", { name: MANUAL_RADIO }).click();
+
+    // The restream path stays editable in the manual text field.
+    await expect(
+      frigateApp.page.getByRole("textbox", { name: "Input path" }),
+    ).toHaveValue("rtsp://127.0.0.1:8554/dome_main");
+
+    await frigateApp.page.getByRole("button", { name: "Save" }).click();
+
+    await expect
+      .poll(() => capture.capturedConfig(), { timeout: 5_000 })
+      .not.toBeNull();
+
+    const payload = capture.capturedConfig() as {
+      config_data?: {
+        cameras?: {
+          front_door?: {
+            ffmpeg?: { inputs?: Array<{ input_args?: unknown }> };
+          };
+        };
+      };
+    };
+    const input =
+      payload?.config_data?.cameras?.front_door?.ffmpeg?.inputs?.[0];
+    expect(input?.input_args).not.toBe("preset-rtsp-restream");
+  });
+});

web/public/locales/en/config/cameras.json

@@ -152,8 +152,8 @@
     }
   },
   "ffmpeg": {
-    "label": "FFmpeg",
-    "description": "FFmpeg settings including binary path, args, hwaccel options, and per-role output args.",
+    "label": "Streams (FFmpeg)",
+    "description": "Camera stream inputs and FFmpeg options, including binary path, args, hwaccel, and per-role output args.",
     "path": {
       "label": "FFmpeg path",
       "description": "Path to the FFmpeg binary to use or a version alias (\"7.0\" or \"8.0\")."
@@ -666,10 +666,6 @@
         "label": "Default retention",
         "description": "Default number of days to retain snapshots."
       },
-      "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)."
-      },
       "objects": {
         "label": "Object retention",
         "description": "Per-object overrides for snapshot retention days."

web/public/locales/en/config/global.json

@@ -1176,10 +1176,6 @@
         "label": "Default retention",
         "description": "Default number of days to retain snapshots."
       },
-      "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)."
-      },
       "objects": {
         "label": "Object retention",
         "description": "Per-object overrides for snapshot retention days."

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

@@ -85,7 +85,7 @@
     "integrationObjectClassification": "Object classification",
     "integrationAudioTranscription": "Audio transcription",
     "cameraDetect": "Object detection",
-    "cameraFfmpeg": "FFmpeg",
+    "cameraFfmpeg": "Streams (FFmpeg)",
     "cameraRecording": "Recording",
     "cameraSnapshots": "Snapshots",
     "cameraMotion": "Motion detection",
@@ -1553,7 +1553,17 @@
       }
     },
     "cameraInputs": {
-      "itemTitle": "Stream {{index}}"
+      "itemTitle": "Stream {{index}}",
+      "sourceMode": {
+        "restream": "Restream (go2rtc)",
+        "manual": "Manual input path",
+        "go2rtcStreamLabel": "go2rtc stream",
+        "go2rtcStreamPlaceholder": "Select a go2rtc stream",
+        "noGo2rtcStreams": "No go2rtc streams configured",
+        "go2rtcStreamSearch": "Search streams...",
+        "availableStreams": "Available streams",
+        "noMatchingStreams": "No matching streams"
+      }
     },
     "restartRequiredField": "Restart required",
     "restartRequiredFooter": "Configuration changed - Restart required",

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

@@ -44,7 +44,14 @@ const record: SectionConfigOverrides = {
     hiddenFields: ["enabled_in_config", "sync_recordings"],
     advancedFields: ["expire_interval", "preview", "export"],
     uiSchema: {
+      continuous: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+      },
+      motion: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+      },
       export: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
         hwaccel_args: {
           "ui:widget": "FfmpegArgsWidget",
           "ui:options": {
@@ -59,9 +66,12 @@ const record: SectionConfigOverrides = {
       "detections.retain.mode": {
         "ui:options": { enumI18nPrefix: "retainMode" },
       },
-      "preview.quality": {
-        "ui:options": {
-          enumI18nPrefix: "previewQuality",
+      preview: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+        quality: {
+          "ui:options": {
+            enumI18nPrefix: "previewQuality",
+          },
         },
       },
     },

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

@@ -21,13 +21,14 @@ const snapshots: SectionConfigOverrides = {
       "crop",
       "quality",
       "timestamp",
+      "required_zones",
       "retain",
     ],
     fieldGroups: {
       display: ["bounding_box", "crop", "quality", "timestamp"],
     },
     hiddenFields: ["enabled_in_config"],
-    advancedFields: ["height", "quality", "retain"],
+    advancedFields: ["height", "quality"],
     uiSchema: {
       required_zones: {
         "ui:widget": "zoneNames",
@@ -35,11 +36,6 @@ const snapshots: SectionConfigOverrides = {
           suppressMultiSchema: true,
         },
       },
-      "retain.mode": {
-        "ui:options": {
-          enumI18nPrefix: "retainMode",
-        },
-      },
     },
   },
   global: {

web/src/components/config-form/theme/fields/CameraInputsField.tsx

@@ -29,11 +29,19 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { StreamSourceSelector } from "./StreamSourceSelector";
+import {
+  buildRestreamPath,
+  parseRestreamStreamName,
+  RESTREAM_PRESET,
+  type StreamSourceMode,
+} from "./streamSource";
 
 type FfmpegInput = {
   path?: string;
   roles?: string[];
   hwaccel_args?: unknown;
+  input_args?: unknown;
 };
 
 const asInputList = (formData: unknown): FfmpegInput[] => {
@@ -137,7 +145,30 @@ export function CameraInputsField(props: FieldProps) {
   );
   const SchemaField = registry.fields.SchemaField;
 
+  const go2rtcStreamNames = useMemo<string[]>(() => {
+    const streams = formContext?.fullConfig?.go2rtc?.streams;
+    if (!streams || typeof streams !== "object") {
+      return [];
+    }
+    return Object.keys(streams).sort();
+  }, [formContext?.fullConfig?.go2rtc?.streams]);
+
   const [openByIndex, setOpenByIndex] = useState<Record<number, boolean>>({});
+  const [sourceModeByIndex, setSourceModeByIndex] = useState<
+    Record<number, StreamSourceMode>
+  >({});
+
+  // Detect whether an existing input path points at a known go2rtc restream so
+  // the source toggle can default to the right mode for existing configs.
+  const detectMode = useCallback(
+    (path: string | undefined): StreamSourceMode => {
+      const streamName = parseRestreamStreamName(path);
+      return streamName && go2rtcStreamNames.includes(streamName)
+        ? "restream"
+        : "manual";
+    },
+    [go2rtcStreamNames],
+  );
 
   useEffect(() => {
     setOpenByIndex((previous) => {
@@ -171,6 +202,55 @@ export function CameraInputsField(props: FieldProps) {
     [fieldPathId.path, inputs, onChange],
   );
 
+  // Update several fields of one input in a single change so that path and
+  // input_args never race on a stale snapshot of inputs.
+  const handleFieldValuesChange = useCallback(
+    (index: number, partial: Record<string, unknown>) => {
+      const nextInputs = cloneDeep(inputs);
+      const item =
+        (nextInputs[index] as Record<string, unknown> | undefined) ??
+        ({} as Record<string, unknown>);
+
+      Object.assign(item, partial);
+      nextInputs[index] = item;
+
+      onChange(normalizeNonDetectHwaccel(nextInputs), fieldPathId.path);
+    },
+    [fieldPathId.path, inputs, onChange],
+  );
+
+  const handleSourceModeChange = useCallback(
+    (index: number, nextMode: StreamSourceMode) => {
+      const input = inputs[index];
+      const currentPath =
+        typeof input?.path === "string" ? input.path : undefined;
+
+      if (nextMode === "manual") {
+        // Only revert the preset we set ourselves; never clobber custom args.
+        if (input?.input_args === RESTREAM_PRESET) {
+          handleFieldValuesChange(index, { input_args: undefined });
+        }
+      } else if (!parseRestreamStreamName(currentPath)) {
+        // Entering restream with a non-restream path: clear it so the dropdown
+        // shows its placeholder until a stream is chosen.
+        handleFieldValuesChange(index, { path: undefined });
+      }
+
+      setSourceModeByIndex((previous) => ({ ...previous, [index]: nextMode }));
+    },
+    [inputs, handleFieldValuesChange],
+  );
+
+  const handleSelectRestreamStream = useCallback(
+    (index: number, streamName: string) => {
+      handleFieldValuesChange(index, {
+        path: buildRestreamPath(streamName),
+        input_args: RESTREAM_PRESET,
+      });
+    },
+    [handleFieldValuesChange],
+  );
+
   const handleAddInput = useCallback(() => {
     const base = itemSchema
       ? (applySchemaDefaults(itemSchema) as FfmpegInput)
@@ -186,8 +266,9 @@ export function CameraInputsField(props: FieldProps) {
         (_, currentIndex) => currentIndex !== index,
       );
       onChange(nextInputs, fieldPathId.path);
-      setOpenByIndex((previous) => {
-        const next: Record<number, boolean> = {};
+
+      const reindex = <T,>(previous: Record<number, T>): Record<number, T> => {
+        const next: Record<number, T> = {};
         Object.entries(previous).forEach(([key, value]) => {
           const current = Number(key);
           if (Number.isNaN(current) || current === index) {
@@ -197,7 +278,10 @@ export function CameraInputsField(props: FieldProps) {
           next[current > index ? current - 1 : current] = value;
         });
         return next;
-      });
+      };
+
+      setOpenByIndex(reindex);
+      setSourceModeByIndex(reindex);
     },
     [fieldPathId.path, inputs, onChange],
   );
@@ -354,16 +438,32 @@ export function CameraInputsField(props: FieldProps) {
               <CollapsibleContent>
                 <CardContent className="space-y-4 p-4 pt-0">
                   <div className="w-full">
-                    {renderField(index, "path", {
-                      extraUiSchema: {
-                        "ui:widget": "CameraPathWidget",
-                        "ui:options": {
-                          size: "full",
-                          splitLayout: false,
+                    <StreamSourceSelector
+                      idPrefix={`${baseId}-${index}`}
+                      mode={sourceModeByIndex[index] ?? detectMode(input.path)}
+                      onModeChange={(nextMode) =>
+                        handleSourceModeChange(index, nextMode)
+                      }
+                      streamNames={go2rtcStreamNames}
+                      selectedStreamName={
+                        parseRestreamStreamName(input.path) ?? ""
+                      }
+                      onSelectStream={(streamName) =>
+                        handleSelectRestreamStream(index, streamName)
+                      }
+                      manualField={renderField(index, "path", {
+                        extraUiSchema: {
+                          "ui:widget": "CameraPathWidget",
+                          "ui:options": {
+                            size: "full",
+                            splitLayout: false,
+                          },
                         },
-                      },
-                      showSchemaDescription: true,
-                    })}
+                        showSchemaDescription: true,
+                      })}
+                      disabled={disabled}
+                      readonly={readonly}
+                    />
                   </div>
 
                   <div className="w-full">{renderField(index, "roles")}</div>

web/src/components/config-form/theme/fields/StreamSourceSelector.tsx

@@ -0,0 +1,217 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import type { StreamSourceMode } from "./streamSource";
+
+type Go2rtcStreamComboboxProps = {
+  id: string;
+  value: string;
+  options: string[];
+  disabled?: boolean;
+  onSelect: (streamName: string) => void;
+};
+
+// Searchable dropdown of existing go2rtc streams
+function Go2rtcStreamCombobox({
+  id,
+  value,
+  options,
+  disabled,
+  onSelect,
+}: Go2rtcStreamComboboxProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+
+  const commit = (next: string) => {
+    onSelect(next);
+    setSearchValue("");
+    setOpen(false);
+  };
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setSearchValue("");
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal sm:max-w-xs",
+            !value && "text-muted-foreground",
+          )}
+        >
+          <span className="truncate">
+            {value ||
+              t("configForm.cameraInputs.sourceMode.go2rtcStreamPlaceholder")}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput
+            placeholder={t(
+              "configForm.cameraInputs.sourceMode.go2rtcStreamSearch",
+            )}
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {t("configForm.cameraInputs.sourceMode.noMatchingStreams")}
+            </CommandEmpty>
+            <CommandGroup
+              heading={t("configForm.cameraInputs.sourceMode.availableStreams")}
+            >
+              {options.map((option) => (
+                <CommandItem
+                  key={option}
+                  value={option}
+                  onSelect={() => commit(option)}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+type StreamSourceSelectorProps = {
+  idPrefix: string;
+  mode: StreamSourceMode;
+  onModeChange: (mode: StreamSourceMode) => void;
+  streamNames: string[];
+  selectedStreamName: string;
+  onSelectStream: (streamName: string) => void;
+  manualField: ReactNode;
+  disabled?: boolean;
+  readonly?: boolean;
+};
+
+export function StreamSourceSelector({
+  idPrefix,
+  mode,
+  onModeChange,
+  streamNames,
+  selectedStreamName,
+  onSelectStream,
+  manualField,
+  disabled,
+  readonly,
+}: StreamSourceSelectorProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+
+  const restreamId = `${idPrefix}-source-restream`;
+  const manualId = `${idPrefix}-source-manual`;
+  const selectId = `${idPrefix}-restream-select`;
+
+  const hasStreams = streamNames.length > 0;
+  const isDisabled = disabled || readonly;
+
+  return (
+    <div className="space-y-3">
+      <RadioGroup
+        value={mode}
+        onValueChange={(value) => onModeChange(value as StreamSourceMode)}
+        className="flex flex-col gap-2 sm:flex-row sm:gap-6"
+        disabled={isDisabled}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem
+            value="restream"
+            id={restreamId}
+            className={
+              mode === "restream"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+          />
+          <label htmlFor={restreamId} className="cursor-pointer text-sm">
+            {t("configForm.cameraInputs.sourceMode.restream")}
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem
+            value="manual"
+            id={manualId}
+            className={
+              mode === "manual"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+          />
+          <label htmlFor={manualId} className="cursor-pointer text-sm">
+            {t("configForm.cameraInputs.sourceMode.manual")}
+          </label>
+        </div>
+      </RadioGroup>
+
+      {mode === "restream" ? (
+        <div className="space-y-2 pt-1">
+          <Label htmlFor={selectId} className="block">
+            {t("configForm.cameraInputs.sourceMode.go2rtcStreamLabel")}
+          </Label>
+          {hasStreams ? (
+            <Go2rtcStreamCombobox
+              id={selectId}
+              value={selectedStreamName}
+              options={streamNames}
+              disabled={isDisabled}
+              onSelect={onSelectStream}
+            />
+          ) : (
+            <p
+              className={cn(
+                "rounded-md border border-dashed p-3 text-sm text-muted-foreground sm:max-w-xs",
+              )}
+            >
+              {t("configForm.cameraInputs.sourceMode.noGo2rtcStreams")}
+            </p>
+          )}
+        </div>
+      ) : (
+        manualField
+      )}
+    </div>
+  );
+}
+
+export default StreamSourceSelector;

web/src/components/config-form/theme/fields/streamSource.ts

@@ -0,0 +1,33 @@
+export type StreamSourceMode = "restream" | "manual";
+
+// The literal go2rtc restream prefix matches what the camera wizard inlines
+// when it builds a restreamed input path. Only this exact host:port is treated
+// as a restream so manually typed URLs (including localhost) stay manual.
+export const RESTREAM_PREFIX = "rtsp://127.0.0.1:8554/";
+export const RESTREAM_PRESET = "preset-rtsp-restream";
+
+/** Build the restream input path for a given go2rtc stream name. */
+export function buildRestreamPath(streamName: string): string {
+  return `${RESTREAM_PREFIX}${streamName}`;
+}
+
+/**
+ * Extract the go2rtc stream name from a restream input path.
+ *
+ * Returns the stream name when the path is a well-formed restream URL with no
+ * extra path segments or query, otherwise undefined.
+ */
+export function parseRestreamStreamName(
+  path: string | undefined,
+): string | undefined {
+  if (typeof path !== "string" || !path.startsWith(RESTREAM_PREFIX)) {
+    return undefined;
+  }
+
+  const name = path.slice(RESTREAM_PREFIX.length);
+  if (name.length === 0 || /[/?#]/.test(name)) {
+    return undefined;
+  }
+
+  return name;
+}

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

@@ -156,7 +156,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   };
 
   const hasModifiedDescendants = checkSubtreeModified(fieldPath);
-  const [isOpen, setIsOpen] = useState(hasModifiedDescendants);
+  const defaultOpen = uiSchema?.["ui:options"]?.defaultOpen === true;
+  const [isOpen, setIsOpen] = useState(hasModifiedDescendants || defaultOpen);
   const resetKey = `${formContext?.level ?? "global"}::${
     formContext?.cameraName ?? "global"
   }`;
@@ -192,6 +193,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     (uiSchema?.["ui:groups"] as Record<string, string[]> | undefined) || {};
   const disableNestedCard =
     uiSchema?.["ui:options"]?.disableNestedCard === true;
+  const disableCollapsible =
+    uiSchema?.["ui:options"]?.disableCollapsible === true;
 
   const isHiddenProp = (prop: (typeof properties)[number]) =>
     (prop.content.props as RjsfElementProps).uiSchema?.["ui:widget"] ===
@@ -228,10 +231,10 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   useEffect(() => {
     if (lastResetKeyRef.current !== resetKey) {
       lastResetKeyRef.current = resetKey;
-      setIsOpen(hasModifiedDescendants);
+      setIsOpen(hasModifiedDescendants || defaultOpen);
       setShowAdvanced(hasModifiedAdvanced);
     }
-  }, [resetKey, hasModifiedDescendants, hasModifiedAdvanced]);
+  }, [resetKey, hasModifiedDescendants, hasModifiedAdvanced, defaultOpen]);
   const { children } = props as ObjectFieldTemplateProps & {
     children?: ReactNode;
   };
@@ -458,6 +461,75 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     );
   }
 
+  // Label/description/docs header shared by the collapsible and static layouts.
+  const cardHeaderContent = (
+    <div className="min-w-0 pr-3">
+      <CardTitle
+        className={cn(
+          "flex items-center text-sm",
+          hasModifiedDescendants && "text-unsaved",
+        )}
+      >
+        {inferredLabel}
+        {objectRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
+      </CardTitle>
+      {inferredDescription && (
+        <p className="mt-1 text-xs text-muted-foreground">
+          {inferredDescription}
+        </p>
+      )}
+      {fieldDocsUrl && (
+        <div className="mt-1 flex items-center text-xs text-primary-variant">
+          <Link
+            to={fieldDocsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {t("readTheDocumentation", { ns: "common" })}
+            <LuExternalLink className="ml-2 inline-flex size-3" />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+
+  // Body shared by the collapsible and static layouts.
+  const cardBody = hasCustomChildren ? (
+    children
+  ) : (
+    <>
+      {renderGroupedFields(regularProps)}
+      <AddPropertyButton
+        onAddProperty={onAddProperty}
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        disabled={disabled}
+        readonly={readonly}
+      />
+
+      <AdvancedCollapsible
+        count={advancedProps.length}
+        open={showAdvanced}
+        onOpenChange={setShowAdvanced}
+      >
+        {renderGroupedFields(advancedProps)}
+      </AdvancedCollapsible>
+    </>
+  );
+
+  // Static (non-collapsible) card: keep the labeled header, always show content.
+  if (disableCollapsible) {
+    return (
+      <Card className="w-full">
+        <CardHeader className="p-4">{cardHeaderContent}</CardHeader>
+        <CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
+      </Card>
+    );
+  }
+
   // Nested objects render as collapsible cards
   return (
     <Card className="w-full">
@@ -465,38 +537,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
         <CollapsibleTrigger asChild>
           <CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
             <div className="flex items-center justify-between">
-              <div className="min-w-0 pr-3">
-                <CardTitle
-                  className={cn(
-                    "flex items-center text-sm",
-                    hasModifiedDescendants && "text-unsaved",
-                  )}
-                >
-                  {inferredLabel}
-                  {objectRequiresRestart && (
-                    <RestartRequiredIndicator className="ml-2" />
-                  )}
-                </CardTitle>
-                {inferredDescription && (
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {inferredDescription}
-                  </p>
-                )}
-                {fieldDocsUrl && (
-                  <div className="mt-1 flex items-center text-xs text-primary-variant">
-                    <Link
-                      to={fieldDocsUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      {t("readTheDocumentation", { ns: "common" })}
-                      <LuExternalLink className="ml-2 inline-flex size-3" />
-                    </Link>
-                  </div>
-                )}
-              </div>
+              {cardHeaderContent}
               {isOpen ? (
                 <LuChevronDown className="h-4 w-4 shrink-0" />
               ) : (
@@ -506,31 +547,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
           </CardHeader>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <CardContent className="space-y-6 p-4 pt-0">
-            {hasCustomChildren ? (
-              children
-            ) : (
-              <>
-                {renderGroupedFields(regularProps)}
-                <AddPropertyButton
-                  onAddProperty={onAddProperty}
-                  schema={schema}
-                  uiSchema={uiSchema}
-                  formData={formData}
-                  disabled={disabled}
-                  readonly={readonly}
-                />
-
-                <AdvancedCollapsible
-                  count={advancedProps.length}
-                  open={showAdvanced}
-                  onOpenChange={setShowAdvanced}
-                >
-                  {renderGroupedFields(advancedProps)}
-                </AdvancedCollapsible>
-              </>
-            )}
-          </CardContent>
+          <CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
         </CollapsibleContent>
       </Collapsible>
     </Card>

web/themes/theme-default.css

@@ -113,8 +113,8 @@
     --foreground: hsl(0, 0%, 100%);
     --foreground: 0, 0%, 100%;
 
-    --card: hsl(0, 0%, 15%);
-    --card: 0, 0%, 15%;
+    --card: hsl(0, 0%, 12%);
+    --card: 0, 0%, 12%;
 
     --card-foreground: hsl(210, 40%, 98%);
     --card-foreground: 210 40% 98%;