Description
When opening a project page in self-hosted Onlook, the canvas iframe fails to establish a Penpal connection with the CodeSandbox sandbox preview. The iframe displays the CodeSandbox free-tier trust interstitial ("You are opening a CodeSandbox preview, do you want to continue?") instead of loading the app directly. Even after manually clicking "Yes, proceed to preview", the Penpal connection times out after 30 seconds.
Root Cause
Two issues contribute to this:
- CSB trust interstitial is not auto-bypassed. There is commented-out code in
apps/web/client/src/server/api/routers/project/project.ts (lines 87-91) that would click the #btn-answer-yes button, but it is not active:
// Optional: Add actions to click the button for CSB free tier
// const _csbFreeActions = [{
// type: 'click',
// selector: '#btn-answer-yes',
// }];
- Preload script not injected into the sandbox. After dismissing the interstitial, the app loads in the iframe but onlook-preload-script.js does not appear to be injected into the sandbox's public/ directory or referenced in the root layout. Without the preload script, the child-side Penpal connect() never fires, so the parent times out.
Steps to Reproduce
Self-host Onlook following the development setup docs
Create or import a Next.js project
Open the project page and navigate to any route (e.g. /browse)
Observe the CSB trust interstitial in the iframe
Click "Yes, proceed to preview"
Wait 30 seconds — Penpal connection times out
Error
Penpal connection timeout after 30000ms
at (src/app/project/[id]/_components/canvas/frame/view.tsx:140:33)
Expected Behavior
The iframe should load the sandbox preview directly (bypassing or auto-accepting the CSB trust interstitial) with the preload script injected, allowing the Penpal handshake to complete successfully.
Environment
Self-hosted Onlook (latest main branch)
Windows 11
Next.js 16.0.7 (Turbopack)
CodeSandbox free tier
Description
When opening a project page in self-hosted Onlook, the canvas iframe fails to establish a Penpal connection with the CodeSandbox sandbox preview. The iframe displays the CodeSandbox free-tier trust interstitial ("You are opening a CodeSandbox preview, do you want to continue?") instead of loading the app directly. Even after manually clicking "Yes, proceed to preview", the Penpal connection times out after 30 seconds.
Root Cause
Two issues contribute to this:
apps/web/client/src/server/api/routers/project/project.ts(lines 87-91) that would click the#btn-answer-yesbutton, but it is not active:Steps to Reproduce
Self-host Onlook following the development setup docs
Create or import a Next.js project
Open the project page and navigate to any route (e.g. /browse)
Observe the CSB trust interstitial in the iframe
Click "Yes, proceed to preview"
Wait 30 seconds — Penpal connection times out
Error
Penpal connection timeout after 30000ms
at (src/app/project/[id]/_components/canvas/frame/view.tsx:140:33)
Expected Behavior
The iframe should load the sandbox preview directly (bypassing or auto-accepting the CSB trust interstitial) with the preload script injected, allowing the Penpal handshake to complete successfully.
Environment
Self-hosted Onlook (latest main branch)
Windows 11
Next.js 16.0.7 (Turbopack)
CodeSandbox free tier