feat: add replay command for interactive DOM session recording#1074
Open
LyricalString wants to merge 4 commits intovercel-labs:mainfrom
Open
feat: add replay command for interactive DOM session recording#1074LyricalString wants to merge 4 commits intovercel-labs:mainfrom
replay command for interactive DOM session recording#1074LyricalString wants to merge 4 commits intovercel-labs:mainfrom
Conversation
…rrweb Adds a new `replay` command alongside the existing `record` (video) command. While `record` produces WebM/MP4 videos via ffmpeg, `replay` captures DOM mutations via rrweb and generates self-contained HTML files with an interactive player (play/pause, timeline, 1x-8x speed). Commands: - `replay start` -- inject rrweb into the page, auto re-inject on navigation - `replay stop [path]` -- extract events + CSS vars, generate replay HTML - `replay status` -- show event count Key features: - Uses Page.addScriptToEvaluateOnNewDocument for automatic re-injection across navigations (no manual re-inject needed) - Extracts resolved CSS custom properties so var(--x) works in replay - inlineImages + collectFonts + inlineStylesheet for high-fidelity replay - No ffmpeg dependency required - Self-contained HTML output -- open in any browser Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
Contributor
|
@LyricalString is attempting to deploy a commit to the Vercel Labs Team on Vercel. A member of the Team first needs to authorize it. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Prevents broken HTML when recorded pages contain script closing tags in their DOM content. The </script> sequence inside the embedded JSON would prematurely close the <script> block. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
- Enable skipInactive by default so idle periods are compressed - Add "Export as video" button that uses MediaRecorder + canvas capture to download the replay as a WebM file - Start with autoPlay: false so user controls when playback begins Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
Three fixes based on real-world testing: 1. Gap compression: compress idle periods (navigation redirects, network waits) in event timestamps before generating the HTML. This prevents rrweb-player from showing grey inactive zones in the timeline that block UI controls (a known rrweb-player bug). 2. Video export: replace broken html2canvas approach with Screen Capture API (getDisplayMedia). Auto-stops when replay finishes and downloads the WebM file. The iframe sandbox makes canvas-based capture impossible. 3. Player size: scale from 1920x1080 to 1280x720 so the full replay fits on screen with title, controls, and export button visible. Also removes skipInactive/inactiveThreshold props since gap compression makes them unnecessary. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
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
Adds a
replaycommand that records browser sessions as interactive HTML replays using rrweb. This complements the existingrecordcommand (video via ffmpeg) with a lightweight, inspectable alternative.Commands
replay startreplay stop [path]replay statusWhy
Video recording (
record) requires ffmpeg and produces passive video files. DOM replay captures the actual DOM mutations, producing:How it works
replay startfetches rrweb from CDN, injects it viaRuntime.evaluate, and registers it for auto re-injection viaPage.addScriptToEvaluateOnNewDocumentinlineImages,collectFonts, andinlineStylesheetenabledreplay stopextracts events viaRuntime.evaluate, resolves CSS custom properties for accurate replay ofvar(--x)references, and generates a self-contained HTML file with rrweb-playerExample
agent-browser open https://app.example.com agent-browser replay start agent-browser click @e3 agent-browser fill @e5 "hello" agent-browser replay stop ./my-session open ./my-session.htmlFiles changed
cli/src/native/replay.rs-- New module: ReplayState, rrweb injection, CSS extraction, HTML generationcli/src/native/mod.rs-- Module registrationcli/src/native/actions.rs-- DaemonState field, dispatch arms, handler functionscli/src/commands.rs-- CLI parsing forreplay start|stop|statuscli/src/output.rs-- Help text for the new command.changeset/add-replay-command.md-- Minor version bumpTests
Demo
Here's a real-world recording of a login flow + chat interaction, captured with
replay start/replay stopand exported to video from the generated HTML player:session-replay.4.webm
The replay HTML includes: