feat(web): Monaco /playground hitting sandbox via Next.js proxy [STORY-006]#16
Merged
feat(web): Monaco /playground hitting sandbox via Next.js proxy [STORY-006]#16
Conversation
…proxy [STORY-006] Adds the first user-facing surface of the sandbox: a `/playground` route in `apps/web` with a Monaco editor (Python / TypeScript), a Run button, and a result panel that surfaces stdout, stderr, exit_code, duration_ms, killed_by, and runtime_version. Wiring: browser → Next.js Route Handler `POST /api/sandbox/run` (re-validates the body against `SandboxRunRequestSchema` and proxies upstream) → Fastify `POST /sandbox/run` → `PistonSandboxProvider`. Configurable via the new `LEARNPRO_API_URL` env (defaults to http://localhost:4000). Adds `SandboxRunRequestInput` (z.input) to `@learnpro/sandbox` so callers can pass the pre-defaults shape without TypeScript complaining about missing `time_limit_ms` / `memory_limit_mb` / `output_limit_bytes`. Re-scoped on pickup: - WebSocket streaming AC -> filed as STORY-059 (Piston's HTTP API is request/response; streaming requires a different sandbox primitive). - Submit button + hidden tests AC -> deferred to STORY-016 (seed problem bank), which will own the problem entity that Submit needs. - Editor-language-follows-problem-language AC -> rewires when STORY-016 lands; until then the playground keeps a user-controlled selector. Tests: 17 new web tests (4 helper + 6 route handler + 7 status). Full sweep green: typecheck 12/12, lint 8/8, tests 48/48, format clean.
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
/playgroundroute inapps/webwith Python/TypeScript selector, Run button, and a result panel surfacingstdout/stderr/exit_code/duration_ms/killed_by/runtime_version.POST /api/sandbox/run(re-validates body withSandboxRunRequestSchema, proxies upstream) → FastifyPOST /sandbox/run→PistonSandboxProvider.LEARNPRO_API_URLenv (defaults tohttp://localhost:4000) for the proxy.SandboxRunRequestInput(z.input) export to@learnpro/sandboxso callers don't have to pre-fill defaults that zod will fill in at the boundary.STORY-006 acceptance criteria
/playgroundand accepts code input.pythonandtypescript; Monaco language mode follows./api/sandbox/run; result panel renders all fields.runSandboxhelper.Test plan
apps/webtests: 17 new (4runSandboxhelper + 6 Route Handler proxy + 7 status formatter) — all pass.packages/sandboxtests: 24 unit/registry pass + 3 integration skipped (gated onPISTON_URL).apps/apitests: 7 pass.pnpm typecheckgreen (12/12).pnpm lintgreen (8/8).pnpm format:checkclean.pnpm dev→ http://localhost:3000/playground → Run a Pythonprintand a TSconsole.log; verify stdout, exit_code=0, duration_ms surface in the result panel. Pending — requires running Piston viainfra/docker/docker-compose.dev.yaml.Notes
apps/web:@monaco-editor/react@^4.6.0,monaco-editor@^0.52.2, plus workspace dep on@learnpro/sandboxandzod@^3.24.1(used at the proxy boundary). Materialized viapnpm installin scope of this Story.SandboxRunRequestSchemaso the Fastify boundary validation isn't the only safety net.