From 69ca6e857ba998b2151a98a4c31c0581c7eb2893 Mon Sep 17 00:00:00 2001
From: Anders Hafreager <anders.hafreager@cognite.com>
Date: Mon, 7 Sep 2026 14:19:45 +0200
Subject: [PATCH 1/2] Fix Safari engine isolation and surface startup failures

---
 e2e/engine-isolation.spec.ts         | 64 ++++++++++++++++++++++++++++
 e2e/helpers.ts                       |  1 +
 e2e/static-server.mjs                | 36 ++++++++++++++++
 index.html                           | 29 +++++++++++--
 playwright.config.ts                 |  1 +
 playwright.safari.config.ts          | 21 +++++++++
 src/components/Simulation.tsx        | 35 ++++++++++-----
 src/shell/ExamplesScreen.tsx         | 15 +++++--
 src/shell/HomeScreen.tsx             | 18 ++++++--
 src/shell/Sidebar.tsx                | 31 +++++++++++---
 src/shell/modals/NewProjectModal.tsx | 15 +++++--
 src/store/app.ts                     |  5 +++
 src/wasm/LammpsWorkerProxy.test.ts   | 41 ++++++++++++++++++
 src/wasm/LammpsWorkerProxy.ts        | 26 +++++++++--
 src/wasm/lammps.worker.ts            |  2 +
 vite.config.ts                       |  9 ++--
 16 files changed, 311 insertions(+), 38 deletions(-)
 create mode 100644 e2e/engine-isolation.spec.ts
 create mode 100644 e2e/static-server.mjs
 create mode 100644 playwright.safari.config.ts
 create mode 100644 src/wasm/LammpsWorkerProxy.test.ts

diff --git a/e2e/engine-isolation.spec.ts b/e2e/engine-isolation.spec.ts
new file mode 100644
index 00000000..12879f65
--- /dev/null
+++ b/e2e/engine-isolation.spec.ts
@@ -0,0 +1,64 @@
+import { test, expect } from "@playwright/test";
+import { gotoApp, waitForEngine, waitRunCompleted } from "./helpers";
+
+test("static hosting isolates a fresh visit, loads images and runs the engine", async ({
+  page,
+}) => {
+  await gotoApp(page);
+  await expect
+    .poll(() => page.evaluate(() => window.crossOriginIsolated))
+    .toBe(true);
+  await waitForEngine(page);
+  await page.getByTestId("nav-examples").click();
+  const card = page.getByTestId("library-example-2D-lj-fluid");
+  await expect(card).toBeVisible();
+  // Use a second origin with CORS but no CORP to exercise external thumbnails.
+  const img = card.locator("img");
+  await img.evaluate((element: HTMLImageElement) => {
+    element.src = element.src.replace("localhost", "127.0.0.1");
+  });
+  await expect
+    .poll(() =>
+      img.evaluate(
+        (element: HTMLImageElement) =>
+          element.complete && element.naturalWidth > 0,
+      ),
+    )
+    .toBe(true);
+  await page.getByTestId("library-quick-2D-lj-fluid").click();
+  await waitRunCompleted(page);
+  // Simulate a client still controlled by the previous credentialless policy.
+  await page.evaluate(async () => {
+    navigator.serviceWorker.controller!.postMessage({
+      type: "coepCredentialless",
+      value: true,
+    });
+    // Wait until the controller has applied the message before navigating.
+    for (let attempt = 0; attempt < 20; attempt++) {
+      const response = await fetch(location.href);
+      if (
+        response.headers.get("Cross-Origin-Embedder-Policy") ===
+        "credentialless"
+      )
+        return;
+    }
+    throw new Error("Could not seed the old service-worker policy");
+  });
+  await page.reload();
+  await expect(page.getByTestId("shell-root")).toBeVisible();
+  await waitForEngine(page);
+  expect(await page.evaluate(() => window.crossOriginIsolated)).toBe(true);
+});
+
+test("unavailable isolation shows an error instead of an endless loading chip", async ({
+  browser,
+}) => {
+  const context = await browser.newContext({ serviceWorkers: "block" });
+  const page = await context.newPage();
+  await page.goto("http://localhost:5200/atomify/");
+  await expect(page.getByTestId("engine-error-chip")).toContainText(
+    "requires cross-origin isolation",
+  );
+  await expect(page.getByTestId("engine-loading-chip")).toHaveCount(0);
+  await context.close();
+});
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index 6dbc9c6f..235009a0 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -46,6 +46,7 @@ export async function waitForEngine(page: Page): Promise<void> {
   await expect(page.getByTestId("engine-loading-chip")).toHaveCount(0, {
     timeout: ENGINE_TIMEOUT,
   });
+  await expect(page.getByTestId("engine-error-chip")).toHaveCount(0);
 }
 
 /** Create a blank project through the New Project modal. */
