Skip to content

[bug] Penpal connection timeout on free-tier CodeSandbox — trust interstitial not auto-bypassed and preload script not injected #3087

@arogers2

Description

@arogers2

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:

  1. 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',
    // }];
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions