@limrun/ui 0.6.0 → 0.8.0

package/src/components/remote-control.tsx

@@ -51,6 +51,10 @@ interface RemoteControlProps {
   // showFrame controls whether to display the device frame
   // around the video. Defaults to true.
   showFrame?: boolean;
+
+  // When true, drops after a working session auto-reconnect instead of
+  // surfacing the manual "Retry" button. Defaults to false.
+  autoReconnect?: boolean;
 }
 
 interface ScreenshotData {
@@ -71,6 +75,7 @@ export interface RemoteControlHandle {
   sendKeyEvent: (event: ImperativeKeyboardEvent) => void;
   screenshot: () => Promise<ScreenshotData>;
   terminateApp: (bundleId: string) => Promise<void>;
+  reconnect: () => void;
 }
 
 const debugLog = (...args: any[]) => {
@@ -108,20 +113,21 @@ type DeviceConfig = {
   loadingLogo: string;
   loadingLogoSize: string;
   videoPosition: {
-    portrait: { heightMultiplier?: number; widthMultiplier?: number; };
-    landscape: { heightMultiplier?: number; widthMultiplier?: number; };
+    portrait: { heightMultiplier?: number; widthMultiplier?: number };
+    landscape: { heightMultiplier?: number; widthMultiplier?: number };
   };
   frame: {
     image: string;
     imageLandscape: string;
-  }
-}
+  };
+};
 
 const ANDROID_TABLET_VIDEO_WIDTH = 1920;
 const ANDROID_TABLET_VIDEO_HEIGHT = 1200;
 const MAX_CONNECTION_ATTEMPTS = 3;
 const CONNECTION_RETRY_DELAY_MS = 1000;
 const CONNECTION_SUCCESS_TIMEOUT_MS = 15000;
+const ICE_DISCONNECTED_GRACE_MS = 3000;
 
 const isAndroidTabletVideo = (width: number, height: number): boolean =>
   (width === ANDROID_TABLET_VIDEO_WIDTH && height === ANDROID_TABLET_VIDEO_HEIGHT) ||
