Repository navigation
feat(workbench): add share-as-image PNG card for event loop traces - #29
Merged
Merged
Conversation
Adds a 'Share as image' action to the step-mode controls that renders the current trace state (at whatever step the visitor is on) as a fixed 1200x630 PNG card via a dedicated Canvas 2D renderer — not a DOM screenshot, so it is independent of the viewport and the visitor's theme. - src/lib/share-image.ts: draws the card straight from LoopState with the app's dark DevTools palette hardcoded (oklch), so exports look identical regardless of the local light/dark preference. Header wordmark + step label, three lanes (Call Stack / Microtask / Macrotask) with the live UI's hint text, a source excerpt centered on the executing line, and a runtimejs.vercel.app watermark. Waits on document.fonts.ready + explicit JetBrains Mono loads before painting. Truncates long lanes with '+N more' (planLane) and ellipsizes long text. sharePng offers, in order: native share sheet → clipboard copy → download fallback, each feature-detected. - Workbench.tsx: 'image' button in the step-mode controls (guarded by the same canStep rule as the other trace controls) with a copied!/shared!/ saved! success indicator and a share_image analytics event. - tests/share-image.test.ts: unit tests for planLane / snippetAround / formatTraceLabel. Verified in headless Chromium: clipboard path yields a 1200x630 dark card with the JS-yellow badge and colored lane titles; light-mode sessions still export dark cards; download fallback produces a valid PNG; fonts load as JetBrains Mono. Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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
2 participants
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
Adds a Share as image action to the step-mode controls in the workbench. It exports the current event-loop state (at whatever step the visitor is paused on) as a fixed 1200×630 PNG card — a snapshot of the trace data, not a screenshot.
How it works
src/lib/share-image.ts: a dedicated Canvas 2D renderer that draws the card directly fromLoopState(no html2canvas/dom-to-image — the app'soklchCSS palette is unreliable under DOM-rasterization and a screenshot would depend on the viewport/zoom).runtime.jswordmark,event loop trace — step N / totallabel, three lanes (Call Stack / Microtask Queue / Macrotask Queue) reusing the live UI's hint text, a monospace source excerpt centered on the currently-executing line, and a smallruntimejs.vercel.appwatermark.oklch(mirrors the app's.darktheme), so exports look identical even when the visitor is in light mode.document.fonts.readyand explicitly loads the JetBrains Mono weights (400/500/700) before painting, so exports don't silently fall back to a system font.+N moreindicator (planLane), and long text is ellipsized to fit the lane width.sharePngfeature-detects, in order —navigator.sharewith the image file (mobile native sheet) →navigator.clipboard.writeviaClipboardItem(desktop paste) → plain download fallback. A button-label success indicator (copied!/shared!/saved!) and ashare_imageanalytics event follow.canSteprule as the other trace-dependent controls.Verification (headless Chromium, dev server)
copied!→ clipboard PNG is 1200×630, corner pixel(21,22,24)(dark bg), JS badge(243,223,35), non-blank (variance 493).(21,22,24)).1200×630,runtimejs-trace-step-60.png.document.fonts.check('400/700 16px "JetBrains Mono"')both true.+N more framespresent, focused code line has the JS-yellow accent bar, and the gap between lane panels and the code panel is clean (no vertical clipping).Checks
npm run typecheck— cleannpm run lint— 0 errors (8 pre-existing react-refresh warnings)npm test— 57 pass / 0 fail (12 new: planLane / snippetAround / formatTraceLabel)npm run build— succeeds (client, SSR, prerender)Scope
Client-side only — no backend, no image hosting/URL shortening. The site-wide
og-image.pngand social meta tags are untouched.