diff --git a/test/client/index.test.js b/test/client/index.test.js
index a1ed197be5..277588af8d 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -35,15 +35,19 @@ describe("index", () => {
     jest.setMock("../../client-src/socket.js", jest.fn());
     socket = require("../../client-src/socket");
 
+    const send = jest.fn();
+
     // overlay
     jest.setMock("../../client-src/overlay.js", {
-      hide: jest.fn(),
-      show: jest.fn(),
+      createOverlay: () => {return {
+        send,
+      }},
       formatProblem: (item) => {
         return { header: "HEADER warning", body: `BODY: ${item}` };
       },
     });
-    overlay = require("../../client-src/overlay");
+    const { createOverlay } = require("../../client-src/overlay");
+    overlay = createOverlay();
 
     // reloadApp
     jest.setMock("../../client-src/utils/reloadApp.js", jest.fn());
@@ -89,13 +93,13 @@ describe("index", () => {
 
     expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
-    expect(overlay.hide).not.toBeCalled();
+    expect(overlay.send).not.toBeCalledWith({ type: "DISMISS" });
 
     // change flags
     onSocketMessage.overlay(true);
     onSocketMessage["still-ok"]();
 
-    expect(overlay.hide).toBeCalled();
+    expect(overlay.send).toHaveBeenCalledWith({ type: "DISMISS" });
   });
 
   test("should run onSocketMessage.progress and onSocketMessage['progress-update']", () => {
@@ -191,9 +195,14 @@ describe("index", () => {
 
     // change flags
     onSocketMessage.overlay({ warnings: true });
-    onSocketMessage.warnings([]);
+    onSocketMessage.warnings(["warning message"]);
 
-    expect(overlay.show).toBeCalled();
+    expect(overlay.send).toHaveBeenCalledTimes(1);
+    expect(overlay.send).toHaveBeenCalledWith({
+      type: "BUILD_ERROR",
+      level: "warning",
+      messages: ["warning message"],
+    });
   });
 
   test("should parse overlay options from resource query", () => {
@@ -202,17 +211,22 @@ describe("index", () => {
       global.__resourceQuery = `?overlay=${encodeURIComponent(
         `{"warnings": false}`
       )}`;
-      overlay.show.mockReset();
+      overlay.send.mockReset();
       socket.mockReset();
       jest.unmock("../../client-src/utils/parseURL.js");
       require("../../client-src");
       onSocketMessage = socket.mock.calls[0][1];
 
       onSocketMessage.warnings(["warn1"]);
-      expect(overlay.show).not.toBeCalled();
+      expect(overlay.send).not.toBeCalled();
 
       onSocketMessage.errors(["error1"]);
-      expect(overlay.show).toBeCalledTimes(1);
+      expect(overlay.send).toBeCalledTimes(1);
+      expect(overlay.send).toHaveBeenCalledWith({
+        type: "BUILD_ERROR",
+        level: "error",
+        messages: ["error1"],
+      });
     });
 
     jest.isolateModules(() => {
@@ -220,17 +234,22 @@ describe("index", () => {
       global.__resourceQuery = `?overlay=${encodeURIComponent(
         `{"errors": false}`
       )}`;
-      overlay.show.mockReset();
+      overlay.send.mockReset();
       socket.mockReset();
       jest.unmock("../../client-src/utils/parseURL.js");
       require("../../client-src");
       onSocketMessage = socket.mock.calls[0][1];
 
       onSocketMessage.errors(["error1"]);
-      expect(overlay.show).not.toBeCalled();
+      expect(overlay.send).not.toBeCalled();
 
       onSocketMessage.warnings(["warn1"]);
-      expect(overlay.show).toBeCalledTimes(1);
+      expect(overlay.send).toBeCalledTimes(1);
+      expect(overlay.send).toHaveBeenCalledWith({
+        type: "BUILD_ERROR",
+        level: "warning",
+        messages: ["warn1"],
+      });
     });
 
     jest.isolateModules(() => {
@@ -238,15 +257,25 @@ describe("index", () => {
       global.__resourceQuery = "?overlay=true";
       jest.unmock("../../client-src/utils/parseURL.js");
       socket.mockReset();
-      overlay.show.mockReset();
+      overlay.send.mockReset();
       require("../../client-src");
       onSocketMessage = socket.mock.calls[0][1];
 
       onSocketMessage.warnings(["warn2"]);
-      expect(overlay.show).toBeCalledTimes(1);
+      expect(overlay.send).toBeCalledTimes(1);
+      expect(overlay.send).toHaveBeenLastCalledWith({
+        type: "BUILD_ERROR",
+        level: "warning",
+        messages: ["warn2"],
+      });
 
       onSocketMessage.errors(["error2"]);
-      expect(overlay.show).toBeCalledTimes(2);
+      expect(overlay.send).toBeCalledTimes(2);
+      expect(overlay.send).toHaveBeenLastCalledWith({
+        type: "BUILD_ERROR",
+        level: "error",
+        messages: ["error2"],
+      });
     });
   });
 
diff --git a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5 b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
index 764980bfe3..5da317a992 100644
--- a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
@@ -51,13 +51,13 @@ Array [
   "[HMR] Cannot apply update. Need to do a full reload!",
   "[HMR] Error: Aborted because ./browser.js is not accepted
 Update propagation: ./browser.js
-    at applyHandler (http://127.0.0.1:8103/browser.js:1044:31)
-    at http://127.0.0.1:8103/browser.js:743:21
+    at applyHandler (http://127.0.0.1:8103/browser.js:1077:31)
+    at http://127.0.0.1:8103/browser.js:776:21
     at Array.map (<anonymous>)
-    at internalApply (http://127.0.0.1:8103/browser.js:742:54)
-    at http://127.0.0.1:8103/browser.js:712:26
-    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:666:48)
-    at http://127.0.0.1:8103/browser.js:710:24",
+    at internalApply (http://127.0.0.1:8103/browser.js:775:54)
+    at http://127.0.0.1:8103/browser.js:745:26
+    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:699:48)
+    at http://127.0.0.1:8103/browser.js:743:24",
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading disabled, Progress disabled, Overlay enabled.",
   "[HMR] Waiting for update signal from WDS...",
   "Hello from the browser",
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index c85c4cf4cc..33fc1dbc70 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -82,36 +82,38 @@ exports[`overlay should not show initially, then show on an error and allow to c
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        data-can-open=\\"true\\"
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-          cursor: pointer;
-        \\"
-      >
-        ERROR in ./foo.js 1:1
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
-        https://webpack.js.org/concepts#loaders &gt; \`;
+        <div
+          data-can-open=\\"true\\"
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+            cursor: pointer;
+          \\"
+        >
+          ERROR in ./foo.js 1:1
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Module parse failed: Unterminated template (1:1) You may need an
+          appropriate loader to handle this file type, currently no loaders are
+          configured to process this file. See
+          https://webpack.js.org/concepts#loaders &gt; \`;
+        </div>
       </div>
     </div>
   </div>
@@ -206,36 +208,38 @@ exports[`overlay should not show initially, then show on an error, then hide on
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        data-can-open=\\"true\\"
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-          cursor: pointer;
-        \\"
-      >
-        ERROR in ./foo.js 1:1
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
-        https://webpack.js.org/concepts#loaders &gt; \`;
+        <div
+          data-can-open=\\"true\\"
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+            cursor: pointer;
+          \\"
+        >
+          ERROR in ./foo.js 1:1
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Module parse failed: Unterminated template (1:1) You may need an
+          appropriate loader to handle this file type, currently no loaders are
+          configured to process this file. See
+          https://webpack.js.org/concepts#loaders &gt; \`;
+        </div>
       </div>
     </div>
   </div>
@@ -330,36 +334,38 @@ exports[`overlay should not show initially, then show on an error, then show oth
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
-        data-can-open=\\"true\\"
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-          cursor: pointer;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR in ./foo.js 1:1
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
-        https://webpack.js.org/concepts#loaders &gt; \`;
+        <div
+          data-can-open=\\"true\\"
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+            cursor: pointer;
+          \\"
+        >
+          ERROR in ./foo.js 1:1
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Module parse failed: Unterminated template (1:1) You may need an
+          appropriate loader to handle this file type, currently no loaders are
+          configured to process this file. See
+          https://webpack.js.org/concepts#loaders &gt; \`;
+        </div>
       </div>
     </div>
   </div>
@@ -417,36 +423,38 @@ exports[`overlay should not show initially, then show on an error, then show oth
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        data-can-open=\\"true\\"
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-          cursor: pointer;
-        \\"
-      >
-        ERROR in ./foo.js 1:1
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
-        https://webpack.js.org/concepts#loaders &gt; \`;a
+        <div
+          data-can-open=\\"true\\"
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+            cursor: pointer;
+          \\"
+        >
+          ERROR in ./foo.js 1:1
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Module parse failed: Unterminated template (1:1) You may need an
+          appropriate loader to handle this file type, currently no loaders are
+          configured to process this file. See
+          https://webpack.js.org/concepts#loaders &gt; \`;a
+        </div>
       </div>
     </div>
   </div>
@@ -570,31 +578,33 @@ exports[`overlay should show a warning after invalidation: overlay html 1`] = `
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        WARNING
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -673,58 +683,60 @@ exports[`overlay should show a warning and error for initial compilation and pro
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        WARNING
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        &lt;strong&gt;strong&lt;/strong&gt;
-      </div>
-    </div>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        ERROR
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          &lt;strong&gt;strong&lt;/strong&gt;
+        </div>
       </div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        &lt;strong&gt;strong&lt;/strong&gt;
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          &lt;strong&gt;strong&lt;/strong&gt;
+        </div>
       </div>
     </div>
   </div>
@@ -803,139 +815,141 @@ exports[`overlay should show a warning and error for initial compilation: overla
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
-      </div>
-    </div>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
-      </div>
-    </div>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        ERROR
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
-    </div>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
-    </div>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
     </div>
   </div>
@@ -1014,31 +1028,33 @@ exports[`overlay should show a warning and hide them after closing connection: o
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1125,31 +1141,33 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1228,31 +1246,33 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1331,31 +1351,33 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1434,31 +1456,33 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1537,42 +1561,44 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        <span
+        <div
           style=\\"
-            font-weight: normal;
-            opacity: 1;
-            color: #transparent;
-            background: #transparent;
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
           \\"
         >
-          <span style=\\"color: #6d7891\\"> 18 |</span>
-          <span style=\\"color: #ffd080\\">Render</span>
-          <span style=\\"color: #ffd080\\">ansi formatted text</span></span
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
         >
+          <span
+            style=\\"
+              font-weight: normal;
+              opacity: 1;
+              color: #transparent;
+              background: #transparent;
+            \\"
+          >
+            <span style=\\"color: #6d7891\\"> 18 |</span>
+            <span style=\\"color: #ffd080\\">Render</span>
+            <span style=\\"color: #ffd080\\">ansi formatted text</span></span
+          >
+        </div>
       </div>
     </div>
   </div>
@@ -1651,31 +1677,33 @@ exports[`overlay should show an error after invalidation: overlay html 1`] = `
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        ERROR
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Error from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -1754,31 +1782,33 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
     </div>
   </div>
@@ -1857,31 +1887,33 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
     </div>
   </div>
@@ -1960,31 +1992,33 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
-      <div
-        style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
-        \\"
-      >
-        ERROR
-      </div>
+    <div>
       <div
         style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
     </div>
   </div>
@@ -2063,31 +2097,33 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(251, 245, 180, 0.1);
-        color: rgb(251, 245, 180);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(251, 245, 180, 0.1);
+          color: rgb(251, 245, 180);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        WARNING
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Warning from compilation
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          WARNING
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Warning from compilation
+        </div>
       </div>
     </div>
   </div>
@@ -2166,31 +2202,33 @@ exports[`overlay should show overlay when Trusted Types are enabled: overlay htm
     >
       ×
     </button>
-    <div
-      style=\\"
-        background-color: rgba(206, 17, 38, 0.1);
-        color: rgb(252, 207, 207);
-        padding: 1rem 1rem 1.5rem;
-      \\"
-    >
+    <div>
       <div
         style=\\"
-          color: rgb(232, 59, 70);
-          font-size: 1.2em;
-          margin-bottom: 1rem;
-          font-family: sans-serif;
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
         \\"
       >
-        ERROR
-      </div>
-      <div
-        style=\\"
-          line-height: 1.5;
-          font-size: 1rem;
-          font-family: Menlo, Consolas, monospace;
-        \\"
-      >
-        Error from compilation. Can't find 'test' module.
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Error from compilation. Can't find 'test' module.
+        </div>
       </div>
     </div>
   </div>