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.