@limrun/ui 0.14.1 → 0.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "publishConfig": {
     "access": "public",
     "tag": "next"

package/src/components/remote-control.test.ts

@@ -0,0 +1,34 @@
+// Covers `withAuthenticationToken` only — the rest of <RemoteControl> is
+// integration-tested (see vitest.config.ts).
+//
+// Assertions parse the result and read decoded parameter values, so they
+// don't depend on whether a space serializes as `+` or `%20`.
+
+import { describe, expect, test } from 'vitest';
+import { withAuthenticationToken } from './remote-control';
+
+describe('withAuthenticationToken', () => {
+  test('adds the token alongside query parameters already on the endpoint', () => {
+    const result = new URL(
+      withAuthenticationToken('wss://example.com/socket?transport=webrtc', 'instance-token'),
+    );
+
+    expect(result.searchParams.get('transport')).toBe('webrtc');
+    expect(result.searchParams.get('token')).toBe('instance-token');
+  });
+
+  test('keeps a token containing URL syntax as a single decoded value', () => {
+    const token = 'instance token&scope=preview';
+    const result = new URL(withAuthenticationToken('wss://example.com/socket?transport=webrtc', token));
+
+    expect(result.searchParams.get('token')).toBe(token);
+    expect(result.searchParams.get('transport')).toBe('webrtc');
+    expect(result.searchParams.get('scope')).toBeNull();
+  });
+
+  test('replaces an existing token instead of duplicating it', () => {
+    const result = new URL(withAuthenticationToken('wss://example.com/socket?token=stale', 'fresh-token'));
+
+    expect(result.searchParams.getAll('token')).toEqual(['fresh-token']);
+  });
+});

package/src/components/remote-control.tsx

@@ -237,23 +237,20 @@ interface RemoteControlProps {
   /**
    * iOS only: when true, capture the user's microphone via
    * `getUserMedia({ audio: true })` and stream it live into the
-   * simulator's mock microphone. Unlike the camera (which is
-   * demand-driven by apps inside the sim), the microphone is
-   * user-driven: flip this prop from a button in your UI. The
-   * component handles the browser permission prompt, the WebRTC
-   * track attach (no SDP renegotiation — the audio slot is
-   * pre-allocated) and the `microphoneStart`/`microphoneStop`
-   * signaling to the host. Progress and failures are reported via
-   * `onMicrophoneStateChange`. Ignored on Android instances.
+   * simulator's mock microphone. This is a manual override: iOS apps
+   * that actively consume microphone input also trigger capture
+   * automatically, like camera demand. The component handles the
+   * browser permission prompt, WebRTC track attachment, and
+   * `microphoneStart`/`microphoneStop` signaling. Progress and failures
+   * are reported via `onMicrophoneStateChange`. Ignored on Android.
    */
   microphoneEnabled?: boolean;
 
   /**
    * Fires whenever the live-microphone pipeline changes state:
-   * after an enable attempt resolves (granted or denied), when the
-   * host acknowledges or rejects the stream, when the browser
-   * revokes the track mid-stream, and on disable. Use it to render
-   * the mic button's on/off/error state.
+   * after a manual or guest-demanded attempt resolves, when the host
+   * acknowledges or rejects the stream, when the browser revokes the
+   * track mid-stream, and when capture stops.
    */
   onMicrophoneStateChange?: (state: MicrophoneState) => void;
 }
@@ -437,6 +434,13 @@ const detectPlatform = (url: string): DevicePlatform => {
   return 'ios';
 };
 
+// The endpoint may already carry query parameters, and the token may contain URL syntax.
+export const withAuthenticationToken = (url: string, token: string): string => {
+  const endpoint = new URL(url);
+  endpoint.searchParams.set('token', token);
+  return endpoint.toString();
+};
+
 type DeviceConfig = {
   videoBorderRadiusMultiplier: number;
   loadingLogo: string;
@@ -635,14 +639,11 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       packetsSent?: number;
       packetsLost?: number;
     } | null>(null);
-    // User-driven outbound microphone state (iOS only). Unlike the
-    // camera, the mic is toggled by the `microphoneEnabled` prop; the
-    // track rides a pre-allocated sendonly audio transceiver so
-    // enabling/disabling is just a `replaceTrack`, plus a
-    // `microphoneStart`/`microphoneStop` WS signal so the host's
-    // audio state machine switches its source.
+    // Outbound microphone state (iOS only). The manual prop and guest-driven
+    // microphoneRequest signals share one pre-allocated audio transceiver.
     const microphoneEnabledRef = useRef(microphoneEnabled);
     microphoneEnabledRef.current = microphoneEnabled;
+    const microphoneDemandActiveRef = useRef(false);
     const onMicrophoneStateChangeRef = useRef(onMicrophoneStateChange);
     onMicrophoneStateChangeRef.current = onMicrophoneStateChange;
     const outboundMicSenderRef = useRef<RTCRtpSender | null>(null);
@@ -1914,6 +1915,14 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       return next;
     };
 
