feat(react): React introspection, Web Vitals, and SPA primitives (#1257)

* feat(react): first-class React introspection, Web Vitals, and nextjs skill

Add React-general and web-universal features as first-class agent-browser verbs
(react tree/inspect/renders/suspense, vitals, pushstate). Genuinely Next.js-specific
workflows (PPR cookie protocol, /_next/mcp bridge, dev-server endpoints) ship as
a new `nextjs` skill that composes the primitives. No new runtime dependencies -
the React DevTools installHook.js is vendored (MIT) and include_str!'d into the
binary.

New commands:
  react tree                  Full React component tree (depth id parent name)
  react inspect <fiberId>     Props, hooks, state, source for one fiber
  react renders start|stop    Fiber profiler with Insts/Mounts/Re-renders/Self/DOM
                              + prev->next change details
  react suspense              Suspense boundaries + classifier (client-hook,
                              request-api, server-fetch, cache, stream, framework)
                              + root-cause grouping + recommendations
  vitals [url]                LCP/CLS/TTFB/FCP/INP + React hydration phases
  pushstate <url>             Generic SPA client-side navigation
  removeinitscript <id>       Remove a script registered via addinitscript

New launch flags:
  --init-script <path>        Register init scripts before first navigation
                              (repeatable; env AGENT_BROWSER_INIT_SCRIPTS)
  --enable <feature>          Built-in init scripts; currently react-devtools
                              (repeatable; env AGENT_BROWSER_ENABLE)

Other primitives:
  network route ... --resource-type <csv>  Filter by CDP resource type
  cookies set --curl <file>                Auto-detects JSON/cURL/Cookie-header

* fixes

* fixes

* fixes
This commit is contained in:
Chris Tate
2026-04-20 16:12:47 -05:00
committed by GitHub
parent cff12598bf
commit 57405f9361
22 changed files with 3438 additions and 18 deletions
+50 -1
View File
@@ -3,7 +3,8 @@
## Core
```bash
agent-browser open <url> # Navigate (aliases: goto, navigate)
agent-browser open # Launch browser (no nav); stays on about:blank
agent-browser open <url> # Launch + navigate (aliases: goto, navigate)
agent-browser click <sel> # Click element (--new-tab to open in new tab)
agent-browser dblclick <sel> # Double-click
agent-browser fill <sel> <text> # Clear and fill
@@ -173,6 +174,7 @@ agent-browser storage session # Same for sessionStorage
agent-browser network route <url> # Intercept requests
agent-browser network route <url> --abort # Block requests
agent-browser network route <url> --body <json> # Mock response
agent-browser network route '*' --abort --resource-type script # Block scripts only
agent-browser network unroute [url] # Remove routes
agent-browser network requests # View tracked requests
agent-browser network requests --clear # Clear request log
@@ -420,6 +422,51 @@ Chat-specific options:
agent-browser back # Go back
agent-browser forward # Go forward
agent-browser reload # Reload page
agent-browser pushstate <url> # SPA client-side nav; auto-detects window.next.router.push,
# falls back to history.pushState + popstate
```
## Pre-navigation setup
Some flows need routes, cookies, or init scripts configured *before* the
first navigation (SSR debug, auth on protected origins, etc.). `open`
without a URL launches the browser but stays on `about:blank`, leaving
room to stage state. `batch` makes it one CLI invocation:
```bash
agent-browser batch \
'["open"]' \
'["network","route","*","--abort","--resource-type","script"]' \
'["cookies","set","--curl","cookies.curl","--domain","localhost"]' \
'["navigate","http://localhost:3000/target"]'
```
## React / Web Vitals
React commands require `--enable react-devtools` at launch (installs the
React DevTools hook before any page JS runs). `vitals` and `pushstate`
work on any site.
```bash
agent-browser open --enable react-devtools <url> # Launch with React hook installed
agent-browser react tree # Full component tree
agent-browser react inspect <fiberId> # Inspect one component
agent-browser react renders start # Begin fiber render recording
agent-browser react renders stop [--json] # Stop + print profile
agent-browser react suspense [--only-dynamic] [--json] # Suspense boundaries + classifier
# --only-dynamic hides the "static" list
agent-browser vitals [url] [--json] # LCP/CLS/TTFB/FCP/INP + hydration
```
Works on any React app (Next.js, Remix, Vite+React, CRA, TanStack Start,
React Native Web, etc.). `vitals` and `pushstate` are framework-agnostic.
## Init scripts
```bash
agent-browser open --init-script <path> # Register before first navigation (repeatable)
agent-browser addinitscript <js> # Register at runtime (returns identifier)
agent-browser removeinitscript <identifier> # Remove a previously registered init script
```
## Global options
@@ -432,6 +479,8 @@ agent-browser reload # Reload page
--headers <json> # HTTP headers scoped to URL's origin
--executable-path <path> # Custom browser executable
--extension <path> # Load browser extension (repeatable)
--init-script <path> # Register a page init script before first navigation (repeatable)
--enable <feature> # Built-in init scripts: react-devtools (repeatable or comma-list)
--args <args> # Browser launch args (comma separated)
--user-agent <ua> # Custom User-Agent string
--proxy <url> # Proxy server URL