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
+48
-6
@@ -1059,27 +1059,41 @@ pub fn print_command_help(command: &str) -> bool {
|
||||
// === Navigation ===
|
||||
"open" | "goto" | "navigate" => {
|
||||
r##"
|
||||
agent-browser open - Navigate to a URL
|
||||
agent-browser open - Launch the browser, optionally navigate
|
||||
|
||||
Usage: agent-browser open <url>
|
||||
Usage: agent-browser open [url]
|
||||
|
||||
Navigates the browser to the specified URL. If no protocol is provided,
|
||||
https:// is automatically prepended.
|
||||
Without a URL, launches the browser but stays on about:blank. This lets
|
||||
you stage state (network routes, cookies, init scripts) before the first
|
||||
real navigation — useful for SSR debug, auth setup, and capturing fresh
|
||||
`react suspense` / `vitals` state without noise from a prior page.
|
||||
|
||||
Aliases: goto, navigate
|
||||
With a URL, launches and navigates. If no protocol is provided, https://
|
||||
is automatically prepended.
|
||||
|
||||
The `goto` and `navigate` aliases still require a URL.
|
||||
|
||||
Global Options:
|
||||
--json Output as JSON
|
||||
--session <name> Use specific session
|
||||
--headers <json> Set HTTP headers (scoped to this origin)
|
||||
--headed Show browser window
|
||||
--enable react-devtools Inject the React DevTools hook before any page JS
|
||||
--init-script <path> Register a page init script (repeatable)
|
||||
|
||||
Examples:
|
||||
agent-browser open # Launch, no nav
|
||||
agent-browser open example.com
|
||||
agent-browser open https://github.com
|
||||
agent-browser open localhost:3000
|
||||
agent-browser open api.example.com --headers '{"Authorization": "Bearer token"}'
|
||||
# ^ Headers only sent to api.example.com, not other domains
|
||||
|
||||
# Pre-navigation setup in one turn:
|
||||
agent-browser batch \
|
||||
'["open"]' \
|
||||
'["network","route","*","--abort","--resource-type","script"]' \
|
||||
'["navigate","http://localhost:3000/target"]'
|
||||
"##
|
||||
}
|
||||
"back" => {
|
||||
@@ -2951,13 +2965,14 @@ Browser Settings: agent-browser set <setting> [value]
|
||||
media [dark|light] [reduced-motion]
|
||||
|
||||
Network: agent-browser network <action>
|
||||
route <url> [--abort|--body <json>]
|
||||
route <url> [--abort|--body <json>] [--resource-type <csv>]
|
||||
unroute [url]
|
||||
requests [--clear] [--filter <pattern>]
|
||||
har <start|stop> [path]
|
||||
|
||||
Storage:
|
||||
cookies [get|set|clear] Manage cookies (set supports --url, --domain, --path, --httpOnly, --secure, --sameSite, --expires)
|
||||
Or: cookies set --curl <file> [--domain <host>] (auto-detects JSON/cURL/Cookie-header files)
|
||||
storage <local|session> Manage web storage
|
||||
|
||||
Tabs:
|
||||
@@ -2984,6 +2999,27 @@ Streaming:
|
||||
stream disable Stop runtime WebSocket streaming
|
||||
stream status Show streaming status and active port
|
||||
|
||||
React (requires `open --enable react-devtools`):
|
||||
react tree Full React component tree (depth id parent name columns)
|
||||
react inspect <id> Inspect one fiber (props, hooks, state, source)
|
||||
react renders start Start recording re-renders via onCommitFiberRoot
|
||||
react renders stop [--json] Stop and print render profile
|
||||
react suspense [--only-dynamic] [--json]
|
||||
Walk Suspense boundaries + classifier report
|
||||
--only-dynamic hides the "static" list
|
||||
|
||||
Performance:
|
||||
vitals [url] [--json] Core Web Vitals (LCP/CLS/TTFB/FCP/INP) +
|
||||
React hydration timing when profiling build detected
|
||||
|
||||
SPA:
|
||||
pushstate <url> SPA client-side nav. Auto-detects window.next.router.push
|
||||
(triggers RSC fetch on Next.js); falls back to
|
||||
history.pushState + popstate/navigate events for other frameworks
|
||||
|
||||
Init scripts:
|
||||
removeinitscript <id> Remove a script registered via --init-script or addinitscript
|
||||
|
||||
Batch:
|
||||
batch [--bail] ["cmd" ...] Execute multiple commands sequentially (args or stdin)
|
||||
--bail stops on first error (default: continue all)
|
||||
@@ -3043,6 +3079,10 @@ Options:
|
||||
--session <name> Isolated session (or AGENT_BROWSER_SESSION env)
|
||||
--executable-path <path> Custom browser executable (or AGENT_BROWSER_EXECUTABLE_PATH)
|
||||
--extension <path> Load browser extensions (repeatable)
|
||||
--init-script <path> Register a page init script before the first navigation (repeatable)
|
||||
(or AGENT_BROWSER_INIT_SCRIPTS env, comma-separated)
|
||||
--enable <feature> Built-in init scripts: react-devtools (repeatable or comma-separated)
|
||||
(or AGENT_BROWSER_ENABLE env)
|
||||
--args <args> Browser launch args, comma or newline separated (or AGENT_BROWSER_ARGS)
|
||||
e.g., --args "--no-sandbox,--disable-blink-features=AutomationControlled"
|
||||
--user-agent <ua> Custom User-Agent (or AGENT_BROWSER_USER_AGENT)
|
||||
@@ -3105,6 +3145,8 @@ Environment:
|
||||
AGENT_BROWSER_STATE_EXPIRE_DAYS Auto-delete states older than N days (default: 30)
|
||||
AGENT_BROWSER_EXECUTABLE_PATH Custom browser executable path
|
||||
AGENT_BROWSER_EXTENSIONS Comma-separated browser extension paths
|
||||
AGENT_BROWSER_INIT_SCRIPTS Comma-separated paths to page init scripts
|
||||
AGENT_BROWSER_ENABLE Comma-separated built-in init script features (e.g. react-devtools)
|
||||
AGENT_BROWSER_HEADED Show browser window (not headless)
|
||||
AGENT_BROWSER_JSON JSON output
|
||||
AGENT_BROWSER_ANNOTATE Annotated screenshot with numbered labels and legend
|
||||
|
||||
Reference in New Issue
Block a user