From 5933adb23bce6b2bfb2f39618e0577fee1d57b1f Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Fri, 7 Nov 2025 17:56:00 +0100
Subject: [PATCH] feat: implement FailSafeModeOverlay component with log
 download and issue reporting functionality

---
 .../{FaileSafeModeOverlay.tsx => FailSafeModeOverlay.tsx}    | 0
 ui/src/hooks/useJsonRpc.ts                                   | 2 +-
 ui/src/routes/devices.$id.settings.general.reboot.tsx        | 5 ++++-
 ui/src/routes/devices.$id.settings.tsx                       | 2 +-
 ui/src/routes/devices.$id.tsx                                | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)
 rename ui/src/components/{FaileSafeModeOverlay.tsx => FailSafeModeOverlay.tsx} (100%)

diff --git a/ui/src/components/FaileSafeModeOverlay.tsx b/ui/src/components/FailSafeModeOverlay.tsx
similarity index 100%
rename from ui/src/components/FaileSafeModeOverlay.tsx
rename to ui/src/components/FailSafeModeOverlay.tsx
diff --git a/ui/src/hooks/useJsonRpc.ts b/ui/src/hooks/useJsonRpc.ts
index 5ad4d366..05214e00 100644
--- a/ui/src/hooks/useJsonRpc.ts
+++ b/ui/src/hooks/useJsonRpc.ts
@@ -50,7 +50,7 @@ const blockedMethodsByReason: Record<string, string[]> = {
 
 export function useJsonRpc(onRequest?: (payload: JsonRpcRequest) => void) {
   const { rpcDataChannel } = useRTCStore();
-  const { isFailsafeMode: isFailsafeMode, reason } = useFailsafeModeStore();
+  const { isFailsafeMode, reason } = useFailsafeModeStore();
 
   const send = useCallback(
     async (method: string, params: unknown, callback?: (resp: JsonRpcResponse) => void) => {
diff --git a/ui/src/routes/devices.$id.settings.general.reboot.tsx b/ui/src/routes/devices.$id.settings.general.reboot.tsx
index bb7daddd..5404e5b8 100644
--- a/ui/src/routes/devices.$id.settings.general.reboot.tsx
+++ b/ui/src/routes/devices.$id.settings.general.reboot.tsx
@@ -7,6 +7,9 @@ import { Button } from "@components/Button";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 
+// Time to wait after initiating reboot before redirecting to home
+const REBOOT_REDIRECT_DELAY_MS = 5000;
+
 export default function SettingsGeneralRebootRoute() {
   const navigate = useNavigate();
   const { send } = useJsonRpc();
@@ -18,7 +21,7 @@ export default function SettingsGeneralRebootRoute() {
     // This is where we send the RPC to the golang binary
     send("reboot", { force: true });
 
-    await new Promise(resolve => setTimeout(resolve, 5000));
+    await new Promise(resolve => setTimeout(resolve, REBOOT_REDIRECT_DELAY_MS));
     navigateTo("/");
   }, [navigateTo, send]);
 
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
index 3a69549e..1d15fa2e 100644
--- a/ui/src/routes/devices.$id.settings.tsx
+++ b/ui/src/routes/devices.$id.settings.tsx
@@ -161,7 +161,7 @@ export default function SettingsRoute() {
                   </div>
                 </FeatureFlag>
                 <div className={cx("shrink-0", {
-                  "opacity-50 cursor-not-allowed!": isVideoDisabled
+                  "opacity-50 cursor-not-allowed": isVideoDisabled
                 })}>
                   <NavLink
                     to="video"
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index ff0836f3..c88af2a2 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -41,7 +41,7 @@ const ConnectionStatsSidebar = lazy(() => import('@/components/sidebar/connectio
 const Terminal = lazy(() => import('@components/Terminal'));
 const UpdateInProgressStatusCard = lazy(() => import("@/components/UpdateInProgressStatusCard"));
 import Modal from "@/components/Modal";
-import { FailSafeModeOverlay } from "@components/FaileSafeModeOverlay";
+import { FailSafeModeOverlay } from "@components/FailSafeModeOverlay";
 import { JsonRpcRequest, JsonRpcResponse, RpcMethodNotFound, useJsonRpc } from "@/hooks/useJsonRpc";
 import {
   ConnectionFailedOverlay,