Host the trace player at trace.webdriver.io #494

Problem

Opening a trace zip today needs the DevTools package installed locally and show-trace <trace.zip> run against it. Anyone the zip is handed to (a reviewer, a QA engineer, someone triaging a CI failure) has to set up a Node project first just to look at it.

Proposal

Host the trace player at https://trace.webdriver.io, next to https://benchmark.webdriver.io. The user opens the page, drops a trace zip on it (or picks one), and the player opens it. show-trace stays for offline and air-gapped use.

The zip never leaves the browser

A trace records everything the run showed or typed, credentials included (there is no redaction in capture). The hosted player therefore parses the zip entirely client-side: no upload, no server-side processing, no analytics. The landing page states this.

How it works today

1. show-trace reads the zip from disk (packages/backend/src/show-trace.ts).
2. parseTraceZip() in packages/backend/src/trace-reader.ts turns it into a TracePlayerData payload.
3. The backend serves that payload at TRACE_API.get; the app's DataManager fetches it and calls loadPlayerData().

parseTraceZip already takes a Uint8Array and uses fflate, which runs in browsers. The only Node dependency on its path is packages/trace/src/sha1.ts (node:crypto), reached through sourceResourceName. The disk read lives only in the readTraceZip wrapper.

Work

• Move the reader into packages/trace. It is the read side of the trace format, which both the backend and the app need. The backend keeps a thin readTraceZip that reads the file and delegates.
• Make sha1Hex browser-safe, either a small pure-JS SHA-1 or Web Crypto (async, so its callers change).
• Hosted mode in the app. When nothing answers at TRACE_API.get, show a landing screen with drag-and-drop and a file picker, parse with File.arrayBuffer(), and call the existing loadPlayerData(). Optional: ?trace=<url> to load a zip served with CORS.
• Hide live-only controls (Run all, Rerun, Preserve & Rerun, Stop) in hosted mode, as player mode already does.
• Static build + Vercel config. A root vercel.json (build command, output directory, headers) following https://github.com/webdriverio/benchmark: Vercel's Git integration deploys main and gives every PR a preview URL. Headers: X-Robots-Tag: noindex and a strict Content-Security-Policy (connect-src limited so the page cannot send trace data anywhere).
• Tests for the moved reader running without Node built-ins, and for the hosted-mode load path.
• Docs, README: points to the hosted player alongside show-trace (marked not deployed yet until the domain is live, Stop presenting trace.webdriver.io as live until it is deployed #538).
• Docs, docs site (website/docs/devtools/**, e.g. wdio/TraceMode.md): to be mirrored once the open PRs below merge.

Needs a maintainer with access to the webdriverio Vercel team

• Import webdriverio/devtools as a Vercel project (same setup as benchmark).
• Add trace.webdriver.io as its domain, plus the DNS record.

The code can land and be tested on a PR preview deploy before the domain goes live.

Follow-ups

Also open: #536 (keep traces opened in show-trace out of the live cache) and #538 (stop presenting trace.webdriver.io as live until it is deployed).

#533 and #534 change the hosted CSP in vercel.json and the same CLAUDE.md paragraph, so whichever merges second needs both changes combined.