Embed a Simulator

npm install @run-cloud/ui

npm install @run-cloud/sdk

// server/simulator-session.ts: import this file from server code only.
import { Client, type SimulatorPlatform } from "@run-cloud/sdk";

const cloud = new Client();

export async function createSimulatorSession(
  platform: SimulatorPlatform,
  appAssetId: string,
) {
  const session = await cloud.simulators.create({
    platform,
    displayName: "Embedded preview",
    tags: { surface: "product-preview" },
    installAssets: [appAssetId],
    inactivityTimeout: "60s",
    hardTimeout: "10m",
  });

  if (!session.url) {
    await cloud.simulators.delete(session.id, { platform: session.platform });
    throw new Error("The simulator session did not return a viewer URL");
  }

  return {
    id: session.id,
    platform: session.platform,
    url: session.url,
  };
}

export async function releaseSimulatorSession(
  id: string,
  platform: SimulatorPlatform,
) {
  await cloud.simulators.delete(id, { platform });
}

"use client";

import { useRef, useState } from "react";
import {
  RemoteControl,
  type RemoteControlHandle,
  type RemoteControlStatus,
} from "@run-cloud/ui";

export type SimulatorEmbedProps = {
  url: string;
};

export default function SimulatorEmbed({ url }: SimulatorEmbedProps) {
  const remoteControl = useRef<RemoteControlHandle | null>(null);
  const [status, setStatus] = useState<RemoteControlStatus | null>(null);
  const [notice, setNotice] = useState("Connecting to the simulator...");

  return (
    <section style={{ width: "100%", maxWidth: 430 }}>
      <div
        style={{
          position: "relative",
          width: "100%",
          height: "min(80vh, 844px)",
          overflow: "hidden",
          borderRadius: 24,
          background: "#0f172a",
        }}
      >
        <RemoteControl
          ref={remoteControl}
          url={url}
          loadingGuard
          title="run.cloud simulator preview"
          onStatus={setStatus}
          onReady={() => setNotice("Simulator ready")}
          onSessionEnded={(event) =>
            setNotice(`Session ended: ${event.reason}`)
          }
          onRestartRequested={() =>
            setNotice("Create a new session to restart the preview")
          }
          onInteractionResult={(result) =>
            setNotice(
              result.ok
                ? `${result.action} completed`
                : `${result.action} failed: ${result.error.message}`,
            )
          }
          onUnavailable={(event) => setNotice(event.reason)}
        />
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          marginTop: 12,
        }}
      >
        <button
          type="button"
          onClick={async () => {
            try {
              await remoteControl.current?.tap({ x: 0.5, y: 0.5 });
            } catch (error) {
              setNotice(error instanceof Error ? error.message : String(error));
            }
          }}
        >
          Tap center
        </button>
        <span aria-live="polite">
          {notice}
          {status?.streaming ? " · streaming" : ""}
        </span>
      </div>
    </section>
  );
}

status.streaming && (status.appLaunched || status.reactNative)

export function attachSimulator(
  iframe: HTMLIFrameElement,
  sessionUrl: string,
) {
  const url = new URL(sessionUrl);
  if (url.protocol !== "https:" && url.protocol !== "http:") {
    throw new TypeError("Expected an absolute HTTP(S) simulator URL");
  }

  url.searchParams.set("embed", "1");
  iframe.src = url.toString();
  const targetOrigin = url.origin;

  const onMessage = (event: MessageEvent) => {
    if (event.source !== iframe.contentWindow) return;
    if (event.origin !== targetOrigin) return;
    if (!event.data || typeof event.data !== "object") return;

    const message = event.data as Record<string, unknown>;

    if (message.type === "ios-simulator:status") {
      const ready =
        message.streaming === true &&
        (message.appLaunched === true || message.reactNative === true);
      console.log({ ready, streaming: message.streaming });
    }

    if (
      message.type === "ios-simulator:session-ended" ||
      message.type === "ios-simulator:session-restart-requested"
    ) {
      console.log("Create a new simulator session");
    }

    if (message.type === "run-cloud:interaction-result") {
      console.log({
        requestId: message.requestId,
        action: message.action,
        ok: message.ok,
        status: message.status,
        error: message.error,
      });
    }

    if (message.type === "ios-simulator:result") {
      console.log({
        command: message.command,
        ok: message.ok,
        error: message.error,
      });
    }
  };

  window.addEventListener("message", onMessage);

  return {
    tap(x: number, y: number) {
      const requestId = crypto.randomUUID();
      iframe.contentWindow?.postMessage(
        {
          type: "run-cloud:interaction",
          requestId,
          timeoutMs: 15_000,
          action: "tap",
          x,
          y,
        },
        targetOrigin,
      );
      return requestId;
    },
    cancel(requestId: string, action: "tap") {
      iframe.contentWindow?.postMessage(
        { type: "run-cloud:interaction-cancel", requestId, action },
        targetOrigin,
      );
    },
    dispose() {
      window.removeEventListener("message", onMessage);
      iframe.removeAttribute("src");
    },
  };
}