fix: auto-accept CSB trust interstitial for free tier (onlook-dev/onl…

[guangyang1206]

…ook#3087)

• Uncomment and enable CSB free tier actions to auto-click #btn-answer-yes
• Add actions parameter to Firecrawl scrapeUrl() call
• This allows the Penpal connection to establish properly on CSB free tier
• Fixes timeout issue where preload script couldn't be injected due to interstitial

Fixes #3087

Description

Problem

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.

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.

Solution

This PR fixes the issue by:

1. Enabling CSB free tier actions: Uncomment and enable the _csbFreeActions array that automatically clicks the #btn-answer-yes button to bypass the trust interstitial.

2. Adding actions to Firecrawl call: Pass the actions parameter to the app.scrapeUrl() call so that Firecrawl will execute these actions (clicking the trust button) before scraping the page.

Changes

• apps/web/client/src/server/api/routers/project/project.ts:
  • Uncomment and enable CSB free tier actions
  • Add actions: csbFreeActions to the scrapeUrl() options

Testing

1. Set up a self-hosted Onlook instance
2. Create or import a Next.js project
3. Open the project page and navigate to any route (e.g., /browse)
4. Verify that the CSB trust interstitial is automatically bypassed
5. Verify that the Penpal connection establishes successfully without timeout

Related Issues

Fixes #3087

Summary by CodeRabbit

• Bug Fixes
  • Improved screenshot functionality to prevent interruption from trust dialogs during capture.

[vercel]

@guangyang1206 is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs-onlook	Skipped		May 22, 2026 5:58am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 60ca44b1-310f-4964-8707-cf67ce58106c

📥 Commits

Reviewing files that changed from the base of the PR and between a242be5 and 1b50f89.

📒 Files selected for processing (1)

• apps/web/client/src/server/api/routers/project/project.ts

---

📝 Walkthrough

Walkthrough

The captureScreenshot function in the project API router now actively dismisses CodeSandbox free-tier trust interstitials by defining Firecrawl scrape actions that click the #btn-answer-yes confirmation button before capturing screenshots. This replaces previously commented-out code.

Changes

CSB Free-Tier Trust Interstitial Dismissal

Layer / File(s)	Summary
Enable CSB trust interstitial bypass in screenshot capture apps/web/client/src/server/api/routers/project/project.ts	The captureScreenshot function defines an actions array containing a click action targeting #btn-answer-yes and passes it to app.scrapeUrl, enabling automatic dismissal of the CodeSandbox free-tier trust interstitial during screenshot capture.

🎯 2 (Simple) | ⏱️ ~5 minutes

🐰 A button so stubborn, it needed a click,
To trust the preview and do the trick!
Now screenshots sail through, no pause for consent,
Free-tier CodeSandbox woes are now spent! 🎬✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main fix: auto-accepting the CodeSandbox free-tier trust interstitial, and references the linked issue #3087.
Description check	✅ Passed	The PR description covers the problem, root cause, solution, specific changes, testing steps, and related issue, meeting the template requirements.
Linked Issues check	✅ Passed	The PR addresses the primary objective from #3087 by uncommenting and enabling CSB free-tier actions and adding them to the scrapeUrl() call, directly fixing the interstitial bypass requirement.
Out of Scope Changes check	✅ Passed	All changes are focused on the stated objective: enabling CSB interstitial auto-bypass in the project.ts file. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}