Merge d007bd0a6f into 1a1994ca17

* ensure classification wizard dialog is scrollable on mobile too

* add chat and features group to mobile menu

Co-authored-by: Copilot <copilot@github.com>

* Set min length for summary too

* Don't use orange for review item

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

frigate/data_processing/post/types.py

@@ -8,7 +8,7 @@ class ReviewMetadata(BaseModel):
         description="A short title characterizing what took place and where, under 10 words."
     )
     scene: str = Field(
-        description="A chronological narrative of what happens from start to finish."
+        description="A chronological narrative of what happens from start to finish.",
     )
     shortSummary: str = Field(
         description="A brief 2-sentence summary of the scene, suitable for notifications."

frigate/genai/__init__.py

@@ -151,6 +151,18 @@ Each line represents a detection state, not necessarily unique individuals. The
             if "other_concerns" in schema.get("required", []):
                 schema["required"].remove("other_concerns")
 
+        # Length hints injected into the schema as suggestions to the model
+        # (enforced by grammar-based providers like llama.cpp) but kept off the
+        # Pydantic model so a non-compliant response does not fail validation.
+        length_hints = {
+            "scene": {"minLength": 120, "maxLength": 600},
+            "shortSummary": {"minLength": 70, "maxLength": 100},
+        }
+        for field, hints in length_hints.items():
+            prop = schema.get("properties", {}).get(field)
+            if prop is not None:
+                prop.update(hints)
+
         # OpenAI strict mode requires additionalProperties: false on all objects
         schema["additionalProperties"] = False
 

web/e2e/specs/export.spec.ts

@@ -1,4 +1,114 @@
 import { test, expect } from "../fixtures/frigate-test";
+import {
+  expectBodyInteractive,
+  waitForBodyInteractive,
+} from "../helpers/overlay-interaction";
+
+test.describe("Export Page - Delete race @high", () => {
+  // Empirical guard for radix-ui/primitives#3445: when a modal DropdownMenu
+  // opens an AlertDialog and the AlertDialog's confirm action causes the
+  // parent's optimistic cache update to unmount the card, we want to know
+  // whether the deduped react-dismissable-layer (1.1.11) handles the
+  // pointer-events stack cleanup or whether `modal={false}` is still
+  // required on the DropdownMenu. The classic "canonical" pattern, distinct
+  // from the FaceSelectionDialog auto-unmount race already covered by
+  // face-library.spec.ts.
+  test("deleting an export via dropdown→alert→confirm leaves body interactive", async ({
+    frigateApp,
+  }) => {
+    if (frigateApp.isMobile) {
+      test.skip();
+      return;
+    }
+
+    const initialExports = [
+      {
+        id: "export-race-001",
+        camera: "front_door",
+        name: "Race - Test Export",
+        date: 1775490731.3863528,
+        video_path: "/exports/export-race-001.mp4",
+        thumb_path: "/exports/export-race-001-thumb.jpg",
+        in_progress: false,
+        export_case_id: null,
+      },
+    ];
+    let deleted = false;
+
+    await frigateApp.installDefaults({
+      exports: initialExports,
+    });
+
+    // Flip /api/export to empty after the delete POST is observed so the
+    // page's SWR mutate sees the export gone.
+    await frigateApp.page.route("**/api/export**", async (route) => {
+      const payload = deleted ? [] : initialExports;
+      await route.fulfill({ json: payload });
+    });
+    await frigateApp.page.route("**/api/exports/delete", async (route) => {
+      deleted = true;
+      const delayMs = Number(
+        (globalThis as { process?: { env?: Record<string, string> } }).process
+          ?.env?.DELETE_DELAY_MS ?? "100",
+      );
+      if (delayMs > 0) {
+        await new Promise((resolve) => setTimeout(resolve, delayMs));
+      }
+      await route.fulfill({ json: { success: true } });
+    });
+
+    await frigateApp.goto("/export");
+    await expect(frigateApp.page.getByText("Race - Test Export")).toBeVisible({
+      timeout: 5_000,
+    });
+
+    // Open the kebab menu on the export card. The kebab uses the
+    // (misleading) aria-label "Edit name" from ExportCard's source — it
+    // wraps the FiMoreVertical icon. There is exactly one such button on
+    // the page once we have a single export rendered.
+    const kebab = frigateApp.page
+      .getByRole("button", { name: /edit name/i })
+      .first();
+    await expect(kebab).toBeVisible({ timeout: 5_000 });
+    await kebab.click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 3_000 });
+
+    // Delete Export
+    await menu
+      .getByRole("menuitem", { name: /delete export/i })
+      .first()
+      .click();
+
+    // AlertDialog at page level. The confirm button's accessible name is
+    // "Delete Export" (its aria-label), the visible text is just "Delete".
+    const confirm = frigateApp.page.getByRole("alertdialog");
+    await expect(confirm).toBeVisible({ timeout: 3_000 });
+    await confirm
+      .getByRole("button", { name: /^delete export$/i })
+      .first()
+      .click();
+
+    // The card optimistically disappears, the dialog closes, and body
+    // pointer-events must come unstuck.
+    await expect(
+      frigateApp.page.getByText("Race - Test Export"),
+    ).not.toBeVisible({ timeout: 5_000 });
+    await waitForBodyInteractive(frigateApp.page, 5_000);
+    await expectBodyInteractive(frigateApp.page);
+
+    // Sanity: another page-level button still responds.
+    const newCase = frigateApp.page.getByRole("button", { name: /new case/i });
+    await expect(newCase).toBeVisible({ timeout: 3_000 });
+    await newCase.click();
+    await expect(
+      frigateApp.page.getByRole("dialog").filter({ hasText: /create case/i }),
+    ).toBeVisible({ timeout: 3_000 });
+  });
+});
 
 test.describe("Export Page - Overview @high", () => {
   test("renders uncategorized exports and case cards from mock data", async ({

web/e2e/specs/face-library.spec.ts

@@ -358,6 +358,158 @@ test.describe("FaceSelectionDialog @high", () => {
     await frigateApp.page.keyboard.press("Escape");
     await expect(menu).not.toBeVisible({ timeout: 3_000 });
   });
+
+  test("classifying the last image in a group leaves body interactive", async ({
+    frigateApp,
+  }) => {
+    // Regression guard for the stuck body pointer-events bug when the
+    // last image in a grouped-recognition detail Dialog is classified.
+    // Tracked upstream at radix-ui/primitives#3445.
+    //
+    // Root cause: when the user clicks a FaceSelectionDialog menu item,
+    // the modal DropdownMenu enters its exit animation (Radix's Presence
+    // keeps it in the DOM with data-state="closed" until animationend).
+    // While that is in flight the classify axios resolves, SWR removes
+    // the image from /api/faces, the parent's map no longer renders the
+    // grouped card, and React unmounts the subtree — including the still-
+    // animating DropdownMenu's Presence container. DismissableLayer's
+    // shared modal-layer stack can't reconcile the interrupted exit, so
+    // the `body { pointer-events: none }` entry it put on mount is never
+    // popped and the rest of the UI becomes unclickable.
+    //
+    // The fix is `modal={false}` on the FaceSelectionDialog's
+    // DropdownMenu (desktop path only). With modal=false the DropdownMenu
+    // never puts an entry on DismissableLayer's body-pointer-events stack
+    // in the first place, so there's nothing to leak when its Presence is
+    // torn down mid-animation. The Radix-community-documented workaround
+    // for #3445.
+    //
+    // The bug only reproduces when the mock resolves fast enough that
+    // the parent unmounts before the dropdown's exit animation finishes.
+    // Measured window via a 3x sweep on the pre-fix build: 0–200 ms
+    // triggers it; 300 ms+ no longer reproduces. Production LAN networks
+    // sit comfortably inside the bad window, while `npm run dev` seems
+    // to mask it via React StrictMode's double-effect scheduling.
+    const EVENT_ID = "1775487131.3863528-race";
+    const initialFaces = withGroupedTrainingAttempt(basicFacesMock(), {
+      eventId: EVENT_ID,
+      attempts: [
+        { timestamp: 1775487131.3863528, label: "unknown", score: 0.95 },
+      ],
+    });
+
+    let classified = false;
+
+    await frigateApp.installDefaults({
+      faces: initialFaces,
+      events: [
+        {
+          id: EVENT_ID,
+          label: "person",
+          sub_label: null,
+          camera: "front_door",
+          start_time: 1775487131.3863528,
+          end_time: 1775487161.3863528,
+          false_positive: false,
+          zones: ["front_yard"],
+          thumbnail: null,
+          has_clip: true,
+          has_snapshot: true,
+          retain_indefinitely: false,
+          plus_id: null,
+          model_hash: "abc123",
+          detector_type: "cpu",
+          model_type: "ssd",
+          data: {
+            top_score: 0.92,
+            score: 0.92,
+            region: [0.1, 0.1, 0.5, 0.8],
+            box: [0.2, 0.15, 0.45, 0.75],
+            area: 0.18,
+            ratio: 0.6,
+            type: "object",
+            path_data: [],
+          },
+        },
+      ],
+    });
+
+    // Re-route /api/faces to flip to the "train empty" payload once the
+    // classify POST has been received. Registered AFTER installDefaults so
+    // Playwright's LIFO route matching hits this handler first.
+    await frigateApp.page.route("**/api/faces", async (route) => {
+      const payload = classified ? basicFacesMock() : initialFaces;
+      await route.fulfill({ json: payload });
+    });
+
+    // Hold the classify POST briefly. The race opens when the parent
+    // unmounts before the dropdown's exit animation finishes (~200ms
+    // in Radix). 100ms keeps us comfortably inside that window and
+    // reliably triggered the bug in a 3x sweep across 0/50/100/200ms
+    // on the pre-fix build. CLASSIFY_DELAY_MS overrides for local sweeps.
+    const delayMs = Number(
+      (globalThis as { process?: { env?: Record<string, string> } }).process
+        ?.env?.CLASSIFY_DELAY_MS ?? "100",
+    );
+    await frigateApp.page.route(
+      "**/api/faces/train/*/classify",
+      async (route) => {
+        classified = true;
+        if (delayMs > 0) {
+          await new Promise((resolve) => setTimeout(resolve, delayMs));
+        }
+        await route.fulfill({ json: { success: true } });
+      },
+    );
+
+    await frigateApp.goto("/faces");
+
+    // Open the grouped detail Dialog.
+    const groupedImage = frigateApp.page
+      .locator('img[src*="clips/faces/train/"]')
+      .first();
+    await expect(groupedImage).toBeVisible({ timeout: 5_000 });
+    await groupedImage.locator("xpath=..").click();
+    const dialog = frigateApp.page
+      .getByRole("dialog")
+      .filter({
+        has: frigateApp.page.locator('img[src*="clips/faces/train/"]'),
+      })
+      .first();
+    await expect(dialog).toBeVisible({ timeout: 5_000 });
+
+    // Single attempt → single `+` trigger.
+    const triggers = dialog.locator('[aria-haspopup="menu"]');
+    await expect(triggers).toHaveCount(1);
+    await triggers.first().click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 5_000 });
+    await menu.getByRole("menuitem", { name: /^alice$/i }).click();
+
+    // The Dialog must leave the tree cleanly, and body must recover.
+    await expect(dialog).not.toBeVisible({ timeout: 5_000 });
+
+    // Give Radix's exit animation + cleanup a comfortable margin on top of
+    // the ~300ms simulated network delay.
+    await waitForBodyInteractive(frigateApp.page, 5_000);
+    await expectBodyInteractive(frigateApp.page);
+
+    // User-visible confirmation: click something outside the dialog
+    // and assert it actually responds.
+    const librarySelector = frigateApp.page
+      .getByRole("button")
+      .filter({ hasText: /\(\d+\)/ })
+      .first();
+    await librarySelector.click();
+    await expect(
+      frigateApp.page
+        .locator('[role="menu"], [data-radix-menu-content]')
+        .first(),
+    ).toBeVisible({ timeout: 3_000 });
+  });
 });
 
 test.describe("Face Library — mobile @high @mobile", () => {

web/public/locales/en/common.json

@@ -257,6 +257,7 @@
     "export": "Export",
     "actions": "Actions",
     "uiPlayground": "UI Playground",
+    "features": "Features",
     "faceLibrary": "Face Library",
     "classification": "Classification",
     "chat": "Chat",

web/src/components/card/AnimatedEventCard.tsx

@@ -161,13 +161,13 @@ export function AnimatedEventCard({
             <TooltipTrigger asChild>
               <Button
                 className={cn(
-                  "absolute left-2 top-1 z-40 transition-opacity",
+                  "absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 transition-opacity",
                   threatLevel === ThreatLevel.SECURITY_CONCERN &&
-                    "pointer-events-auto bg-severity_alert opacity-100 hover:bg-severity_alert",
+                    "pointer-events-auto opacity-100",
                   threatLevel === ThreatLevel.NEEDS_REVIEW &&
-                    "pointer-events-auto bg-severity_detection opacity-100 hover:bg-severity_detection",
+                    "pointer-events-auto opacity-100",
                   threatLevel === ThreatLevel.NORMAL &&
-                    "pointer-events-none bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100",
+                    "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100",
                 )}
                 size="xs"
                 aria-label={t("markAsReviewed")}

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -14,7 +14,6 @@ import Step3ChooseExamples, {
   Step3FormData,
 } from "./wizard/Step3ChooseExamples";
 import { cn } from "@/lib/utils";
-import { isDesktop } from "react-device-detect";
 import axios from "axios";
 
 const OBJECT_STEPS = [
@@ -153,13 +152,9 @@ export default function ClassificationModelWizardDialog({
     >
       <DialogContent
         className={cn(
-          "",
-          isDesktop &&
-            wizardState.currentStep == 0 &&
-            "max-h-[90%] overflow-y-auto xl:max-h-[80%]",
-          isDesktop &&
-            wizardState.currentStep > 0 &&
-            "max-h-[90%] max-w-[70%] overflow-y-auto xl:max-h-[80%]",
+          "scrollbar-container max-h-[90%] overflow-y-auto",
+          wizardState.currentStep == 0 && "xl:max-h-[80%]",
+          wizardState.currentStep > 0 && "md:max-w-[70%] xl:max-h-[80%]",
         )}
         onInteractOutside={(e) => {
           e.preventDefault();

web/src/components/menu/GeneralSettings.tsx

@@ -6,6 +6,7 @@ import {
   LuLifeBuoy,
   LuList,
   LuLogOut,
+  LuMessageSquare,
   LuMoon,
   LuSquarePen,
   LuScanFace,
@@ -482,21 +483,25 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   </Link>
                 </>
               )}
-              {isAdmin && isMobile && config?.face_recognition.enabled && (
-                <>
-                  <Link to="/faces">
-                    <MenuItem
-                      className="flex w-full items-center p-2 text-sm"
-                      aria-label={t("menu.faceLibrary")}
-                    >
-                      <LuScanFace className="mr-2 size-4" />
-                      <span>{t("menu.faceLibrary")}</span>
-                    </MenuItem>
-                  </Link>
-                </>
-              )}
-              {isAdmin && isMobile && (
-                <>
+            </DropdownMenuGroup>
+            {isMobile && isAdmin && (
+              <>
+                <DropdownMenuLabel className="mt-1">
+                  {t("menu.features")}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup className="flex flex-col">
+                  {config?.face_recognition.enabled && (
+                    <Link to="/faces">
+                      <MenuItem
+                        className="flex w-full items-center p-2 text-sm"
+                        aria-label={t("menu.faceLibrary")}
+                      >
+                        <LuScanFace className="mr-2 size-4" />
+                        <span>{t("menu.faceLibrary")}</span>
+                      </MenuItem>
+                    </Link>
+                  )}
                   <Link to="/classification">
                     <MenuItem
                       className="flex w-full items-center p-2 text-sm"
@@ -506,9 +511,20 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                       <span>{t("menu.classification")}</span>
                     </MenuItem>
                   </Link>
-                </>
-              )}
-            </DropdownMenuGroup>
+                  {config?.genai?.model !== "none" && (
+                    <Link to="/chat">
+                      <MenuItem
+                        className="flex w-full items-center p-2 text-sm"
+                        aria-label={t("menu.chat")}
+                      >
+                        <LuMessageSquare className="mr-2 size-4" />
+                        <span>{t("menu.chat")}</span>
+                      </MenuItem>
+                    </Link>
+                  )}
+                </DropdownMenuGroup>
+              </>
+            )}
             <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
               {t("menu.appearance")}
             </DropdownMenuLabel>

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -124,7 +124,7 @@ export default function ClassificationSelectionDialog({
       />
 
       <Tooltip>
-        <Selector>
+        <Selector {...(isDesktop ? { modal: false } : {})}>
           <SelectorTrigger asChild>
             <TooltipTrigger asChild={isChildButton}>{children}</TooltipTrigger>
           </SelectorTrigger>

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -85,7 +85,7 @@ export default function FaceSelectionDialog({
       )}
 
       <Tooltip>
-        <Selector>
+        <Selector {...(isDesktop ? { modal: false } : {})}>
           <SelectorTrigger asChild>
             <TooltipTrigger asChild={isChildButton}>{children}</TooltipTrigger>
           </SelectorTrigger>