Merge branch 'dev' into feat/tls-config

.golangci.yml

@@ -1,12 +1,22 @@
 ---
 linters:
   enable:
-  # - goimports
+  - forbidigo
-  # - misspell
+  - goimports
+  - misspell
   # - revive
+  - whitespace
 
 issues:
   exclude-rules:
     - path: _test.go
       linters:
         - errcheck
+
+linters-settings:
+  forbidigo:
+    forbid:
+      - p: ^fmt\.Print.*$
+        msg: Do not commit print statements. Use logger package.
+      - p: ^log\.(Fatal|Panic|Print)(f|ln)?.*$
+        msg: Do not commit log statements. Use logger package.

README.md

@@ -23,7 +23,7 @@ We welcome contributions from the community! Whether it's improving the firmware
 
 ## I need help
 
-The best place to search for answers is our [Documentation](https://jetkvm.com/docs). If you can't find the answer there, check our [Discord Server](https://discord.gg/8MaAhua7NW).
+The best place to search for answers is our [Documentation](https://jetkvm.com/docs). If you can't find the answer there, check our [Discord Server](https://jetkvm.com/discord).
 
 ## I want to report an issue
 

cloud.go

@@ -10,6 +10,8 @@ import (
 	"time"
 
 	"github.com/coder/websocket/wsjson"
+	"github.com/prometheus/client_golang/prometheus"
+	"github.com/prometheus/client_golang/prometheus/promauto"
 
 	"github.com/coreos/go-oidc/v3/oidc"
 
@@ -36,6 +38,97 @@ const (
 	CloudWebSocketPingInterval = 15 * time.Second
 )
 
+var (
+	metricCloudConnectionStatus = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_status",
+			Help: "The status of the cloud connection",
+		},
+	)
+	metricCloudConnectionEstablishedTimestamp = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_established_timestamp",
+			Help: "The timestamp when the cloud connection was established",
+		},
+	)
+	metricCloudConnectionLastPingTimestamp = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_last_ping_timestamp",
+			Help: "The timestamp when the last ping response was received",
+		},
+	)
+	metricCloudConnectionLastPingDuration = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_last_ping_duration",
+			Help: "The duration of the last ping response",
+		},
+	)
+	metricCloudConnectionPingDuration = promauto.NewHistogram(
+		prometheus.HistogramOpts{
+			Name: "jetkvm_cloud_connection_ping_duration",
+			Help: "The duration of the ping response",
+			Buckets: []float64{
+				0.1, 0.5, 1, 10,
+			},
+		},
+	)
+	metricCloudConnectionTotalPingCount = promauto.NewCounter(
+		prometheus.CounterOpts{
+			Name: "jetkvm_cloud_connection_total_ping_count",
+			Help: "The total number of pings sent to the cloud",
+		},
+	)
+	metricCloudConnectionSessionRequestCount = promauto.NewCounter(
+		prometheus.CounterOpts{
+			Name: "jetkvm_cloud_connection_session_total_request_count",
+			Help: "The total number of session requests received from the cloud",
+		},
+	)
+	metricCloudConnectionSessionRequestDuration = promauto.NewHistogram(
+		prometheus.HistogramOpts{
+			Name: "jetkvm_cloud_connection_session_request_duration",
+			Help: "The duration of session requests",
+			Buckets: []float64{
+				0.1, 0.5, 1, 10,
+			},
+		},
+	)
+	metricCloudConnectionLastSessionRequestTimestamp = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_last_session_request_timestamp",
+			Help: "The timestamp of the last session request",
+		},
+	)
+	metricCloudConnectionLastSessionRequestDuration = promauto.NewGauge(
+		prometheus.GaugeOpts{
+			Name: "jetkvm_cloud_connection_last_session_request_duration",
+			Help: "The duration of the last session request",
+		},
+	)
+	metricCloudConnectionFailureCount = promauto.NewCounter(
+		prometheus.CounterOpts{
+			Name: "jetkvm_cloud_connection_failure_count",
+			Help: "The number of times the cloud connection has failed",
+		},
+	)
+)
+
+func cloudResetMetrics(established bool) {
+	metricCloudConnectionLastPingTimestamp.Set(-1)
+	metricCloudConnectionLastPingDuration.Set(-1)
+
+	metricCloudConnectionLastSessionRequestTimestamp.Set(-1)
+	metricCloudConnectionLastSessionRequestDuration.Set(-1)
+
+	if established {
+		metricCloudConnectionEstablishedTimestamp.SetToCurrentTime()
+		metricCloudConnectionStatus.Set(1)
+	} else {
+		metricCloudConnectionEstablishedTimestamp.Set(-1)
+		metricCloudConnectionStatus.Set(-1)
+	}
+}
+
 func handleCloudRegister(c *gin.Context) {
 	var req CloudRegisterRequest
 
@@ -90,11 +183,6 @@ func handleCloudRegister(c *gin.Context) {
 		return
 	}
 
-	if config.CloudToken == "" {
-		cloudLogger.Info("Starting websocket client due to adoption")
-		go RunWebsocketClient()
-	}
-
 	config.CloudToken = tokenResp.SecretToken
 
 	provider, err := oidc.NewProvider(c, "https://accounts.google.com")
@@ -130,19 +218,23 @@ func runWebsocketClient() error {
 		time.Sleep(5 * time.Second)
 		return fmt.Errorf("cloud token is not set")
 	}
+
 	wsURL, err := url.Parse(config.CloudURL)
 	if err != nil {
 		return fmt.Errorf("failed to parse config.CloudURL: %w", err)
 	}
+
 	if wsURL.Scheme == "http" {
 		wsURL.Scheme = "ws"
 	} else {
 		wsURL.Scheme = "wss"
 	}
+
 	header := http.Header{}
 	header.Set("X-Device-ID", GetDeviceID())
 	header.Set("Authorization", "Bearer "+config.CloudToken)
 	dialCtx, cancelDial := context.WithTimeout(context.Background(), CloudWebSocketConnectTimeout)
+
 	defer cancelDial()
 	c, _, err := websocket.Dial(dialCtx, wsURL.String(), &websocket.DialOptions{
 		HTTPHeader: header,
@@ -152,17 +244,35 @@ func runWebsocketClient() error {
 	}
 	defer c.CloseNow() //nolint:errcheck
 	cloudLogger.Infof("websocket connected to %s", wsURL)
+
+	// set the metrics when we successfully connect to the cloud.
+	cloudResetMetrics(true)
+
 	runCtx, cancelRun := context.WithCancel(context.Background())
 	defer cancelRun()
 	go func() {
 		for {
 			time.Sleep(CloudWebSocketPingInterval)
+
+			// set the timer for the ping duration
+			timer := prometheus.NewTimer(prometheus.ObserverFunc(func(v float64) {
+				metricCloudConnectionLastPingDuration.Set(v)
+				metricCloudConnectionPingDuration.Observe(v)
+			}))
+
 			err := c.Ping(runCtx)
+
 			if err != nil {
 				cloudLogger.Warnf("websocket ping error: %v", err)
 				cancelRun()
 				return
 			}
+
+			// dont use `defer` here because we want to observe the duration of the ping
+			timer.ObserveDuration()
+
+			metricCloudConnectionTotalPingCount.Inc()
+			metricCloudConnectionLastPingTimestamp.SetToCurrentTime()
 		}
 	}()
 	for {
@@ -184,6 +294,8 @@ func runWebsocketClient() error {
 		cloudLogger.Infof("new session request: %v", req.OidcGoogle)
 		cloudLogger.Tracef("session request info: %v", req)
 
+		metricCloudConnectionSessionRequestCount.Inc()
+		metricCloudConnectionLastSessionRequestTimestamp.SetToCurrentTime()
 		err = handleSessionRequest(runCtx, c, req)
 		if err != nil {
 			cloudLogger.Infof("error starting new session: %v", err)
@@ -193,6 +305,12 @@ func runWebsocketClient() error {
 }
 
 func handleSessionRequest(ctx context.Context, c *websocket.Conn, req WebRTCSessionRequest) error {
+	timer := prometheus.NewTimer(prometheus.ObserverFunc(func(v float64) {
+		metricCloudConnectionLastSessionRequestDuration.Set(v)
+		metricCloudConnectionSessionRequestDuration.Observe(v)
+	}))
+	defer timer.ObserveDuration()
+
 	oidcCtx, cancelOIDC := context.WithTimeout(ctx, CloudOidcRequestTimeout)
 	defer cancelOIDC()
 	provider, err := oidc.NewProvider(oidcCtx, "https://accounts.google.com")
@@ -253,9 +371,34 @@ func handleSessionRequest(ctx context.Context, c *websocket.Conn, req WebRTCSess
 
 func RunWebsocketClient() {
 	for {
+		// reset the metrics when we start the websocket client.
+		cloudResetMetrics(false)
+
+		// If the cloud token is not set, we don't need to run the websocket client.
+		if config.CloudToken == "" {
+			time.Sleep(5 * time.Second)
+			continue
+		}
+
+		// If the network is not up, well, we can't connect to the cloud.
+		if !networkState.Up {
+			cloudLogger.Warn("waiting for network to be up, will retry in 3 seconds")
+			time.Sleep(3 * time.Second)
+			continue
+		}
+
+		// If the system time is not synchronized, the API request will fail anyway because the TLS handshake will fail.
+		if isTimeSyncNeeded() && !timeSyncSuccess {
+			cloudLogger.Warn("system time is not synced, will retry in 3 seconds")
+			time.Sleep(3 * time.Second)
+			continue
+		}
+
 		err := runWebsocketClient()
 		if err != nil {
 			cloudLogger.Errorf("websocket client error: %v", err)
+			metricCloudConnectionStatus.Set(0)
+			metricCloudConnectionFailureCount.Inc()
 			time.Sleep(5 * time.Second)
 		}
 	}

main.go

@@ -74,11 +74,9 @@ func Main() {
 		initCertStore()
 		go RunWebSecureServer()
 	}
-	// If the cloud token isn't set, the client won't be started by default.
+	// As websocket client already checks if the cloud token is set, we can start it here.
-	// However, if the user adopts the device via the web interface, handleCloudRegister will start the client.
+	go RunWebsocketClient()
-	if config.CloudToken != "" {
+
-		go RunWebsocketClient()
-	}
 	initSerialPort()
 	sigs := make(chan os.Signal, 1)
 	signal.Notify(sigs, syscall.SIGINT, syscall.SIGTERM)

prometheus.go

@@ -1,15 +1,11 @@
 package kvm
 
 import (
-	"net/http"
-
 	"github.com/prometheus/client_golang/prometheus"
 	versioncollector "github.com/prometheus/client_golang/prometheus/collectors/version"
 	"github.com/prometheus/common/version"
 )
 
-var promHandler http.Handler
-
 func initPrometheus() {
 	// A Prometheus metrics endpoint.
 	version.Version = builtAppVersion

serial.go

@@ -66,7 +66,6 @@ func runATXControl() {
 			newLedPWRState != ledPWRState ||
 			newBtnRSTState != btnRSTState ||
 			newBtnPWRState != btnPWRState {
-
 			logger.Debugf("Status changed: HDD LED: %v, PWR LED: %v, RST BTN: %v, PWR BTN: %v",
 				newLedHDDState, newLedPWRState, newBtnRSTState, newBtnPWRState)
 

ui/src/components/Header.tsx

@@ -36,7 +36,7 @@ export default function DashboardNavbar({
   picture,
   kvmName,
 }: NavbarProps) {
-  const peerConnectionState = useRTCStore(state => state.peerConnection?.connectionState);
+  const peerConnection = useRTCStore(state => state.peerConnection);
   const setUser = useUserStore(state => state.setUser);
   const navigate = useNavigate();
   const onLogout = useCallback(async () => {
@@ -82,14 +82,14 @@ export default function DashboardNavbar({
                 <div className="hidden items-center gap-x-2 md:flex">
                   <div className="w-[159px]">
                     <PeerConnectionStatusCard
-                      state={peerConnectionState}
+                      state={peerConnection?.connectionState}
                       title={kvmName}
                     />
                   </div>
                   <div className="hidden w-[159px] md:block">
                     <USBStateStatus
                       state={usbState}
-                      peerConnectionState={peerConnectionState}
+                      peerConnectionState={peerConnection?.connectionState}
                     />
                   </div>
                 </div>

ui/src/components/PeerConnectionStatusCard.tsx

@@ -9,19 +9,22 @@ const PeerConnectionStatusMap = {
   failed: "Connection failed",
   closed: "Closed",
   new: "Connecting",
-};
+} as Record<RTCPeerConnectionState | "error" | "closing", string>;
 
 export type PeerConnections = keyof typeof PeerConnectionStatusMap;
 
-type StatusProps = Record<PeerConnections, {
+type StatusProps = Record<
+  PeerConnections,
+  {
     statusIndicatorClassName: string;
-  }>;
+  }
+>;
 
 export default function PeerConnectionStatusCard({
   state,
   title,
 }: {
-  state?: PeerConnections;
+  state?: RTCPeerConnectionState | null;
   title?: string;
 }) {
   if (!state) return null;

ui/src/components/USBStateStatus.tsx

@@ -8,11 +8,14 @@ import { HidState } from "@/hooks/stores";
 
 type USBStates = HidState["usbState"];
 
-type StatusProps = Record<USBStates, {
+type StatusProps = Record<
+  USBStates,
+  {
     icon: React.FC<{ className: string | undefined }>;
     iconClassName: string;
     statusIndicatorClassName: string;
-  }>;
+  }
+>;
 
 const USBStateMap: Record<USBStates, string> = {
   configured: "Connected",
@@ -27,9 +30,8 @@ export default function USBStateStatus({
   peerConnectionState,
 }: {
   state: USBStates;
-  peerConnectionState?: RTCPeerConnectionState;
+  peerConnectionState?: RTCPeerConnectionState | null;
 }) {
-
   const StatusCardProps: StatusProps = {
     configured: {
       icon: ({ className }) => (

ui/src/components/VideoOverlay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
-import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
 import { motion, AnimatePresence } from "framer-motion";
 import { LuPlay } from "react-icons/lu";
 
@@ -25,12 +25,12 @@ interface LoadingOverlayProps {
   show: boolean;
 }
 
-export function LoadingOverlay({ show }: LoadingOverlayProps) {
+export function LoadingVideoOverlay({ show }: LoadingOverlayProps) {
   return (
     <AnimatePresence>
       {show && (
         <motion.div
-          className="absolute inset-0 aspect-video h-full w-full"
+          className="aspect-video h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -55,21 +55,59 @@ export function LoadingOverlay({ show }: LoadingOverlayProps) {
   );
 }
 
-interface ConnectionErrorOverlayProps {
+interface LoadingConnectionOverlayProps {
   show: boolean;
+  text: string;
 }
-
+export function LoadingConnectionOverlay({ show, text }: LoadingConnectionOverlayProps) {
-export function ConnectionErrorOverlay({ show }: ConnectionErrorOverlayProps) {
   return (
     <AnimatePresence>
       {show && (
         <motion.div
-          className="absolute inset-0 z-10 aspect-video h-full w-full"
+          className="aspect-video h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
+          exit={{ opacity: 0, transition: { duration: 0 } }}
           transition={{
-            duration: 0.3,
+            duration: 0.4,
+            ease: "easeInOut",
+          }}
+        >
+          <OverlayContent>
+            <div className="flex flex-col items-center justify-center gap-y-1">
+              <div className="animate flex h-12 w-12 items-center justify-center">
+                <LoadingSpinner className="h-8 w-8 text-blue-800 dark:text-blue-200" />
+              </div>
+              <p className="text-center text-sm text-slate-700 dark:text-slate-300">
+                {text}
+              </p>
+            </div>
+          </OverlayContent>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+interface ConnectionErrorOverlayProps {
+  show: boolean;
+  setupPeerConnection: () => Promise<void>;
+}
+
+export function ConnectionErrorOverlay({
+  show,
+  setupPeerConnection,
+}: ConnectionErrorOverlayProps) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="aspect-video h-full w-full"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0 } }}
+          transition={{
+            duration: 0.4,
             ease: "easeInOut",
           }}
         >
@@ -87,14 +125,21 @@ export function ConnectionErrorOverlay({ show }: ConnectionErrorOverlayProps) {
                       <li>Try restarting both the device and your computer</li>
                     </ul>
                   </div>
-                  <div>
+                  <div className="flex items-center gap-x-2">
                     <LinkButton
                       to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
-                      theme="light"
+                      theme="primary"
                       text="Troubleshooting Guide"
                       TrailingIcon={ArrowRightIcon}
                       size="SM"
                     />
+                    <Button
+                      onClick={() => setupPeerConnection()}
+                      LeadingIcon={ArrowPathIcon}
+                      text="Try again"
+                      size="SM"
+                      theme="light"
+                    />
                   </div>
                 </div>
               </div>

ui/src/components/WebRTCVideo.tsx

@@ -19,9 +19,8 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 
 import {
   HDMIErrorOverlay,
+  LoadingVideoOverlay,
   NoAutoplayPermissionsOverlay,
-  ConnectionErrorOverlay,
-  LoadingOverlay,
 } from "./VideoOverlay";
 
 export default function WebRTCVideo() {
@@ -46,15 +45,13 @@ export default function WebRTCVideo() {
 
   // RTC related states
   const peerConnection = useRTCStore(state => state.peerConnection);
-  const peerConnectionState = useRTCStore(state => state.peerConnectionState);
 
   // HDMI and UI states
   const hdmiState = useVideoStore(state => state.hdmiState);
   const hdmiError = ["no_lock", "no_signal", "out_of_range"].includes(hdmiState);
-  const isLoading = !hdmiError && !isPlaying;
+  const isVideoLoading = !isPlaying;
-  const isConnectionError = ["error", "failed", "disconnected", "closed"].includes(
+
-    peerConnectionState || "",
+  // console.log("peerConnection?.connectionState", peerConnection?.connectionState);
-  );
 
   // Keyboard related states
   const { setIsNumLockActive, setIsCapsLockActive, setIsScrollLockActive } =
@@ -379,25 +376,52 @@ export default function WebRTCVideo() {
     }
   }, []);
 
+  const addStreamToVideoElm = useCallback(
+    (mediaStream: MediaStream) => {
+      if (!videoElm.current) return;
+      const videoElmRefValue = videoElm.current;
+      console.log("Adding stream to video element", videoElmRefValue);
+      videoElmRefValue.srcObject = mediaStream;
+      updateVideoSizeStore(videoElmRefValue);
+    },
+    [updateVideoSizeStore],
+  );
+
+  useEffect(
+    function updateVideoStreamOnNewTrack() {
+      if (!peerConnection) return;
+      const abortController = new AbortController();
+      const signal = abortController.signal;
+
+      peerConnection.addEventListener(
+        "track",
+        (e: RTCTrackEvent) => {
+          console.log("Adding stream to video element");
+          addStreamToVideoElm(e.streams[0]);
+        },
+        { signal },
+      );
+
+      return () => {
+        abortController.abort();
+      };
+    },
+    [addStreamToVideoElm, peerConnection],
+  );
+
   useEffect(
     function updateVideoStream() {
       if (!mediaStream) return;
-      if (!videoElm.current) return;
+      console.log("Updating video stream from mediaStream");
-      if (peerConnection?.iceConnectionState !== "connected") return;
+      // We set the as early as possible
-
+      addStreamToVideoElm(mediaStream);
-      setTimeout(() => {
-        if (videoElm?.current) {
-          videoElm.current.srcObject = mediaStream;
-        }
-      }, 0);
-      updateVideoSizeStore(videoElm.current);
     },
     [
       setVideoClientSize,
-      setVideoSize,
       mediaStream,
       updateVideoSizeStore,
-      peerConnection?.iceConnectionState,
+      peerConnection,
+      addStreamToVideoElm,
     ],
   );
 
@@ -474,6 +498,8 @@ export default function WebRTCVideo() {
       const local = resetMousePosition;
       window.addEventListener("blur", local, { signal });
       document.addEventListener("visibilitychange", local, { signal });
+      const preventContextMenu = (e: MouseEvent) => e.preventDefault();
+      videoElmRefValue.addEventListener("contextmenu", preventContextMenu, { signal });
 
       return () => {
         abortController.abort();
@@ -517,17 +543,17 @@ export default function WebRTCVideo() {
   );
 
   const hasNoAutoPlayPermissions = useMemo(() => {
-    if (peerConnectionState !== "connected") return false;
+    if (peerConnection?.connectionState !== "connected") return false;
     if (isPlaying) return false;
     if (hdmiError) return false;
     if (videoHeight === 0 || videoWidth === 0) return false;
     return true;
-  }, [peerConnectionState, isPlaying, hdmiError, videoHeight, videoWidth]);
+  }, [peerConnection?.connectionState, isPlaying, hdmiError, videoHeight, videoWidth]);
 
   return (
     <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px]">
-        <fieldset disabled={peerConnectionState !== "connected"}>
+        <fieldset disabled={peerConnection?.connectionState !== "connected"}>
           <Actionbar
             requestFullscreen={async () =>
               videoElm.current?.requestFullscreen({
@@ -575,28 +601,29 @@ export default function WebRTCVideo() {
                             "cursor-none":
                               settings.mouseMode === "absolute" &&
                               settings.isCursorHidden,
-                            "opacity-0": isLoading || isConnectionError || hdmiError,
+                            "opacity-0": isVideoLoading || hdmiError,
                             "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
                               isPlaying,
                           },
                         )}
                       />
-                      <div
+                      {peerConnection?.connectionState == "connected" && (
-                        style={{ animationDuration: "500ms" }}
+                        <div
-                        className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
+                          style={{ animationDuration: "500ms" }}
-                      >
+                          className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
-                        <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
+                        >
-                          <LoadingOverlay show={isLoading} />
+                          <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
-                          <ConnectionErrorOverlay show={isConnectionError} />
+                            <LoadingVideoOverlay show={isVideoLoading} />
-                          <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
+                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
-                          <NoAutoplayPermissionsOverlay
+                            <NoAutoplayPermissionsOverlay
-                            show={hasNoAutoPlayPermissions}
+                              show={hasNoAutoPlayPermissions}
-                            onPlayClick={() => {
+                              onPlayClick={() => {
-                              videoElm.current?.play();
+                                videoElm.current?.play();
-                            }}
+                              }}
-                          />
+                            />
+                          </div>
                         </div>
-                      </div>
+                      )}
                     </div>
                   </div>
                   <VirtualKeyboard />

ui/src/routes/devices.$id.other-session.tsx

@@ -6,7 +6,7 @@ import LogoBlue from "@/assets/logo-blue.svg";
 import LogoWhite from "@/assets/logo-white.svg";
 
 interface ContextType {
-  connectWebRTC: () => Promise<void>;
+  setupPeerConnection: () => Promise<void>;
 }
 /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
 
@@ -16,7 +16,7 @@ export default function OtherSessionRoute() {
 
   // Function to handle closing the modal
   const handleClose = () => {
-    outletContext?.connectWebRTC().then(() => navigate(".."));
+    outletContext?.setupPeerConnection().then(() => navigate(".."));
   };
 
   return (

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

@@ -45,6 +45,10 @@ import Modal from "../components/Modal";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
 import notifications from "../notifications";
+import {
+  ConnectionErrorOverlay,
+  LoadingConnectionOverlay,
+} from "../components/VideoOverlay";
 
 import { SystemVersionInfo } from "./devices.$id.settings.general.update";
 import { DeviceStatus } from "./welcome-local";
@@ -126,8 +130,6 @@ export default function KvmIdRoute() {
 
   const setIsTurnServerInUse = useRTCStore(state => state.setTurnServerInUse);
   const peerConnection = useRTCStore(state => state.peerConnection);
-
-  const setPeerConnectionState = useRTCStore(state => state.setPeerConnectionState);
   const setMediaMediaStream = useRTCStore(state => state.setMediaStream);
   const setPeerConnection = useRTCStore(state => state.setPeerConnection);
   const setDiskChannel = useRTCStore(state => state.setDiskChannel);
@@ -135,77 +137,55 @@ export default function KvmIdRoute() {
   const setTransceiver = useRTCStore(state => state.setTransceiver);
   const location = useLocation();
 
-  const [connectionAttempts, setConnectionAttempts] = useState(0);
-
-  const [startedConnectingAt, setStartedConnectingAt] = useState<Date | null>(null);
-  const [connectedAt, setConnectedAt] = useState<Date | null>(null);
-
   const [connectionFailed, setConnectionFailed] = useState(false);
 
   const navigate = useNavigate();
   const { otaState, setOtaState, setModalView } = useUpdateStore();
 
+  const [loadingMessage, setLoadingMessage] = useState("Connecting to device...");
   const closePeerConnection = useCallback(
     function closePeerConnection() {
+      console.log("Closing peer connection");
+
+      setConnectionFailed(true);
+      connectionFailedRef.current = true;
+
       peerConnection?.close();
-      // "closed" is a valid RTCPeerConnection state according to the WebRTC spec
+      signalingAttempts.current = 0;
-      // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState#closed
-      // However, the onconnectionstatechange event doesn't fire when close() is called manually
-      // So we need to explicitly update our state to maintain consistency
-      // I don't know why this is happening, but this is the best way I can think of to handle it
-      setPeerConnectionState("closed");
     },
-    [peerConnection, setPeerConnectionState],
+    [peerConnection],
   );
 
+  // We need to track connectionFailed in a ref to avoid stale closure issues
+  // This is necessary because syncRemoteSessionDescription is a callback that captures
+  // the connectionFailed value at creation time, but we need the latest value
+  // when the function is actually called. Without this ref, the function would use
+  // a stale value of connectionFailed in some conditions.
+  //
+  // We still need the state variable for UI rendering, so we sync the ref with the state.
+  // This pattern is a workaround for what useEvent hook would solve more elegantly
+  // (which would give us a callback that always has access to latest state without re-creation).
+  const connectionFailedRef = useRef(false);
   useEffect(() => {
-    const connectionAttemptsThreshold = 30;
+    connectionFailedRef.current = connectionFailed;
-    if (connectionAttempts > connectionAttemptsThreshold) {
+  }, [connectionFailed]);
-      console.log(`Connection failed after ${connectionAttempts} attempts.`);
-      setConnectionFailed(true);
-      closePeerConnection();
-    }
-  }, [connectionAttempts, closePeerConnection]);
-
-  useEffect(() => {
-    // Skip if already connected
-    if (connectedAt) return;
-
-    // Skip if connection is declared as failed
-    if (connectionFailed) return;
-
-    const interval = setInterval(() => {
-      console.log("Checking connection status");
-
-      // Skip if connection hasn't started
-      if (!startedConnectingAt) return;
-
-      const elapsedTime = Math.floor(
-        new Date().getTime() - startedConnectingAt.getTime(),
-      );
-
-      // Fail connection if it's been over X seconds since we started connecting
-      if (elapsedTime > 60 * 1000) {
-        console.error(`Connection failed after ${elapsedTime} ms.`);
-        setConnectionFailed(true);
-        closePeerConnection();
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [closePeerConnection, connectedAt, connectionFailed, startedConnectingAt]);
-
-  const sdp = useCallback(
-    async (event: RTCPeerConnectionIceEvent, pc: RTCPeerConnection) => {
-      if (!pc) return;
-      if (event.candidate !== null) return;
 
+  const signalingAttempts = useRef(0);
+  const syncRemoteSessionDescription = useCallback(
+    async function syncRemoteSessionDescription(pc: RTCPeerConnection) {
       try {
+        if (!pc) return;
+
         const sd = btoa(JSON.stringify(pc.localDescription));
 
         const sessionUrl = isOnDevice
           ? `${DEVICE_API}/webrtc/session`
           : `${CLOUD_API}/webrtc/session`;
+
+        console.log("Trying to get remote session description");
+        setLoadingMessage(
+          `Getting remote session description...  ${signalingAttempts.current > 0 ? `(attempt ${signalingAttempts.current + 1})` : ""}`,
+        );
         const res = await api.POST(sessionUrl, {
           sd,
           // When on device, we don't need to specify the device id, as it's already known
@@ -213,66 +193,109 @@ export default function KvmIdRoute() {
         });
 
         const json = await res.json();
-
+        if (res.status === 401) return navigate(isOnDevice ? "/login-local" : "/login");
-        if (isOnDevice) {
+        if (!res.ok) {
-          if (res.status === 401) {
+          console.error("Error getting SDP", { status: res.status, json });
-            return navigate("/login-local");
+          throw new Error("Error getting SDP");
-          }
         }
 
-        if (isInCloud) {
+        console.log("Successfully got Remote Session Description. Setting.");
-          // The cloud API returns a 401 if the user is not logged in
+        setLoadingMessage("Setting remote session description...");
-          // Most likely the session has expired
-          if (res.status === 401) return navigate("/login");
 
-          // If can be a few things
+        const decodedSd = atob(json.sd);
-          // - In cloud mode, the cloud api would return a 404, if the device hasn't contacted the cloud yet
+        const parsedSd = JSON.parse(decodedSd);
-          // - In device mode, the device api would timeout, the fetch would throw an error, therefore the catch block would be hit
+        pc.setRemoteDescription(new RTCSessionDescription(parsedSd));
-          // Regardless, we should close the peer connection and let the useInterval handle reconnecting
-          if (!res.ok) {
-            closePeerConnection();
-            console.error(`Error setting SDP - Status: ${res.status}}`, json);
-            return;
-          }
-        }
 
-        pc.setRemoteDescription(
+        await new Promise((resolve, reject) => {
-          new RTCSessionDescription(JSON.parse(atob(json.sd))),
+          console.log("Waiting for remote description to be set");
-        ).catch(e => console.log(`Error setting remote description: ${e}`));
+          const maxAttempts = 10;
+          const interval = 1000;
+          let attempts = 0;
+
+          const checkInterval = setInterval(() => {
+            attempts++;
+            // When vivaldi has disabled "Broadcast IP for Best WebRTC Performance", this never connects
+            if (pc.sctp?.state === "connected") {
+              console.log("Remote description set");
+              clearInterval(checkInterval);
+              resolve(true);
+            } else if (attempts >= maxAttempts) {
+              console.log(
+                `Failed to get remote description after ${maxAttempts} attempts`,
+              );
+              closePeerConnection();
+              clearInterval(checkInterval);
+              reject(
+                new Error(
+                  `Failed to get remote description after ${maxAttempts} attempts`,
+                ),
+              );
+            } else {
+              console.log("Waiting for remote description to be set");
+            }
+          }, interval);
+        });
       } catch (error) {
-        console.error(`Error setting SDP: ${error}`);
+        console.error("Error getting SDP", { error });
-        closePeerConnection();
+        console.log("Connection failed", connectionFailedRef.current);
+        if (connectionFailedRef.current) return;
+        if (signalingAttempts.current < 5) {
+          signalingAttempts.current++;
+          await new Promise(resolve => setTimeout(resolve, 500));
+          console.log("Attempting to get SDP again", signalingAttempts.current);
+          syncRemoteSessionDescription(pc);
+        } else {
+          closePeerConnection();
+        }
       }
     },
     [closePeerConnection, navigate, params.id],
   );
 
-  const connectWebRTC = useCallback(async () => {
+  const setupPeerConnection = useCallback(async () => {
-    console.log("Attempting to connect WebRTC");
+    console.log("Setting up peer connection");
+    setConnectionFailed(false);
+    setLoadingMessage("Connecting to device...");
 
-    // Track connection status to detect failures and show error overlay
+    let pc: RTCPeerConnection;
-    setConnectionAttempts(x => x + 1);
+    try {
-    setStartedConnectingAt(new Date());
+      console.log("Creating peer connection");
-    setConnectedAt(null);
+      setLoadingMessage("Creating peer connection...");
-
+      pc = new RTCPeerConnection({
-    const pc = new RTCPeerConnection({
+        // We only use STUN or TURN servers if we're in the cloud
-      // We only use STUN or TURN servers if we're in the cloud
+        ...(isInCloud && iceConfig?.iceServers
-      ...(isInCloud && iceConfig?.iceServers
+          ? { iceServers: [iceConfig?.iceServers] }
-        ? { iceServers: [iceConfig?.iceServers] }
+          : {}),
-        : {}),
+      });
-    });
+      console.log("Peer connection created", pc);
+      setLoadingMessage("Peer connection created");
+    } catch (e) {
+      console.error(`Error creating peer connection: ${e}`);
+      setTimeout(() => {
+        closePeerConnection();
+      }, 1000);
+      return;
+    }
 
     // Set up event listeners and data channels
     pc.onconnectionstatechange = () => {
-      // If the connection state is connected, we reset the connection attempts.
+      console.log("Connection state changed", pc.connectionState);
-      if (pc.connectionState === "connected") {
-        setConnectionAttempts(0);
-        setConnectedAt(new Date());
-      }
-      setPeerConnectionState(pc.connectionState);
     };
 
-    pc.onicecandidate = event => sdp(event, pc);
+    pc.onicegatheringstatechange = event => {
+      const pc = event.currentTarget as RTCPeerConnection;
+      console.log("ICE Gathering State Changed", pc.iceGatheringState);
+      if (pc.iceGatheringState === "complete") {
+        console.log("ICE Gathering completed");
+        setLoadingMessage("ICE Gathering completed");
+
+        // We can now start the https/ws connection to get the remote session description from the KVM device
+        syncRemoteSessionDescription(pc);
+      } else if (pc.iceGatheringState === "gathering") {
+        console.log("ICE Gathering Started");
+        setLoadingMessage("Gathering ICE candidates...");
+      }
+    };
 
     pc.ontrack = function (event) {
       setMediaMediaStream(event.streams[0]);
@@ -290,60 +313,32 @@ export default function KvmIdRoute() {
       setDiskChannel(diskDataChannel);
     };
 
+    setPeerConnection(pc);
+
     try {
       const offer = await pc.createOffer();
       await pc.setLocalDescription(offer);
-      setPeerConnection(pc);
     } catch (e) {
-      console.error(`Error creating offer: ${e}`);
+      console.error(`Error creating offer: ${e}`, new Date().toISOString());
+      closePeerConnection();
     }
   }, [
+    closePeerConnection,
     iceConfig?.iceServers,
-    sdp,
     setDiskChannel,
     setMediaMediaStream,
     setPeerConnection,
-    setPeerConnectionState,
     setRpcDataChannel,
     setTransceiver,
-  ]);
+    syncRemoteSessionDescription,
-
-  useEffect(() => {
-    console.log("Attempting to connect WebRTC");
-
-    // If we're in an other session, we don't need to connect
-    if (location.pathname.includes("other-session")) return;
-
-    // If we're already connected or connecting, we don't need to connect
-    if (
-      ["connected", "connecting", "new"].includes(peerConnection?.connectionState ?? "")
-    ) {
-      return;
-    }
-
-    // In certain cases, we want to never connect again. This happens when we've tried for a long time and failed
-    if (connectionFailed) {
-      console.log("Connection failed. We won't attempt to connect again.");
-      return;
-    }
-
-    const interval = setInterval(() => {
-      connectWebRTC();
-    }, 3000);
-    return () => clearInterval(interval);
-  }, [
-    connectWebRTC,
-    connectionFailed,
-    location.pathname,
-    peerConnection?.connectionState,
   ]);
 
   // On boot, if the connection state is undefined, we connect to the WebRTC
   useEffect(() => {
     if (peerConnection?.connectionState === undefined) {
-      connectWebRTC();
+      setupPeerConnection();
     }
-  }, [connectWebRTC, peerConnection?.connectionState]);
+  }, [setupPeerConnection, peerConnection?.connectionState]);
 
   // Cleanup effect
   const clearInboundRtpStats = useRTCStore(state => state.clearInboundRtpStats);
@@ -597,7 +592,27 @@ export default function KvmIdRoute() {
             kvmName={deviceName || "JetKVM Device"}
           />
 
-          <div className="flex h-full overflow-hidden">
+          <div className="flex h-full w-full overflow-hidden">
+            <div className="pointer-events-none fixed inset-0 isolate z-50 flex h-full w-full items-center justify-center">
+              <div className="my-2 h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
+                <LoadingConnectionOverlay
+                  show={
+                    !connectionFailed &&
+                    (["connecting", "new"].includes(
+                      peerConnection?.connectionState || "",
+                    ) ||
+                      peerConnection === null) &&
+                    !location.pathname.includes("other-session")
+                  }
+                  text={loadingMessage}
+                />
+                <ConnectionErrorOverlay
+                  show={connectionFailed && !location.pathname.includes("other-session")}
+                  setupPeerConnection={setupPeerConnection}
+                />
+              </div>
+            </div>
+
             <WebRTCVideo />
             <SidebarContainer sidebarView={sidebarView} />
           </div>
@@ -614,7 +629,7 @@ export default function KvmIdRoute() {
       >
         <Modal open={outlet !== null} onClose={onModalClose}>
           {/* The 'used by other session' modal needs to have access to the connectWebRTC function */}
-          <Outlet context={{ connectWebRTC }} />
+          <Outlet context={{ setupPeerConnection }} />
         </Modal>
       </div>
 

web.go

@@ -16,6 +16,7 @@ import (
 	"golang.org/x/crypto/bcrypt"
 )
 
+//nolint:typecheck
 //go:embed all:static
 var staticFiles embed.FS
 
@@ -419,7 +420,6 @@ func handleSetup(c *gin.Context) {
 
 		// Set the cookie
 		c.SetCookie("authToken", config.LocalAuthToken, 7*24*60*60, "/", "", false, true)
-
 	} else {
 		// For noPassword mode, ensure the password field is empty
 		config.HashedPassword = ""