fix: playground worker readiness handshake, resolve CI/deploy race

Worker now sends a `{ ready: true }` signal after module initialization,
and the UI waits for it before enabling the obfuscate button. This
prevents posting messages to a not-yet-loaded ESM worker.

Added `build:browser` step to ci.yml so the deployed site includes the
worker bundle. Restored `paths-ignore` on deploy.yml so CI and Deploy
workflows don't both trigger on packages/ruam/** changes and race for
the deploy-pages concurrency group.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Author: owengregson

.github/workflows/ci.yml

@@ -55,6 +55,11 @@ jobs:
         if: github.ref == 'refs/heads/main'
         run: cp packages/ruam/stats.json apps/web/public/stats.json
 
+      # Build browser worker bundle for the playground
+      - name: Build browser worker bundle
+        if: github.ref == 'refs/heads/main'
+        run: npx turbo run build:browser --filter=ruam
+
       - name: Build site with stats
         if: github.ref == 'refs/heads/main'
         run: npx turbo run build --filter=web

.github/workflows/deploy.yml

@@ -5,8 +5,9 @@ on:
     branches: [main]
     paths:
       - 'apps/web/**'
-      - 'packages/ruam/src/**'
       - '.github/workflows/deploy.yml'
+    paths-ignore:
+      - 'packages/ruam/**'
 
 concurrency:
   group: deploy-pages

apps/web/components/Playground.tsx

@@ -321,14 +321,31 @@ function useWorker() {
 	const workerRef = useRef<Worker | null>(null);
 	const idRef = useRef(0);
 	const [ready, setReady] = useState(false);
+	const [initError, setInitError] = useState<string | null>(null);
 
 	useEffect(() => {
 		const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
 		const w = new Worker(`${basePath}/ruam-worker.mjs`, {
 			type: "module",
 		});
 		workerRef.current = w;
-		setReady(true);
+
+		// Wait for the worker module to signal readiness
+		const onReady = (e: MessageEvent) => {
+			if (e.data.ready) {
+				w.removeEventListener("message", onReady);
+				w.removeEventListener("error", onInitErr);
+				setReady(true);
+			}
+		};
+		const onInitErr = (e: ErrorEvent) => {
+			w.removeEventListener("message", onReady);
+			w.removeEventListener("error", onInitErr);
+			setInitError(e.message || "Worker failed to load");
+		};
+		w.addEventListener("message", onReady);
+		w.addEventListener("error", onInitErr);
+
 		return () => {
 			w.terminate();
 			workerRef.current = null;
@@ -382,7 +399,7 @@ function useWorker() {
 		[]
 	);
 
-	return { ready, obfuscate };
+	return { ready, obfuscate, initError };
 }
 
 // --- Playground component ---
@@ -423,7 +440,7 @@ export default function Playground() {
 		{ current: null }
 	);
 
-	const { ready: workerReady, obfuscate } = useWorker();
+	const { ready: workerReady, obfuscate, initError: workerError } = useWorker();
 
 	const allLoaded = inputLoaded && outputLoaded && workerReady;
 
@@ -814,13 +831,26 @@ export default function Playground() {
 				{!allLoaded && (
 					<div className="fixed inset-0 z-50 flex items-center justify-center bg-void/80 backdrop-blur-sm">
 						<div className="flex flex-col items-center gap-4">
-							<FontAwesomeIcon
-								icon={faSpinner}
-								className="h-8 w-8 animate-spin text-accent"
-							/>
-							<p className="font-mono text-sm text-smoke">
-								Loading Ruam engine...
-							</p>
+							{workerError ? (
+								<>
+									<p className="font-mono text-sm text-alert">
+										Failed to load Ruam engine
+									</p>
+									<p className="max-w-md text-center font-mono text-xs text-ash">
+										{workerError}
+									</p>
+								</>
+							) : (
+								<>
+									<FontAwesomeIcon
+										icon={faSpinner}
+										className="h-8 w-8 animate-spin text-accent"
+									/>
+									<p className="font-mono text-sm text-smoke">
+										Loading Ruam engine...
+									</p>
+								</>
+							)}
 						</div>
 					</div>
 				)}

packages/ruam/src/browser-worker.ts

@@ -2,7 +2,8 @@
  * Web Worker entry point for the Ruam playground.
  *
  * Receives `{ code, options }` messages, runs obfuscation, and posts
- * back `{ result }` or `{ error }` responses.
+ * back `{ result }` or `{ error }` responses. Posts a `{ ready: true }`
+ * message on load so the main thread knows the module is initialized.
  *
  * @module browser-worker
  */
@@ -16,34 +17,19 @@ interface WorkerRequest {
 	options?: VmObfuscationOptions;
 }
 
-interface WorkerResponseOk {
-	id: number;
-	result: string;
-	elapsed: number;
-}
-
-interface WorkerResponseErr {
-	id: number;
-	error: string;
-}
-
 self.onmessage = (e: MessageEvent<WorkerRequest>) => {
 	const { id, code, options } = e.data;
 	const start = performance.now();
 	try {
 		const result = obfuscateCode(code, options);
 		const elapsed = Math.round(performance.now() - start);
-		(self as unknown as Worker).postMessage({
-			id,
-			result,
-			elapsed,
-		} satisfies WorkerResponseOk);
+		(self as unknown as Worker).postMessage({ id, result, elapsed });
 	} catch (err: unknown) {
 		const message =
 			err instanceof Error ? err.message : String(err);
-		(self as unknown as Worker).postMessage({
-			id,
-			error: message,
-		} satisfies WorkerResponseErr);
+		(self as unknown as Worker).postMessage({ id, error: message });
 	}
 };
+
+// Signal that the module has loaded and onmessage is set
+(self as unknown as Worker).postMessage({ ready: true });