Add the web preview performance panel

docs/docs/performance-tracing.md

@@ -28,6 +28,32 @@ The debugger proxies these operations through `/api/performance/trace/status`,
 `start`, `stop`, and `capture`; the application keeps ownership of the recorder,
 so captures continue to work across the loopback debugger HTTP connection.
 
+#### Web preview traces
+
+When `valdi debugger` is attached to an exact loopback web preview, the
+integrated DevTools **Performance** panel can sample navigation, resource, heap,
+and main-thread metrics. It can also record one global Chromium trace at a
+time. The timeline filters are **Valdi**, **Browser**, and **All**. Enabling
+Valdi renderer events reloads the inspected page with the explicit tracing
+query parameters; browser events remain available without that reload.
+
+Web capture operations use the separate
+`/api/devtools/performance/trace/status`, `start`, `stop`, `capture`, and
+`enable` routes. They do not replace the daemon-backed `/api/performance/*`
+routes described above. Every web request is bound to the exact inspected
+`sessionId`, `inspectedUrl`, and per-tab `targetNonce`; a changed or incomplete
+identity fails closed.
+
+One-shot web captures run for their requested duration from 100 milliseconds
+through 15 seconds. Manually started recordings automatically stop after a
+15-second watchdog. Normalization happens as CDP events arrive, retaining at
+most 10,000 events with trace names no larger than
+2 KiB. The complete JSON response is limited to 4 MiB, and an automatically
+completed result remains retrievable for one minute. Responses contain the
+bounded normalized trace list and export metadata, not a second raw or
+Perfetto event list. The panel constructs Chrome Trace JSON only when you
+choose **Export trace**.
+
 > [!NOTE]
 > Please make sure to add `//src/valdi_modules/src/valdi/benchmarking` to the `deps` attribute of the `valdi_module()` call in your module's `BUILD.bazel`.
 

npm_modules/cli/debugger/README.md

@@ -21,7 +21,7 @@ the CLI package.
 - `debugger-actions.js`: UI actions, command prompt handling, auto-refresh, and externally driven debugger actions.
 - `debugger-session.js`: `sessionStorage` restore/persist for reload-friendly debugger state.
 - `debugger-bootstrap.js`: DOM event wiring and boot sequence.
-- `devtools-panel.html`, `devtools-panel.css`, and `devtools-panel.js`: the focused Chromium Elements and Console panel embedded by the generated extension.
+- `devtools-panel.html`, `devtools-panel.css`, and `devtools-panel.js`: the focused Chromium Elements, Console, and bounded Performance panel embedded by the generated extension.
 
 Scripts are loaded as classic browser scripts in the order listed in
 `index.html`. There is no module loader or bundler for this frontend; shared
@@ -71,7 +71,9 @@ requested duration from 100 milliseconds through 15 seconds; manually started
 recordings have a 15-second watchdog. An undelivered completed result is kept
 for one minute. The complete response is limited
 to 4 MiB and contains one normalized trace list plus export metadata—never a
-duplicate raw or Perfetto event list.
+duplicate raw or Perfetto event list. The panel shows at most 120 graph samples,
+120 timeline rows, and 12 grouped summary rows. Its only trace filters are
+Valdi, Browser, and All; Chrome Trace JSON is assembled only when exported.
 
 The Data section discovers target-owned providers through a generic custom
 message contract. The persistence module registers its bounded web snapshot as