feat: devtools

[lazarv]

Built-in DevTools for development mode

This PR introduces a comprehensive, browser-embedded DevTools panel for @lazarv/react-server that gives developers full visibility into their running application during development — without leaving the browser or installing any extensions.

What it does

When the --devtools CLI flag is passed (or devtools: true is set in react-server.config.mjs), a small floating button with the react-server logo appears in the browser. Clicking it (or pressing Ctrl/Cmd+Shift+D) opens a multi-panel inspector that covers every runtime concern: server process health (CPU, memory, uptime), RSC payload structure, cache behavior, the file-system route tree, outlet layout, remote and live components, worker threads, and real-time server logs with full ANSI color support.

How it works

The DevTools UI is split into two layers. The outer chrome — the floating trigger button, the resizable/dockable panel shell, the DOM highlight overlay, and the RSC payload collector — are client components injected directly into the host page by render-rsc.jsx when config.devtools is truthy and import.meta.env.DEV is true. The inner inspector panels (Status, Payload, Cache, Routes, Outlets, Remotes, Live, Workers, Logs) run inside an iframe pointed at /__react_server_devtools__/*, which ssr-handler.mjs intercepts and renders as a standalone react-server app with its own component tree, completely isolated from the user's middleware and routing. Communication between the host page and the iframe happens through postMessage, and the server-side devtools context (cache entries, route manifests, worker state, live component registry) is aggregated in devtools/context.mjs and exposed via server actions.

The panel supports four dock modes — bottom, left, right, and floating — with smooth animated transitions and drag/resize handles. Panel size and position persist across page navigations via localStorage. A dark mode toggle is included, independent of the host application's theme. The highlight overlay uses the same postMessage bridge to let inspector panels visually mark DOM elements on the host page (client component boundaries, outlet containers, remote component mount points) with colored outlines and labels.

The Logs panel implements a custom virtualized list with measured row heights to handle high-throughput server output without degrading browser performance. Server-side, devtools-output.mjs hooks into process.stdout and process.stderr to capture log output, strips non-SGR ANSI escape sequences (cursor movement, terminal titles) while preserving color codes, and streams entries to the client where they are parsed into styled React spans supporting 4-bit, 8-bit, and 24-bit true-color ANSI sequences.

The Payload panel parses the raw RSC wire format in real time, breaking it into individually inspectable chunks — server components, client references, hints, and metadata — with syntax highlighting and cross-referencing between client component chunks and their corresponding DOM elements via the highlight overlay.

Cache inspection surfaces every useCache entry with its function name, source location, arguments, tags, timestamps, and hit/miss/revalidation status, all extracted from structured metadata that the new use-cache-inline.mjs Vite plugin injects at build time.

Supporting changes

The file-router plugin now emits a structured route manifest consumed by the devtools route tree view. The cache subsystem (cache/index.mjs, cache/client.mjs) is instrumented to record entry metadata and exposes a snapshot API for the devtools context. Client-side routing internals (client-route-store.mjs, ClientProvider.jsx, ClientRouteGuard.jsx, ClientRouteRegistration.jsx) are extended to emit route and outlet registration events that the devtools context collects. Worker proxy modules on both client and server now report thread status. The CI workflow has been simplified by removing test sharding. The docs site gains a full DevTools documentation page (English and Japanese) with themed screenshots and a lightbox image component, plus a new banner image and updated OpenGraph asset.

DevTools is strictly development-only. No devtools code is included in production builds — the injection points are gated behind import.meta.env.DEV, and the devtools config key is stripped from the Vite config before it reaches Vite's own internals to avoid conflicts with @vitejs/devtools.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	react-server-docs	69bba11	Apr 04 2026, 07:51 PM

[github-actions]

⚡ Benchmark Results

	PR 766aead	main 4fc226a
Config	50 connections, 10s/test	50 connections, 10s/test

Benchmark	Req/s	vs main	Avg Latency	vs main	P99 Latency	Throughput
minimal	418	🔴 -17.7%	118.09 ms	🔴 +21.4%	194 ms	2.1 MB/s
small	437	🔴 -15.6%	113.22 ms	🔴 +19.0%	147 ms	2.6 MB/s
medium	202	🔴 -8.3%	243.87 ms	🔴 +8.7%	420 ms	9.0 MB/s
large	27	🟢 +13.3%	1753.47 ms	⚪ -0.7%	3084 ms	9.2 MB/s
deep	342	🔴 -11.0%	144.56 ms	🔴 +12.4%	209 ms	4.9 MB/s
wide	35	⚪ -0.8%	1360.05 ms	⚪ +0.8%	3705 ms	7.7 MB/s
cached	2832	🔴 -14.1%	17.17 ms	🔴 +17.0%	36 ms	125.7 MB/s
client-min	478	🔴 -18.1%	103.85 ms	🔴 +22.5%	154 ms	2.2 MB/s
client-small	469	🔴 -20.3%	105.67 ms	🔴 +25.9%	153 ms	2.4 MB/s
client-med	356	🔴 -12.9%	138.76 ms	🔴 +14.7%	187 ms	6.7 MB/s
client-large	89	🟢 +4.0%	549.42 ms	🟢 -3.9%	1026 ms	9.3 MB/s
client-deep	451	🔴 -15.3%	109.88 ms	🔴 +18.2%	152 ms	3.4 MB/s
client-wide	146	⚪ +0.4%	333.59 ms	🟢 -1.7%	516 ms	8.5 MB/s
static-json	7012	🔴 -41.5%	6.66 ms	🔴 +85.0%	16 ms	2.9 MB/s
static-js	7114	🔴 -41.1%	6.52 ms	🔴 +83.7%	16 ms	8.5 MB/s
404-miss	5209	🔴 -21.0%	9.01 ms	🔴 +24.8%	19 ms	0.6 MB/s

Legend

🟢 > 1% improvement | 🔴 > 1% regression | ⚪ within noise margin

Benchmarks run on GitHub Actions runners (shared infrastructure) — expect ~5% variance between runs. Consistent directional changes across multiple routes are more meaningful than any single number.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@4fc226a). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #377   +/-   ##
=======================================
  Coverage        ?   93.93%           
=======================================
  Files           ?        2           
  Lines           ?     2275           
  Branches        ?      686           
=======================================
  Hits            ?     2137           
  Misses          ?      138           
  Partials        ?        0           

Flag	Coverage Δ
rsc	93.93% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.