fix(release): allow Chromium sandbox in prerelease E2E (#7090)

* fix(release): allow Chromium sandbox in prerelease E2E

* fix(web): cancel stale preview recovery probes

Author: lefarcen

.github/workflows/release-prerelease.yml

@@ -247,6 +247,17 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Setup Playwright
         run: pnpm -C e2e exec playwright install --with-deps chromium
+      # Ubuntu 24.04 restricts unprivileged user namespaces through AppArmor.
+      # The daemon launches the installed Chromium directly instead of through
+      # Playwright. Restore user namespaces on this ephemeral runner so the real
+      # Chromium sandbox remains enabled rather than disabling that protection.
+      - name: Allow Chromium user namespaces on GitHub Ubuntu
+        shell: bash
+        run: |
+          set -euo pipefail
+          if sysctl kernel.apparmor_restrict_unprivileged_userns >/dev/null 2>&1; then
+            sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0
+          fi
       - name: Prebuild workspace type declarations
         run: |
           pnpm --filter @open-design/daemon build

apps/web/src/components/FileViewer.tsx

@@ -10234,10 +10234,33 @@ function HtmlViewer({
     probeId: string;
     recoverOnFailure: boolean;
   } | null>(null);
+  const srcDocTransportTimeoutsRef = useRef<Set<number>>(new Set());
   const srcDocParsingGraceRef = useRef<{
     generation: string;
     deadline: number;
   } | null>(null);
+  const clearSrcDocTransportTimeouts = useCallback(() => {
+    for (const timeout of srcDocTransportTimeoutsRef.current) {
+      window.clearTimeout(timeout);
+    }
+    srcDocTransportTimeoutsRef.current.clear();
+  }, []);
+  const scheduleSrcDocTransportTimeout = useCallback((callback: () => void, delay: number) => {
+    const timeout = window.setTimeout(() => {
+      srcDocTransportTimeoutsRef.current.delete(timeout);
+      callback();
+    }, delay);
+    srcDocTransportTimeoutsRef.current.add(timeout);
+  }, []);
+  const cancelPendingSrcDocTransport = useCallback(() => {
+    clearSrcDocTransportTimeouts();
+    pendingSrcDocTransportProbeRef.current = null;
+    srcDocParsingGraceRef.current = null;
+  }, [clearSrcDocTransportTimeouts]);
+  useEffect(() => {
+    if (!workspaceActive || mode !== 'preview') cancelPendingSrcDocTransport();
+    return cancelPendingSrcDocTransport;
+  }, [cancelPendingSrcDocTransport, mode, srcDocTransportGeneration, workspaceActive]);
   const replayPreviewBridgeModes = useCallback((target: HTMLIFrameElement | null) => {
     if (!workspaceActive) return;
     const win = target?.contentWindow;
@@ -10355,6 +10378,7 @@ function HtmlViewer({
     if (srcDocRecoveryAttemptedGenerationRef.current === generation) return;
     srcDocRecoveryAttemptedGenerationRef.current = generation;
     const ready = readySrcDocTransportRef.current;
+    cancelPendingSrcDocTransport();
     reportPreviewTransportRecovery({
       surface: 'artifact_preview',
       renderMode: 'srcdoc',
@@ -10371,15 +10395,13 @@ function HtmlViewer({
       viewportHeight: frame?.clientHeight,
       timeoutMs: signal === 'probe_timeout' ? SRC_DOC_READY_PROBE_TIMEOUT_MS : undefined,
     });
-    pendingSrcDocTransportProbeRef.current = null;
-    srcDocParsingGraceRef.current = null;
     verifiedSrcDocTransportRef.current = null;
     readySrcDocTransportRef.current = null;
     activatedSrcDocTransportHtmlRef.current = null;
     setSrcDocShellReady(false);
     setSrcDocRecoveryGeneration(generation);
     setSrcDocTransportResetKey((key) => key + 1);
-  }, [file.kind, file.name, handoffArtifactKind, projectId]);
+  }, [cancelPendingSrcDocTransport, file.kind, file.name, handoffArtifactKind, projectId]);
   const probeSrcDocTransport = useCallback((
     generation: string,
     recoverOnFailure: boolean,
@@ -10401,6 +10423,7 @@ function HtmlViewer({
     // Recovery probes can be shared by the timer and onLoad paths. A passive
     // prewarm probe may target the lazy shell, so the real srcDoc must replace it.
     if (pendingRecoveryProbeMatches) return;
+    clearSrcDocTransportTimeouts();
     srcDocTransportProbeSequenceRef.current += 1;
     const probeId = `${generation}:probe-${srcDocTransportProbeSequenceRef.current}`;
     pendingSrcDocTransportProbeRef.current = {
@@ -10420,7 +10443,7 @@ function HtmlViewer({
       generation,
       probeId,
     }, '*');
-    window.setTimeout(() => {
+    scheduleSrcDocTransportTimeout(() => {
       const pending = pendingSrcDocTransportProbeRef.current;
       if (
         !pending
@@ -10435,7 +10458,11 @@ function HtmlViewer({
         recoverUnacknowledgedSrcDocTransport(generation, 'probe_timeout');
       }
     }, SRC_DOC_READY_PROBE_TIMEOUT_MS);
-  }, [recoverUnacknowledgedSrcDocTransport]);
+  }, [
+    clearSrcDocTransportTimeouts,
+    recoverUnacknowledgedSrcDocTransport,
+    scheduleSrcDocTransportTimeout,
+  ]);
   // Sticky once the srcDoc iframe has materialized the real artifact for the
   // first time (i.e. the first entry into Mark/Edit/Comment/Inspect). Until
   // then the srcDoc iframe stays on the lazy shell — so passive preview never
@@ -10517,6 +10544,7 @@ function HtmlViewer({
         && pending.probeId === data.probeId
         && data.bodyComplete === true
       ) {
+        clearSrcDocTransportTimeouts();
         pendingSrcDocTransportProbeRef.current = null;
         srcDocParsingGraceRef.current = null;
         verifiedSrcDocTransportRef.current = { frame, generation: data.generation };
@@ -10534,6 +10562,7 @@ function HtmlViewer({
           // so keep challenging this generation without remounting and risk
           // running earlier authored side effects twice. A bounded grace
           // period still recovers Chromium's permanently-aborted half-document.
+          clearSrcDocTransportTimeouts();
           pendingSrcDocTransportProbeRef.current = null;
           const now = Date.now();
           const currentGrace = srcDocParsingGraceRef.current;
@@ -10556,7 +10585,7 @@ function HtmlViewer({
             });
             return;
           }
-          window.setTimeout(() => {
+          scheduleSrcDocTransportTimeout(() => {
             if (expectedSrcDocTransportGenerationRef.current !== data.generation) return;
             const verified = verifiedSrcDocTransportRef.current;
             if (verified?.frame === frame && verified.generation === data.generation) return;
@@ -10593,9 +10622,11 @@ function HtmlViewer({
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
   }, [
+    clearSrcDocTransportTimeouts,
     probeSrcDocTransport,
     recoverUnacknowledgedSrcDocTransport,
     replayPreviewBridgeModes,
+    scheduleSrcDocTransportTimeout,
     workspaceActive,
   ]);
   // React can commit a fresh `srcdoc` attribute while Chromium aborts the

apps/web/tests/components/FileViewer.test.tsx

@@ -7469,6 +7469,149 @@ describe('FileViewer tweaks toolbar', () => {
     }
   });
 
+  it('cancels an in-flight srcDoc recovery probe when the viewer unmounts', () => {
+    vi.useFakeTimers();
+    try {
+      const { unmount } = render(
+        <FileViewer
+          projectId="project-1"
+          projectKind="prototype"
+          file={htmlPreviewFile({ name: 'sandbox.html', path: 'sandbox.html' })}
+          liveHtml={'<!doctype html><html><body><script>location.reload()</script></body></html>'}
+        />,
+      );
+
+      const frame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+      const postMessage = vi.spyOn(frame.contentWindow!, 'postMessage');
+      fireEvent.load(frame);
+      expect(postMessage.mock.calls.some(
+        ([message]) => (
+          (message as { type?: unknown }).type === 'od:srcdoc-transport-ready-probe'
+        ),
+      )).toBe(true);
+
+      safetyEventMock.mockClear();
+      unmount();
+      act(() => {
+        vi.runAllTimers();
+      });
+
+      expect(safetyEventMock).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('restarts srcDoc verification after a retained viewer rapidly reactivates', () => {
+    vi.useFakeTimers();
+    try {
+      const renderViewer = (workspaceActive: boolean) => (
+        <FileViewer
+          projectId="project-1"
+          projectKind="prototype"
+          file={htmlPreviewFile({ name: 'sandbox.html', path: 'sandbox.html' })}
+          liveHtml={'<!doctype html><html><body><script>location.reload()</script></body></html>'}
+          workspaceActive={workspaceActive}
+        />
+      );
+      const { rerender } = render(renderViewer(true));
+      const frame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+      const postMessage = vi.spyOn(frame.contentWindow!, 'postMessage');
+      fireEvent.load(frame);
+      const probes = () => postMessage.mock.calls
+        .map(([message]) => message as { type?: unknown; generation?: string; probeId?: string })
+        .filter((message) => message.type === 'od:srcdoc-transport-ready-probe');
+      expect(probes()).toHaveLength(1);
+
+      safetyEventMock.mockClear();
+      rerender(renderViewer(false));
+      rerender(renderViewer(true));
+      act(() => {
+        vi.advanceTimersByTime(1_500);
+      });
+
+      expect(screen.getByTestId('artifact-preview-frame')).toBe(frame);
+      expect(probes()).toHaveLength(2);
+      const reactivationProbe = probes()[1]!;
+      act(() => {
+        window.dispatchEvent(new MessageEvent('message', {
+          source: frame.contentWindow,
+          data: {
+            type: 'od:srcdoc-transport-activated',
+            generation: reactivationProbe.generation,
+            probeId: reactivationProbe.probeId,
+            bodyComplete: true,
+          },
+        }));
+        vi.runAllTimers();
+      });
+
+      expect(safetyEventMock).not.toHaveBeenCalled();
+      expect(screen.getByTestId('artifact-preview-frame')).toBe(frame);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('cancels srcDoc verification in Code mode and restarts it on Preview', () => {
+    vi.useFakeTimers();
+    try {
+      render(
+        <FileViewer
+          projectId="project-1"
+          projectKind="prototype"
+          file={htmlPreviewFile({ name: 'sandbox.html', path: 'sandbox.html' })}
+          liveHtml={'<!doctype html><html><body><script>location.reload()</script></body></html>'}
+        />,
+      );
+
+      const frame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+      const postMessage = vi.spyOn(frame.contentWindow!, 'postMessage');
+      fireEvent.load(frame);
+      const probes = () => postMessage.mock.calls
+        .map(([message]) => message as { type?: unknown; generation?: string; probeId?: string })
+        .filter((message) => message.type === 'od:srcdoc-transport-ready-probe');
+      expect(probes()).toHaveLength(1);
+
+      safetyEventMock.mockClear();
+      fireEvent.click(screen.getByRole('tab', { name: 'Code' }));
+      act(() => {
+        vi.advanceTimersByTime(1_500);
+      });
+      expect(safetyEventMock).not.toHaveBeenCalled();
+
+      fireEvent.click(screen.getByRole('tab', { name: 'Preview' }));
+      const previewFrame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+      const previewPostMessage = vi.spyOn(previewFrame.contentWindow!, 'postMessage');
+      const previewProbes = () => previewPostMessage.mock.calls
+        .map(([message]) => message as { type?: unknown; generation?: string; probeId?: string })
+        .filter((message) => message.type === 'od:srcdoc-transport-ready-probe');
+      const probeCountBeforeRecoveryCheck = previewProbes().length;
+      act(() => {
+        vi.advanceTimersByTime(1_500);
+      });
+      expect(previewProbes()).toHaveLength(probeCountBeforeRecoveryCheck + 1);
+      const previewProbe = previewProbes().at(-1)!;
+      act(() => {
+        window.dispatchEvent(new MessageEvent('message', {
+          source: previewFrame.contentWindow,
+          data: {
+            type: 'od:srcdoc-transport-activated',
+            generation: previewProbe.generation,
+            probeId: previewProbe.probeId,
+            bodyComplete: true,
+          },
+        }));
+        vi.runAllTimers();
+      });
+
+      expect(safetyEventMock).not.toHaveBeenCalled();
+      expect(screen.getByTestId('artifact-preview-frame')).toBe(previewFrame);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('preserves an authored base without minting a project-scoped preview capability', async () => {
     const context = teamWorkspaceContext();
     const authoredBase = '<base href="https://cdn.example/assets/">';

e2e/tests/packaged-smoke-workflow.test.ts

@@ -1549,6 +1549,11 @@ process.stdin.on("end", () => {
     expect(e2eVitestGate).toContain("needs: metadata");
     expect(e2eVitestGate).toContain("ref: ${{ needs.metadata.outputs.commit }}");
     expect(e2eVitestGate).toContain("playwright install --with-deps chromium");
+    expect(e2eVitestGate).toContain("Allow Chromium user namespaces on GitHub Ubuntu");
+    expect(e2eVitestGate).toContain("kernel.apparmor_restrict_unprivileged_userns=0");
+    expect(e2eVitestGate).not.toContain("--no-sandbox");
+    expect(e2eVitestGate.indexOf("kernel.apparmor_restrict_unprivileged_userns=0"))
+      .toBeLessThan(e2eVitestGate.indexOf("pnpm --filter @open-design/e2e test"));
     expect(e2eVitestGate).toContain("pnpm --filter @open-design/e2e test");
 
     const daemonGate = sectionBetween(prerelease, "  daemon_unit_tests:", "  verify:");