Fix WebWorker compatibility with webpack consumers

@babel/standalone bundles the `debug` package which accesses `window`
in its `useColors()` without a typeof guard. This causes a
"window is not defined" ReferenceError when the simulation worker
initializes in a Web Worker context.

Fix by prepending `self.window = self` to worker bundle assets in the
Vite lib build plugin, aliasing `window` to the Worker global scope.

Also add temporary debug logging to simulation initialization flow
to help diagnose an "Initialization cancelled" error when Petrinaut
is embedded in HASH frontend.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

libs/@hashintel/petrinaut/src/playback/provider.tsx

@@ -414,13 +414,20 @@ export const PlaybackProvider: React.FC<PlaybackProviderProps> = ({
 
   const play: PlaybackContextValue["play"] = async () => {
     const simState = simulationStateRef.current;
+    console.log(
+      "[Petrinaut:Debug] PlaybackProvider.play() called, simState:",
+      simState,
+    );
     const state = stateValuesRef.current;
     const { maxFramesAhead, batchSize } = getPlayModeBackpressure(
       state.playMode,
     );
 
     // Initialize simulation if not run yet
     if (simState === "NotRun") {
+      console.log(
+        "[Petrinaut:Debug] PlaybackProvider.play() -> calling initialize (simState was NotRun)",
+      );
       await initialize({
         seed: Date.now(),
         dt: dtRef.current,
@@ -429,6 +436,9 @@ export const PlaybackProvider: React.FC<PlaybackProviderProps> = ({
       });
       // Initialization complete - start simulation
       // The effect will set playbackState to "Playing" when simulation starts running
+      console.log(
+        "[Petrinaut:Debug] PlaybackProvider.play() -> initialization complete, calling runSimulation()",
+      );
       runSimulation();
       return;
     }

libs/@hashintel/petrinaut/src/simulation/provider.tsx

@@ -101,6 +101,11 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
 
   // Reinitialize when petriNetId changes
   useEffect(() => {
+    console.log(
+      "[Petrinaut:Debug] SimulationProvider: petriNetId changed to",
+      petriNetId,
+      "- calling reset()",
+    );
     workerActions.reset();
     setStateValues(INITIAL_STATE_VALUES);
   }, [petriNetId, workerActions]);
@@ -155,6 +160,9 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
 
     // Delegate to worker (maxTime is immutable once set at initialization)
     // Returns a promise that resolves when initialization is complete
+    console.log(
+      "[Petrinaut:Debug] SimulationProvider.initialize() called, delegating to worker",
+    );
     return workerActions.initialize({
       sdcpn,
       initialMarking: currentState.initialMarking,

libs/@hashintel/petrinaut/src/simulation/worker/use-simulation-worker.ts

@@ -137,6 +137,9 @@ export function useSimulationWorker(): {
 
       switch (message.type) {
         case "ready":
+          console.log(
+            "[Petrinaut:Debug] Worker sent 'ready' message, resolving pending init",
+          );
           setState((prev) => ({
             ...prev,
             status: prev.status === "initializing" ? "ready" : prev.status,
@@ -177,6 +180,10 @@ export function useSimulationWorker(): {
           break;
 
         case "error":
+          console.error(
+            "[Petrinaut:Debug] Worker sent 'error' message:",
+            message.message,
+          );
           setState((prev) => ({
             ...prev,
             status: "error",
@@ -204,6 +211,7 @@ export function useSimulationWorker(): {
     workerRef.current = worker;
 
     return () => {
+      console.log("[Petrinaut:Debug] Worker terminated (useEffect cleanup)");
       worker.terminate();
     };
   }, []);
@@ -226,10 +234,14 @@ export function useSimulationWorker(): {
   }) => {
     // Cancel any pending initialization
     if (pendingInitRef.current) {
+      console.warn(
+        "[Petrinaut:Debug] Cancelling pending initialization - new initialize() called before previous resolved",
+      );
       pendingInitRef.current.reject(new Error("Initialization cancelled"));
       pendingInitRef.current = null;
     }
 
+    console.log("[Petrinaut:Debug] useSimulationWorker.initialize() called");
     setState({
       status: "initializing",
       frames: [],
@@ -287,6 +299,7 @@ export function useSimulationWorker(): {
   };
 
   const reset: WorkerActions["reset"] = () => {
+    console.log("[Petrinaut:Debug] useSimulationWorker.reset() called");
     postMessage({ type: "stop" });
     setState(initialState);
   };

libs/@hashintel/petrinaut/vite.config.ts

@@ -71,16 +71,32 @@ export default defineConfig(({ mode }) => {
 
       // Vite lib mode emits worker URLs as `"" + new URL("assets/...", import.meta.url).href`
       // wrapped in an outer `new URL(...)`. Simplify to `new URL("assets/...", import.meta.url)`.
+      // Also shim `window` in worker chunks: @babel/standalone bundles the `debug` package
+      // which accesses `window` in its `useColors()` without a typeof guard.
       isLibMode && {
-        name: "simplify-worker-url",
+        name: "fix-worker-bundle",
         generateBundle(_, bundle) {
-          for (const chunk of Object.values(bundle)) {
-            if (chunk.type === "chunk") {
-              chunk.code = chunk.code.replace(
+          for (const [fileName, item] of Object.entries(bundle)) {
+            if (item.type === "chunk") {
+              item.code = item.code.replace(
                 /new URL\(\s*\/\* @vite-ignore \*\/\s*"" \+ new URL\(("assets\/[^"]+"), import\.meta\.url\)\.href,\s*import\.meta\.url\s*\)/g,
                 "new URL($1, import.meta.url)",
               );
             }
+
+            // Prepend window shim to worker bundles so libraries that
+            // access `window` (e.g. debug's useColors in @babel/standalone)
+            // work in Web Workers
+            if (fileName.includes("worker")) {
+              if (item.type === "chunk") {
+                item.code = `self.window = self;\n${item.code}`;
+              } else if (
+                item.type === "asset" &&
+                typeof item.source === "string"
+              ) {
+                item.source = `self.window = self;\n${item.source}`;
+              }
+            }
           }
         },
       },