serve-sim 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "serve-sim",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "author": {
     "name": "Evan Bacon",
@@ -51,10 +51,14 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "serve-sim-client": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "bun-plugin-tailwind": "^0.1.2",
     "preact": "^10.29.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "serve-sim-client": "workspace:*",
+    "tailwindcss": "^4.1.7",
     "typescript": "^5.7.0"
   },
   "dependencies": {

package/src/ax.ts

@@ -62,12 +62,12 @@ function normalizeAxTree(roots: RawAxeNode[]): AxSnapshot {
     }
 
     for (let index = 0; index < node.children.length && elements.length < MAX_ELEMENTS; index++) {
-      visit(node.children[index], `${path}.${index}`);
+      visit(node.children[index]!, `${path}.${index}`);
     }
   };
 
   for (let index = 0; index < roots.length && elements.length < MAX_ELEMENTS; index++) {
-    visit(roots[index], String(index));
+    visit(roots[index]!, String(index));
   }
 
   return {

package/src/middleware.ts

@@ -1,10 +1,15 @@
 import { readdirSync, readFileSync, existsSync, unlinkSync } from "fs";
-import { execSync, spawn, exec, execFile, type ChildProcess } from "child_process";
+import { execSync, spawn, exec, execFile, type ChildProcess, type ExecException } from "child_process";
 import { tmpdir } from "os";
 import { join } from "path";
 import { createServer as createNetServer } from "net";
+import type { IncomingMessage, ServerResponse } from "http";
 import { createAxStreamerCache } from "./ax";
 
+type SimReq = IncomingMessage;
+type SimRes = ServerResponse;
+type SimNext = (err?: unknown) => void;
+
 // Injected at build time as a base64-encoded string via `define`
 declare const __PREVIEW_HTML_B64__: string;
 const STATE_DIR = join(tmpdir(), "serve-sim");
@@ -31,6 +36,41 @@ type WebKitBridge = {
   releaseHighlight?(targetId?: string): void;
 };
 
+type InspectWebKitBridgeTarget = {
+  targetId: string;
+  title?: string;
+  appName?: string;
+  url?: string;
+  type?: string;
+  bundleId?: string;
+  inUseByOtherInspector?: boolean;
+  source?: { kind?: string; id?: string };
+};
+
+type CdpHttpListEntry = {
+  id: string;
+  title: string;
+  url: string;
+  type: string;
+  description?: string;
+};
+
+type CdpHttpVersion = { Browser?: string };
+
+type SimctlBootedList = {
+  devices: Record<string, Array<{ udid: string; state: string }>>;
+};
+
+type SimctlAllList = {
+  devices: Record<string, Array<Omit<SimctlDevice, "runtime">>>;
+};
+
+type ShutdownRequestBody = { udid?: string };
+type StartRequestBody = { udid?: string };
+type ReleaseRequestBody = { targetId?: string };
+type HighlightRequestBody = { targetId?: string; on?: boolean };
+type ExecRequestBody = { command?: string };
+
 export interface ServeSimState {
   pid: number;
   port: number;
@@ -123,53 +163,6 @@ export function matchInstalledAppByDisplayName(
   return null;
 }
 
-function shellQuote(value: string): string {
-  return "'" + value.replace(/'/g, "'\\''") + "'";
-}
-
-function installedAppsForDevice(udid: string): Promise<Record<string, InstalledApp>> {
-  return new Promise((resolve) => {
-    exec(
-      `xcrun simctl listapps ${shellQuote(udid)} | plutil -convert json -o - -`,
-      { timeout: 3_000 },
-      (err, stdout) => {
-        if (err || !stdout) return resolve({});
-        try {
-          resolve(JSON.parse(stdout) as Record<string, InstalledApp>);
-        } catch {
-          resolve({});
-        }
-      },
-    );
-  });
-}
-
-async function detectCurrentForegroundApp(
-  udid: string,
-  stateUrl: string,
-): Promise<{ bundleId: string; isReactNative: boolean } | null> {
-  const controller = new AbortController();
-  const timer = setTimeout(() => controller.abort(), 2_000);
-  try {
-    const res = await fetch(`${stateUrl}/ax`, { signal: controller.signal });
-    if (!res.ok) return null;
-    const tree = await res.json() as Array<{ AXLabel?: unknown }>;
-    const displayName = tree?.[0]?.AXLabel;
-    if (typeof displayName !== "string") return null;
-
-    const bundleId = matchInstalledAppByDisplayName(
-      await installedAppsForDevice(udid),
-      displayName,
-    );
-    if (!bundleId || !isUserFacingBundle(bundleId)) return null;
-    return { bundleId, isReactNative: await detectReactNative(udid, bundleId) };
-  } catch {
-    return null;
-  } finally {
-    clearTimeout(timer);
-  }
-}
-
 // 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.
@@ -185,9 +178,7 @@ function getBootedUdids(): Set<string> | null {
       stdio: ["ignore", "pipe", "pipe"],
       timeout: 3_000,
     });
-    const data = JSON.parse(output) as {
-      devices: Record<string, Array<{ udid: string; state: string }>>;
-    };
+    const data = JSON.parse(output) as SimctlBootedList;
     const booted = new Set<string>();
     for (const runtime of Object.values(data.devices)) {
       for (const device of runtime) {
@@ -272,7 +263,7 @@ async function existingInspectWebKitBridge(port: number): Promise<WebKitBridge |
   try {
     const versionRes = await fetch(`${cdpUrl}/json/version`);
     if (!versionRes.ok) return null;
-    const version = await versionRes.json() as { Browser?: string };
+    const version = await versionRes.json() as CdpHttpVersion;
     if (version.Browser !== "Safari/inspect-webkit") return null;
     return {
       port,
@@ -283,13 +274,7 @@ async function existingInspectWebKitBridge(port: number): Promise<WebKitBridge |
         // shape `sim:<udid>:<appId>:<pageId>` and the description string
         // `<deviceLabel> (<bundleId>)` are all we have here.
         const listRes = await fetch(`${cdpUrl}/json/list`);
-        const targets = await listRes.json() as Array<{
-          id: string;
-          title: string;
-          url: string;
-          type: string;
-          description?: string;
-        }>;
+        const targets = await listRes.json() as CdpHttpListEntry[];
         return targets
           .filter((target) => target.id.startsWith("sim:"))
           .map((target) => {
@@ -335,29 +320,35 @@ async function ensureInspectWebKitBridge(): Promise<WebKitBridge> {
         // (and what the DevTools frontend CSP whitelists). `localhost` resolves
         // to ::1 first on some setups, which would leave the iframe's
         // ws://127.0.0.1:9222 connection refused.
-        const server = await startCdpServer({ host: "127.0.0.1", port });
+        const server = await startCdpServer({ host: "127.0.0.1", port }) as Awaited<ReturnType<typeof startCdpServer>> & {
+          highlightTarget?(targetId: string, on: boolean): Promise<void>;
+          releaseHighlight?(targetId?: string): void;
+        };
         return {
           port,
           cdpUrl: `http://127.0.0.1:${port}`,
           async listTargets() {
-            return server.getTargets()
-              .filter((target: any) => target.source?.kind === "simulator")
-              .map((target: any) => ({
-                id: target.targetId,
-                title: target.title || target.appName || target.url || "Untitled",
-                url: /^https?:/i.test(target.url) ? target.url : "about:blank",
-                type: target.type || "page",
-                appName: target.appName,
-                bundleId: target.bundleId,
-                udid: target.source?.id,
-                inUseByOtherInspector: !!target.inUseByOtherInspector,
-              }));
+            return (server.getTargets() as InspectWebKitBridgeTarget[])
+              .filter((target) => target.source?.kind === "simulator")
+              .map((target) => {
+                const url = target.url ?? "";
+                return {
+                  id: target.targetId,
+                  title: target.title || target.appName || url || "Untitled",
+                  url: /^https?:/i.test(url) ? url : "about:blank",
+                  type: target.type || "page",
+                  appName: target.appName,
+                  bundleId: target.bundleId,
+                  udid: target.source?.id,
+                  inUseByOtherInspector: !!target.inUseByOtherInspector,
+                };
+              });
           },
           highlightTarget: server.highlightTarget?.bind(server),
           releaseHighlight: server.releaseHighlight?.bind(server),
         };
-      } catch (err: any) {
-        if (err?.code === "EADDRINUSE") {
+      } catch (err) {
+        if ((err as NodeJS.ErrnoException)?.code === "EADDRINUSE") {
           const existing = await existingInspectWebKitBridge(port);
           if (existing) return existing;
           continue;
@@ -414,9 +405,7 @@ function listAllSimulators(): SimctlDevice[] {
       stdio: ["ignore", "pipe", "ignore"],
       timeout: 3_000,
     });
-    const data = JSON.parse(output) as {
-      devices: Record<string, Array<Omit<SimctlDevice, "runtime">>>;
-    };
+    const data = JSON.parse(output) as SimctlAllList;
     const out: SimctlDevice[] = [];
     for (const [runtime, devices] of Object.entries(data.devices)) {
       // Only iOS (skip watchOS / tvOS / visionOS for the grid MVP — the helper
@@ -433,10 +422,6 @@ function listAllSimulators(): SimctlDevice[] {
   }
 }
 
-function deviceNameFor(udid: string): string | null {
-  return listAllSimulators().find((d) => d.udid === udid)?.name ?? null;
-}
-
 // Default per-simulator footprint when we have no running sim to measure
 // from — a fresh booted iOS sim with one app launched typically sits in
 // the 1.2–1.8 GB range. Used as a fallback only.
@@ -513,7 +498,7 @@ function readSimulatorMemoryUsage(): { perUdid: Record<string, number>; totalByt
       const rssKb = Number(line.split(/\s+/, 1)[0]);
       if (!Number.isFinite(rssKb)) continue;
       const bytes = rssKb * 1024;
-      const udid = m[1].toUpperCase();
+      const udid = m[1]!.toUpperCase();
       perUdid[udid] = (perUdid[udid] ?? 0) + bytes;
       totalBytes += bytes;
     }
@@ -598,7 +583,7 @@ export interface SimMiddlewareOptions {
 export function simMiddleware(options?: SimMiddlewareOptions) {
   const base = (options?.basePath ?? "/.sim").replace(/\/+$/, "");
 
-  return (req: any, res: any, next?: () => void) => {
+  return (req: SimReq, res: SimRes, next?: SimNext) => {
     const rawUrl: string = req.url ?? "";
     const qIndex = rawUrl.indexOf("?");
     const url = qIndex === -1 ? rawUrl : rawUrl.slice(0, qIndex);
@@ -743,7 +728,7 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
       });
       req.on("end", () => {
         let udid = "";
-        try { udid = JSON.parse(body).udid ?? ""; } catch {}
+        try { udid = (JSON.parse(body) as ShutdownRequestBody).udid ?? ""; } catch {}
         if (!/^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}$/i.test(udid)) {
           res.writeHead(400, { "Content-Type": "application/json" });
           res.end(JSON.stringify({ ok: false, error: "Invalid or missing udid" }));
@@ -776,7 +761,7 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
       });
       req.on("end", () => {
         let udid = "";
-        try { udid = JSON.parse(body).udid ?? ""; } catch {}
+        try { udid = (JSON.parse(body) as StartRequestBody).udid ?? ""; } catch {}
         if (!/^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}$/i.test(udid)) {
           res.writeHead(400, { "Content-Type": "application/json" });
           res.end(JSON.stringify({ ok: false, error: "Invalid or missing udid" }));
@@ -875,10 +860,10 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
     // Optional body { targetId } releases just one; empty body releases all.
     if (url === base + "/devtools/release" && req.method === "POST") {
       let body = "";
-      req.on("data", (chunk) => (body += chunk));
+      req.on("data", (chunk: Buffer) => (body += chunk));
       req.on("end", async () => {
         try {
-          const parsed = body ? JSON.parse(body) as { targetId?: string } : {};
+          const parsed: ReleaseRequestBody = body ? JSON.parse(body) : {};
           const bridge = await ensureInspectWebKitBridge();
           bridge.releaseHighlight?.(parsed.targetId);
           res.writeHead(200, { "Content-Type": "application/json" });
@@ -898,10 +883,10 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
     // { targetId: string, on: boolean }.
     if (url === base + "/devtools/highlight" && req.method === "POST") {
       let body = "";
-      req.on("data", (chunk) => (body += chunk));
+      req.on("data", (chunk: Buffer) => (body += chunk));
       req.on("end", async () => {
         try {
-          const { targetId, on } = JSON.parse(body || "{}") as { targetId?: string; on?: boolean };
+          const { targetId, on } = JSON.parse(body || "{}") as HighlightRequestBody;
           if (!targetId) {
             res.writeHead(400, { "Content-Type": "application/json" });
             res.end(JSON.stringify({ error: "Missing targetId" }));
@@ -971,7 +956,7 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
       req.on("end", () => {
         let command = "";
         try {
-          command = JSON.parse(body).command ?? "";
+          command = (JSON.parse(body) as ExecRequestBody).command ?? "";
         } catch {}
         if (!command) {
           res.writeHead(400, { "Content-Type": "application/json" });
@@ -983,7 +968,7 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
           res.end(JSON.stringify({
             stdout: stdout.toString(),
             stderr: stderr.toString(),
-            exitCode: err ? (err as any).code ?? 1 : 0,
+            exitCode: err ? (err as ExecException).code ?? 1 : 0,
           }));
         });
       });
@@ -1051,6 +1036,31 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
       });
       res.write(":\n\n");
 
+      // Bootstrap: SpringBoard's log feed is edge-triggered, so a fresh
+      // subscriber would otherwise see nothing until the user re-foregrounds
+      // an app (the bug: tools couldn't reconnect after a page reload). Ask
+      // the helper's AX bridge for the current frontmost app via
+      // `proc_pidpath`+Info.plist resolution and emit it before tailing.
+      let lastBundle = "";
+      void (async () => {
+        try {
+          const ctrl = new AbortController();
+          const timer = setTimeout(() => ctrl.abort(), 1500);
+          const r = await fetch(`http://127.0.0.1:${state.port}/foreground`, { signal: ctrl.signal });
+          clearTimeout(timer);
+          if (!r.ok) return;
+          const info = await r.json() as { bundleId?: string; pid?: number };
+          if (!info.bundleId || !isUserFacingBundle(info.bundleId)) return;
+          if (res.writableEnded) return;
+          lastBundle = info.bundleId;
+          const isReactNative = await detectReactNative(udid, info.bundleId);
+          if (res.writableEnded) return;
+          res.write("data: " + JSON.stringify({ bundleId: info.bundleId, pid: info.pid, isReactNative }) + "\n\n");
+        } catch {
+          // Helper may be coming up — log tail will fill in once anything moves.
+        }
+      })();
+
       const child: ChildProcess = spawn("xcrun", [
         "simctl", "spawn", udid, "log", "stream",
         "--style", "ndjson",
@@ -1059,28 +1069,17 @@ export function simMiddleware(options?: SimMiddlewareOptions) {
         'process == "SpringBoard" AND eventMessage CONTAINS "Setting process visibility to: Foreground"',
       ], { stdio: ["ignore", "pipe", "ignore"] });
 
-      let lastBundle = "";
-      let hasEmitted = false;
       let closed = false;
       const emitApp = async (bundleId: string, pid?: number) => {
         if (!isUserFacingBundle(bundleId)) return;
         if (bundleId === lastBundle) return;
         lastBundle = bundleId;
-        hasEmitted = true;
         const isReactNative = await detectReactNative(udid, bundleId);
         if (!closed) {
           res.write("data: " + JSON.stringify({ bundleId, pid, isReactNative }) + "\n\n");
         }
       };
 
-      // The seed loses to any live log event — a SpringBoard log that fires
-      // while the AX call is in flight is fresher than the AX snapshot.
-      detectCurrentForegroundApp(udid, state.url).then((app) => {
-        if (!app || closed || hasEmitted) return;
-        lastBundle = app.bundleId;
-        hasEmitted = true;
-        res.write("data: " + JSON.stringify(app) + "\n\n");
-      });
 
       let buf = "";
       child.stdout!.on("data", (chunk: Buffer) => {