@@ -191,7 +197,18 @@ function getAndroidKeycodeAndMeta(event: React.KeyboardEvent): { keycode: number
 }
 
 export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>(
-  ({ className, url, token, sessionId: propSessionId, openUrl, showFrame = true }: RemoteControlProps, ref) => {
+  (
+    {
+      className,
+      url,
+      token,
+      sessionId: propSessionId,
+      openUrl,
+      showFrame = true,
+      autoReconnect = false,
+    }: RemoteControlProps,
+    ref,
+  ) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
@@ -207,9 +224,13 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const retryTimeoutRef = useRef<number | undefined>(undefined);
     const connectionSuccessTimeoutRef = useRef<number | undefined>(undefined);
     const requestFrameIntervalRef = useRef<number | undefined>(undefined);
+    const iceDisconnectedGraceRef = useRef<number | undefined>(undefined);
     const connectionGenerationRef = useRef(0);
     const connectionAttemptRef = useRef(0);
     const controlChannelOpenedRef = useRef(false);
+    // Mirrored to a ref so stale closures in event handlers see the latest value.
+    const autoReconnectRef = useRef(autoReconnect);
+    autoReconnectRef.current = autoReconnect;
     const firstFrameShownRef = useRef(false);
     const pendingScreenshotResolversRef = useRef<
       Map<string, (value: ScreenshotData | PromiseLike<ScreenshotData>) => void>
@@ -319,7 +340,6 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     // Minimal geometry for single-finger touch events (no mirror/container coords needed).
     type PointerGeometry = {
-      inside: boolean;
       videoX: number;
       videoY: number;
       videoWidth: number;
@@ -332,7 +352,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       geometry: PointerGeometry | null,
     ) => {
       if (!geometry) return;
-      const { inside: isInside, videoX, videoY, videoWidth, videoHeight } = geometry;
+      const { videoX, videoY, videoWidth, videoHeight } = geometry;
 
       let action: number | null = null;
       let positionToSend: { x: number; y: number } | null = null;
@@ -341,35 +361,23 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       switch (eventType) {
         case 'down':
-          if (isInside) {
-            // For multi-touch: use ACTION_DOWN for first pointer, ACTION_POINTER_DOWN for additional pointers
-            const currentPointerCount = activePointers.current.size;
-            action =
-              currentPointerCount === 0
-                ? AMOTION_EVENT.ACTION_DOWN
-                : AMOTION_EVENT.ACTION_POINTER_DOWN;
-            positionToSend = { x: videoX, y: videoY };
-            activePointers.current.set(pointerId, positionToSend);
-            if (pointerId === -1) {
-              // Focus on mouse down
-              videoRef.current?.focus();
-            }
-          } else {
-            // If the initial down event is outside, ignore it for this pointer
-            activePointers.current.delete(pointerId);
+          // For multi-touch: use ACTION_DOWN for first pointer, ACTION_POINTER_DOWN for additional pointers
+          const currentPointerCount = activePointers.current.size;
+          action = currentPointerCount === 0 ? AMOTION_EVENT.ACTION_DOWN : AMOTION_EVENT.ACTION_POINTER_DOWN;
+          positionToSend = { x: videoX, y: videoY };
+          activePointers.current.set(pointerId, positionToSend);
+          if (pointerId === -1) {
+            // Focus on mouse down
+            videoRef.current?.focus();
           }
           break;
 
         case 'move':
           if (activePointers.current.has(pointerId)) {
-            if (isInside) {
-              action = AMOTION_EVENT.ACTION_MOVE;
-              positionToSend = { x: videoX, y: videoY };
-              // Update the last known position for this active pointer
-              activePointers.current.set(pointerId, positionToSend);
-            } else {
-              // Moved outside while active - do nothing, UP/CANCEL will use last known pos
-            }
+            action = AMOTION_EVENT.ACTION_MOVE;
+            positionToSend = { x: videoX, y: videoY };
+            // Update the last known position for this active pointer
+            activePointers.current.set(pointerId, positionToSend);
           }
           break;
 
@@ -386,9 +394,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
               // For multi-touch: use ACTION_UP for last pointer, ACTION_POINTER_UP for non-last pointers
               const remainingPointerCount = activePointers.current.size;
               action =
-                remainingPointerCount === 0
-                  ? AMOTION_EVENT.ACTION_UP
-                  : AMOTION_EVENT.ACTION_POINTER_UP;
+                remainingPointerCount === 0 ? AMOTION_EVENT.ACTION_UP : AMOTION_EVENT.ACTION_POINTER_UP;
             }
           }
           break;
@@ -396,21 +402,20 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       // Send message if action and position determined
       if (action !== null && positionToSend !== null) {
-          debugLog('[rc-touch][mouse->touch] sending', {
-            pointerId,
-            eventType,
-            action,
-            actionName: motionActionToString(action),
-            isInside,
-            positionToSend,
-            video: { width: videoWidth, height: videoHeight },
-            altHeld: isAltHeldRef.current,
-            activePointersAfter: Array.from(activePointers.current.entries()).map(([id, pos]) => ({
-              id,
-              x: pos.x,
-              y: pos.y,
-            })),
-          });
+        debugLog('[rc-touch][mouse->touch] sending', {
+          pointerId,
+          eventType,
+          action,
+          actionName: motionActionToString(action),
+          positionToSend,
+          video: { width: videoWidth, height: videoHeight },
+          altHeld: isAltHeldRef.current,
+          activePointersAfter: Array.from(activePointers.current.entries()).map(([id, pos]) => ({
+            id,
+            x: pos.x,
+            y: pos.y,
+          })),
+        });
         const message = createTouchControlMessage(
           action,
           pointerId,
@@ -423,15 +428,14 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           buttons,
         );
         if (message) {
-            debugLog('[rc-touch][mouse->touch] buffer', {
-              pointerId,
-              actionName: motionActionToString(action),
-              byteLength: message.byteLength,
-            });
+          debugLog('[rc-touch][mouse->touch] buffer', {
+            pointerId,
+            actionName: motionActionToString(action),
+            byteLength: message.byteLength,
+          });
           sendBinaryControlMessage(message);
         }
       } else if (eventType === 'up' || eventType === 'cancel') {
-        // Clean up map just in case if 'down' was outside and 'up'/'cancel' is triggered
         activePointers.current.delete(pointerId);
       }
     };
@@ -460,7 +464,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       // This is iOS-specific; Android doesn't use this modifier injection.
       if (platform === 'ios' && dataChannelRef.current && dataChannelRef.current.readyState === 'open') {
         const action = nextHeld ? ANDROID_KEYS.ACTION_DOWN : ANDROID_KEYS.ACTION_UP;
-        const message = createInjectKeycodeMessage(action, ANDROID_KEYS.KEYCODE_ALT_LEFT, 0, ANDROID_KEYS.META_NONE);
+        const message = createInjectKeycodeMessage(
+          action,
+          ANDROID_KEYS.KEYCODE_ALT_LEFT,
+          0,
+          ANDROID_KEYS.META_NONE,
+        );
         debugLog('[rc-touch][alt] sending Indigo modifier keycode', {
           action,
           keycode: ANDROID_KEYS.KEYCODE_ALT_LEFT,
@@ -524,8 +533,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       };
     };
 
-    // Map a client point to video coordinates using a pre-computed context.
-    // Returns null if outside the video content area or context is missing.
+    // Map a client point to video coordinates using a pre-computed context,
+    // clamping points outside the rendered video to the nearest point on the video.
     const mapClientPointToVideo = (
       ctx: VideoMappingContext,
       clientX: number,
@@ -534,25 +543,18 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       const relativeX = clientX - ctx.videoRect.left - ctx.offsetX;
       const relativeY = clientY - ctx.videoRect.top - ctx.offsetY;
 
-      const isInside =
-        relativeX >= 0 && relativeX <= ctx.actualWidth &&
-        relativeY >= 0 && relativeY <= ctx.actualHeight;
-
-      if (!isInside) {
-        return {
-          inside: false,
-          videoX: 0,
-          videoY: 0,
-          videoWidth: ctx.videoWidth,
-          videoHeight: ctx.videoHeight,
-        };
-      }
-
-      const videoX = Math.max(0, Math.min(ctx.videoWidth, (relativeX / ctx.actualWidth) * ctx.videoWidth));
-      const videoY = Math.max(0, Math.min(ctx.videoHeight, (relativeY / ctx.actualHeight) * ctx.videoHeight));
+      const clampedRelativeX = Math.max(0, Math.min(ctx.actualWidth, relativeX));
+      const clampedRelativeY = Math.max(0, Math.min(ctx.actualHeight, relativeY));
+      const videoX = Math.max(
+        0,
+        Math.min(ctx.videoWidth, (clampedRelativeX / ctx.actualWidth) * ctx.videoWidth),
+      );
+      const videoY = Math.max(
+        0,
+        Math.min(ctx.videoHeight, (clampedRelativeY / ctx.actualHeight) * ctx.videoHeight),
+      );
 
       return {
-        inside: true,
         videoX,
         videoY,
         videoWidth: ctx.videoWidth,
@@ -560,7 +562,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       };
     };
 
-    // Compute full hover point with mirror/container coordinates (for Alt indicator rendering).
+    // Compute full hover point with mirror/container coordinates (for Alt indicator rendering),
+    // clamping points outside the rendered video to the nearest point on the video.
     const computeFullHoverPoint = (
       ctx: VideoMappingContext,
       clientX: number,
@@ -569,25 +572,25 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       const relativeX = clientX - ctx.videoRect.left - ctx.offsetX;
       const relativeY = clientY - ctx.videoRect.top - ctx.offsetY;
 
-      const isInside =
-        relativeX >= 0 && relativeX <= ctx.actualWidth &&
-        relativeY >= 0 && relativeY <= ctx.actualHeight;
-
-      if (!isInside) {
-        return null;
-      }
-
-      const videoX = Math.max(0, Math.min(ctx.videoWidth, (relativeX / ctx.actualWidth) * ctx.videoWidth));
-      const videoY = Math.max(0, Math.min(ctx.videoHeight, (relativeY / ctx.actualHeight) * ctx.videoHeight));
+      const clampedRelativeX = Math.max(0, Math.min(ctx.actualWidth, relativeX));
+      const clampedRelativeY = Math.max(0, Math.min(ctx.actualHeight, relativeY));
+      const videoX = Math.max(
+        0,
+        Math.min(ctx.videoWidth, (clampedRelativeX / ctx.actualWidth) * ctx.videoWidth),
+      );
+      const videoY = Math.max(
+        0,
+        Math.min(ctx.videoHeight, (clampedRelativeY / ctx.actualHeight) * ctx.videoHeight),
+      );
       const mirrorVideoX = ctx.videoWidth - videoX;
       const mirrorVideoY = ctx.videoHeight - videoY;
 
       const contentLeft = ctx.videoRect.left + ctx.offsetX;
       const contentTop = ctx.videoRect.top + ctx.offsetY;
-      const containerX = contentLeft - ctx.containerRect.left + relativeX;
-      const containerY = contentTop - ctx.containerRect.top + relativeY;
-      const mirrorContainerX = contentLeft - ctx.containerRect.left + (ctx.actualWidth - relativeX);
-      const mirrorContainerY = contentTop - ctx.containerRect.top + (ctx.actualHeight - relativeY);
+      const containerX = contentLeft - ctx.containerRect.left + clampedRelativeX;
+      const containerY = contentTop - ctx.containerRect.top + clampedRelativeY;
+      const mirrorContainerX = contentLeft - ctx.containerRect.left + (ctx.actualWidth - clampedRelativeX);
+      const mirrorContainerY = contentTop - ctx.containerRect.top + (ctx.actualHeight - clampedRelativeY);
 
       return {
         containerX,
@@ -613,15 +616,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       x1: number,
       y1: number,
     ) => {
-      const msg = createTwoFingerTouchControlMessage(
-        action,
-        videoWidth,
-        videoHeight,
-        x0,
-        y0,
-        x1,
-        y1,
-      );
+      const msg = createTwoFingerTouchControlMessage(action, videoWidth, videoHeight, x0, y0, x1, y1);
       debugLog('[rc-touch2] sendTwoFingerMessage (iOS)', {
         actionName: motionActionToString(action),
         video: { width: videoWidth, height: videoHeight },
@@ -656,9 +651,10 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       if (platform === 'ios') {
         // iOS: use special two-finger message (type=18)
-        const action = eventType === 'down' ? AMOTION_EVENT.ACTION_DOWN
-                     : eventType === 'move' ? AMOTION_EVENT.ACTION_MOVE
-                     : AMOTION_EVENT.ACTION_UP;
+        const action =
+          eventType === 'down' ? AMOTION_EVENT.ACTION_DOWN
+          : eventType === 'move' ? AMOTION_EVENT.ACTION_MOVE
+          : AMOTION_EVENT.ACTION_UP;
         sendTwoFingerMessage(action, videoWidth, videoHeight, x0, y0, x1, y1);
       } else {
         // Android: send two separate single-touch messages with proper action codes
@@ -711,7 +707,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         // to ensure consistent behavior across focus transitions.
       }
 
-      if (!dataChannelRef.current || dataChannelRef.current.readyState !== 'open' || !videoRef.current || !ctx) {
+      if (
+        !dataChannelRef.current ||
+        dataChannelRef.current.readyState !== 'open' ||
+        !videoRef.current ||
+        !ctx
+      ) {
         return;
       }
 
@@ -751,37 +752,55 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
           if (!twoFingerStateRef.current) {
             // Starting a new two-finger gesture
-            if (g0.inside && g1.inside) {
-              twoFingerStateRef.current = {
-                finger0: { x: g0.videoX, y: g0.videoY },
-                finger1: { x: g1.videoX, y: g1.videoY },
-                videoSize: { width: g0.videoWidth, height: g0.videoHeight },
-                source: 'real-touch',
-                pointerId0: t0.identifier,
-                pointerId1: t1.identifier,
-              };
-              applyTwoFingerEvent('down', g0.videoWidth, g0.videoHeight,
-                                  g0.videoX, g0.videoY, g1.videoX, g1.videoY,
-                                  t0.identifier, t1.identifier);
-            }
+            twoFingerStateRef.current = {
+              finger0: { x: g0.videoX, y: g0.videoY },
+              finger1: { x: g1.videoX, y: g1.videoY },
+              videoSize: { width: g0.videoWidth, height: g0.videoHeight },
+              source: 'real-touch',
+              pointerId0: t0.identifier,
+              pointerId1: t1.identifier,
+            };
+            applyTwoFingerEvent(
+              'down',
+              g0.videoWidth,
+              g0.videoHeight,
+              g0.videoX,
+              g0.videoY,
+              g1.videoX,
+              g1.videoY,
+              t0.identifier,
+              t1.identifier,
+            );
           } else if (twoFingerStateRef.current.source === 'real-touch') {
             // Continuing two-finger gesture (move)
-            if (g0.inside && g1.inside) {
-              twoFingerStateRef.current.finger0 = { x: g0.videoX, y: g0.videoY };
-              twoFingerStateRef.current.finger1 = { x: g1.videoX, y: g1.videoY };
-              applyTwoFingerEvent('move', g0.videoWidth, g0.videoHeight,
-                                  g0.videoX, g0.videoY, g1.videoX, g1.videoY,
-                                  twoFingerStateRef.current.pointerId0,
-                                  twoFingerStateRef.current.pointerId1);
-            }
+            twoFingerStateRef.current.finger0 = { x: g0.videoX, y: g0.videoY };
+            twoFingerStateRef.current.finger1 = { x: g1.videoX, y: g1.videoY };
+            applyTwoFingerEvent(
+              'move',
+              g0.videoWidth,
+              g0.videoHeight,
+              g0.videoX,
+              g0.videoY,
+              g1.videoX,
+              g1.videoY,
+              twoFingerStateRef.current.pointerId0,
+              twoFingerStateRef.current.pointerId1,
+            );
           }
         } else if (allTouches.length < 2 && twoFingerStateRef.current?.source === 'real-touch') {
           // Finger lifted - end two-finger gesture using last known state
           const state = twoFingerStateRef.current;
-          applyTwoFingerEvent('up', state.videoSize.width, state.videoSize.height,
-                              state.finger0.x, state.finger0.y,
-                              state.finger1.x, state.finger1.y,
-                              state.pointerId0, state.pointerId1);
+          applyTwoFingerEvent(
+            'up',
+            state.videoSize.width,
+            state.videoSize.height,
+            state.finger0.x,
+            state.finger0.y,
+            state.finger1.x,
+            state.finger1.y,
+            state.pointerId0,
+            state.pointerId1,
+          );
           twoFingerStateRef.current = null;
           // Don't process remaining finger - gesture ended
           return;
@@ -841,7 +860,6 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             altHeldRef: isAltHeldRef.current,
             inTwoFingerMode,
             geometry: {
-              inside: geometry.inside,
               videoX: geometry.videoX,
               videoY: geometry.videoY,
               videoWidth: geometry.videoWidth,
@@ -868,48 +886,71 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       eventType: 'down' | 'move' | 'up' | 'cancel',
       geometry: PointerGeometry,
     ) => {
-      const { inside, videoX, videoY, videoWidth, videoHeight } = geometry;
+      const { videoX, videoY, videoWidth, videoHeight } = geometry;
       const mirrorX = videoWidth - videoX;
       const mirrorY = videoHeight - videoY;
 
       if (eventType === 'down') {
-        if (inside) {
-          // Start two-finger gesture
-          twoFingerStateRef.current = {
-            finger0: { x: videoX, y: videoY },
-            finger1: { x: mirrorX, y: mirrorY },
-            videoSize: { width: videoWidth, height: videoHeight },
-            source: 'alt-mouse',
-            pointerId0: ALT_POINTER_ID_PRIMARY,
-            pointerId1: ALT_POINTER_ID_MIRROR,
-          };
-          videoRef.current?.focus();
-          applyTwoFingerEvent('down', videoWidth, videoHeight, videoX, videoY, mirrorX, mirrorY,
-                              ALT_POINTER_ID_PRIMARY, ALT_POINTER_ID_MIRROR);
-        }
+        // Start two-finger gesture
+        twoFingerStateRef.current = {
+          finger0: { x: videoX, y: videoY },
+          finger1: { x: mirrorX, y: mirrorY },
+          videoSize: { width: videoWidth, height: videoHeight },
+          source: 'alt-mouse',
+          pointerId0: ALT_POINTER_ID_PRIMARY,
+          pointerId1: ALT_POINTER_ID_MIRROR,
+        };
+        videoRef.current?.focus();
+        applyTwoFingerEvent(
+          'down',
+          videoWidth,
+          videoHeight,
+          videoX,
+          videoY,
+          mirrorX,
+          mirrorY,
+          ALT_POINTER_ID_PRIMARY,
+          ALT_POINTER_ID_MIRROR,
+        );
         return;
       }
 
       if (eventType === 'move') {
-        if (twoFingerStateRef.current?.source === 'alt-mouse' && inside) {
+        if (twoFingerStateRef.current?.source === 'alt-mouse') {
           // Update positions
           twoFingerStateRef.current.finger0 = { x: videoX, y: videoY };
           twoFingerStateRef.current.finger1 = { x: mirrorX, y: mirrorY };
-          applyTwoFingerEvent('move', videoWidth, videoHeight, videoX, videoY, mirrorX, mirrorY,
-                              ALT_POINTER_ID_PRIMARY, ALT_POINTER_ID_MIRROR);
+          applyTwoFingerEvent(
+            'move',
+            videoWidth,
+            videoHeight,
+            videoX,
+            videoY,
+            mirrorX,
+            mirrorY,
+            ALT_POINTER_ID_PRIMARY,
+            ALT_POINTER_ID_MIRROR,
+          );
         }
-        // If outside, we just don't send a move - UP will use last known position
         return;
       }
 
       if (eventType === 'up' || eventType === 'cancel') {
         const state = twoFingerStateRef.current;
         if (state?.source === 'alt-mouse') {
-          // End gesture at last known inside positions
+          // End gesture at last known positions
           const { finger0, finger1, videoSize } = state;
-          applyTwoFingerEvent('up', videoSize.width, videoSize.height,
-                              finger0.x, finger0.y, finger1.x, finger1.y,
-                              ALT_POINTER_ID_PRIMARY, ALT_POINTER_ID_MIRROR);
+          applyTwoFingerEvent(
+            'up',
+            videoSize.width,
+            videoSize.height,
+            finger0.x,
+            finger0.y,
+            finger1.x,
+            finger1.y,
+            ALT_POINTER_ID_PRIMARY,
+            ALT_POINTER_ID_MIRROR,
+          );
           twoFingerStateRef.current = null;
         }
         return;
@@ -1077,6 +1118,13 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }
     };
 
+    const clearIceDisconnectedGrace = () => {
+      if (iceDisconnectedGraceRef.current !== undefined) {
+        window.clearTimeout(iceDisconnectedGraceRef.current);
+        iceDisconnectedGraceRef.current = undefined;
+      }
+    };
+
     const markFirstFrameShown = () => {
       if (firstFrameShownRef.current) {
         return;
@@ -1088,6 +1136,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     const teardownConnection = () => {
       clearConnectionSuccessTimeout();
+      clearIceDisconnectedGrace();
       stopRequestFrameLoop();
       if (wsRef.current) {
         wsRef.current.onopen = null;
@@ -1131,10 +1180,16 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }
 
       if (controlChannelOpenedRef.current) {
-        updateStatus(`Connection failed after it was established: ${reason}`);
-        setRetryExhausted(true);
-        teardownConnection();
-        return;
+        if (!autoReconnectRef.current) {
+          updateStatus(`Connection failed after it was established: ${reason}`);
+          setRetryExhausted(true);
+          teardownConnection();
+          return;
+        }
+        // Reset so the upcoming retry gets a fresh MAX_CONNECTION_ATTEMPTS budget.
+        updateStatus(`Reconnecting after established session dropped: ${reason}`);
+        controlChannelOpenedRef.current = false;
+        connectionAttemptRef.current = -1;
       }
 
       clearScheduledRetry();
@@ -1171,8 +1226,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       setVideoLoaded(false);
       teardownConnection();
 
-      const isCurrentAttempt = () =>
-        generation === connectionGenerationRef.current;
+      const isCurrentAttempt = () => generation === connectionGenerationRef.current;
 
       connectionSuccessTimeoutRef.current = window.setTimeout(() => {
         connectionSuccessTimeoutRef.current = undefined;
@@ -1300,7 +1354,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
               return getCodecPriority(a) - getCodecPriority(b);
             });
             videoTransceiver.setCodecPreferences(sortedCodecs);
-            debugLog('Set codec preferences:', sortedCodecs.map(c => c.mimeType).join(', '));
+            debugLog('Set codec preferences:', sortedCodecs.map((c) => c.mimeType).join(', '));
           }
         }
 
@@ -1402,9 +1456,32 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           if (!isCurrentAttempt() || peerConnectionRef.current !== peerConnection) {
             return;
           }
-          updateStatus('ICE state: ' + peerConnection.iceConnectionState);
-          if (peerConnection.iceConnectionState === 'failed') {
+          const iceState = peerConnection.iceConnectionState;
+          updateStatus('ICE state: ' + iceState);
+          if (iceState === 'connected' || iceState === 'completed') {
+            clearIceDisconnectedGrace();
+            return;
+          }
+          if (iceState === 'failed') {
+            clearIceDisconnectedGrace();
             scheduleRetry('ICE connection entered failed state', generation);
+            return;
+          }
+          if (
+            iceState === 'disconnected' &&
+            autoReconnectRef.current &&
+            iceDisconnectedGraceRef.current === undefined
+          ) {
+            // Cap the browser's natural disconnected→failed escalation to recover faster.
+            iceDisconnectedGraceRef.current = window.setTimeout(() => {
+              iceDisconnectedGraceRef.current = undefined;
+              if (!isCurrentAttempt() || peerConnectionRef.current !== peerConnection) {
+                return;
+              }
+              if (peerConnection.iceConnectionState === 'disconnected') {
+                scheduleRetry('ICE stayed disconnected past grace period', generation);
+              }
+            }, ICE_DISCONNECTED_GRACE_MS);
           }
         };
 
@@ -1614,6 +1691,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       connectionAttemptRef.current = 0;
       controlChannelOpenedRef.current = false;
       clearScheduledRetry();
+      clearIceDisconnectedGrace();
       teardownConnection();
       updateStatus('Stopped');
     };
@@ -1650,9 +1728,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     useEffect(() => {
       const video = videoRef.current;
       const frame = frameRef.current;
-      
+
       if (!video) return;
-      
+
       // If no frame, no positioning needed
       if (!showFrame || !frame) {
         setVideoStyle({});
@@ -1662,16 +1740,16 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       const updateVideoPosition = () => {
         const frameWidth = frame.clientWidth;
         const frameHeight = frame.clientHeight;
-        
+
         if (frameWidth === 0 || frameHeight === 0) return;
-        
+
         // Determine landscape based on video's intrinsic dimensions
         const landscape = video.videoWidth > video.videoHeight;
         setIsLandscape(landscape);
         setUseAndroidTabletFrame(
           platform === 'android' && isAndroidTabletVideo(video.videoWidth, video.videoHeight),
         );
-        
+
         const pos = landscape ? config.videoPosition.landscape : config.videoPosition.portrait;
         let newStyle: React.CSSProperties = {};
         if (pos.heightMultiplier) {
@@ -1683,7 +1761,11 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           // Let the other dimension follow the video stream's intrinsic aspect ratio.
           newStyle.height = 'auto';
         }
-        newStyle.borderRadius = `${landscape ? frameHeight * config.videoBorderRadiusMultiplier : frameWidth * config.videoBorderRadiusMultiplier}px`;
+        newStyle.borderRadius = `${
+          landscape ?
+            frameHeight * config.videoBorderRadiusMultiplier
+          : frameWidth * config.videoBorderRadiusMultiplier
+        }px`;
         setVideoStyle(newStyle);
       };
 
@@ -1693,10 +1775,10 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       resizeObserver.observe(frame);
       resizeObserver.observe(video);
-      
+
       // Also update when the frame image loads
       frame.addEventListener('load', updateVideoPosition);
-      
+
       // Update when video metadata loads (to get correct intrinsic dimensions)
       video.addEventListener('loadedmetadata', updateVideoPosition);
 
@@ -1859,22 +1941,22 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           }, 30000);
         });
       },
+      reconnect: () => start(),
     }));
 
     // Show indicators when Alt is held and we have a valid hover point (null when outside)
     const showAltIndicators = isAltHeld && hoverPoint !== null;
     const frameImageSrc =
-      platform === 'android' && useAndroidTabletFrame
-        ? (isLandscape ? pixelTabletFrameImageLandscape : pixelTabletFrameImage)
-        : (isLandscape ? config.frame.imageLandscape : config.frame.image);
+      platform === 'android' && useAndroidTabletFrame ?
+        isLandscape ? pixelTabletFrameImageLandscape
+        : pixelTabletFrameImage
+      : isLandscape ? config.frame.imageLandscape
+      : config.frame.image;
 
     return (
       <div
         ref={containerRef}
-        className={clsx(
-          'rc-container',
-          className,
-        )}
+        className={clsx('rc-container', className)}
         style={{ touchAction: 'none' }} // Keep touchAction none for the container
         // Attach unified handler to all interaction events on the container
         // This helps capture mouseleave correctly even if the video element itself isn't hovered
@@ -1916,21 +1998,17 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         )}
         <video
           ref={videoRef}
-          className={clsx(
-            'rc-video',
-            !showFrame && 'rc-video-frameless',
-            !videoLoaded && 'rc-video-loading',
-          )}
+          className={clsx('rc-video', !showFrame && 'rc-video-frameless', !videoLoaded && 'rc-video-loading')}
           style={{
             ...videoStyle,
-            ...(config.loadingLogo
-              ? {
-                  backgroundImage: `url("${config.loadingLogo}")`,
-                  backgroundRepeat: 'no-repeat',
-                  backgroundPosition: 'center',
-                  backgroundSize: config.loadingLogoSize,
-                }
-              : {}),
+            ...(config.loadingLogo ?
+              {
+                backgroundImage: `url("${config.loadingLogo}")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundSize: config.loadingLogoSize,
+              }
+            : {}),
           }}
           autoPlay
           playsInline
@@ -1952,11 +2030,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           }}
         />
         {retryExhausted && (
-          <button
-            type="button"
-            className="rc-retry-button"
-            onClick={handleManualRetry}
-          >
+          <button type="button" className="rc-retry-button" onClick={handleManualRetry}>
             Retry
           </button>
         )}
@@ -1992,4 +2066,4 @@ const toScreenshotData = (message: any): ScreenshotData | null => {
   }
 
   return null;
-};
+};