@limrun/ui 0.15.1 → 0.17.0-rc.1

package/src/components/remote-control.tsx

@@ -1,17 +1,21 @@
-import React, { useEffect, useRef, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  lazy,
+  Suspense,
+} from 'react';
 import { clsx } from 'clsx';
 import './remote-control.css';
 
+import { createDisplayTouchMessage, type DuoState, type DuoOrientation } from '../core/duo';
+const DuoView = lazy(() => import('./duo-view'));
+
 import { ANDROID_KEYS, AMOTION_EVENT, codeMap } from '../core/constants';
 
-import iphoneFrameImage from '../assets/iphone16pro_black_bg.webp';
-import pixelFrameImage from '../assets/pixel9_black.webp';
-import pixelFrameImageLandscape from '../assets/pixel9_black_landscape.webp';
-import pixelTabletFrameImage from '../assets/pixel_tablet_portrait.webp';
-import pixelTabletFrameImageLandscape from '../assets/pixel_tablet_landscape.webp';
-import iphoneFrameImageLandscape from '../assets/iphone16pro_black_landscape_bg.webp';
-import appleLogoSvg from '../assets/Apple_logo_white.svg';
-import androidBootImage from '../assets/android_boot.webp';
 import {
   createTouchControlMessage,
   createInjectKeycodeMessage,
@@ -66,6 +70,12 @@ export interface RemoteControlProps {
   // around the video. Defaults to true.
   showFrame?: boolean;
 
+  /** Enables the official iPhone Duo's native displays and interactive folding frame. */
+  deviceModel?: 'iphone-duo';
+
+  /** Optional prepared Duo GLB, supplied and licensed by the host application. */
+  duoModelUrl?: string;
+
   // When true, drops after a working session auto-reconnect instead of
   // surfacing the manual "Retry" button. Defaults to false.
   autoReconnect?: boolean;
@@ -82,6 +92,15 @@ export interface RemoteControlProps {
    * etc.). It is not called for ordinary network drops.
    */
   onTerminated?: () => void;
+  /**
+   * Device frame and boot-logo images. The default export bundles Limrun's
+   * frames; `@limrun/ui/lite` omits them so a frameless embed stays small.
+   */
+  assets?: RemoteControlAssets;
+  /**
+   * Coarse connection lifecycle, for status UI outside the component.
+   */
+  onConnectionStateChange?: (state: RemoteControlConnectionState) => void;
 
   /**
    * Enable the inspect overlay. When set, the component starts polling the
@@ -305,7 +324,7 @@ export interface ImperativeKeyboardEvent {
 export interface RemoteControlHandle {
   openUrl: (url: string) => void;
   sendKeyEvent: (event: ImperativeKeyboardEvent) => void;
-  screenshot: () => Promise<ScreenshotData>;
+  screenshot: (display?: 'outer' | 'inner') => Promise<ScreenshotData>;
   terminateApp: (bundleId: string) => Promise<void>;
   reconnect: () => void;
 
@@ -388,18 +407,30 @@ export const withAuthenticationToken = (url: string, token: string): string => {
   return endpoint.toString();
 };
 
+export type RemoteControlConnectionState =
+  | 'connecting'
+  | 'connected'
+  | 'reconnecting'
+  | 'failed'
+  | 'terminated';
+
+export type RemoteControlPlatformAssets = {
+  frame?: string;
+  frameLandscape?: string;
+  tabletFrame?: string;
+  tabletFrameLandscape?: string;
+  loadingLogo?: string;
+};
+
+export type RemoteControlAssets = Partial<Record<DevicePlatform, RemoteControlPlatformAssets>>;
+
 type DeviceConfig = {
   videoBorderRadiusMultiplier: number;
-  loadingLogo: string;
   loadingLogoSize: string;
   videoPosition: {
     portrait: { heightMultiplier?: number; widthMultiplier?: number };
     landscape: { heightMultiplier?: number; widthMultiplier?: number };
   };
-  frame: {
-    image: string;
-    imageLandscape: string;
-  };
 };
 
 const ANDROID_TABLET_VIDEO_WIDTH = 1920;
@@ -420,12 +451,7 @@ const isAndroidTabletVideo = (width: number, height: number): boolean =>
 // Video position percentages are relative to the frame image dimensions
 const deviceConfig: Record<DevicePlatform, DeviceConfig> = {
   ios: {
-    frame: {
-      image: iphoneFrameImage,
-      imageLandscape: iphoneFrameImageLandscape,
-    },
     videoBorderRadiusMultiplier: 0.15,
-    loadingLogo: appleLogoSvg,
     loadingLogoSize: '20%',
     // Video position as percentage of frame dimensions
     videoPosition: {
@@ -434,12 +460,7 @@ const deviceConfig: Record<DevicePlatform, DeviceConfig> = {
     },
   },
   android: {
-    frame: {
-      image: pixelFrameImage,
-      imageLandscape: pixelFrameImageLandscape,
-    },
     videoBorderRadiusMultiplier: 0.13,
-    loadingLogo: androidBootImage,
     loadingLogoSize: '40%',
     // Video position as percentage of frame dimensions
     videoPosition: {
@@ -488,8 +509,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       sessionId: propSessionId,
       openUrl,
       showFrame = true,
+      deviceModel,
+      duoModelUrl,
       autoReconnect = false,
       onTerminated,
+      assets,
+      onConnectionStateChange,
       inspectMode,
       onAxSnapshotChange,
       onInspectSelectionChange,
@@ -507,6 +532,32 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const containerRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const frameRef = useRef<HTMLImageElement>(null);
+    const [detectedDuo, setDetectedDuo] = useState(false);
+    const isDuo = deviceModel === 'iphone-duo' || detectedDuo;
+    const innerVideoRef = useRef<HTMLVideoElement>(null);
+    const [duoState, setDuoState] = useState<DuoState | null>(null);
+    const [duoError, setDuoError] = useState<string>();
+    const duoRequests = useRef(
+      new Map<
+        string,
+        { resolve: () => void; reject: (error: Error) => void; timer: ReturnType<typeof setTimeout> }
+      >(),
+    );
+    const sendDuoControl = (type: string, parameters: object): Promise<void> =>
+      new Promise((resolve, reject) => {
+        const socket = wsRef.current;
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+          reject(new Error('Simulator disconnected'));
+          return;
+        }
+        const id = crypto.randomUUID();
+        const timer = setTimeout(() => {
+          duoRequests.current.delete(id);
+          reject(new Error('Device control timed out'));
+        }, 5000);
+        duoRequests.current.set(id, { resolve, reject, timer });
+        socket.send(JSON.stringify({ type, id, ...parameters }));
+      });
     const [videoLoaded, setVideoLoaded] = useState(false);
     const [retryExhausted, setRetryExhausted] = useState(false);
     // Set once we've concluded the instance is permanently gone (its
@@ -702,6 +753,16 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     onAxStatusChangeRef.current = onAxStatusChange;
     const onTerminatedRef = useRef(onTerminated);
     onTerminatedRef.current = onTerminated;
+    const onConnectionStateChangeRef = useRef(onConnectionStateChange);
+    onConnectionStateChangeRef.current = onConnectionStateChange;
+    const connectionStateRef = useRef<RemoteControlConnectionState | null>(null);
+    // Reports each transition once; callers get status text without tracking
+    // the retry machinery below.
+    const reportConnectionState = (next: RemoteControlConnectionState) => {
+      if (connectionStateRef.current === next) return;
+      connectionStateRef.current = next;
+      safeInvoke('onConnectionStateChange', onConnectionStateChangeRef.current, next);
+    };
 
     const inspectActive = inspectMode === true || inspectMode === 'hover-only';
     const inspectModeResolved: InspectMode = inspectMode === 'hover-only' ? 'hover-only' : 'select';
@@ -715,6 +776,17 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     const platform = useMemo(() => detectPlatform(url), [url]);
     const config = deviceConfig[platform];
+    const platformAssets = assets?.[platform];
+    const frameImageSrc =
+      platform === 'android' && useAndroidTabletFrame ?
+        isLandscape ? platformAssets?.tabletFrameLandscape
+        : platformAssets?.tabletFrame
+      : isLandscape ? platformAssets?.frameLandscape
+      : platformAssets?.frame;
+    const loadingLogo = platformAssets?.loadingLogo;
+    // Without a frame image (the lite entry) the video lays out frameless
+    // whatever showFrame says.
+    const frameVisible = !isDuo && showFrame && !!frameImageSrc;
 
     const updateStatus = (message: string) => {
       // Use the wrapper for conditional logging
@@ -1213,6 +1285,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     // Unified handler for both mouse and touch interactions
     const handleInteraction = (event: React.MouseEvent | React.TouchEvent) => {
+      if (isDuo) return;
       event.preventDefault();
       event.stopPropagation();
 
@@ -1662,6 +1735,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     const handleKeyboard = (event: React.KeyboardEvent) => {
       event.preventDefault();
       event.stopPropagation();
+      const inputFocused =
+        document.activeElement === videoRef.current ||
+        (isDuo && document.activeElement === event.currentTarget);
       // Use the wrapper for conditional logging
       debugLog('Keyboard event:', {
         type: event.type,
@@ -1669,12 +1745,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         keyCode: event.keyCode,
         code: event.code,
         target: (event.target as HTMLElement).tagName,
-        focused: document.activeElement === videoRef.current,
+        focused: inputFocused,
       });
 
-      if (document.activeElement !== videoRef.current) {
+      if (!inputFocused) {
         // Use the wrapper for conditional warning
-        debugWarn('Video element not focused, skipping keyboard event');
+        debugWarn('Simulator input not focused, skipping keyboard event');
         return;
       }
 
@@ -1809,6 +1885,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       firstFrameShownRef.current = true;
       stopRequestFrameLoop();
       setVideoLoaded(true);
+      reportConnectionState('connected');
     };
 
     // Stop every track on a MediaStream and release the device handle.
@@ -2327,6 +2404,13 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     };
 
     const teardownConnection = () => {
+      for (const request of duoRequests.current.values()) {
+        clearTimeout(request.timer);
+        request.reject(new Error('Simulator disconnected'));
+      }
+      duoRequests.current.clear();
+      setDuoState(null);
+      if (innerVideoRef.current) innerVideoRef.current.srcObject = null;
       clearConnectionSuccessTimeout();
       clearIceDisconnectedGrace();
       stopRequestFrameLoop();
@@ -2454,6 +2538,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       clearIceDisconnectedGrace();
       teardownConnection();
       updateStatus('Instance terminated');
+      reportConnectionState('terminated');
       safeInvoke('onTerminated', onTerminatedRef.current);
     };
 
@@ -2489,6 +2574,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         if (!autoReconnectRef.current) {
           updateStatus(`Connection failed after it was established: ${reason}`);
           setRetryExhausted(true);
+          reportConnectionState('failed');
           teardownConnection();
           return;
         }
@@ -2504,11 +2590,13 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       if (nextAttempt >= MAX_CONNECTION_ATTEMPTS) {
         updateStatus(`Connection failed after ${MAX_CONNECTION_ATTEMPTS} attempts: ${reason}`);
         setRetryExhausted(true);
+        reportConnectionState('failed');
         teardownConnection();
         return;
       }
 
       updateStatus(`Retrying connection (${nextAttempt + 1}/${MAX_CONNECTION_ATTEMPTS})`);
+      reportConnectionState('reconnecting');
       teardownConnection();
       retryTimeoutRef.current = window.setTimeout(() => {
         retryTimeoutRef.current = undefined;
@@ -2528,6 +2616,10 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       connectionAttemptRef.current = attemptNumber;
       controlChannelOpenedRef.current = false;
       setRetryExhausted(false);
+      // A drop after an established session restarts the attempt budget at 0
+      // while staying 'reconnecting'; only a fresh start reports 'connecting'.
+      if (attemptNumber === 0 && connectionStateRef.current !== 'reconnecting')
+        reportConnectionState('connecting');
       clearScheduledRetry();
       clearConnectionSuccessTimeout();
       stopRequestFrameLoop();
@@ -2609,25 +2701,46 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         const rtcConfigPromise = new Promise<{
           rtcConfiguration: RTCConfiguration;
           cameraSupported: boolean;
+          foldSupported: boolean;
         }>((resolve, reject) => {
-          const timeoutId = window.setTimeout(() => reject(new Error('RTCConfiguration timeout')), 30000);
+          const settle = (callback: () => void) => {
+            window.clearTimeout(timeoutId);
+            ws.removeEventListener('message', messageHandler);
+            callback();
+          };
+          const timeoutId = window.setTimeout(
+            () => settle(() => reject(new Error('RTCConfiguration timeout'))),
+            30000,
+          );
 
           const messageHandler = (event: MessageEvent) => {
+            if (!isCurrentAttempt() || wsRef.current !== ws) {
+              return;
+            }
             try {
               const message = JSON.parse(event.data);
-              if (message.type === 'rtcConfiguration') {
-                window.clearTimeout(timeoutId);
-                ws.removeEventListener('message', messageHandler);
-                resolve({
-                  rtcConfiguration: message.rtcConfiguration,
-                  cameraSupported: message.cameraSupported === true,
-                });
+              if (
+                message.type === 'signalingError' &&
+                message.requestType === 'requestRtcConfiguration' &&
+                message.sessionId === sessionId
+              ) {
+                const reason =
+                  typeof message.error === 'string' ?
+                    message.error
+                  : 'Unable to load streaming configuration';
+                settle(() => reject(new Error(reason)));
+              } else if (message.type === 'rtcConfiguration') {
+                settle(() =>
+                  resolve({
+                    rtcConfiguration: message.rtcConfiguration,
+                    cameraSupported: message.cameraSupported === true,
+                    foldSupported: message.foldSupported === true,
+                  }),
+                );
               }
             } catch (e) {
-              window.clearTimeout(timeoutId);
-              ws.removeEventListener('message', messageHandler);
               console.error('Error handling RTC configuration:', e);
-              reject(e);
+              settle(() => reject(e));
             }
           };
 
@@ -2640,16 +2753,23 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           );
         });
 
-        const { rtcConfiguration: rtcConfig, cameraSupported: serverCameraSupported } =
-          await rtcConfigPromise;
+        const {
+          rtcConfiguration: rtcConfig,
+          cameraSupported: serverCameraSupported,
+          foldSupported,
+        } = await rtcConfigPromise;
         if (!isCurrentAttempt() || wsRef.current !== ws) {
           return;
         }
 
+        const isDuo = deviceModel === 'iphone-duo' || foldSupported;
+        setDetectedDuo(isDuo);
         const peerConnection = new RTCPeerConnection(rtcConfig);
         peerConnectionRef.current = peerConnection;
         peerConnection.addTransceiver('audio', { direction: 'recvonly' });
         const videoTransceiver = peerConnection.addTransceiver('video', { direction: 'recvonly' });
+        const duoTransceiver =
+          isDuo ? peerConnection.addTransceiver('video', { direction: 'recvonly' }) : null;
 
         // iOS always supports camera/mic injection; Android servers
         // advertise it through `cameraSupported` (Android 15 and newer).
@@ -2703,6 +2823,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
               return getCodecPriority(a) - getCodecPriority(b);
             });
             videoTransceiver.setCodecPreferences(sortedCodecs);
+            duoTransceiver?.setCodecPreferences(sortedCodecs);
             debugLog('Set codec preferences:', sortedCodecs.map((c) => c.mimeType).join(', '));
           }
         }
@@ -2774,6 +2895,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           controlChannelOpenedRef.current = true;
           clearConnectionSuccessTimeout();
           updateStatus('Control channel opened');
+          if (isDuo) ws.send(JSON.stringify({ type: 'getFoldState', id: 'duo-capabilities' }));
 
           // Spin up the AX fetcher now that we have a stable WS + control
           // channel. The fetcher's send function reuses this WS; it stops
@@ -2942,7 +3064,14 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           updateStatus('Received remote track: ' + event.track.kind);
           if (event.track.kind === 'video' && videoRef.current) {
             debugLog(`[${new Date().toISOString()}] Video track received:`, event.track);
-            videoRef.current.srcObject = event.streams[0];
+            const inner =
+              event.track.id === 'duo-inner' || event.streams.some((stream) => stream.id === 'duo-inner');
+            const target = inner ? innerVideoRef.current : videoRef.current;
+            if (target) {
+              target.srcObject =
+                isDuo ? new MediaStream([event.track]) : event.streams[0] ?? new MediaStream([event.track]);
+              void target.play().catch(() => undefined);
+            }
           }
         };
 
@@ -2986,6 +3115,36 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           }
           updateStatus('Received: ' + message.type);
           switch (message.type) {
+            case 'performActionsResult':
+            case 'foldStateResult':
+            case 'foldStateChanged': {
+              if (!isDuo) break;
+              if (message.state) {
+                setDuoState(message.state);
+                setDuoError(undefined);
+              } else if (message.id === 'duo-capabilities')
+                setDuoError(message.error || 'This instance does not support native iPhone Duo displays.');
+              const request = duoRequests.current.get(message.id);
+              if (request) {
+                clearTimeout(request.timer);
+                duoRequests.current.delete(message.id);
+                if (message.error) request.reject(new Error(message.error));
+                else request.resolve();
+              }
+              break;
+            }
+            case 'signalingError': {
+              if (message.requestType !== 'offer' || message.sessionId !== sessionId) {
+                break;
+              }
+              const reason =
+                typeof message.error === 'string' ?
+                  message.error
+                : 'Unable to establish the streaming connection';
+              updateStatus('Error: ' + reason);
+              scheduleRetry(reason, generation);
+              break;
+            }
             case 'answer':
               if (!peerConnectionRef.current || peerConnectionRef.current !== peerConnection) {
                 updateStatus('No peer connection, skipping answer');
@@ -3178,6 +3337,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             ws.send(
               JSON.stringify({
                 type: 'offer',
+                ...(isDuo ? { displayStreams: true } : {}),
                 sdp: offer.sdp,
                 sessionId: sessionId,
               }),
@@ -3254,7 +3414,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       // connection effect doesn't need to bounce when the camera
       // turns on/off — no SDP-affecting change.
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [url, token, propSessionId]);
+    }, [url, token, propSessionId, deviceModel]);
 
     // Recompute the inspect-overlay geometry (container-local pixel rect of
     // the actually-rendered video content) from the current mapping context.
@@ -3296,7 +3456,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       const updateVideoPosition = () => {
         // If no frame, just refresh overlay geometry; no inset/letterbox math
         // is needed since the video element is its own size.
-        if (!showFrame || !frame) {
+        if (!frameVisible || !frame) {
           setVideoStyle({});
           recomputeOverlayGeometry();
           return;
@@ -3369,7 +3529,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         video.removeEventListener('resize', bumpOnResize);
         if (frame) frame.removeEventListener('load', updateVideoPosition);
       };
-    }, [config, showFrame]);
+    }, [config, frameVisible]);
 
     // Start/stop the AX poller and reset inspect state when inspect mode
     // toggles. Connection state is independent: the fetcher gets created on
@@ -3490,7 +3650,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           sendBinaryControlMessage(message);
         }
       },
-      screenshot: (): Promise<ScreenshotData> => {
+      screenshot: (display?: 'outer' | 'inner'): Promise<ScreenshotData> => {
         return new Promise<ScreenshotData>((resolve, reject) => {
           if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
             debugWarn('WebSocket not open, cannot send screenshot command.');
@@ -3499,7 +3659,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
           const id = `ui-ss-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
           const request = {
-            type: 'screenshot', // Matches the type expected by instance API
+            type: display ? 'screenshotDisplay' : 'screenshot',
+            ...(display ? { display } : {}),
             id: id,
           };
 
@@ -3613,12 +3774,6 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     // 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;
 
     return (
       <div
@@ -3654,7 +3809,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             />
           </>
         )}
-        {showFrame && (
+        {frameVisible && (
           <img
             ref={frameRef}
             src={frameImageSrc}
@@ -3665,12 +3820,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',
+            !frameVisible && 'rc-video-frameless',
+            !videoLoaded && 'rc-video-loading',
+          )}
           style={{
             ...videoStyle,
-            ...(config.loadingLogo ?
+            ...(isDuo ? { opacity: 0, width: 1, height: 1, pointerEvents: 'none' as const } : {}),
+            ...(loadingLogo ?
               {
-                backgroundImage: `url("${config.loadingLogo}")`,
+                backgroundImage: `url("${loadingLogo}")`,
                 backgroundRepeat: 'no-repeat',
                 backgroundPosition: 'center',
                 backgroundSize: config.loadingLogoSize,
@@ -3680,7 +3840,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           autoPlay
           playsInline
           muted
-          tabIndex={0}
+          tabIndex={isDuo ? -1 : 0}
           onKeyDown={handleKeyboard}
           onKeyUp={handleKeyboard}
           onClick={handleVideoClick}
@@ -3696,7 +3856,47 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             }
           }}
         />
-        {inspectActive && (
+        {isDuo && (
+          <video
+            ref={innerVideoRef}
+            autoPlay
+            playsInline
+            muted
+            style={{ position: 'absolute', width: 1, height: 1, opacity: 0, pointerEvents: 'none' }}
+          />
+        )}
+        {isDuo && duoState && (
+          <Suspense fallback={<div>Loading iPhone Duo…</div>}>
+            <DuoView
+              modelUrl={duoModelUrl}
+              outer={videoRef.current}
+              inner={innerVideoRef.current}
+              state={duoState}
+              setAngle={(angleDegrees) => sendDuoControl('setHingeAngle', { angleDegrees })}
+              setOrientation={(orientation: DuoOrientation) =>
+                sendDuoControl('setDuoOrientation', { orientation })
+              }
+              button={(button, down) =>
+                sendDuoControl('performActions', {
+                  actions: [{ type: down ? 'buttonDown' : 'buttonUp', button }],
+                })
+              }
+              touch={(action, screenId, x, y) => {
+                const channel = dataChannelRef.current;
+                if (channel?.readyState === 'open')
+                  channel.send(createDisplayTouchMessage(action, screenId, x, y));
+              }}
+              onKeyDown={handleKeyboard}
+              onKeyUp={handleKeyboard}
+            />
+          </Suspense>
+        )}
+        {isDuo && duoError && (
+          <div role="alert" className="rc-duo-error">
+            {duoError}
+          </div>
+        )}
+        {!isDuo && inspectActive && (
           <InspectOverlay
             snapshot={axSnapshot}
             geometry={overlayGeometry}