feat: browser inference + WebContainer sandbox#1
Merged
aryateja2106 merged 8 commits intomainfrom Apr 8, 2026
Merged
Conversation
**Technical Specification step complete.** Here's what was produced: **Spec** (`.zenflow/tasks/new-task-7cad/spec.md`): - Assessed as **hard** — multiple interacting subsystems with cross-cutting concerns - Key finding: `lib/browser-engine.ts` **does not exist** (must be created, not "fixed") - `cleanResponse()` is missing `<think>` block stripping entirely - Documented all new/modified files, interface changes, risk assessment, and verification approach **Plan** (`.zenflow/tasks/new-task-7cad/plan.md`) — broken into 6 implementation steps: 1. **Fix cleanResponse + create browser engine** — `@huggingface/transformers`, new `browser-engine.ts`, `<think>` stripping 2. **Build WebContainer sandbox** — `@webcontainer/api`, singleton boot/exec, React hook with history 3. **Wire up UI** — mode selector, browser translate path, WebContainer execution 4. **Configure COOP/COEP headers** — SharedArrayBuffer headers without breaking Analytics 5. **Deploy to Vercel** — merge, env vars, Cloudflare DNS, smoke test 6. **Write report**
Step complete. Here's what was done: **Created `lib/browser-engine.ts`** — Transformers.js pipeline for in-browser WebGPU inference: - Singleton pipeline pattern with lazy loading (loads on first `generate()` call) - Uses `onnx-community/Qwen2.5-0.5B-Instruct` with `q4f16` quantization on WebGPU - Status event system (`onStatusChange`) for UI progress tracking (idle → downloading → loading → ready → generating) - Handles both chat-mode and plain-mode pipeline output shapes - Pipes output through `cleanResponse()` automatically **Updated `lib/clean-response.ts`** — Added `<think>` block stripping as the first cleaning operation: - Regex `^<think>[\s\S]*?<\/think>\s*` handles empty blocks, multiline content, and trailing whitespace - Runs before markdown fence removal so the pipeline is: strip think → strip fences → strip backticks → strip prompts → strip preambles → strip comments **Fixed pre-existing build issue** — Excluded `relay/` from `tsconfig.json` (it has unresolved `uuid`/`better-sqlite3` type deps that were breaking `next build`). All checks pass: `tsc --noEmit` (0 errors), `eslint` (0 warnings), `next build` (clean).
Step complete. Here's what was done: - **Installed** `@webcontainer/api` - **Created `lib/webcontainer-sandbox.ts`** — singleton WebContainer with `bootSandbox()`, `execCommand()`, `teardownSandbox()`, and `isSandboxReady()`. Mounts a `/workspace` directory and spawns `sh -c` for command execution. - **Created `hooks/use-webcontainer.ts`** — React hook with lazy-loading via dynamic import, auto-boot on first execute, execution state tracking, and command history accumulation. Returns `ExecutionResult` compatible with existing UI. - **Made `auditId` optional** in `types/sandbox.d.ts` — WebContainer exec has no server-side audit trail. - **Updated `components/execution-output.tsx`** — conditionally renders the audit ID line only when present. All checks pass: zero type errors, zero lint errors, clean production build.
Step complete. Here's what was implemented: **`hooks/use-translate.ts`** - Added `InferenceMode` type (`cloud` | `browser` | `auto`), `browserStatus` tracking, and mode-aware translation. Cloud mode calls `/api/translate`, Browser mode uses Transformers.js `generate()` directly, Auto mode uses browser if the model is ready, otherwise falls back to cloud. Browser engine status subscription is lazy (only when mode is non-cloud). **`components/shell-session.tsx`** - Added a segmented mode selector (Cloud/Browser/Auto) with lucide icons next to the input label. Replaced `useSandbox()` with `useWebContainer()` for in-browser command execution. Added browser engine download progress bar (shown during model download/initialization). Added sandbox boot/execute status indicator. Sandbox is enabled by default (`!== "false"` instead of `=== "true"`). WebContainer command history is passed to `ExecutionOutput`. **`components/execution-output.tsx`** - Added `history` prop that renders previous sandbox commands above the current output in a dimmed terminal style with a separator. Added scrollable container (`max-h-[400px]`) for long output. `auditId` remains optional. All checks pass: `tsc --noEmit`, `lint`, and `build`.
Done. Here's what was changed in `next.config.ts`: **COOP/COEP headers** (enables `SharedArrayBuffer` for WebContainers): - `Cross-Origin-Embedder-Policy: credentialless` — less restrictive than `require-corp`, won't block Vercel Analytics or other cross-origin resources that don't require credentials - `Cross-Origin-Opener-Policy: same-origin` — required companion header **CSP updates**: - `connect-src` — added `https://*.webcontainer-api.io`, `https://*.stackblitz.io` (WebContainer origins), `https://va.vercel-scripts.com`, `https://vitals.vercel-insights.com` (Vercel Analytics/SpeedInsights) - `worker-src 'self' blob:` — new directive for Web Workers (Transformers.js + WebContainers) - `child-src 'self' blob:` — new directive for WebContainer iframe/worker contexts The CSP string was also extracted into a `csp` variable for readability. All build checks pass clean.
I've asked a few questions about the deployment strategy. Waiting for your input on the PR approach, Vercel setup, and DNS configuration before proceeding.
# Conflicts: # components/shell-session.tsx # lib/browser-engine.ts # lib/clean-response.ts # next.config.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
lib/browser-engine.ts, updatedcleanResponse()to handle<think>blocks and unclosed tags@webcontainer/api, replacing the Docker relay dependencycredentialless) for SharedArrayBuffer support, updated CSP for WebContainer and Transformers.js originsTest plan
<think>blocks)npx tsc --noEmit && npm run lint && npm run build🤖 Generated with Claude Code