feat: add profile export command

[kacper-mikolajczak]

Summary

• Adds profile export <file> CLI command that exports profiling data in React DevTools Profiler JSON format (version 5)
• The exported file can be imported directly into React DevTools browser extension via the Profiler tab's import button
• Maps internal ProfilingSession data to the ProfilingDataExport schema: commits, fiber durations, change descriptions, and component tree snapshots

Usage

agent-react-devtools profile start
# ... interact with app ...
agent-react-devtools profile stop
agent-react-devtools profile export profiling-data.json

Then open React DevTools Profiler tab and click the import button to load the JSON file.

What's included in the export

Field	Source	Notes
commitData	ProfilingSession.commits	Full mapping including durations, change descriptions
snapshots	ComponentTree nodes	Current tree state at time of export
initialTreeBaseDurations	First commit's fiberSelfDurations	Approximation - exact base durations not tracked
operations	Empty arrays	Not captured during profiling; flamegraph/ranked still work
effectDuration / passiveEffectDuration	null	Not available from the devtools protocol

Test plan

• 8 new unit tests covering: null cases, version format, commit mapping, change descriptions, snapshots, tree base durations, JSON serialization
• All 76 tests pass
• Manual: profile a real app, export, import into React DevTools Profiler tab

[changeset-bot]

🦋 Changeset detected

Latest commit: e456530

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
agent-react-devtools	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kacper-mikolajczak]

CC @piotrski

[piotrski]

Nice work, thanks for the contribution! I tested this end-to-end with the Vite example app and found a few issues that I've fixed in fix/profile-export-review-fixes. Feel free to cherry-pick these into your branch or let me know if you'd prefer I merge them differently.

Fixes:

1. Race condition in profiling data collection — processProfilingData() rejects data when stoppedAt is set, but stopProfilingAndCollect() requests data asynchronously and the response arrives after profiler.stop() runs. This results in 0 commits captured. Fix: remove the stoppedAt guard.

2. Incomplete initialTreeBaseDurations — only included nodes from the first commit's fiberSelfDurations, leaving most tree nodes without a base duration. The React DevTools flame graph needs an entry for every node to render. Fix: include all nodes in the subtree, defaulting to 0 for components that never rendered.

3. Multi-root snapshot duplication — all nodes were assigned to every root's snapshots. Fix: walk each root's subtree and only include its own nodes. Also restore element type 11 for root nodes (was mapped to 9/other).

4. SnapshotNodeExport.key type — was number | string | null but ComponentNode.key is string | null.

5. Pretty-print exported JSON — JSON.stringify(data, null, 2) for readability.

[kacper-mikolajczak]

Thanks for the fixes! Merged them into the branch.

One thing I wanted to check - my earlier commits had a raw data passthrough that preserved some extra commit-level fields on export:

• effectDuration / passiveEffectDuration - would show up in DevTools commit details
• priorityLevel - React's scheduling priority per commit
• updaters - which components triggered a render

With the current approach these end up as null in the export. DevTools still loads fine, it just won't display that info. Do you think it's worth preserving those, or is the simpler reconstruction approach good enough for now?