Claude Code: inline live and scrubbable Replay players

[BLamy]

What

When Claude opens a browser with playwright-cli (raw, $PWCLI, or scripts/browser-open.js), the replayio Claude Code plugin now shows that run as a player inside the transcript, in place of the Bash call's result:

• Live while the browser runs.
• Scrubbable once it closes: a seek bar (click or drag), ⏮ / −10s / ▶ / +10s, and Open in browser.
• ⤓ Save video writes <project>/.replay/live/<start>-<session>.mp4 and .rrweb.json.
• /replayio lists recordings across sessions. /replayio library opens a page with all of them, and /replayio save <session|latest> saves one.
• Recordings are kept under ~/.claude/replayio-live/, so players in scrollback keep working after a restart.

How

• hooks/register.tsx is a Claude Code hooks module. It is listed under modules in hooks/hooks.json, next to the existing PostToolUse/Stop command hooks, and claude plugin validate accepts both in one file.
• On a browser open, it runs playwright-cli run-code with a script that adds a binding and an init script. Every document in the session then streams @replayio-app-building/session-recorder packets (rrweb, network, storage, websockets) through the playwright daemon, so page CSP can't block them.
• live/relay.mjs is a zero-dependency local server. It stores recordings, plays them with rrweb's Replayer in headless Replay Chromium, and screencasts PNG frames that the module draws as an inline Image. MP4 export seeks frame by frame and pipes the frames to ffmpeg.
• live/tracer.js and live/vendor/ are committed build output from live/build.mjs (npm install && npm run build): session-recorder 0.17.1 and rrweb 2.0.0-alpha.18.
• registry.json ships the new files with the claude-pro item, and the version is bumped to 0.2.0.

Also in this PR

• Claude Code marketplace: .claude-plugin/marketplace.json. Install with claude plugin marketplace add replayio/plugins and claude plugin install replayio@replayio. Tested from this branch in a clean HOME.

• Replay recording links: when a browser closes, the player and the library link it to the Replay Chromium recordings made while it ran, with Upload, Open in Replay, and Debug with Claude (pre-fills a Replay MCP prompt).

• No extra browser to install: players replay in headless Replay Chromium with recording off (checked: no extra local recordings are created).

• MP4s are opt-in: browser-open.js and the lifecycle hook capture video only with --output, REPLAYIO_MP4_PATH, or REPLAYIO_RECORD_VIDEO=1. Previously every raw playwright-cli open started capture.

• Signed-out uploads don't block: replayio upload signed out starts an interactive sign-in and waits for it.

  • The Stop hook and browser-close.js now skip the upload and leave recordings local.
  • The player's Upload starts replayio login and returns.
  • SKILL.md tells Claude to run the sign-in in the background, then stop and wait for the user to confirm.

• Replay MCP cards: every Replay MCP tool result (all 30 tools) is drawn as a card in place of its transcript row, following the replay-mcpui PRD. Each card has:

  • a header with status and scope;
  • 1–3 facts and one evidence preview (tables, stack frames, source with hit counts, bar charts, component trees, the screenshot);
  • collapsible consumed-data, related and raw sections;
  • actions: open in Replay, pre-fill the next step, copy.

  Cards are parsed from the markdown Claude reads, with no extra server calls. They are tested against outputs recorded from a real session (hooks/mcp/fixtures.ts, local paths scrubbed). Screenshots render through the relay's new /image endpoint, which turns Replay's JPEG into a PNG in headless Replay Chromium.

• Slash command renamed to /replayio (/replayio, /replayio library, /replayio save <session|latest>).

Requirements

CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1, plus a kitty-graphics terminal (Ghostty, kitty) for the inline picture. Without them the existing plugin behaves exactly as before.

Testing

• Real session: tested end to end in a Claude Code session with the hooks module loaded. A Bash playwright-cli open attached a player to its own row, frames streamed live, and the recording ended on close.
• Relay end to end: the session-recorder tracer injects in Chrome and in Replay Chromium (Chrome 108). Seek, play and pause work, and MP4 export ends on the final frame.
• claude plugin validate, tsc and shadcn registry validate all pass.

Note

@replayio-app-building/session-recorder declares no license in its package.json. Please confirm it's fine to commit its bundled build (live/tracer.js) to this public repo.

Docs PR with install instructions: replayio/docs#265.

