Add canvas record/PNG capture and restyle the UI#5
Merged
Conversation
Capture feature: - New POST /api/save-media endpoint writes PNG/WebM blobs to outputs/ with a server-generated, millisecond-stamped filename; the ext query param is sanitised and allow-listed (no client-controlled path). Global payload cap raised to 256 MiB for recordings; per-handler limits unchanged. - Right side panel gains Record (toggle) and Capture PNG buttons. - Capture happens inside the sandboxed sketch iframe via the GPU-backed canvas.captureStream + MediaRecorder (video) and canvas.toBlob (PNG); bytes are transferred to the parent over postMessage and uploaded. Keeps the opaque-origin sandbox intact. - Default sketch now draws a sample circle for an immediate preview. UI restyle (no structural/DOM changes): - Warm ivory surfaces, clay accent, refined typography, terminal recolour, focus rings, panel-button styles. - Sketch render keeps square corners (no radius) so the canvas and its recording are never clipped; other surfaces remain rounded. Docs: AGENTS.md updated with the new route, capture flow, and the WebKitGTK / WEBGL-snapshot caveats. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
What & why
Two things: a high-performance canvas capture feature, and an Anthropic-style visual refresh of the editor chrome.
Canvas record + PNG capture
The sketch runs in a sandboxed, opaque-origin iframe, so the parent page cannot reach its canvas. Capture therefore happens inside the iframe using the browser-native, GPU-backed pipeline, and only the finished bytes cross the boundary via
postMessage— no per-frame pixel copying on the main thread.src/main.cpp— newPOST /api/save-media?ext=…endpoint. Writes the binary body tooutputs/with a server-generated, millisecond-stamped filename (…_capture.png/…_recording.webm). Theextis sanitised to lowercase alphanumerics and checked against an allow-list (png/jpg/jpeg/webm/mp4), so the client never controls a path. Global payload cap raised to 256 MiB (recordings); the script handler keeps its own 5 MiB limit.public/index.html— the right collapsible side panel gains Record (toggle) and Capture PNG buttons.public/script.js— an injectedcaptureController(canvas.captureStream+MediaRecorderfor WebM,canvas.toBlobfor PNG), parent-side record/capture logic, and a/api/save-mediauploader. Both outputs land inoutputs/. The default sketch now draws a sample circle so the preview shows content immediately.UI restyle (no structural/DOM changes)
Warm ivory surfaces, clay accent, refined typography, recoloured terminal row, focus rings, and panel-button styles. The sketch render keeps square corners (no border-radius) so the canvas — and any recording/capture of it — is never clipped; every other surface stays rounded.
Reviewer notes
node --checkonscript.js, and a launch smoke test (binds127.0.0.1, starts cleanly).AGENTS.md): WebKitGTKMediaRecordersupport varies by version (the controller feature-detects and reports a clear error); PNG snapshots of WEBGL sketches may be blank because p5 doesn't setpreserveDrawingBuffer(video of WEBGL is fine).🤖 Generated with Claude Code