request insights: add DevTools request panel (5/5) (#93978)
## What?
Adds the experimental Request Insights panel to the Next.js DevTools
overlay.
The panel provides:
- A retained request list with stable selection as new requests arrive.
- A “Page load” marker for the exact initial document request.
- An end-to-end trace timeline that follows the recorded span hierarchy.
- A focused default view of high-level spans and a verbose view for
deeper investigation.
- Fetch, cache, request, status, duration, and span-count details.
- Readable sub-millisecond durations and consistent right-aligned
request metrics.
This PR is intentionally limited to the Request Insights UI. Additional
OpenTelemetry coverage, span display names, and Server Action tracing
are split into the dependent PRs below.
## Why?
The Request Insights data was already available to tools, but inspecting
it required consuming the development endpoint or CLI output. The
DevTools panel makes the same request, fetch, cache, and timing
information directly inspectable while developing an application.
The focused/verbose split keeps the default trace useful for
understanding the request lifecycle without hiding the lower-level spans
needed for investigation.
## How?
- Adds a Request Insights panel and request list to the DevTools
overlay.
- Builds timeline rows from recorded parent/child relationships instead
of assigning synthetic sections.
- Uses the request’s full duration as the timeline range and clips
outlier spans to that range.
- Merges recorded fetch metrics with their corresponding fetch spans.
- Preserves the selected request ID until that request is no longer
retained.
- Compares `request.requestId` with `self.__next_r` to identify only the
initial document request.
## Stack
The first four Request Insights foundation PRs have already merged. The
remaining review stack is:
1. **#93978 — Request Insights UI (this PR)**
2. #95765 — Missing OpenTelemetry spans
3. #95766 — Human-readable OpenTelemetry span names
4. #95767 — Server Action tracing and resolution
## Verification
- `pnpm --filter=next build`
- `pnpm exec jest
packages/next/src/next-devtools/dev-overlay/components/request-insights/trace-viewer.test.ts
--runInBand`
<!-- NEXT_JS_LLM -->
---------
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
