Bump protobuf from 3.20.3 to 5.29.6 in /docker/tensorrt

Bumps [protobuf](https://github.com/protocolbuffers/protobuf) from 3.20.3 to 5.29.6. - [Release notes](https://github.com/protocolbuffers/protobuf/releases) - [Commits](https://github.com/protocolbuffers/protobuf/commits) --- updated-dependencies: - dependency-name: protobuf dependency-version: 5.29.6 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
2026-09-27 19:58:57 +03:00 · 2026-09-15 11:33:21 +00:00
22 changed files with 3037 additions and 983 deletions
@@ -5,7 +5,7 @@ aiohttp == 3.12.*
 starlette == 0.47.*
 starlette-context == 0.5.*
 fastapi[standard-no-fastapi-cloud-cli] == 0.116.*
-uvicorn == 0.52.*
+uvicorn == 0.46.*
 slowapi == 0.1.*
 joserfc == 1.6.*
 cryptography == 46.0.*
@@ -61,7 +61,7 @@ rapidfuzz==3.12.*
 argcomplete==2.0.*
 contextlib2==0.6.*
 future==0.18.*
-netaddr==1.3.*
+netaddr==0.8.*
 netifaces==0.10.*
 prometheus-client == 0.26.*
 # TFLite
@@ -73,4 +73,4 @@ faster-whisper==1.2.*
 librosa==0.11.*
 soundfile==0.13.*
 # Memory profiling
-memray == 1.20.*
+memray == 1.15.*
@@ -14,4 +14,4 @@ nvidia-nccl-cu12==2.26.2.post1; platform_machine == 'x86_64'
 nvidia-nvjitlink-cu12==12.8.93; platform_machine == 'x86_64'
 onnx==1.16.*; platform_machine == 'x86_64'
 onnxruntime-gpu==1.24.*; platform_machine == 'x86_64'
-protobuf==3.20.3; platform_machine == 'x86_64'
+protobuf==5.29.6; platform_machine == 'x86_64'
@@ -1,2 +1,2 @@
 onnx == 1.14.0; platform_machine == 'aarch64'
-protobuf == 3.20.3; platform_machine == 'aarch64'
+protobuf == 5.29.6; platform_machine == 'aarch64'
@@ -786,13 +786,6 @@ def auth(request: Request):

        user = token.claims.get("sub")
        role = token.claims.get("role")
-
-        # the token keeps the role it was issued with, so a role removed from
-        # the config since then must send the user back through login
-        if role not in auth_config.roles:
-            logger.debug("jwt role %s is not in the config", role)
-            return fail_response
-
        current_time = int(time.time())

        # if the jwt is expired
@@ -1038,10 +1038,6 @@ def export_recording_custom(
    if camera_validation_error is not None:
        return camera_validation_error

-    # Validate user-provided ffmpeg args to prevent injection and add to cases.
-    # Admin users are trusted and skip validation.
-    is_admin = request.headers.get("remote-role", "") == "admin"
-
    playback_source = body.source
    friendly_name = body.name
    existing_image, image_validation_error = _sanitize_existing_image(body.image_path)
@@ -1052,16 +1048,6 @@ def export_recording_custom(
    cpu_fallback = body.cpu_fallback

    export_case_id = body.export_case_id
-
-    if export_case_id is not None and not is_admin:
-        return JSONResponse(
-            content={
-                "success": False,
-                "message": "Only admins can attach exports to an existing case.",
-            },
-            status_code=403,
-        )
-
    case_validation_error = _validate_export_case(export_case_id)
    if case_validation_error is not None:
        return case_validation_error
@@ -1078,6 +1064,10 @@ def export_recording_custom(
            status_code=400,
        )

+    # Validate user-provided ffmpeg args to prevent injection.
+    # Admin users are trusted and skip validation.
+    is_admin = request.headers.get("remote-role", "") == "admin"
+
    if not is_admin:
        for args_label, args_value in [
            ("input", ffmpeg_input_args),
@@ -189,7 +189,7 @@ async def camera_ptz_info(request: Request, camera_name: str):
        future = asyncio.run_coroutine_threadsafe(
            request.app.onvif.get_camera_info(camera_name), request.app.onvif.loop
        )
-        result = await asyncio.wrap_future(future)
+        result = future.result()
        return JSONResponse(content=result)
    else:
        return JSONResponse(
@@ -412,8 +412,11 @@ async def no_recordings(
    if not camera_list:
        return JSONResponse(content=[])

-    before = params.before or datetime.now().timestamp()
-    after = params.after or (datetime.now() - timedelta(hours=1)).timestamp()
+    before = params.before or datetime.datetime.now().timestamp()
+    after = (
+        params.after
+        or (datetime.datetime.now() - datetime.timedelta(hours=1)).timestamp()
+    )
    scale = params.scale

    recordings: list[tuple[float, float]] = []
@@ -66,12 +66,6 @@ def get_cache_image_name(camera: str, frame_time: float) -> str:
    )


-def is_camera_preview_frame(file_name: str, camera: str) -> bool:
-    """Check whether a cached preview frame file belongs to the camera."""
-    # camera names may contain "-", so a prefix match would include "front-door"
-    return file_name.rsplit("-", 1)[0] == f"preview_{camera}"
-
-
 def get_most_recent_preview_frame(
    camera: str, before: float | None = None
 ) -> str | None:
@@ -85,7 +79,7 @@ def get_most_recent_preview_frame(
        preview_files = [
            f
            for f in os.listdir(PREVIEW_CACHE_DIR)
-            if is_camera_preview_frame(f, camera)
+            if f.startswith(f"preview_{camera}-")
            and f.endswith(f".{PREVIEW_FRAME_TYPE}")
        ]

@@ -282,7 +276,7 @@ class PreviewRecorder:
        start_file = f"{file_start}{start_ts}.webp"

        for file in sorted(os.listdir(os.path.join(CACHE_DIR, FOLDER_PREVIEW_FRAMES))):
-            if not is_camera_preview_frame(file, self.camera_name):
+            if not file.startswith(file_start):
                continue

            if file < start_file:
@@ -36,7 +36,6 @@ from frigate.ffmpeg_presets import (
    parse_preset_hardware_acceleration_encode,
 )
 from frigate.models import Export, Previews, Recordings, ReviewSegment
-from frigate.output.preview import is_camera_preview_frame
 from frigate.util.ffmpeg import run_ffmpeg_with_progress
 from frigate.util.ownership import chown_to_runtime
 from frigate.util.recording_coverage import (
@@ -1099,7 +1098,7 @@ class RecordingExporter(threading.Thread):
            fallback_preview = None

            for file in sorted(os.listdir(preview_dir)):
-                if not is_camera_preview_frame(file, self.camera):
+                if not file.startswith(file_start):
                    continue

                if file < start_file:
@@ -1,81 +0,0 @@
-"""Tests that /auth only accepts a JWT whose role is still in the config."""
-
-import os
-import time
-from unittest.mock import MagicMock, Mock, patch
-
-from frigate.api.auth import create_encoded_jwt
-from frigate.api.fastapi_app import create_fastapi_app
-from frigate.config import FrigateConfig
-from frigate.config.camera.updater import CameraConfigUpdatePublisher
-from frigate.const import JWT_SECRET_ENV_VAR
-from frigate.models import Event, Recordings, ReviewSegment
-from frigate.test.http_api.base_http_test import AuthTestClient, BaseTestHttp
-
-
-@patch.dict(os.environ, {JWT_SECRET_ENV_VAR: "test-secret"})
-class TestAuthJwtRole(BaseTestHttp):
-    def setUp(self):
-        super().setUp(models=[Event, Recordings, ReviewSegment])
-        self.minimal_config = {
-            "mqtt": {"host": "mqtt"},
-            "auth": {"enabled": True, "roles": {"garage": ["front_door"]}},
-            "networking": {"listen": {"internal": 5000, "external": 8971}},
-            "cameras": {
-                "front_door": {
-                    "ffmpeg": {
-                        "inputs": [
-                            {"path": "rtsp://10.0.0.1:554/video", "roles": ["detect"]}
-                        ]
-                    },
-                    "detect": {
-                        "height": 1080,
-                        "width": 1920,
-                        "fps": 5,
-                    },
-                }
-            },
-        }
-
-    def _create_app(self):
-        mock_publisher = Mock(spec=CameraConfigUpdatePublisher)
-        mock_publisher.publisher = MagicMock()
-
-        return create_fastapi_app(
-            FrigateConfig(**self.minimal_config),
-            self.db,
-            None,
-            None,
-            None,
-            None,
-            None,
-            None,
-            mock_publisher,
-            None,
-            enforce_default_admin=False,
-        )
-
-    def _auth(self, app, role: str):
-        token = create_encoded_jwt("bob", role, int(time.time()) + 3600, app.jwt_token)
-
-        with AuthTestClient(app) as client:
-            return client.get(
-                "/auth",
-                headers={
-                    "x-server-port": "8971",
-                    "authorization": f"Bearer {token}",
-                },
-            )
-
-    def test_configured_role_is_accepted(self):
-        resp = self._auth(self._create_app(), "garage")
-
-        self.assertEqual(resp.status_code, 202)
-        self.assertEqual(resp.headers["remote-user"], "bob")
-        self.assertEqual(resp.headers["remote-role"], "garage")
-
-    def test_role_removed_from_config_is_rejected(self):
-        resp = self._auth(self._create_app(), "removed_role")
-
-        self.assertEqual(resp.status_code, 401)
-        self.assertNotIn("remote-role", resp.headers)
@@ -75,21 +75,6 @@ class TestPreviewLoader(unittest.TestCase):

        self.assertIsNone(get_most_recent_preview_frame(camera))

-    def test_get_most_recent_preview_frame_hyphenated_camera(self):
-        for name in ("preview_front-2000.0", "preview_front-door-3000.0"):
-            with open(
-                os.path.join(PREVIEW_CACHE_DIR, f"{name}.{PREVIEW_FRAME_TYPE}"), "w"
-            ) as f:
-                f.write("test")
-
-        expected_path = os.path.join(
-            PREVIEW_CACHE_DIR, f"preview_front-2000.0.{PREVIEW_FRAME_TYPE}"
-        )
-        self.assertEqual(get_most_recent_preview_frame("front"), expected_path)
-        self.assertEqual(
-            get_most_recent_preview_frame("front", before=5000.0), expected_path
-        )
-
    def test_get_most_recent_preview_frame_no_directory(self):
        shutil.rmtree(PREVIEW_CACHE_DIR)
        self.assertIsNone(get_most_recent_preview_frame("test_camera"))
@@ -25,102 +25,102 @@
  "dependencies": {
    "@cycjimmy/jsmpeg-player": "^6.1.2",
    "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@melloware/react-logviewer": "^6.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-aspect-ratio": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.11",
-    "@radix-ui/react-collapsible": "^1.1.20",
-    "@radix-ui/react-context-menu": "^2.3.7",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-hover-card": "^1.1.23",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.7",
-    "@radix-ui/react-scroll-area": "^1.2.18",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.2.3",
    "@radix-ui/react-slot": "1.2.4",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-toggle": "^1.1.18",
-    "@radix-ui/react-toggle-group": "^1.1.19",
-    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.8",
    "@rjsf/core": "^6.10.0",
    "@rjsf/shadcn": "^6.10.0",
    "@rjsf/utils": "^6.10.0",
    "@rjsf/validator-ajv8": "^6.10.0",
    "apexcharts": "^7.3.0",
-    "axios": "^1.20.0",
+    "axios": "^1.18.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
-    "copy-to-clipboard": "^4.0.2",
+    "copy-to-clipboard": "^3.3.3",
    "date-fns": "^3.6.0",
    "date-fns-tz": "^3.2.0",
-    "framer-motion": "^13.3.0",
-    "hls.js": "^1.7.3",
+    "framer-motion": "^13.2.0",
+    "hls.js": "^1.6.15",
    "i18next": "^24.2.0",
    "i18next-http-backend": "^4.0.2",
-    "idb-keyval": "^6.3.0",
+    "idb-keyval": "^6.2.1",
    "js-yaml": "^4.3.2",
-    "konva": "^10.5.0",
+    "konva": "^10.2.3",
    "lodash": "^4.18.1",
-    "lucide-react": "^1.46.0",
-    "monaco-yaml": "^5.5.1",
+    "lucide-react": "^0.577.0",
+    "monaco-yaml": "^5.4.1",
    "next-themes": "^0.4.6",
    "nosleep.js": "^0.12.0",
-    "react": "^19.3.0",
+    "react": "^19.2.4",
    "react-apexcharts": "^2.1.1",
    "react-day-picker": "^9.14.0",
    "react-device-detect": "^2.2.3",
-    "react-dom": "^19.3.0",
+    "react-dom": "^19.2.4",
    "react-dropzone": "^14.3.8",
-    "react-grid-layout": "^2.2.4",
-    "react-hook-form": "^7.88.0",
+    "react-grid-layout": "^2.2.2",
+    "react-hook-form": "^7.72.0",
    "react-i18next": "^15.2.0",
-    "react-icons": "^5.7.0",
-    "react-konva": "^19.2.7",
+    "react-icons": "^5.6.0",
+    "react-konva": "^19.2.3",
    "react-markdown": "^9.0.1",
    "react-router-dom": "^6.30.6",
    "react-swipeable": "^7.0.2",
    "react-zoom-pan-pinch": "3.4.4",
    "remark-gfm": "^4.0.0",
    "scroll-into-view-if-needed": "^3.1.0",
-    "sonner": "^2.0.8",
+    "sonner": "^2.0.7",
    "sort-by": "^1.2.0",
    "strftime": "^0.10.3",
-    "swr": "^2.5.1",
+    "swr": "^2.4.1",
    "tailwind-merge": "^2.4.0",
    "tailwind-scrollbar": "^3.1.0",
    "tailwindcss-animate": "^1.0.7",
-    "use-long-press": "^3.3.0",
+    "use-long-press": "^3.2.0",
    "vaul": "^1.1.2",
-    "virtua": "^0.51.3",
    "vite-plugin-monaco-editor": "^1.1.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.63.0",
-    "@tailwindcss/forms": "^0.5.11",
+    "@playwright/test": "^1.59.1",
+    "@tailwindcss/forms": "^0.5.9",
    "@testing-library/jest-dom": "^6.6.2",
    "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.25",
+    "@types/lodash": "^4.17.12",
    "@types/node": "^25.9.6",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
    "@types/strftime": "^0.9.8",
    "@vitejs/plugin-react": "^6.1.1",
    "@vitest/coverage-v8": "^4.1.11",
-    "autoprefixer": "^10.6.0",
+    "autoprefixer": "^10.4.20",
    "esbuild": "^0.28.2",
    "eslint": "^10.10.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.6",
    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.7",
+    "eslint-plugin-react-refresh": "^0.5.6",
    "fake-indexeddb": "^6.0.0",
    "globals": "^17.12.0",
    "i18next-cli": "^1.5.11",
@@ -92,12 +92,10 @@ function PagePanel({ failure }: PanelProps) {

  const stale = isStaleAsset(failure);

-  const onCopy = async () => {
-    // copy() falls back to a prompt and resolves false when the clipboard is
+  const onCopy = () => {
+    // copy() falls back to a prompt and returns false when the clipboard is
    // refused, so a success toast has to wait on the result.
-    const copied = await copy(crashReport(failure, stats?.service.version), {
-      fallbackToPrompt: true,
-    });
+    const copied = copy(crashReport(failure, stats?.service.version));

    if (copied) {
      toast.success(t("button.copiedToClipboard"), { position: "top-center" });
@@ -71,10 +71,10 @@ export function MessageBubble({

  const [copied, setCopied] = useState(false);

-  const handleCopy = useCallback(async () => {
+  const handleCopy = useCallback(() => {
    const text = content?.trim() || "";
    if (!text) return;
-    if (await copy(text)) {
+    if (copy(text)) {
      setCopied(true);
      toast.success(t("button.copiedToClipboard", { ns: "common" }));
      setTimeout(() => setCopied(false), 2000);
@@ -0,0 +1,91 @@
+import { useRef, useCallback, useEffect, type ReactNode } from "react";
+import { ScrollFollow } from "@melloware/react-logviewer";
+
+export type ScrollFollowProps = {
+  startFollowing?: boolean;
+  render: (renderProps: ScrollFollowRenderProps) => ReactNode;
+  onCustomScroll?: (
+    scrollTop: number,
+    scrollHeight: number,
+    clientHeight: number,
+  ) => void;
+};
+
+export type ScrollFollowRenderProps = {
+  follow: boolean;
+  onScroll: (args: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+  }) => void;
+  startFollowing: () => void;
+  stopFollowing: () => void;
+  onCustomScroll?: (
+    scrollTop: number,
+    scrollHeight: number,
+    clientHeight: number,
+  ) => void;
+};
+
+const SCROLL_BUFFER = 5;
+
+export default function EnhancedScrollFollow(props: ScrollFollowProps) {
+  const followRef = useRef(props.startFollowing || false);
+  const prevScrollTopRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    prevScrollTopRef.current = undefined;
+  }, []);
+
+  const wrappedRender = useCallback(
+    (renderProps: ScrollFollowRenderProps) => {
+      const wrappedOnScroll = (args: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+      }) => {
+        // Check if scrolling up and immediately stop following
+        if (
+          prevScrollTopRef.current !== undefined &&
+          args.scrollTop < prevScrollTopRef.current
+        ) {
+          if (followRef.current) {
+            renderProps.stopFollowing();
+            followRef.current = false;
+          }
+        }
+
+        const bottomThreshold =
+          args.scrollHeight - args.clientHeight - SCROLL_BUFFER;
+        const isNearBottom = args.scrollTop >= bottomThreshold;
+
+        if (isNearBottom && !followRef.current) {
+          renderProps.startFollowing();
+          followRef.current = true;
+        } else if (!isNearBottom && followRef.current) {
+          renderProps.stopFollowing();
+          followRef.current = false;
+        }
+
+        prevScrollTopRef.current = args.scrollTop;
+        renderProps.onScroll(args);
+        if (props.onCustomScroll) {
+          props.onCustomScroll(
+            args.scrollTop,
+            args.scrollHeight,
+            args.clientHeight,
+          );
+        }
+      };
+
+      return props.render({
+        ...renderProps,
+        onScroll: wrappedOnScroll,
+        follow: followRef.current,
+      });
+    },
+    [props],
+  );
+
+  return <ScrollFollow {...props} render={wrappedRender} />;
+}
@@ -10,7 +10,6 @@ import { MdHome } from "react-icons/md";
 import { Button, buttonVariants } from "../ui/button";
 import {
  useCallback,
-  useContext,
  useEffect,
  useLayoutEffect,
  useMemo,
@@ -67,8 +66,7 @@ import { z } from "zod";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { deleteUserNamespacedKey } from "@/hooks/use-user-persistence";
-import { AuthContext } from "@/context/auth-context";
+import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import * as LuIcons from "react-icons/lu";
@@ -501,8 +499,9 @@ function NewGroupDialog({
  const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
  const [isLoading, setIsLoading] = useState(false);

-  const { auth } = useContext(AuthContext);
-  const username = auth?.user?.username;
+  const [, , , deleteGridLayout] = useUserPersistence(
+    `${activeGroup}-draggable-layout`,
+  );

  useEffect(() => {
    if (!open) {
@@ -514,14 +513,15 @@ function NewGroupDialog({

  const onDeleteGroup = useCallback(
    async (name: string) => {
+      deleteGridLayout();
+      deleteGroup();
+
      await axios
        .put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
        .then((res) => {
          if (res.status === 200) {
-            deleteUserNamespacedKey(`${name}-draggable-layout`, username);
            if (activeGroup == name) {
              // deleting current group
-              deleteGroup();
              setGroup("default");
            }
            updateConfig();
@@ -557,7 +557,15 @@ function NewGroupDialog({
          setIsLoading(false);
        });
    },
-    [updateConfig, activeGroup, setGroup, setOpen, deleteGroup, username, t],
+    [
+      updateConfig,
+      activeGroup,
+      setGroup,
+      setOpen,
+      deleteGroup,
+      deleteGridLayout,
+      t,
+    ],
  );

  const onSave = () => {
@@ -203,8 +203,7 @@ export function PolygonCanvas({
    if (stage) {
      // we add an unfilled line for adding points when finished
      const index = e.target.index - (activePolygon.isFinished ? 2 : 1);
-      const dragged = e.target.getAbsolutePosition();
-      let pos = [dragged.x, dragged.y];
+      let pos = [e.target._lastPos!.x, e.target._lastPos!.y];

      if (snapPoints) {
        // Snap to other polygons' edges
@@ -184,3 +184,8 @@ html {
 .react-grid-layout .react-grid-item {
  transition: none !important;
 }
+
+.react-lazylog,
+.react-lazylog-searchbar {
+  background-color: transparent !important;
+}
@@ -123,7 +123,7 @@ function ConfigEditor() {
        hover: true,
        completion: true,
        validate: true,
-        format: { enable: true },
+        format: true,
        schemas: [
          {
            uri: `${apiHost}api/config/schema.json`,
@@ -8,13 +8,7 @@ import {
  logTypes,
 } from "@/types/log";
 import copy from "copy-to-clipboard";
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import axios from "axios";
 import LogInfoDialog from "@/components/overlay/LogInfoDialog";
 import { LogChip } from "@/components/indicators/Chip";
@@ -27,110 +21,34 @@ import { cn } from "@/lib/utils";
 import { parseLogLines } from "@/utils/logUtil";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import scrollIntoView from "scroll-into-view-if-needed";
-import { VList, type VListHandle } from "virtua";
+import { LazyLog } from "@melloware/react-logviewer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import EnhancedScrollFollow from "@/components/dynamic/EnhancedScrollFollow";
 import { MdCircle } from "react-icons/md";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { isDesktop, isIOS, isMobile } from "react-device-detect";
+import { debounce } from "lodash";
+import { isIOS, isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 import { isInIframe } from "@/utils/isIFrame";
 import { useTranslation } from "react-i18next";
 import WsMessageFeed from "@/components/ws/WsMessageFeed";

-const OLDER_LINES_CHUNK_SIZE = 100;
-const FOLLOW_THRESHOLD_PX = 40;
-
-// Desktop row height. Without it, virtua guesses 40px and the first render
-// leaves the viewport partly empty. Mobile rows are taller, and a low hint
-// there shrinks the scroll room iOS gets while it defers scroll correction
-const ROW_HEIGHT_HINT_PX = 29;
-
-// Stable ids keep row measurements attached to the right line after a prepend
-type LogEntry = { id: number; text: string };
-
-// shift anchors the viewport to the end when lines are prepended. stick keeps
-// the newest line in view when lines are appended
-type LogState = { entries: LogEntry[]; shift: boolean; stick: boolean };
-
 function Logs() {
  const { t } = useTranslation(["views/system"]);
  const [logService, setLogService] = useState<LogType>("frigate");
  const isWebsocket = logService === "websocket";
  const tabsRef = useRef<HTMLDivElement | null>(null);
-  const logWrapperRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<VListHandle>(null);
-  const [logState, setLogState] = useState<LogState>({
-    entries: [],
-    shift: false,
-    stick: true,
-  });
+  const lazyLogWrapperRef = useRef<HTMLDivElement>(null);
+  const [logs, setLogs] = useState<string[]>([]);
  const [filterSeverity, setFilterSeverity] = useState<LogSeverity[]>();
  const [selectedLog, setSelectedLog] = useState<LogLine>();
+  const lazyLogRef = useRef<LazyLog>(null);
  const [isLoading, setIsLoading] = useState(true);
-  const [follow, setFollow] = useState(true);
  const lastFetchedIndexRef = useRef(-1);
-  const loadingOlderRef = useRef(false);
-  const firstIdRef = useRef(0);
-  const lastIdRef = useRef(0);
-
-  // The last wheel or key scroll went up. The view can still sit at the
-  // bottom for a moment, so position alone would keep following
-  const scrolledUpRef = useRef(false);
-
-  // lines
-
-  const isFollowing = useCallback(() => {
-    const list = listRef.current;
-    if (!list || scrolledUpRef.current) return false;
-
-    return (
-      list.scrollSize - list.scrollOffset - list.viewportSize <
-      FOLLOW_THRESHOLD_PX
-    );
-  }, []);
-
-  const resetLines = useCallback((lines: string[]) => {
-    firstIdRef.current = 0;
-    lastIdRef.current = lines.length;
-    setLogState({
-      entries: lines.map((text, id) => ({ id, text })),
-      shift: false,
-      stick: true,
-    });
-  }, []);
-
-  const appendLines = useCallback(
-    (lines: string[]) => {
-      const entries = lines
-        .filter((text) => text.trim())
-        .map((text) => ({ id: lastIdRef.current++, text }));
-      if (!entries.length) return;
-
-      const stick = isFollowing();
-      setLogState((prev) => ({
-        entries: [...prev.entries, ...entries],
-        shift: false,
-        stick,
-      }));
-    },
-    [isFollowing],
-  );
-
-  const prependLines = useCallback((lines: string[]) => {
-    firstIdRef.current -= lines.length;
-    const firstId = firstIdRef.current;
-    const entries = lines.map((text, i) => ({ id: firstId + i, text }));
-
-    setLogState((prev) => ({
-      entries: [...entries, ...prev.entries],
-      shift: true,
-      stick: false,
-    }));
-  }, []);

  useEffect(() => {
    document.title = t("documentTitle.logs." + logService);
@@ -184,7 +102,8 @@ function Logs() {
          response.data &&
          Array.isArray(response.data.lines)
        ) {
-          return response.data.lines as string[];
+          const filteredLines = filterLines(response.data.lines);
+          return filteredLines;
        }
      } catch (error) {
        const errorMessage =
@@ -196,27 +115,26 @@ function Logs() {
          },
        );
      }
-      return null;
+      return [];
    },
-    [logService, t],
+    [logService, filterLines, t],
  );

  const fetchInitialLogs = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(`logs/${logService}`, {
-        params: { start: filterSeverity?.length ? 0 : -100 },
+        params: { start: filterSeverity ? 0 : -100 },
      });
      if (
        response.status === 200 &&
        response.data &&
        Array.isArray(response.data.lines)
      ) {
-        resetLines(filterLines(response.data.lines));
-
-        // A filtered load fetches the whole file, so nothing older remains
+        const filteredLines = filterLines(response.data.lines);
+        setLogs(filteredLines);
        lastFetchedIndexRef.current =
-          response.data.totalLines - response.data.lines.length;
+          response.data.totalLines - filteredLines.length;
      }
    } catch (error) {
      const errorMessage =
@@ -227,7 +145,7 @@ function Logs() {
    } finally {
      setIsLoading(false);
    }
-  }, [logService, filterLines, filterSeverity, resetLines, t]);
+  }, [logService, filterLines, filterSeverity, t]);

  const abortControllerRef = useRef<AbortController | null>(null);

@@ -262,7 +180,9 @@ function Logs() {
                return filterSeverity.includes(parsedLine.severity);
              })
            : lines;
-          appendLines(filteredLines);
+          if (filteredLines.length > 0) {
+            lazyLogRef.current?.appendLines(filteredLines);
+          }
        }
        // Process next chunk
        return processStreamChunk(reader);
@@ -295,19 +215,17 @@ function Logs() {
          );
        }
      });
-  }, [logService, filterSeverity, appendLines, t]);
+  }, [logService, filterSeverity, t]);

  useEffect(() => {
    if (isWebsocket) {
      setIsLoading(false);
-      resetLines([]);
+      setLogs([]);
      return;
    }

    setIsLoading(true);
-    setFollow(true);
-    scrolledUpRef.current = false;
-    resetLines([]);
+    setLogs([]);
    lastFetchedIndexRef.current = -1;
    fetchInitialLogs().then(() => {
      // Start streaming after initial load
@@ -325,52 +243,70 @@ function Logs() {

  // handlers

-  const loadOlderLines = useCallback(async () => {
-    const end = lastFetchedIndexRef.current;
-    if (loadingOlderRef.current || end <= 0) return;
+  const prependLines = useCallback((newLines: string[]) => {
+    if (!lazyLogRef.current) return;

-    loadingOlderRef.current = true;
-    const start = Math.max(0, end - OLDER_LINES_CHUNK_SIZE);
-    const lines = await fetchLogRange(start, end);
-    loadingOlderRef.current = false;
+    const newLinesArray = newLines.map(
+      (line) => new Uint8Array(new TextEncoder().encode(line + "\n")),
+    );

-    // A service or filter change resets the index while the request is in flight
-    if (!lines || lastFetchedIndexRef.current !== end) return;
+    lazyLogRef.current.setState((prevState) => ({
+      ...prevState,
+      lines: prevState.lines.unshift(...newLinesArray),
+      count: prevState.count + newLines.length,
+    }));
+  }, []);

-    lastFetchedIndexRef.current = start;
-    prependLines(lines);
-  }, [fetchLogRange, prependLines]);
+  // debounced
+  const handleScroll = useMemo(
+    () =>
+      debounce(() => {
+        const scrollThreshold =
+          lazyLogRef.current?.listRef.current?.findEndIndex() ?? 10;
+        const startIndex =
+          lazyLogRef.current?.listRef.current?.findStartIndex() ?? 0;
+        const endIndex =
+          lazyLogRef.current?.listRef.current?.findEndIndex() ?? 0;
+        const pageSize = endIndex - startIndex;
+        if (
+          scrollThreshold < pageSize + pageSize / 2 &&
+          lastFetchedIndexRef.current > 0 &&
+          !isLoading
+        ) {
+          const nextEnd = lastFetchedIndexRef.current;
+          const nextStart = Math.max(0, nextEnd - (pageSize || 100));
+          setIsLoading(true);

-  // Runs on scroll events and on wheel or key input, because input at the top
-  // or bottom edge doesn't scroll and fires no scroll event
-  const syncScrollState = useCallback(() => {
-    const list = listRef.current;
-    if (!list) return;
+          fetchLogRange(nextStart, nextEnd).then((newLines) => {
+            if (newLines.length > 0) {
+              prependLines(newLines);
+              lastFetchedIndexRef.current = nextStart;

-    setFollow(isFollowing());
+              lazyLogRef.current?.listRef.current?.scrollTo(
+                newLines.length *
+                  lazyLogRef.current?.listRef.current?.getItemSize(1),
+              );
+            }
+          });

-    if (list.scrollOffset < list.viewportSize) {
-      loadOlderLines();
+          setIsLoading(false);
+        }
+      }, 50),
+    [fetchLogRange, isLoading, prependLines],
+  );
+
+  const handleCopyLogs = useCallback(() => {
+    if (logs.length) {
+      fetchInitialLogs()
+        .then(() => {
+          copy(logs.join("\n"));
+          toast.success(t("logs.copy.success"));
+        })
+        .catch(() => {
+          toast.error(t("logs.copy.error"));
+        });
    }
-  }, [isFollowing, loadOlderLines]);
-
-  useLayoutEffect(() => {
-    if (isLoading || !logState.stick || !logState.entries.length) return;
-
-    listRef.current?.scrollToIndex(logState.entries.length - 1, {
-      align: "end",
-    });
-  }, [isLoading, logState]);
-
-  const handleCopyLogs = useCallback(async () => {
-    if (!logState.entries.length) return;
-
-    if (await copy(logState.entries.map((entry) => entry.text).join("\n"))) {
-      toast.success(t("logs.copy.success"));
-    } else {
-      toast.error(t("logs.copy.error"));
-    }
-  }, [logState, t]);
+  }, [logs, fetchInitialLogs, t]);

  const handleDownloadLogs = useCallback(() => {
    axios
@@ -393,34 +329,77 @@ function Logs() {
      .catch(() => {});
  }, [logService]);

+  const handleRowClick = useCallback(
+    (rowInfo: { lineNumber: number; rowIndex: number }) => {
+      const clickedLine = parseLogLines(logService, [
+        logs[rowInfo.rowIndex],
+      ])[0];
+      setSelectedLog(clickedLine);
+    },
+    [logs, logService],
+  );
+
  // keyboard listener

  useKeyboardListener(
    ["PageDown", "PageUp", "ArrowDown", "ArrowUp"],
    (key, modifiers) => {
-      const list = listRef.current;
-      if (!key || !modifiers.down || !list) {
+      if (!key || !modifiers.down || !lazyLogWrapperRef.current) {
        return true;
      }

-      const rowHeight = list.getItemSize(list.findItemIndex(list.scrollOffset));
-      if (!rowHeight) {
+      const container =
+        lazyLogWrapperRef.current.querySelector(".react-lazylog");
+
+      const logLineHeight = container?.querySelector(".log-line")?.clientHeight;
+
+      if (!logLineHeight) {
        return true;
      }

-      const rows = key.includes("Page") ? 10 : 1;
+      const scrollAmount = key.includes("Page")
+        ? logLineHeight * 10
+        : logLineHeight;
      const direction = key.includes("Down") ? 1 : -1;
-      scrolledUpRef.current = direction < 0;
-      list.scrollBy(rowHeight * rows * direction);
-      syncScrollState();
+      container?.scrollBy({ top: scrollAmount * direction });
      return true;
    },
  );

+  // format lines
+
+  const lineBufferRef = useRef<string>("");
+
+  const formatPart = useCallback(
+    (text: string) => {
+      lineBufferRef.current += text;
+
+      if (text.endsWith("\n")) {
+        const completeLine = lineBufferRef.current.trim();
+        lineBufferRef.current = "";
+
+        if (completeLine) {
+          const parsedLine = parseLogLines(logService, [completeLine])[0];
+          return (
+            <LogLineData
+              line={parsedLine}
+              logService={logService}
+              onClickSeverity={() => setFilterSeverity([parsedLine.severity])}
+              onSelect={() => setSelectedLog(parsedLine)}
+            />
+          );
+        }
+      }
+
+      return null;
+    },
+    [logService, setFilterSeverity, setSelectedLog],
+  );
+
  useEffect(() => {
    const handleCopy = (e: ClipboardEvent) => {
      e.preventDefault();
-      if (!logWrapperRef.current) return;
+      if (!lazyLogWrapperRef.current) return;

      const selection = window.getSelection();
      if (!selection) return;
@@ -488,7 +467,7 @@ function Logs() {
      e.clipboardData?.setData("text/plain", copyText);
    };

-    const content = logWrapperRef.current;
+    const content = lazyLogWrapperRef.current;
    content?.addEventListener("copy", handleCopy);
    return () => {
      content?.removeEventListener("copy", handleCopy);
@@ -509,6 +488,7 @@ function Logs() {
              value={logService}
              onValueChange={(value: LogType) => {
                if (value) {
+                  setLogs([]);
                  setFilterSeverity(undefined);
                  setLogService(value);
                }
@@ -602,56 +582,44 @@ function Logs() {
            </div>
          </div>

-          <div
-            ref={logWrapperRef}
-            className="min-h-0 flex-1"
-            onPointerDown={() => {
-              scrolledUpRef.current = false;
-            }}
-          >
+          <div ref={lazyLogWrapperRef} className="size-full">
            {isLoading ? (
              <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
            ) : (
-              <>
-                {follow && !logSettings.disableStreaming && (
-                  <div className="absolute right-1 top-3">
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <MdCircle className="mr-2 size-2 animate-pulse cursor-default text-selected shadow-selected drop-shadow-md" />
-                      </TooltipTrigger>
-                      <TooltipContent>{t("logs.tips")}</TooltipContent>
-                    </Tooltip>
-                  </div>
+              <EnhancedScrollFollow
+                startFollowing={!isLoading}
+                onCustomScroll={handleScroll}
+                render={({ follow, onScroll }) => (
+                  <>
+                    {follow && !logSettings.disableStreaming && (
+                      <div className="absolute right-1 top-3">
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <MdCircle className="mr-2 size-2 animate-pulse cursor-default text-selected shadow-selected drop-shadow-md" />
+                          </TooltipTrigger>
+                          <TooltipContent>{t("logs.tips")}</TooltipContent>
+                        </Tooltip>
+                      </div>
+                    )}
+                    <LazyLog
+                      ref={lazyLogRef}
+                      enableLineNumbers={false}
+                      selectableLines
+                      lineClassName="text-primary bg-background"
+                      highlightLineClassName="bg-primary/20"
+                      onRowClick={handleRowClick}
+                      formatPart={formatPart}
+                      text={logs.join("\n")}
+                      follow={follow}
+                      onScroll={onScroll}
+                      loadingComponent={
+                        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                      }
+                      loading={isLoading}
+                    />
+                  </>
                )}
-                <VList
-                  ref={listRef}
-                  itemSize={isDesktop ? ROW_HEIGHT_HINT_PX : undefined}
-                  data={logState.entries}
-                  shift={logState.shift}
-                  onScroll={syncScrollState}
-                  onWheel={(e) => {
-                    if (!e.deltaY) return;
-
-                    scrolledUpRef.current = e.deltaY < 0;
-                    syncScrollState();
-                  }}
-                >
-                  {(entry) => {
-                    const line = parseLogLines(logService, [entry.text])[0];
-                    return (
-                      <LogLineData
-                        key={entry.id}
-                        line={line}
-                        logService={logService}
-                        onClickSeverity={() =>
-                          setFilterSeverity([line.severity])
-                        }
-                        onSelect={() => setSelectedLog(line)}
-                      />
-                    );
-                  }}
-                </VList>
-              </>
+              />
            )}
          </div>
        </div>
@@ -540,35 +540,6 @@ export default function Settings() {
  const [editingProfile, setEditingProfile] = useState<
    Record<string, string | null>
  >({});
-
-  // drop pending edits for a camera or profile that no longer exists
-  useEffect(() => {
-    if (!config) return;
-    const isStale = (camera: string, profile?: string | null) =>
-      !config.cameras[camera] || (!!profile && !config.profiles?.[profile]);
-    const prune = <T,>(
-      prev: Record<string, T>,
-      stale: (key: string, value: T) => boolean,
-    ) => {
-      const next = Object.fromEntries(
-        Object.entries(prev).filter(([key, value]) => !stale(key, value)),
-      );
-      return Object.keys(next).length === Object.keys(prev).length
-        ? prev
-        : next;
-    };
-    setEditingProfile((prev) => prune(prev, isStale));
-    setPendingDataBySection((prev) =>
-      prune(prev, (key) => {
-        const [camera, section] = key.split("::");
-        return (
-          section !== undefined &&
-          isStale(camera, parseProfileFromSectionPath(section).profileName)
-        );
-      }),
-    );
-  }, [config]);
-
  const [profilesUIEnabled, setProfilesUIEnabled] = useState(false);

  const allProfileNames = useMemo(() => {