diff --git a/e2e/static-server.mjs b/e2e/static-server.mjs
new file mode 100644
index 00000000..710294c6
--- /dev/null
+++ b/e2e/static-server.mjs
@@ -0,0 +1,36 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { resolve, extname } from "node:path";
+
+const root = resolve("dist");
+const types = {
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".wasm": "application/wasm",
+};
+createServer(async (req, res) => {
+  const pathname = new URL(req.url, "http://localhost").pathname;
+  const path = resolve(
+    root,
+    pathname.replace(/^\/atomify\//, "") || "index.html",
+  );
+  if (!path.startsWith(root + "/")) {
+    res.writeHead(403).end();
+    return;
+  }
+  try {
+    const body = await readFile(path);
+    res.writeHead(200, {
+      "Content-Type": types[extname(path)] || "application/octet-stream",
+      "Cache-Control": "no-store",
+      "Access-Control-Allow-Origin": "*",
+    });
+    res.end(body);
+  } catch {
+    res.writeHead(404).end();
+  }
+}).listen(5200);
diff --git a/index.html b/index.html
index 9ebf635b..ea5df0e4 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@
     Cross-origin isolation for SharedArrayBuffer, which the atomify
     (KOKKOS/pthreads) wasm build requires. GitHub Pages can't set COOP/COEP
     response headers, so this service-worker shim injects them on the client
-    (the page reloads once on first visit). COEP credentialless keeps
-    cross-origin subresources (imported example files, etc.) working without
-    requiring CORP headers. In dev, vite sets the same headers directly.
+    (the page reloads once on first visit). COEP require-corp works in
+    Safari, Chromium and Firefox. Cross-origin resources opt in via CORS or
+    CORP. In dev, vite sets the same headers directly.
     Must load before the app module.
   -->
   <!--
@@ -50,7 +50,7 @@
         "sw-reset",
       );
       window.coi = {
-        coepCredentialless: () => true,
+        coepCredentialless: () => false,
         shouldRegister: () => !resetting,
       };
       if (resetting) {
@@ -88,6 +88,27 @@
     })();
   </script>
   <script src="coi-serviceworker.min.js"></script>
+  <script>
+    // Existing clients may have loaded under the old credentialless policy.
+    // The shim above posts the new policy to their controller; navigate once
+    // to pick it up. Bound recovery so unsupported contexts cannot loop.
+    if (!new URLSearchParams(location.search).has("sw-reset")) {
+      const key = "atomify-coep-recovery";
+      try {
+        if (window.crossOriginIsolated) {
+          sessionStorage.removeItem(key);
+        } else if (
+          navigator.serviceWorker?.controller &&
+          !sessionStorage.getItem(key)
+        ) {
+          sessionStorage.setItem(key, "1");
+          location.reload();
+        }
+      } catch (_) {
+        // Storage can be disabled; the app will show the isolation error.
+      }
+    }
+  </script>
 </head>
 
 <body>
diff --git a/playwright.config.ts b/playwright.config.ts
index f4937352..88f64e4d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -16,6 +16,7 @@ import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
   testDir: "e2e",
+  testIgnore: "engine-isolation.spec.ts",
   // Budget for engine load (~120 s worst case) + the run itself.
   timeout: 420_000,
   expect: { timeout: 15_000 },
diff --git a/playwright.safari.config.ts b/playwright.safari.config.ts
new file mode 100644
index 00000000..2b10a16b
--- /dev/null
+++ b/playwright.safari.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// Build first: npm run build. No server isolation headers: exercise the
+// same service-worker bootstrap used on GitHub Pages, including first visits.
+export default defineConfig({
+  testDir: "e2e",
+  testMatch: "engine-isolation.spec.ts",
+  timeout: 240_000,
+  expect: { timeout: 15_000 },
+  workers: 1,
+  use: { baseURL: "http://localhost:5200", trace: "retain-on-failure" },
+  projects: [
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+  ],
+  webServer: {
+    command: "node e2e/static-server.mjs",
+    url: "http://localhost:5200/atomify/",
+    reuseExistingServer: false,
+  },
+});
diff --git a/src/components/Simulation.tsx b/src/components/Simulation.tsx
index 62f97aa1..c62bab8d 100644
--- a/src/components/Simulation.tsx
+++ b/src/components/Simulation.tsx
@@ -34,6 +34,9 @@ const SimulationComponent = () => {
   );
   const selectedMenu = useStoreState((state) => state.app.selectedMenu);
   const setLammps = useStoreActions((actions) => actions.simulation.setLammps);
