@expo/serve-sim 0.1.37 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/serve-sim",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "type": "module",
   "author": {
     "name": "Evan Bacon",
@@ -89,7 +89,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.1.7",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "werift": "^0.24.4"
   },
   "dependencies": {
     "inspect-webkit": "^0.0.5",

package/src/middleware.ts

@@ -1,4 +1,5 @@
 import { readdirSync, readFileSync, existsSync, unlinkSync, watch, type FSWatcher } from "fs";
+import { readFile, unlink } from "fs/promises";
 import { execSync, spawn, exec, execFile, type ChildProcess, type ExecException } from "child_process";
 import { tmpdir } from "os";
 import { join } from "path";
@@ -13,7 +14,7 @@ import type { Socket } from "net";
 import { WebSocket } from "ws";
 import { createAxStreamerCache } from "./ax";
 import { readCameraStatus } from "./camera-helper";
-import { createMetricsSamplerCache, type MetricsSamplerCache } from "./cpu-mem-sampler";
+import { createMetricsSamplerCache, MetricsSampler, type MetricsSamplerCache } from "./metrics-sampler";
 import { foregroundTracker, type ForegroundApp, type ForegroundTrackerCache } from "./foreground-tracker";
 import { corsAllowOriginHeaders } from "./middleware-utils";
 import { closeDeviceSession, getDeviceSession, sendCorsPreflight, type HidSocket } from "./device-session";
@@ -32,6 +33,7 @@ import {
   serveDevicePlaceholderAsset,
 } from "./devicekit-chrome";
 import { createExecWebSocketHandler, type UiRequestHandler } from "./exec-ws";
+import { claimHelperHidSocket, type UpgradeHandlerWebSocket } from "./middleware-utils";
 import { UI_OPTIONS, getUiStatus, normalizeUiValue, setUiOption } from "./ui-settings";
 import { type WebMiddleware } from "./runtime-utils";
 import { connectToFetch, type ConnectMiddleware } from "./connect-to-fetch";
@@ -94,7 +96,7 @@ type CdpHttpListEntry = {
 type CdpHttpVersion = { Browser?: string };
 
 type SimctlBootedList = {
-  devices: Record<string, Array<{ udid: string; state: string }>>;
+  devices: Record<string, Array<{ udid: string; state: string; name: string }>>;
 };
 
 type SimctlAllList = {
@@ -111,8 +113,11 @@ type ExecRequestBody = { command?: string };
 export type ServeSimState = ServeSimDeviceState;
 
 const axStreamerCache = createAxStreamerCache();
-// One shared cpu/mem sampler per udid; every /metrics viewer subscribes.
-const metricsSamplerCache = createMetricsSamplerCache();
+// One shared cpu/mem sampler per udid; every /metrics viewer subscribes. Stamp the device name
+// (from the last booted-device snapshot) into the sampler's meta frame when we know it.
+const metricsSamplerCache = createMetricsSamplerCache(
+  (udid) => new MetricsSampler({ udid, deviceName: bootedDeviceName(udid) }),
+);
 
 // Hard cap on the SSE line-assembly buffer for child-process stdout.
 // A malformed log entry without a newline can't grow this beyond 1 MB;
@@ -162,6 +167,11 @@ function isSimulatorUdid(value: string): boolean {
   return /^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}$/i.test(value);
 }
 
+const SCREENSHOT_RESPONSE_HEADERS = {
+  "Access-Control-Allow-Origin": "*",
+  "Cache-Control": "no-store",
+};
+
 /** What to do with a persisted device state when reaping during a grid poll. */
 type StaleStateAction = "keep" | "recycle-self" | "recycle-helper";
 
@@ -237,7 +247,11 @@ export function matchInstalledAppByDisplayName(
 // Cache simctl's booted-device set briefly so per-request cost stays bounded.
 // The middleware runs inside the user's dev server (Metro etc.) and
 // readServeSimStates() is called on every /api and every page load.
-let bootedSnapshot: { at: number; booted: Set<string> | null } = { at: 0, booted: null };
+let bootedSnapshot: { at: number; booted: Set<string> | null; names: Map<string, string> } = {
+  at: 0,
+  booted: null,
+  names: new Map(),
+};
 async function getBootedUdids(): Promise<Set<string> | null> {
   const now = Date.now();
   if (bootedSnapshot.booted && now - bootedSnapshot.at < 1500) {
@@ -260,18 +274,38 @@ async function getBootedUdids(): Promise<Set<string> | null> {
     });
     const data = JSON.parse(stdout) as SimctlBootedList;
     const booted = new Set<string>();
+    const names = new Map<string, string>();
     for (const runtime of Object.values(data.devices)) {
       for (const device of runtime) {
-        if (device.state === "Booted") booted.add(device.udid);
+        if (device.state === "Booted") {
+          // simctl's JSON is uppercase; canonicalize so Map/Set lookups stay case-insensitive.
+          const udid = device.udid.toUpperCase();
+          booted.add(udid);
+          names.set(udid, device.name);
+        }
       }
     }
-    bootedSnapshot = { at: now, booted };
+    bootedSnapshot = { at: now, booted, names };
     return booted;
   } catch {
     return null;
   }
 }
 
+/** Look up a display name in a simctl udid→name map. Keys are stored uppercase. */
+export function deviceNameFromBootedNames(
+  names: Map<string, string>,
+  udid: string,
+): string | undefined {
+  return names.get(udid.toUpperCase());
+}
+
+// Display name for a booted udid, from the last simctl snapshot (refreshed on grid polls).
+// Undefined until the first snapshot lands or if the device isn't booted.
+function bootedDeviceName(udid: string): string | undefined {
+  return deviceNameFromBootedNames(bootedSnapshot.names, udid);
+}
+
 // The device the user most recently opened in Simulator.app, regardless of
 // which tool launched it. Simulator.app persists this as CurrentDeviceUDID, so
 // it's the best signal for "the device this user actually cares about" — we
@@ -1617,7 +1651,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         closeDeviceSession(udid);
         // Drop the snapshot so the next /grid/api call re-queries simctl
         // and prunes any helper bound to this now-shutdown device.
-        bootedSnapshot = { at: 0, booted: null };
+        bootedSnapshot = { at: 0, booted: null, names: new Map() };
         execFile("xcrun", ["simctl", "shutdown", udid], { timeout: 30_000 }, (err, _stdout, stderr) => {
           if (err) {
             res.writeHead(500, { "Content-Type": "application/json" });
@@ -1833,6 +1867,78 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
       return;
     }
 
+    // Still-PNG capture via `simctl io <udid> screenshot`. Consumed by the
+    // Expo Device Hub dashboard's save-screenshot action (the serve-sim web UI
+    // shells out over exec-ws instead, so it never hits this route). Uses the
+    // ?device= selection with a booted-simulator fallback.
+    if (url === base + "/api/screenshot") {
+      if (req.method !== "POST") {
+        res.writeHead(405, {
+          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Content-Type": "text/plain; charset=utf-8",
+        });
+        res.end("method not allowed");
+        return;
+      }
+      let udid = selectedDevice;
+      if (udid && !isSimulatorUdid(udid)) {
+        res.writeHead(400, {
+          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Content-Type": "application/json",
+        });
+        res.end(JSON.stringify({ ok: false, error: "Invalid simulator device ID" }));
+        return;
+      }
+      if (!udid) {
+        const booted = await getBootedUdids();
+        udid = (booted && [...booted][0]) ?? null;
+      }
+      if (!udid) {
+        res.writeHead(400, {
+          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Content-Type": "application/json",
+        });
+        res.end(JSON.stringify({ ok: false, error: "No booted simulator to screenshot" }));
+        return;
+      }
+      // simctl only writes to a file, so round-trip through a private tmp path
+      // instead of streaming; captures are a few MB at most.
+      const file = join(tmpdir(), `serve-sim-screenshot-${randomBytes(8).toString("hex")}.png`);
+      try {
+        await new Promise<void>((resolve, reject) => {
+          execFile(
+            "xcrun",
+            ["simctl", "io", udid, "screenshot", file],
+            { timeout: 5_000 },
+            (err, _stdout, stderr) => {
+              if (err) reject(Object.assign(err, { stderr: stderr?.toString() }));
+              else resolve();
+            },
+          );
+        });
+        const png = await readFile(file);
+        res.writeHead(200, {
+          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Content-Type": "image/png",
+        });
+        res.end(png);
+      } catch (err) {
+        const stderr = (err as { stderr?: unknown }).stderr;
+        const message =
+          (typeof stderr === "string" && stderr.trim()) ||
+          (err instanceof Error ? err.message : String(err));
+        res.writeHead(500, {
+          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Content-Type": "application/json",
+        });
+        res.end(JSON.stringify({ ok: false, error: message }));
+      } finally {
+        // Best-effort cleanup; the PNG is already in memory by now.
+        await unlink(file).catch(() => {});
+      }
+      return;
+    }
+
     // JSON API: recent simulator action log. This is intentionally in-memory and
     // bounded; it is for live debugging/agent observability, not archival audit.
     if (url === base + "/api/event-log") {
@@ -2215,7 +2321,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
     return connectToFetch(connectMiddleware, request);
   }) as SimMiddleware;
 
-  fetchMiddleware.handleWebSocket = createExecWebSocketHandler({
+  const execWebSocketHandler = createExecWebSocketHandler({
     path: `${base}/exec-ws`,
     execToken,
     ssePrefixes: [
@@ -2236,6 +2342,16 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
     },
   });
 
+  fetchMiddleware.handleWebSocket = (request: Request, websocket: UpgradeHandlerWebSocket): boolean => {
+    if (execWebSocketHandler(request, websocket)) return true;
+    if (claimHelperHidSocket(request, websocket, {
+      helperProxyTarget: (rawUrl) => helperProxyTarget(rawUrl, helperPrefix),
+      fallbackDevice: options?.device ?? null,
+      resolveSession: (device) => getDeviceSession(device, streamSettings),
+    })) return true;
+    return false;
+  };
+
   // WebSocket upgrades owned by the preview: the authenticated exec/control
   // channel plus same-origin helper/devtools proxy sockets.
   fetchMiddleware.handleUpgrade = (req: SimReq, socket: Socket, head: Buffer) => {