@alivelabs/expo-orchestrator-react-client 0.2.0 → 0.2.1

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,cAAc,EACd,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAIpB,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAGxE,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEpC,cAAM,iBAAiB,CAAC,MAAM,SAAS,QAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwD;IAElF,EAAE,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IASxF,GAAG,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAInF,IAAI,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAClC,KAAK,EAAE,CAAC,EACR,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GACtD,IAAI;IAQP,kBAAkB,IAAI,IAAI;CAG3B;AAUD,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,YAAa,SAAQ,iBAAiB,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAS;gBAEd,EAAE,OAAiC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB;YAU7E,SAAS;IAgBvB,UAAU,IAAI,OAAO,CAAC,aAAa,CAAC;IAIpC,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAI/B,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAU3D,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IAc/C,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,UAAU;IA6DlB,OAAO,CAAC,iBAAiB;IASzB,UAAU,IAAI,IAAI;CAYnB"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,cAAc,EACd,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAIpB,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAGxE,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEpC,cAAM,iBAAiB,CAAC,MAAM,SAAS,QAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwD;IAElF,EAAE,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IASxF,GAAG,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAInF,IAAI,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAClC,KAAK,EAAE,CAAC,EACR,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GACtD,IAAI;IAQP,kBAAkB,IAAI,IAAI;CAG3B;AAkBD,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,YAAa,SAAQ,iBAAiB,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAS;gBAEd,EAAE,OAAiC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB;YAU7E,SAAS;IAgBvB,UAAU,IAAI,OAAO,CAAC,aAAa,CAAC;IAIpC,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAI/B,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAU3D,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IAc/C,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,UAAU;IAwElB,OAAO,CAAC,iBAAiB;IASzB,UAAU,IAAI,IAAI;CAYnB"}

package/dist/client.js