+  const setEngineError = useStoreActions(
+    (actions) => actions.app.setEngineError,
+  );
   const setStatus = useStoreActions((actions) => actions.app.setStatus);
   const runPostTimestep = useStoreActions(
     (actions) => actions.processing.runPostTimestep,
@@ -168,6 +171,16 @@ const SimulationComponent = () => {
       return;
     }
     loadStartedRef.current = true;
+    setEngineError(undefined);
+    if (
+      !window.crossOriginIsolated ||
+      typeof SharedArrayBuffer === "undefined"
+    ) {
+      setEngineError(
+        "The simulation engine requires cross-origin isolation. Reload the page; if this persists, check browser settings or try another browser.",
+      );
+      return;
+    }
     setStatus({
       title: "Downloading LAMMPS ...",
       text: "",
@@ -182,15 +195,16 @@ const SimulationComponent = () => {
     // interface; the store and modifier/render pipeline keep reading data
     // through the usual heap-pointer path, now backed by the streamed bridge
     // heap instead of a real main-thread module.
-    const proxy = new LammpsWorkerProxy();
-    proxy.onPrint(onPrint);
-    // Surface worker/LAMMPS errors in the console panel rather than only the
-    // devtools console.
-    proxy.onError((message) => onPrint(message));
-    proxyRef.current = proxy;
-    proxy
-      .load()
-      .then(() => {
+    Promise.resolve()
+      .then(async () => {
+        const proxy = new LammpsWorkerProxy();
+        proxy.onPrint(onPrint);
+        proxy.onError((message) => onPrint(message));
+        proxyRef.current = proxy;
+        await proxy.load();
+        return proxy;
+      })
+      .then((proxy) => {
         track("WASM.Load");
         setStatus({
           title: "Downloading LAMMPS ...",
@@ -206,6 +220,7 @@ const SimulationComponent = () => {
         // The module failed to load — don't leave the UI stuck on the
         // "Downloading LAMMPS …" spinner with no explanation.
         const message = error instanceof Error ? error.message : String(error);
+        setEngineError(message);
         onPrint(`Failed to load LAMMPS: ${message}`);
         setStatus(undefined);
         notification.error({
@@ -213,7 +228,7 @@ const SimulationComponent = () => {
           description: message,
         });
       });
-  }, [onPrint, setLammps, setStatus]);
+  }, [onPrint, setLammps, setStatus, setEngineError]);
   return <></>;
 };
 export default SimulationComponent;
diff --git a/src/shell/ExamplesScreen.tsx b/src/shell/ExamplesScreen.tsx
index 5d7c07c9..be6d8c85 100644
--- a/src/shell/ExamplesScreen.tsx
+++ b/src/shell/ExamplesScreen.tsx
@@ -26,11 +26,20 @@ const ExampleLibraryCard = ({ example }: { example: Example }) => {
           position: "relative",
           aspectRatio: "16 / 9",
           background: "var(--viewport)",
-          backgroundImage: `url("${example.imageUrl}")`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
         }}
       >
+        <img
+          crossOrigin="anonymous"
+          src={example.imageUrl}
+          alt=""
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
         {category && (
           <span
             style={{
diff --git a/src/shell/HomeScreen.tsx b/src/shell/HomeScreen.tsx
index 148d6911..7da81dee 100644
--- a/src/shell/HomeScreen.tsx
+++ b/src/shell/HomeScreen.tsx
@@ -39,11 +39,21 @@ const ExampleCard = ({ example }: { example: Example }) => {
           position: "relative",
           aspectRatio: "16 / 9",
           background: "var(--viewport)",
-          backgroundImage: `url("${example.imageUrl}")`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
         }}
-      />
+      >
+        <img
+          crossOrigin="anonymous"
+          src={example.imageUrl}
+          alt=""
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
+      </div>
       <div style={{ padding: "12px 14px 14px" }}>
         <div
           style={{
diff --git a/src/shell/Sidebar.tsx b/src/shell/Sidebar.tsx
index 768b8c7e..0f619d9d 100644
--- a/src/shell/Sidebar.tsx
+++ b/src/shell/Sidebar.tsx
@@ -27,7 +27,10 @@ import { ColorDot, PulseDot } from "./ui";
 /** Persisted collapse choice — the rail should survive reloads. */
 const SIDEBAR_COLLAPSED_KEY = "atomify_sidebar_collapsed";
 
-const navButtonStyle = (active: boolean, collapsed: boolean): CSSProperties => ({
+const navButtonStyle = (
+  active: boolean,
+  collapsed: boolean,
+): CSSProperties => ({
   display: "flex",
   alignItems: "center",
   justifyContent: collapsed ? "center" : "flex-start",
@@ -77,6 +80,7 @@ const Sidebar = () => {
   const projects = useStoreState((state) => state.projects.projects);
   const activeRun = useStoreState((state) => state.projects.activeRun);
   const theme = useStoreState((state) => state.settings.theme);
+  const engineError = useStoreState((state) => state.app.engineError);
   const status = useStoreState((state) => state.app.status);
   const setTheme = useStoreActions((actions) => actions.settings.setTheme);
   const setScreen = useStoreActions((actions) => actions.projects.setScreen);
@@ -354,10 +358,20 @@ const Sidebar = () => {
 
       {!ui.engineReady && (
         <div
-          data-testid="engine-loading-chip"
+          data-testid={
+            engineError ? "engine-error-chip" : "engine-loading-chip"
+          }
+          role={engineError ? "alert" : "status"}
           title={
             collapsed
-              ? `Engine loading…${status ? ` ${Math.ceil(100 * status.progress)}%` : ""}`
+              ? engineError
+                ? `Engine unavailable: ${engineError}`
+                : `Engine loading…${status ? ` ${Math.ceil(100 * status.progress)}%` : ""}`
+              : undefined
+          }
+          aria-label={
+            collapsed && engineError
+              ? `Engine unavailable: ${engineError}`
               : undefined
           }
           style={{
@@ -374,11 +388,16 @@ const Sidebar = () => {
             color: "var(--text-2)",
           }}
         >
-          <PulseDot size={7} />
+          {engineError ? (
+            <span aria-hidden="true">!</span>
+          ) : (
+            <PulseDot size={7} />
+          )}
           {!collapsed && (
             <span style={{ flex: 1 }}>
-              Engine loading…
-              {status ? ` ${Math.ceil(100 * status.progress)}%` : ""}
+              {engineError
+                ? `Engine unavailable: ${engineError}`
+                : `Engine loading…${status ? ` ${Math.ceil(100 * status.progress)}%` : ""}`}
             </span>
           )}
         </div>
diff --git a/src/shell/modals/NewProjectModal.tsx b/src/shell/modals/NewProjectModal.tsx
index de0473d6..8d217da5 100644
--- a/src/shell/modals/NewProjectModal.tsx
+++ b/src/shell/modals/NewProjectModal.tsx
@@ -444,11 +444,20 @@ const NewProjectModal = ({
                         borderRadius: 7,
                         overflow: "hidden",
                         background: "var(--viewport)",
-                        backgroundImage: `url("${example.imageUrl}")`,
-                        backgroundSize: "cover",
-                        backgroundPosition: "center",
                       }}
                     >
+                      <img
+                        crossOrigin="anonymous"
+                        src={example.imageUrl}
+                        alt=""
+                        style={{
+                          position: "absolute",
+                          inset: 0,
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                        }}
+                      />
                       {category && (
                         <span
                           style={{
diff --git a/src/store/app.ts b/src/store/app.ts
index d0c6a748..5e1ff06e 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -15,6 +15,8 @@ export interface SimulationFile {
 export interface AppModel {
   selectedMenu: string;
   status?: Status;
+  engineError?: string;
+  setEngineError: Action<AppModel, string | undefined>;
   preferredView?: string;
   selectedFile?: SimulationFile;
   setSelectedMenu: Action<AppModel, string>;
@@ -24,6 +26,9 @@ export interface AppModel {
 }
 
 export const appModel: AppModel = {
+  setEngineError: action((state, error) => {
+    state.engineError = error;
+  }),
   // The shell drives this legacy gate ("view" streams particles into the
   // renderer); embedded mode and its menu are gone.
   selectedMenu: "examples",
diff --git a/src/wasm/LammpsWorkerProxy.test.ts b/src/wasm/LammpsWorkerProxy.test.ts
new file mode 100644
index 00000000..86796107
--- /dev/null
+++ b/src/wasm/LammpsWorkerProxy.test.ts
@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { LammpsWorkerProxy } from "./LammpsWorkerProxy";
+
+class FakeWorker extends EventTarget {
+  postMessage = vi.fn();
+  onmessage = null;
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("worker startup", () => {
+  function setup() {
+    const worker = new FakeWorker();
+    vi.stubGlobal("Worker", class { constructor() { return worker; } });
+    return { worker, proxy: new LammpsWorkerProxy() };
+  }
+  it("resolves when the engine reports ready", async () => {
+    const { worker, proxy } = setup();
+    const ready = proxy.load();
+    worker.dispatchEvent(new MessageEvent("message", { data: { type: "ready" } }));
+    await expect(ready).resolves.toBeUndefined();
+  });
+  it("rejects on native worker errors instead of waiting forever", async () => {
+    const { worker, proxy } = setup();
+    const ready = proxy.load();
+    worker.dispatchEvent(new ErrorEvent("error", { message: "Cannot clone shared memory" }));
+    await expect(ready).rejects.toThrow("Cannot clone shared memory");
+  });
+  it("rejects on message deserialization failure", async () => {
+    const { worker, proxy } = setup();
+    const ready = proxy.load();
+    worker.dispatchEvent(new MessageEvent("messageerror"));
+    await expect(ready).rejects.toThrow("could not receive a message");
+  });
+  it("rejects on explicit engine startup failures", async () => {
+    const { worker, proxy } = setup();
+    const ready = proxy.load();
+    worker.dispatchEvent(new MessageEvent("message", { data: { type: "error", message: "WASM failed" } }));
+    await expect(ready).rejects.toThrow("WASM failed");
+  });
+});
diff --git a/src/wasm/LammpsWorkerProxy.ts b/src/wasm/LammpsWorkerProxy.ts
index 22072511..45276cfd 100644
--- a/src/wasm/LammpsWorkerProxy.ts
+++ b/src/wasm/LammpsWorkerProxy.ts
@@ -426,20 +426,40 @@ export class LammpsWorkerProxy implements LammpsWeb {
   load(): Promise<void> {
     if (!this.readyPromise) {
       this.readyPromise = new Promise<void>((resolve, reject) => {
+        const cleanup = () => {
+          this.worker.removeEventListener("message", onMessage);
+          this.worker.removeEventListener("error", onError);
+          this.worker.removeEventListener("messageerror", onMessageError);
+        };
+        const onError = (event: ErrorEvent) => {
+          cleanup();
+          reject(new Error(event.message || "The simulation worker failed to start."));
+        };
+        const onMessageError = () => {
+          cleanup();
+          reject(new Error("The simulation worker could not receive a message."));
+        };
         const onMessage = (ev: MessageEvent<WorkerEvent>) => {
           if (ev.data.type === "ready") {
-            this.worker.removeEventListener("message", onMessage);
+            cleanup();
             resolve();
           } else if (ev.data.type === "error") {
             // A failure during load() posts `error` instead of `ready`; reject
             // so the caller can show it, rather than hanging forever at
             // "Downloading LAMMPS…".
-            this.worker.removeEventListener("message", onMessage);
+            cleanup();
             reject(new Error(ev.data.message));
           }
         };
         this.worker.addEventListener("message", onMessage);
-        this.send({ type: "load" });
+        this.worker.addEventListener("error", onError);
+        this.worker.addEventListener("messageerror", onMessageError);
+        try {
+          this.send({ type: "load" });
+        } catch (error) {
+          cleanup();
+          reject(error);
+        }
       });
     }
     return this.readyPromise;
diff --git a/src/wasm/lammps.worker.ts b/src/wasm/lammps.worker.ts
index a41057e2..b35c03b2 100644
--- a/src/wasm/lammps.worker.ts
+++ b/src/wasm/lammps.worker.ts
@@ -78,6 +78,8 @@ ctx.addEventListener("unhandledrejection", (e: PromiseRejectionEvent) => {
     reason instanceof Error ? reason.message : String(reason ?? "");
   if (message.includes("function signature mismatch")) {
     e.preventDefault();
+  } else {
+    post({ type: "error", message });
   }
 });
 
diff --git a/vite.config.ts b/vite.config.ts
index c0791add..51620d6d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,14 +62,13 @@ export default defineConfig({
     host: true, // Allow access from local network (0.0.0.0)
     port: 3000,
     // Cross-origin isolation, required for SharedArrayBuffer — the atomify
-    // (KOKKOS/pthreads) wasm build needs it. COEP: credentialless keeps
-    // cross-origin subresources (e.g. imported example files) working
-    // without requiring CORP headers on them. On GitHub Pages, which can't
+    // (KOKKOS/pthreads) wasm build needs it. COEP: require-corp also works
+    // in Safari. Cross-origin resources opt in via CORS or CORP. On GitHub Pages, which can't
     // set response headers, the coi-serviceworker shim in index.html applies
     // the equivalent headers instead.
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "credentialless",
+      "Cross-Origin-Embedder-Policy": "require-corp",
     },
     proxy: {
       "/chapters": {
@@ -84,7 +83,7 @@ export default defineConfig({
   preview: {
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "credentialless",
+      "Cross-Origin-Embedder-Policy": "require-corp",
     },
   },
   // WASM files served from public/ folder, no special config needed

From cd19405d48e29b89cb5e68c27f83d1055c0789e0 Mon Sep 17 00:00:00 2001
From: Anders Hafreager <anders.hafreager@cognite.com>
Date: Mon, 7 Sep 2026 14:47:59 +0200
Subject: [PATCH 2/2] Mark Safari unsupported instead of adding engine
 compatibility

---
 e2e/engine-isolation.spec.ts         | 63 ++++++++++++++--------------
 index.html                           | 29 ++-----------
 src/components/Simulation.tsx        | 11 +++++
 src/shell/ExamplesScreen.tsx         | 15 ++-----
 src/shell/HomeScreen.tsx             | 18 ++------
 src/shell/modals/NewProjectModal.tsx | 15 ++-----
 src/wasm/LammpsWorkerProxy.test.ts   | 41 ------------------
 src/wasm/LammpsWorkerProxy.ts        | 26 ++----------
 src/wasm/lammps.worker.ts            |  2 -
 vite.config.ts                       |  9 ++--
 10 files changed, 65 insertions(+), 164 deletions(-)
 delete mode 100644 src/wasm/LammpsWorkerProxy.test.ts

diff --git a/e2e/engine-isolation.spec.ts b/e2e/engine-isolation.spec.ts
index 12879f65..0fa5044b 100644
--- a/e2e/engine-isolation.spec.ts
+++ b/e2e/engine-isolation.spec.ts
@@ -1,9 +1,11 @@
 import { test, expect } from "@playwright/test";
 import { gotoApp, waitForEngine, waitRunCompleted } from "./helpers";
 
-test("static hosting isolates a fresh visit, loads images and runs the engine", async ({
+test("supported browsers isolate a fresh visit and run the engine", async ({
   page,
+  browserName,
 }) => {
+  test.skip(browserName === "webkit", "Safari is explicitly unsupported");
   await gotoApp(page);
   await expect
     .poll(() => page.evaluate(() => window.crossOriginIsolated))
@@ -12,38 +14,8 @@ test("static hosting isolates a fresh visit, loads images and runs the engine",
   await page.getByTestId("nav-examples").click();
   const card = page.getByTestId("library-example-2D-lj-fluid");
   await expect(card).toBeVisible();
-  // Use a second origin with CORS but no CORP to exercise external thumbnails.
-  const img = card.locator("img");
-  await img.evaluate((element: HTMLImageElement) => {
-    element.src = element.src.replace("localhost", "127.0.0.1");
-  });
-  await expect
-    .poll(() =>
-      img.evaluate(
-        (element: HTMLImageElement) =>
-          element.complete && element.naturalWidth > 0,
-      ),
-    )
-    .toBe(true);
   await page.getByTestId("library-quick-2D-lj-fluid").click();
   await waitRunCompleted(page);
-  // Simulate a client still controlled by the previous credentialless policy.
-  await page.evaluate(async () => {
-    navigator.serviceWorker.controller!.postMessage({
-      type: "coepCredentialless",
-      value: true,
-    });
-    // Wait until the controller has applied the message before navigating.
-    for (let attempt = 0; attempt < 20; attempt++) {
-      const response = await fetch(location.href);
-      if (
-        response.headers.get("Cross-Origin-Embedder-Policy") ===
-        "credentialless"
-      )
-        return;
-    }
-    throw new Error("Could not seed the old service-worker policy");
-  });
   await page.reload();
   await expect(page.getByTestId("shell-root")).toBeVisible();
   await waitForEngine(page);
@@ -52,7 +24,12 @@ test("static hosting isolates a fresh visit, loads images and runs the engine",
 
 test("unavailable isolation shows an error instead of an endless loading chip", async ({
   browser,
+  browserName,
 }) => {
+  test.skip(
+    browserName === "webkit",
+    "Safari has a dedicated unsupported message",
+  );
   const context = await browser.newContext({ serviceWorkers: "block" });
   const page = await context.newPage();
   await page.goto("http://localhost:5200/atomify/");
@@ -62,3 +39,27 @@ test("unavailable isolation shows an error instead of an endless loading chip",
   await expect(page.getByTestId("engine-loading-chip")).toHaveCount(0);
   await context.close();
 });
+
+test("Safari shows an unsupported message without downloading the engine", async ({
+  page,
+  browserName,
+}) => {
+  test.skip(browserName !== "webkit", "Safari-specific behavior");
+  const engineRequests: string[] = [];
+  page.on("request", (request) => {
+    if (request.url().includes("lammps-atomify"))
+      engineRequests.push(request.url());
+  });
+  await gotoApp(page);
+  await expect(page.getByTestId("engine-error-chip")).toContainText(
+    "Safari is not supported",
+  );
+  await expect(page.getByTestId("engine-error-chip")).toContainText(
+    "Chrome or Firefox on a desktop computer",
+  );
+  await expect(page.getByTestId("engine-loading-chip")).toHaveCount(0);
+  await page.getByTestId("nav-examples").click();
+  await expect(page.getByTestId("library-example-2D-lj-fluid")).toBeVisible();
+  await expect(page.getByTestId("library-quick-2D-lj-fluid")).toBeDisabled();
+  expect(engineRequests).toEqual([]);
+});
diff --git a/index.html b/index.html
index ea5df0e4..9ebf635b 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@
     Cross-origin isolation for SharedArrayBuffer, which the atomify
     (KOKKOS/pthreads) wasm build requires. GitHub Pages can't set COOP/COEP
     response headers, so this service-worker shim injects them on the client
-    (the page reloads once on first visit). COEP require-corp works in
-    Safari, Chromium and Firefox. Cross-origin resources opt in via CORS or
-    CORP. In dev, vite sets the same headers directly.
+    (the page reloads once on first visit). COEP credentialless keeps
+    cross-origin subresources (imported example files, etc.) working without
+    requiring CORP headers. In dev, vite sets the same headers directly.
     Must load before the app module.
   -->
   <!--
@@ -50,7 +50,7 @@
         "sw-reset",
       );
       window.coi = {
-        coepCredentialless: () => false,
+        coepCredentialless: () => true,
         shouldRegister: () => !resetting,
       };
       if (resetting) {
@@ -88,27 +88,6 @@
     })();
   </script>
   <script src="coi-serviceworker.min.js"></script>
-  <script>
-    // Existing clients may have loaded under the old credentialless policy.
-    // The shim above posts the new policy to their controller; navigate once
-    // to pick it up. Bound recovery so unsupported contexts cannot loop.
-    if (!new URLSearchParams(location.search).has("sw-reset")) {
-      const key = "atomify-coep-recovery";
-      try {
-        if (window.crossOriginIsolated) {
-          sessionStorage.removeItem(key);
-        } else if (
-          navigator.serviceWorker?.controller &&
-          !sessionStorage.getItem(key)
-        ) {
-          sessionStorage.setItem(key, "1");
-          location.reload();
-        }
-      } catch (_) {
-        // Storage can be disabled; the app will show the isolation error.
-      }
-    }
-  </script>
 </head>
 
 <body>
diff --git a/src/components/Simulation.tsx b/src/components/Simulation.tsx
index c62bab8d..12e94ab9 100644
--- a/src/components/Simulation.tsx
+++ b/src/components/Simulation.tsx
@@ -172,6 +172,17 @@ const SimulationComponent = () => {
     }
     loadStartedRef.current = true;
     setEngineError(undefined);
+    // Safari and other WebKit browsers (including iOS browsers) cannot run
+    // our credentialless / SharedArrayBuffer engine configuration.
+    const isWebKit =
+      /AppleWebKit/i.test(navigator.userAgent) &&
+      !/Chrome\/|Chromium\/|Edg\/|OPR\/|Android/i.test(navigator.userAgent);
+    if (isWebKit) {
+      setEngineError(
+        "Safari is not supported for simulations. Use Chrome or Firefox on a desktop computer.",
+      );
+      return;
+    }
     if (
       !window.crossOriginIsolated ||
       typeof SharedArrayBuffer === "undefined"
diff --git a/src/shell/ExamplesScreen.tsx b/src/shell/ExamplesScreen.tsx
index be6d8c85..5d7c07c9 100644
--- a/src/shell/ExamplesScreen.tsx
+++ b/src/shell/ExamplesScreen.tsx
@@ -26,20 +26,11 @@ const ExampleLibraryCard = ({ example }: { example: Example }) => {
           position: "relative",
           aspectRatio: "16 / 9",
           background: "var(--viewport)",
+          backgroundImage: `url("${example.imageUrl}")`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
         }}
       >
-        <img
-          crossOrigin="anonymous"
-          src={example.imageUrl}
-          alt=""
-          style={{
-            position: "absolute",
-            inset: 0,
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-          }}
-        />
         {category && (
           <span
             style={{
diff --git a/src/shell/HomeScreen.tsx b/src/shell/HomeScreen.tsx
index 7da81dee..148d6911 100644
--- a/src/shell/HomeScreen.tsx
+++ b/src/shell/HomeScreen.tsx
@@ -39,21 +39,11 @@ const ExampleCard = ({ example }: { example: Example }) => {
           position: "relative",
           aspectRatio: "16 / 9",
           background: "var(--viewport)",
+          backgroundImage: `url("${example.imageUrl}")`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
         }}
-      >
-        <img
-          crossOrigin="anonymous"
-          src={example.imageUrl}
-          alt=""
-          style={{
-            position: "absolute",
-            inset: 0,
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-          }}
-        />
-      </div>
+      />
       <div style={{ padding: "12px 14px 14px" }}>
         <div
           style={{
diff --git a/src/shell/modals/NewProjectModal.tsx b/src/shell/modals/NewProjectModal.tsx
index 8d217da5..de0473d6 100644
--- a/src/shell/modals/NewProjectModal.tsx
+++ b/src/shell/modals/NewProjectModal.tsx
@@ -444,20 +444,11 @@ const NewProjectModal = ({
                         borderRadius: 7,
                         overflow: "hidden",
                         background: "var(--viewport)",
+                        backgroundImage: `url("${example.imageUrl}")`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
                       }}
                     >
-                      <img
-                        crossOrigin="anonymous"
-                        src={example.imageUrl}
-                        alt=""
-                        style={{
-                          position: "absolute",
-                          inset: 0,
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover",
-                        }}
-                      />
                       {category && (
                         <span
                           style={{
diff --git a/src/wasm/LammpsWorkerProxy.test.ts b/src/wasm/LammpsWorkerProxy.test.ts
deleted file mode 100644
index 86796107..00000000
--- a/src/wasm/LammpsWorkerProxy.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { LammpsWorkerProxy } from "./LammpsWorkerProxy";
-
-class FakeWorker extends EventTarget {
-  postMessage = vi.fn();
-  onmessage = null;
-}
-
-afterEach(() => vi.unstubAllGlobals());
-
-describe("worker startup", () => {
-  function setup() {
-    const worker = new FakeWorker();
-    vi.stubGlobal("Worker", class { constructor() { return worker; } });
-    return { worker, proxy: new LammpsWorkerProxy() };
-  }
-  it("resolves when the engine reports ready", async () => {
-    const { worker, proxy } = setup();
-    const ready = proxy.load();
-    worker.dispatchEvent(new MessageEvent("message", { data: { type: "ready" } }));
-    await expect(ready).resolves.toBeUndefined();
-  });
-  it("rejects on native worker errors instead of waiting forever", async () => {
-    const { worker, proxy } = setup();
-    const ready = proxy.load();
-    worker.dispatchEvent(new ErrorEvent("error", { message: "Cannot clone shared memory" }));
-    await expect(ready).rejects.toThrow("Cannot clone shared memory");
-  });
-  it("rejects on message deserialization failure", async () => {
-    const { worker, proxy } = setup();
-    const ready = proxy.load();
-    worker.dispatchEvent(new MessageEvent("messageerror"));
-    await expect(ready).rejects.toThrow("could not receive a message");
-  });
-  it("rejects on explicit engine startup failures", async () => {
-    const { worker, proxy } = setup();
-    const ready = proxy.load();
-    worker.dispatchEvent(new MessageEvent("message", { data: { type: "error", message: "WASM failed" } }));
-    await expect(ready).rejects.toThrow("WASM failed");
-  });
-});
diff --git a/src/wasm/LammpsWorkerProxy.ts b/src/wasm/LammpsWorkerProxy.ts
index 45276cfd..22072511 100644
--- a/src/wasm/LammpsWorkerProxy.ts
+++ b/src/wasm/LammpsWorkerProxy.ts
@@ -426,40 +426,20 @@ export class LammpsWorkerProxy implements LammpsWeb {
   load(): Promise<void> {
     if (!this.readyPromise) {
       this.readyPromise = new Promise<void>((resolve, reject) => {
-        const cleanup = () => {
-          this.worker.removeEventListener("message", onMessage);
-          this.worker.removeEventListener("error", onError);
-          this.worker.removeEventListener("messageerror", onMessageError);
-        };
-        const onError = (event: ErrorEvent) => {
-          cleanup();
-          reject(new Error(event.message || "The simulation worker failed to start."));
-        };
-        const onMessageError = () => {
-          cleanup();
-          reject(new Error("The simulation worker could not receive a message."));
-        };
         const onMessage = (ev: MessageEvent<WorkerEvent>) => {
           if (ev.data.type === "ready") {
-            cleanup();
+            this.worker.removeEventListener("message", onMessage);
             resolve();
           } else if (ev.data.type === "error") {
             // A failure during load() posts `error` instead of `ready`; reject
             // so the caller can show it, rather than hanging forever at
             // "Downloading LAMMPS…".
-            cleanup();
+            this.worker.removeEventListener("message", onMessage);
             reject(new Error(ev.data.message));
           }
         };
         this.worker.addEventListener("message", onMessage);
-        this.worker.addEventListener("error", onError);
-        this.worker.addEventListener("messageerror", onMessageError);
-        try {
-          this.send({ type: "load" });
-        } catch (error) {
-          cleanup();
-          reject(error);
-        }
+        this.send({ type: "load" });
       });
     }
     return this.readyPromise;
diff --git a/src/wasm/lammps.worker.ts b/src/wasm/lammps.worker.ts
index b35c03b2..a41057e2 100644
--- a/src/wasm/lammps.worker.ts
+++ b/src/wasm/lammps.worker.ts
@@ -78,8 +78,6 @@ ctx.addEventListener("unhandledrejection", (e: PromiseRejectionEvent) => {
     reason instanceof Error ? reason.message : String(reason ?? "");
   if (message.includes("function signature mismatch")) {
     e.preventDefault();
-  } else {
-    post({ type: "error", message });
   }
 });
 
diff --git a/vite.config.ts b/vite.config.ts
index 51620d6d..c0791add 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,13 +62,14 @@ export default defineConfig({
     host: true, // Allow access from local network (0.0.0.0)
     port: 3000,
     // Cross-origin isolation, required for SharedArrayBuffer — the atomify
-    // (KOKKOS/pthreads) wasm build needs it. COEP: require-corp also works
-    // in Safari. Cross-origin resources opt in via CORS or CORP. On GitHub Pages, which can't
+    // (KOKKOS/pthreads) wasm build needs it. COEP: credentialless keeps
+    // cross-origin subresources (e.g. imported example files) working
+    // without requiring CORP headers on them. On GitHub Pages, which can't
     // set response headers, the coi-serviceworker shim in index.html applies
     // the equivalent headers instead.
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "require-corp",
+      "Cross-Origin-Embedder-Policy": "credentialless",
     },
     proxy: {
       "/chapters": {
@@ -83,7 +84,7 @@ export default defineConfig({
   preview: {
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "require-corp",
+      "Cross-Origin-Embedder-Policy": "credentialless",
     },
   },
   // WASM files served from public/ folder, no special config needed