ui/src/components/Button.tsx

@@ -213,7 +213,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
 Button.displayName = "Button";
 
 type LinkPropsType = Pick<LinkProps, "to"> &
-  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean, reloadDocument?: boolean };
+  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
   const classes = cx(
     "group outline-hidden",
@@ -231,7 +231,7 @@ export const LinkButton = ({ to, ...props }: LinkPropsType) => {
     );
   } else {
     return (
-      <Link to={to} reloadDocument={props.reloadDocument} className={classes}>
+      <Link to={to} className={classes}>
         <ButtonContent {...props} />
       </Link>
     );

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -98,7 +98,7 @@ export default function SettingsAccessIndexRoute() {
       }
 
       getCloudState();
-      // In cloud mode, we need to navigate to the device overview page, as we don't have a connection anymore
+      // In cloud mode, we need to navigate to the device overview page, as we don't a connection anymore
       if (!isOnDevice) navigate("/");
       return;
     });

ui/src/routes/devices.$id.settings.general.reboot.tsx

@@ -7,12 +7,6 @@ import { Button } from "@components/Button";
 export default function SettingsGeneralRebootRoute() {
   const navigate = useNavigate();
   const { send } = useJsonRpc();
-  
-  const onClose = useCallback(() => {
-    navigate(".."); // back to the devices.$id.settings page
-    window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
-  }, [navigate]);
-
 
   const onConfirmUpdate = useCallback(() => {
     // This is where we send the RPC to the golang binary
@@ -22,7 +16,7 @@ export default function SettingsGeneralRebootRoute() {
   {
     /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
   }
-  return <Dialog onClose={onClose} onConfirmUpdate={onConfirmUpdate} />;
+  return <Dialog onClose={() => navigate("..")} onConfirmUpdate={onConfirmUpdate} />;
 }
 
 export function Dialog({

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { MdConnectWithoutContact, MdRestartAlt } from "react-icons/md";
 
@@ -19,11 +19,6 @@ export default function SettingsGeneralUpdateRoute() {
   const { setModalView, otaState } = useUpdateStore();
   const { send } = useJsonRpc();
 
-  const onClose = useCallback(() => {
-    navigate(".."); // back to the devices.$id.settings page
-    window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
-  }, [navigate]);
-
   const onConfirmUpdate = useCallback(() => {
     send("tryUpdate", {});
     setModalView("updating");
@@ -44,7 +39,7 @@ export default function SettingsGeneralUpdateRoute() {
   {
     /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
   }
-  return <Dialog onClose={onClose} onConfirmUpdate={onConfirmUpdate} />;
+  return <Dialog onClose={() => navigate("..")} onConfirmUpdate={onConfirmUpdate} />;
 }
 
 export function Dialog({
@@ -228,7 +223,7 @@ function UpdatingDeviceState({
         100,
       );
     } else {
-      // System: 10% download, 10% verification, 80% update
+      // System: 10% download, 90% update
       return Math.min(
         downloadProgress * 0.1 + verificationProgress * 0.1 + updateProgress * 0.8,
         100,
@@ -292,19 +287,17 @@ function UpdatingDeviceState({
                   <span className="font-medium text-black dark:text-white">
                     Rebooting the device to complete the update...
                   </span>
-                  <p className="font-medium text-black dark:text-white">
+                  <p>
                     This may take a few minutes. The device will automatically
-                    reconnect once it is back online.<br/>
-                    If it doesn{"'"}t reconnect automatically, you can manually
-                    reconnect by clicking here: 
+                    reconnect once it is back online. If it doesn{"'"}t, you can
+                    manually reconnect.
                     <LinkButton
-                      size="XS"
+                      size="SM"
                       theme="light"
                       text="Reconnect to KVM"
                       LeadingIcon={MdConnectWithoutContact}
                       textAlign="center"
-                      reloadDocument={true}
-                      to={"/"}
+                      to={".."}
                     />
                   </p>
                 </div>
@@ -314,17 +307,15 @@ function UpdatingDeviceState({
                     <span className="font-medium text-black dark:text-white">
                       Device reboot is pending...
                     </span>
-                    <p className="font-medium text-black dark:text-white">
-                      The JetKVM is preparing to reboot. This may take a while.<br/>
-                      If it doesn{"'"}t automatically reboot after a few minutes, you
-                      can manually request a reboot by clicking here:
+                    <p>
+                      The JetKVM is preparing to reboot. This may take a while. If it doesn{"'"}t automatically reboot
+                      after a few minutes, you can manually request a reboot.
                       <LinkButton
-                        size="XS"
+                        size="SM"
                         theme="light"
                         text="Reboot the KVM"
                         LeadingIcon={MdRestartAlt}
                         textAlign="center"
-                        reloadDocument={true}
                         to={"../reboot"}
                       />
                     </p>

ui/src/routes/devices.$id.tsx

@@ -146,7 +146,6 @@ export default function KvmIdRoute() {
   const { otaState, setOtaState, setModalView } = useUpdateStore();
 
   const [loadingMessage, setLoadingMessage] = useState("Connecting to device...");
-
   const cleanupAndStopReconnecting = useCallback(
     function cleanupAndStopReconnecting() {
       console.log("Closing peer connection");
@@ -183,11 +182,11 @@ export default function KvmIdRoute() {
       pc: RTCPeerConnection,
       remoteDescription: RTCSessionDescriptionInit,
     ) {
-      setLoadingMessage("Setting remote description type:" + remoteDescription.type);
+      setLoadingMessage("Setting remote description");
 
       try {
         await pc.setRemoteDescription(new RTCSessionDescription(remoteDescription));
-        console.log("[setRemoteSessionDescription] Remote description set successfully to: " + remoteDescription.sdp);
+        console.log("[setRemoteSessionDescription] Remote description set successfully");
         setLoadingMessage("Establishing secure connection...");
       } catch (error) {
         console.error(
@@ -232,15 +231,9 @@ export default function KvmIdRoute() {
   const ignoreOffer = useRef(false);
   const isSettingRemoteAnswerPending = useRef(false);
   const makingOffer = useRef(false);
-  const reconnectAttemptsRef = useRef(20);
 
   const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-  const reconnectInterval = (attempt: number) => {
-    // Exponential backoff with a max of 10 seconds between attempts
-    return Math.min(500 * 2 ** attempt, 10000);
-  }
-
   const { sendMessage, getWebSocket } = useWebSocket(
     isOnDevice
       ? `${wsProtocol}//${window.location.host}/webrtc/signaling/client`
@@ -248,16 +241,17 @@ export default function KvmIdRoute() {
     {
       heartbeat: true,
       retryOnError: true,
-      reconnectAttempts: reconnectAttemptsRef.current,
-      reconnectInterval: reconnectInterval,
-      onReconnectStop: (attempt: number) => {
-        console.debug("Reconnect stopped after ", attempt, "attempts");
+      reconnectAttempts: 15,
+      reconnectInterval: 1000,
+      onReconnectStop: () => {
+        console.debug("Reconnect stopped");
         cleanupAndStopReconnecting();
       },
 
       shouldReconnect(event) {
         console.debug("[Websocket] shouldReconnect", event);
-        return !connectionFailed;  // we always want to try to reconnect unless we're explicitly stopped
+        // TODO: Why true?
+        return true;
       },
 
       onClose(event) {
@@ -290,7 +284,6 @@ export default function KvmIdRoute() {
         */
 
         const parsedMessage = JSON.parse(message.data);
-  
         if (parsedMessage.type === "device-metadata") {
           const { deviceVersion } = parsedMessage.data;
           console.debug("[Websocket] Received device-metadata message");
@@ -307,12 +300,10 @@ export default function KvmIdRoute() {
             console.log("[Websocket] Device is using new signaling");
             isLegacySignalingEnabled.current = false;
           }
-  
           setupPeerConnection();
         }
 
         if (!peerConnection) return;
-
         if (parsedMessage.type === "answer") {
           console.debug("[Websocket] Received answer");
           const readyForOffer =
@@ -603,9 +594,7 @@ export default function KvmIdRoute() {
     api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
       bytesReceived: bytesReceivedDelta,
       bytesSent: bytesSentDelta,
-    }).catch(()=>{
-      // we don't care about errors here, but we don't want unhandled promise rejections
-     });
+    });
   }, 10000);
 
   const { setNetworkState} = useNetworkStateStore();