+    const isMicrophoneWanted = () => microphoneEnabledRef.current || microphoneDemandActiveRef.current;
+
+    const sendMicrophoneStart = (ws: WebSocket) => {
+      const id = `ui-mic-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+      micStartPendingIdRef.current = id;
+      ws.send(JSON.stringify({ type: 'microphoneStart', id }));
+    };
+
     // Capture the user's microphone and stream it to the simulator's
     // mock microphone. Safe to call redundantly: bails when already
     // attached, when the connection isn't up yet (the ICE-connected
@@ -1928,7 +1937,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
     const attachMicrophoneOp = async () => {
       const generation = micGenerationRef.current;
-      const isCurrent = () => generation === micGenerationRef.current && microphoneEnabledRef.current;
+      const isCurrent = () => generation === micGenerationRef.current && isMicrophoneWanted();
       const reportMicError = (error: string) => {
         safeInvoke('onMicrophoneStateChange', onMicrophoneStateChangeRef.current, {
           active: false,
@@ -2000,9 +2009,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         if (outboundMicStreamRef.current !== stream) return;
         void detachMicrophone('microphone capture ended by the browser');
       };
-      const id = `ui-mic-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-      micStartPendingIdRef.current = id;
-      ws.send(JSON.stringify({ type: 'microphoneStart', id }));
+      sendMicrophoneStart(ws);
       safeInvoke('onMicrophoneStateChange', onMicrophoneStateChangeRef.current, {
         active: true,
         label: audioTrack.label || undefined,
@@ -2196,10 +2203,10 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       stopCameraStatsPoller();
       stopOutboundLocalStream();
       outboundCameraSenderRef.current = null;
-      // Same for the live microphone. No `microphoneStop` signal here —
-      // the WS is going away with the connection; if `microphoneEnabled`
-      // is still on, the post-reconnect hook re-attaches.
+      // Same for the live microphone. Manual enablement survives reconnect;
+      // guest demand is replayed by the host after it assigns the new session.
       ++micGenerationRef.current;
+      microphoneDemandActiveRef.current = false;
       micStartPendingIdRef.current = null;
       if (outboundMicStreamRef.current) {
         stopMediaStream(outboundMicStreamRef.current);
@@ -2276,8 +2283,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           parsed.protocol === 'wss:' ? 'https:'
           : parsed.protocol === 'ws:' ? 'http:'
           : parsed.protocol;
-        parsed.searchParams.set('token', token);
-        probeUrl = parsed.toString();
+        probeUrl = withAuthenticationToken(parsed.toString(), token);
       } catch {
         return false;
       }
@@ -2401,7 +2407,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }, CONNECTION_SUCCESS_TIMEOUT_MS);
 
       try {
-        const ws = new WebSocket(`${url}?token=${token}`);
+        const ws = new WebSocket(withAuthenticationToken(url, token));
         wsRef.current = ws;
 
         // Wait for WebSocket to connect
@@ -2764,7 +2770,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
             clearIceDisconnectedGrace();
             // Re-attach the live microphone across reconnects (or apply a
             // prop that was flipped on before the connection was up).
-            if (microphoneEnabledRef.current && !outboundMicStreamRef.current) {
+            if (isMicrophoneWanted() && !outboundMicStreamRef.current) {
               void attachMicrophone();
             }
             return;
@@ -3164,6 +3170,29 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
               startCameraStatsPoller();
               break;
             }
+            case 'microphoneRequest': {
+              if (platform !== 'ios' || !outboundMicSenderRef.current) {
+                break;
+              }
+              const active = message.active === true;
+              microphoneDemandActiveRef.current = active;
+              // eslint-disable-next-line no-console
+              console.info('[RemoteControl] microphoneRequest received, active=', active);
+              if (!active) {
+                if (!microphoneEnabledRef.current) {
+                  await detachMicrophone();
+                }
+                break;
+              }
+              if (outboundMicStreamRef.current) {
+                // A manual stream may already be attached. Re-select it on the
+                // host because file playback can have replaced its source.
+                sendMicrophoneStart(ws);
+                break;
+              }
+              await attachMicrophone();
+              break;
+            }
             case 'microphoneStartResult': {
               if (micStartPendingIdRef.current === null || message.id !== micStartPendingIdRef.current) {
                 break;
@@ -3306,11 +3335,9 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }
     }, [cameraAspect]);
 
-    // Drive the live microphone from the `microphoneEnabled` prop.
-    // When flipped on before the connection is up, attachMicrophone
-    // bails and the ICE-connected handler picks it up instead.
+    // Drive the manual override without interrupting guest-driven demand.
     useEffect(() => {
-      if (microphoneEnabled) {
+      if (isMicrophoneWanted()) {
         void attachMicrophone();
       } else {
         void detachMicrophone();

package/vitest.config.ts

@@ -12,8 +12,9 @@ import { defineConfig } from 'vitest/config';
 //
 // The actual <RemoteControl> component is intentionally NOT under unit
 // test here — its WebRTC plumbing is integration-tested via the demo +
-// staging instance. These tests cover the smaller, pure-logic modules:
-// `core/ax-tree.ts` and `core/ax-fetcher.ts`.
+// staging instance. These tests cover the smaller, pure-logic pieces:
+// `core/ax-tree.ts`, `core/ax-fetcher.ts` and the URL helper exported from
+// `components/remote-control.tsx`.
 export default defineConfig({
   test: {
     environment: 'jsdom',