🤖 Generated with Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​esbuild@​0.25.12
	npm/​rrweb@​2.0.0-alpha.18
	npm/​@​replayio-app-building/​session-recorder@​0.17.1

View full report

[socket-security]

Caution

Review the following alerts detected in dependencies.

According to your organization's Security Policy, you must resolve all "Block" alerts before proceeding. It is recommended to resolve "Warn" alerts too. Learn more about Socket for GitHub.

Priority	Alert  (click "▶" to expand/collapse)	Action
	Obfuscated code: npm rrweb is 75.0% likely obfuscated Confidence: 0.75 Location: Package overview From: claude-code/replayio/live/package-lock.json → npm/rrweb@2.0.0-alpha.18 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/rrweb@2.0.0-alpha.18. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Warn
	Potential security risk (AI signal): npm @replayio-app-building/session-recorder is 78.0% likely risky Notes: This module is a highly instrumenting browser capture/recording library. It monkey-patches fetch/XHR/WebSocket and intercepts localStorage/IndexedDB and DOM/CSS-discovered asset URLs to capture and store network responses (including bodies/base64), headers, and storage/DB/WebSocket data. While that may be legitimate for replay/testing, the same functionality can enable session/data theft if shipped in an unexpected context. No direct code-exec or obfuscated payload is evident in the provided fragment; the main concern is privacy/data collection and forced additional fetching (including source maps when enabled). Confidence: 0.78 Severity: 0.74 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 ℹ Read more on: This package | This alert | What are AI-detected potential security risks? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system identified potential security problems in this package. It is advised to review the package thoroughly and assess the potential risks before installation. You may also consider reporting the issue to the package maintainer or seeking alternative solutions with a stronger security posture. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@replayio-app-building/session-recorder@0.17.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Native binaries present: npm msgpackr-extract Location: Package overview From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/msgpackr-extract@3.0.4 ℹ Read more on: This package | This alert | Why is native code a concern? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Verify that the inclusion of native code is expected and necessary for this package's functionality. If it is unnecessary or unexpected, consider using alternative packages without native code to mitigate potential risks. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/msgpackr-extract@3.0.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm @effect/platform is 62.0% likely to have a medium risk anomaly Notes: No direct malicious payload is evident in this fragment, but it is a powerful multi-language HTTP request/code generator that embeds caller-controlled URL, headers, cookies, and body into returned executable code strings. The primary security risk is misuse by the consumer: enabling SSRF/outbound requests to attacker-controlled destinations, inclusion of attacker-controlled credentials/session data via headers/cookies, potential syntax/escaping issues if generated snippets are executed unsafely, optional TLS verification bypass in some targets when configured, and possible sensitive response leakage due to console logging. If consumer-side execution is automated, untrusted inputs should be strictly validated (allowlisted destinations, header/cookie restrictions, and disallow TLS-verify bypass flags). Confidence: 0.62 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/@effect/platform@0.90.3 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@effect/platform@0.90.3. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm @replayio-app-building/session-recorder is 66.0% likely to have a medium risk anomaly Notes: No direct evidence of intentional malware or sabotage is present in this snippet. However, there are meaningful security risks: (1) possible SSRF/internal callback abuse because the module performs fetch() and webhook POSTs to URLs sourced from stored DB fields and inputs without an allowlist; and (2) potential decompression/CPU-memory exhaustion due to gunzipSync on attacker-influenced data. These are security alerts, not definitive malicious behavior. Confidence: 0.66 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@replayio-app-building/session-recorder@0.17.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 77.0% likely to have a medium risk anomaly Notes: The analyzed code is a normal, non-malicious part of a functional effect system (Micro.js). It implements execution helpers and a small error hierarchy with standard error propagation. No data input sources, exfiltration mechanisms, or backdoors are evident in this fragment. Overall security risk is low for this specific module; no malware indicators detected. Confidence: 0.77 Severity: 0.50 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.17.7 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.17.7. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 77.0% likely to have a medium risk anomaly Notes: The analyzed code is a normal, non-malicious part of a functional effect system (Micro.js). It implements execution helpers and a small error hierarchy with standard error propagation. No data input sources, exfiltration mechanisms, or backdoors are evident in this fragment. Overall security risk is low for this specific module; no malware indicators detected. Confidence: 0.77 Severity: 0.50 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.22.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.22.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 65.0% likely to have a medium risk anomaly Notes: The analyzed code represents a sophisticated in-memory queue with support for multiple strategies (back-pressure, dropping, sliding). No evidence of malicious behavior or external data leakage was found. The extensive use of unsafe helpers is typical for high-performance concurrent data structures but requires rigorous invariants and thorough testing to prevent subtle bugs. Overall security risk is moderate due to concurrency complexity rather than intentional harm, and malware likelihood remains low. Confidence: 0.65 Severity: 0.55 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.22.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.22.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 64.0% likely to have a medium risk anomaly Notes: The analyzed code fragment appears to be a legitimate resource pool management component using a functional effect system. It implements TTL-based item invalidation, acquisition tracking, and reclamation logic with recursive, delayed processing. There is no indication of data exfiltration, backdoors, cryptomining, or other malicious activity within the provided fragment. The primary concerns are complexity, potential synchronization issues in a multi-fiber context, and the risk of misconfiguration leading to suboptimal performance or resource leaks rather than direct security compromise. Confidence: 0.64 Severity: 0.58 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.22.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.22.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 65.0% likely to have a medium risk anomaly Notes: The TRandom implementation is generally sound for non-cryptographic randomness within an STM framework. The primary issue is a logical bug in shuffleWith that prevents shuffling; this undermines the expected behavior of shuffle but does not introduce a security risk. Seeding with Math.random remains a minor determinism/privacy concern for tests or cryptographic needs. Suggested fixes include: (1) correct the Fisher-Yates shuffle index construction so swaps occur, e.g., initialize an array of indices [n-1, n-2, ..., 1] or implement standard in-place swap using a growing index list; (2) reuse a single PRNG instance or pass through state more efficiently to avoid repeatedly creating PCGRandom instances per call; (3) consider cryptographic seed sources if cryptographic randomness is required in the host application. Confidence: 0.65 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.22.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.22.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm effect is 68.0% likely to have a medium risk anomaly Notes: The code provides a comprehensive hashing utility with per-object caching and support for user-defined hash implementations via a special symbol. The primary security concern is the symbol-based sink (selfsymbol) which can execute arbitrary code when hashing untrusted objects. Absent untrusted inputs, the module remains a robust, non-networking hashing helper with low general risk; determinism may be impacted by Math.random-based seeds and the structuralRegionState flag. Confidence: 0.68 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/effect@3.22.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/effect@3.22.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm esbuild is 68.0% likely to have a medium risk anomaly Notes: The esbuild install.js script downloads and installs platform-specific binaries through multiple paths (including direct tarballs) and lacks cryptographic integrity verification, creating supply-chain and execution risks. The installer’s use of a direct download/install and an override/wrapper mechanism, while potentially legitimate, heightens risk due to limited visibility and potential misuse; strict integrity checks and tighter auditing/logging are recommended. Confidence: 0.68 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/esbuild@0.25.12 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/esbuild@0.25.12. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm msgpackr-extract is 90.0% likely to have a medium risk anomaly Notes: Both alerts describe a native addon that uses node-gyp/prebuild tooling to fetch and install remote binaries, potentially executing arbitrary code during install. A repository served over insecure HTTP is identified as a risk, and build scripts (e.g., index.js, bin/download-prebuilds.js, set-optional-deps.cjs, gyp/build files) and related prebuild tooling should be audited before trusting the package in sensitive environments. Confidence: 0.90 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/msgpackr-extract@3.0.4 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/msgpackr-extract@3.0.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block
	Potential code anomaly (AI signal): npm node-gyp-build-optional-packages is 65.0% likely to have a medium risk anomaly Notes: The package bin.js contains a command execution sink that uses inputs from process.argv (e.g., argv[2]/argv[3]) and may invoke exec/spawn with those inputs, allowing an attacker-controlled command to run during install/build processes (CI, npm scripts, or misconfiguration). This constitutes a security risk that can be mitigated by validating/sanitizing argv inputs, constraining or removing untrusted command execution, and clearly documenting intended behavior and restricted hooks for user-provided commands. Confidence: 0.65 Severity: 0.60 From: claude-code/replayio/live/package-lock.json → npm/@replayio-app-building/session-recorder@0.17.1 → npm/node-gyp-build-optional-packages@5.2.2 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/node-gyp-build-optional-packages@5.2.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.	Block

View full report