feat(network-activity-plugin): migrate the panel to @rozenite/ui

[V3RON]

Description

The Network Activity DevTools panel moves from its own shadcn/Radix component copies and local theme to @rozenite/ui. It now follows the DevTools light and dark themes instead of always rendering dark, and every feature is kept.

Panel

• Layout: PluginShell and a resizable Split for the list and side panel. The list stays mounted, so sort, scroll and widths survive opening and closing a request.
• Request list: VirtualizedDataTable.
  • Its columns resize, using the column resizing from feat(sqlite-plugin): migrate the panel to @rozenite/ui #554.
  • The Name column fills any leftover width.
  • Size and Time sort by their numeric value.
  • Failed requests use the danger tone.
  • The list has an empty state, and rows can be picked with the keyboard.
• Side panel: Tabs (the tab bar scrolls and fades its edges when tabs are cut off), DescriptionList, and DataTable for WebSocket and SSE messages with sticky headers.
• Menus and controls: Menu for "copy as cURL / fetch", plus Toolbar, SearchField, Badge and Button.
• Styles: globals.css is now @import '@rozenite/ui/styles.css'; plus the selected-row styling.
• Dependencies removed: five Radix packages, class-variance-authority, clsx, tailwind-merge and tw-animate-css. @rozenite/ui is now a dependency.

Fixes

• Timing tab: it multiplied epoch-millisecond timestamps by 1000, so start and end times were wrong.
• Load speed: every request's start time was reformatted on every update. 600 requests took 21 s to load in a production build and now take 4.3 s. Formatting cost dropped from about 17 s to 9 ms.

Dev host: rozenite.config.ts now replays the device protocol with 26 requests. They cover fetch, XHR, WebSocket, SSE and images; status codes from 2xx to 5xx; failed, pending and loading requests; JSON, XML, HTML, SVG, PNG, PDF and too-large bodies; cookies, initiators and multipart. There's also an opt-in 600-request burst. The panel can be developed and checked in the browser with pnpm --filter @rozenite/network-activity-plugin dev.

Related Issue

Closes #553

Context

• Kept on purpose:
  • react-json-tree, because @rozenite/ui's JsonInspector has no per-node copy.
  • @floating-ui/react for the filters popup, because @rozenite/ui has no Popover. The popup renders inline, so it keeps the theme.
• Widths: the default column widths fit a 50/50 split at 1440 px without scrolling sideways. Longer domains truncate but can be dragged wider.
• Persistence: widths are kept for the session, not persisted.

Testing

• git fetch origin main && pnpm checks:affected && pnpm test:affected: passed. The plugin has 241 tests; no existing test changed.

• pnpm release:plan and a forced plugin build: passed.

• Browser checks: the panel ran in the in-browser dev host against the replayed device traffic, driven with Playwright in Chrome, dark and light, at 1440, 900, 600 and 480 px. All 33 states were captured before and after, plus scripted checks of:

  • Sort and scroll: preserved across opening and closing a request.
  • Split size: kept after closing and reopening the side panel.
  • Columns: resize by drag, keyboard and double-click reset; the Name column fills the pane; header and body columns stay aligned while scrolling both ways.
  • Tab bar: at narrow widths it opens with the selected tab in view and fades its edges.
  • Message tables: WebSocket and SSE headers stay put while scrolling.
  • Overrides and filters: response override create, save and clear; the filters popup.
  • Response bodies: every body viewer.

  The console has no panel errors.

• Review: an independent adversarial review ran four times; every finding is fixed.

Not yet verified in React Native DevTools on a device. Steps to check:

1. Run the playground on a device or simulator and open React Native DevTools > Network Activity (docs/agents/playground-testing.md, rozenite://network).
2. Watch live traffic: the loading percentage and the timeline update as requests arrive.
3. Create response overrides for built-in, Expo and Nitro requests and check they apply.
4. Check that initiators show real Metro-symbolicated stack frames.
5. Open large and binary response bodies.
6. Switch the DevTools theme, and drag the split and the column edges inside the DevTools frame.