@@ -29,6 +29,13 @@ class TypedEventEmitter {
 const INITIAL_DELAY_MS = 500;
 const MAX_DELAY_MS = 30000;
 const MAX_ATTEMPTS = 10;
+// Close codes the server sends on purpose — reconnecting can't recover these,
+// so we stop and (where useful) surface why. A `null` message closes quietly.
+const TERMINAL_CLOSE_CODES = {
+    1000: null, // normal closure — the session ended
+    1008: "Unauthorized — the token was rejected for this session.",
+    4404: "This session isn't live. Live video and input are only available while a build is running.",
+};
 export class ExpoCiClient extends TypedEventEmitter {
     constructor({ baseUrl = "http://localhost:3000", sessionId, apiToken }) {
         super();
@@ -138,12 +145,24 @@ export class ExpoCiClient extends TypedEventEmitter {
                     break;
             }
         });
-        socket.addEventListener("close", () => {
-            if (this.destroyed) {
-                this.emit("close");
+        socket.addEventListener("close", (event) => {
+            this.emit("close");
+            if (this.destroyed)
+                return;
+            // A deliberate server close (unauthorized, session not live, ended) won't
+            // recover on retry — stop, and surface the reason to the UI.
+            if (Object.hasOwn(TERMINAL_CLOSE_CODES, event.code)) {
+                const message = TERMINAL_CLOSE_CODES[event.code];
+                if (message) {
+                    this.emit("error", {
+                        type: "error",
+                        sessionId: this.sessionId,
+                        timestamp: new Date().toISOString(),
+                        data: { message },
+                    });
+                }
                 return;
             }
-            this.emit("close");
             this.scheduleReconnect();
         });
         socket.addEventListener("error", () => {

package/dist/decoder.d.ts

@@ -15,11 +15,14 @@ export declare class SimulatorDecoder {
     private ctx;
     private size;
     private onResizeCb;
+    private onErrorCb;
     private nextTimestamp;
     private awaitingKeyframe;
     private disposed;
     setCanvas(canvas: HTMLCanvasElement | null): void;
     onResize(cb: ((size: FrameSize) => void) | null): void;
+    onError(cb: ((message: string) => void) | null): void;
+    private reportError;
     get frameSize(): FrameSize | null;
     push(chunk: ArrayBuffer): void;
     dispose(): void;

package/dist/decoder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decoder.d.ts","sourceRoot":"","sources":["../src/decoder.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBAAa,gBAAgB;IAC3B,+EAA+E;IAC/E,MAAM,CAAC,WAAW,IAAI,OAAO;IAI7B,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,IAAI,CAA0B;IACtC,OAAO,CAAC,UAAU,CAA4C;IAG9D,OAAO,CAAC,aAAa,CAAK;IAG1B,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAS;IAEzB,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI;IASjD,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;IAItD,IAAI,SAAS,IAAI,SAAS,GAAG,IAAI,CAEhC;IAED,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAqB9B,OAAO,IAAI,IAAI;IAUf,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,MAAM;IAsBd,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;CAWrB"}
+{"version":3,"file":"decoder.d.ts","sourceRoot":"","sources":["../src/decoder.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBAAa,gBAAgB;IAC3B,+EAA+E;IAC/E,MAAM,CAAC,WAAW,IAAI,OAAO;IAI7B,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,IAAI,CAA0B;IACtC,OAAO,CAAC,UAAU,CAA4C;IAC9D,OAAO,CAAC,SAAS,CAA4C;IAG7D,OAAO,CAAC,aAAa,CAAK;IAG1B,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAS;IAEzB,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI;IASjD,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;IAItD,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;IAIrD,OAAO,CAAC,WAAW;IAMnB,IAAI,SAAS,IAAI,SAAS,GAAG,IAAI,CAEhC;IAED,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAqB9B,OAAO,IAAI,IAAI;IAWf,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,MAAM;IAuBd,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,YAAY;CAWrB"}

package/dist/decoder.js

@@ -21,6 +21,7 @@ export class SimulatorDecoder {
         this.ctx = null;
         this.size = null;
         this.onResizeCb = null;
+        this.onErrorCb = null;
         // Monotonic, strictly-increasing microsecond timestamps. The values are
         // arbitrary (we render immediately) but EncodedVideoChunk requires them.
         this.nextTimestamp = 0;
@@ -44,6 +45,14 @@ export class SimulatorDecoder {
     onResize(cb) {
         this.onResizeCb = cb;
     }
+    onError(cb) {
+        this.onErrorCb = cb;
+    }
+    reportError(message, err) {
+        // Surface decoder problems instead of silently showing a black canvas.
+        console.warn(`[expo-orchestrator] ${message}`, err ?? "");
+        this.onErrorCb?.(message);
+    }
     get frameSize() {
         return this.size;
     }
@@ -74,6 +83,7 @@ export class SimulatorDecoder {
         this.canvas = null;
         this.ctx = null;
         this.onResizeCb = null;
+        this.onErrorCb = null;
     }
     // ── internals ────────────────────────────────────────────────────────────
     configure(description) {
@@ -84,16 +94,13 @@ export class SimulatorDecoder {
             output: (frame) => this.paintFrame(frame),
             error: (err) => this.onDecoderError(err),
         });
+        const codec = codecFromAvcC(description);
         try {
-            decoder.configure({
-                codec: codecFromAvcC(description),
-                description,
-                optimizeForLatency: true,
-            });
+            decoder.configure({ codec, description, optimizeForLatency: true });
         }
-        catch {
-            // Unsupported profile/level on this platform — leave video unsupported.
+        catch (err) {
             decoder.close();
+            this.reportError(`failed to configure the video decoder for codec ${codec}`, err);
             return;
         }
         this.decoder = decoder;
@@ -116,9 +123,10 @@ export class SimulatorDecoder {
                 data,
             }));
         }
-        catch {
+        catch (err) {
             // A bad/out-of-order chunk — wait for the next keyframe to resync.
             this.awaitingKeyframe = true;
+            this.reportError(`failed to decode a ${type} frame`, err);
         }
     }
     paintFrame(frame) {
@@ -159,9 +167,10 @@ export class SimulatorDecoder {
         }
         this.onResizeCb?.(this.size);
     }
-    onDecoderError(_err) {
+    onDecoderError(err) {
         // Reset and wait for the next server-forced keyframe to recover.
         this.awaitingKeyframe = true;
+        this.reportError("video decoder error", err);
     }
     closeDecoder() {
         const decoder = this.decoder;

package/dist/useExpoCiSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExpoCiSession.d.ts","sourceRoot":"","sources":["../src/useExpoCiSession.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAKV,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAIpB,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,OAA0B,GAC3B,EAAE,uBAAuB,GAAG,sBAAsB,CA8HlD"}
+{"version":3,"file":"useExpoCiSession.d.ts","sourceRoot":"","sources":["../src/useExpoCiSession.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAKV,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAIpB,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,OAA0B,GAC3B,EAAE,uBAAuB,GAAG,sBAAsB,CAmIlD"}

package/dist/useExpoCiSession.js

@@ -12,14 +12,16 @@ export function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect = t
     // We keep the client in a ref so reconnect() can call client.connect()
     // without causing a re-render or stale closure issues.
     const clientRef = useRef(null);
-    // One decoder per hook instance; lives across reconnects within a session.
+    // The decoder is created/torn down inside the connect effect so its lifecycle
+    // is paired with the socket (StrictMode-safe). The canvas node is held in its
+    // own ref so a freshly-created decoder can be (re)wired to it immediately.
     const decoderRef = useRef(null);
-    if (decoderRef.current === null) {
-        decoderRef.current = new SimulatorDecoder();
-        decoderRef.current.onResize(setFrameSize);
-    }
-    // Stable callback to wire the rendering <canvas> into the decoder.
+    const canvasNodeRef = useRef(null);
+    // Stable callback to wire the rendering <canvas> into the decoder. The ref
+    // callback fires during commit (before the effect creates the decoder), so we
+    // stash the node and also push it to the decoder if one already exists.
     const attachCanvas = useCallback((canvas) => {
+        canvasNodeRef.current = canvas;
         decoderRef.current?.setCanvas(canvas);
     }, []);
     // Stable reconnect callback
@@ -34,14 +36,15 @@ export function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect = t
         }
         return client.sendInput(input);
     }, []);
-    // Tear the decoder down only on unmount — it is reused across reconnects.
-    useEffect(() => {
-        return () => {
-            decoderRef.current?.dispose();
-            decoderRef.current = null;
-        };
-    }, []);
     useEffect(() => {
+        // Create the decoder here (not in render) so create + dispose are paired
+        // with this effect — StrictMode's mount/unmount/mount can't leave the active
+        // decoder canvas-less. Wire the current canvas immediately.
+        const decoder = new SimulatorDecoder();
+        decoder.onResize(setFrameSize);
+        decoder.onError(setError);
+        decoder.setCanvas(canvasNodeRef.current);
+        decoderRef.current = decoder;
         const client = new ExpoCiClient({ baseUrl, sessionId, apiToken });
         clientRef.current = client;
         // Fetch initial session status
@@ -76,7 +79,7 @@ export function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect = t
             });
         });
         const offFrame = client.on("video-chunk", (chunk) => {
-            decoderRef.current?.push(chunk);
+            decoder.push(chunk);
         });
         const offStatus = client.on("status", (msg) => {
             setStatus(msg.data.status);
@@ -96,6 +99,8 @@ export function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect = t
             offError();
             client.disconnect();
             clientRef.current = null;
+            decoder.dispose();
+            decoderRef.current = null;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [baseUrl, sessionId, apiToken, autoConnect, maxLogs]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alivelabs/expo-orchestrator-react-client",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React client for Expo CI Orchestrator — streaming logs, live simulator video, and interactive controls.",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@alivelabs/expo-orchestrator-schemas": "^0.2.0"
+    "@alivelabs/expo-orchestrator-schemas": "^0.2.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",