fix(vom): overlay

apps/extension/src/content/__tests__/ControlOverlay.test.tsx

@@ -0,0 +1,64 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ControlOverlay } from "../ControlOverlay";
+
+describe("ControlOverlay", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("keeps page blocker none under automationBypass but Interrupt stays clickable", () => {
+    const { container } = render(
+      <ControlOverlay
+        visible={true}
+        interrupting={false}
+        automationBypass={true}
+        onInterrupt={() => {}}
+      />,
+    );
+
+    const blocker = container.querySelector("[data-slot='control-overlay-blocker']");
+    expect(blocker).toBeTruthy();
+    expect((blocker as HTMLElement).style.pointerEvents).toBe("none");
+
+    const pill = container.querySelector("[data-slot='control-overlay-pill']");
+    expect(pill).toBeTruthy();
+    expect((pill as HTMLElement).style.pointerEvents).toBe("auto");
+
+    const stopBtn = container.querySelector("[data-slot='control-overlay-stop-all']");
+    expect(stopBtn).toBeTruthy();
+    expect((stopBtn as HTMLElement).style.pointerEvents).toBe("auto");
+  });
+
+  it("uses pointer-events auto on blocker when automationBypass is false", () => {
+    const { container } = render(
+      <ControlOverlay
+        visible={true}
+        interrupting={false}
+        automationBypass={false}
+        onInterrupt={() => {}}
+      />,
+    );
+
+    const blocker = container.querySelector("[data-slot='control-overlay-blocker']");
+    expect(blocker).toBeTruthy();
+    expect((blocker as HTMLElement).style.pointerEvents).toBe("auto");
+  });
+
+  it("calls onInterrupt from the stop button", () => {
+    const onInterrupt = vi.fn();
+    const { container } = render(
+      <ControlOverlay
+        visible={true}
+        interrupting={false}
+        automationBypass={false}
+        onInterrupt={onInterrupt}
+      />,
+    );
+
+    const stopBtn = container.querySelector("[data-slot='control-overlay-stop-all']");
+    (stopBtn as HTMLButtonElement).click();
+
+    expect(onInterrupt).toHaveBeenCalledTimes(1);
+  });
+});

apps/extension/src/content/__tests__/HelpRequestOverlay.test.tsx

@@ -5,7 +5,7 @@ import { createElement } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { type HelpRequestData, HelpRequestOverlay } from "../HelpRequestOverlay";
 
-function renderOverlay(req: HelpRequestData) {
+function renderOverlay(req: HelpRequestData | null) {
   return render(
     createElement(I18nextProvider, { i18n }, createElement(HelpRequestOverlay, { request: req })),
   );
@@ -38,6 +38,16 @@ describe("HelpRequestOverlay", () => {
     expect(screen.getByText("Please complete the captcha")).toBeTruthy();
   });
 
+  it("keeps the inactive render stable", () => {
+    const { container, rerender } = renderOverlay(null);
+
+    rerender(
+      createElement(I18nextProvider, { i18n }, createElement(HelpRequestOverlay, { request: null })),
+    );
+
+    expect(container.querySelector("[data-slot='help-request-banner']")).toBeNull();
+  });
+
   it("renders a compact status without full request controls", () => {
     const el = document.createElement("div");
     el.id = "login";