React Devtools MCP

# 1. Storybook with the React DevTools hook installed (port 6006, long-running)
pnpm react-devtools-mcp:storybook

# 2. Chrome with the remote debugging port open, showing one story
#    (url defaults to iframe.html?viewMode=story&id=primitives-button--default)
pnpm react-devtools-mcp:chrome
pnpm react-devtools-mcp:chrome "http://localhost:6006/iframe.html?viewMode=story&id=components-menubutton--default"
pnpm react-devtools-mcp:chrome --headless            # no display (CI, cloud VM without X)

# 3. chrome-devtools-mcp attached to that Chrome — pick ONE of:
#    a) Cursor: .cursor/mcp.json defines the `chrome-devtools` server (the workspace-installed,
#       lockfile-pinned chrome-devtools-mcp under apps/storybook/node_modules) with
#       --categoryExperimentalThirdParty=true --browserUrl=http://127.0.0.1:9222
#    b) Terminal / cloud agents (same tools, no MCP client needed):
pnpm --filter sanity-ui-storybook exec chrome-devtools start \
  --categoryExperimentalThirdParty=true --browserUrl=http://127.0.0.1:9222

$CD list_pages                                   # page ids; the story page is normally 1
$CD list_3p_developer_tools 1                    # REQUIRED once per page load: discovers the react_* tools
$CD execute_3p_developer_tool 1 react_get_component_tree --params '{"depth":40}'
$CD execute_3p_developer_tool 1 react_find_components --params '{"name":"Button"}'
$CD execute_3p_developer_tool 1 react_get_component_by_uid --params '{"uid":"r20","includeHooks":true}'
$CD execute_3p_developer_tool 1 react_get_component_source --params '{"uid":"r20"}'
$CD execute_3p_developer_tool 1 react_get_parent_stack --params '{"uid":"r20"}'

# Profile an interaction
$CD execute_3p_developer_tool 1 react_start_profiling --params '{"traceName":"open-menu"}'
$CD take_snapshot 1                              # find the element uid to interact with (e.g. 1_1)
$CD click 1 1_1
$CD execute_3p_developer_tool 1 react_stop_profiling
$CD execute_3p_developer_tool 1 react_get_trace_overview --params '{"traceName":"open-menu"}'
$CD execute_3p_developer_tool 1 react_get_commit_report --params '{"traceName":"open-menu","commitIndex":1}'

$CD navigate_page 1 --type url --url "http://localhost:6006/iframe.html?viewMode=story&id=<id>"
$CD stop                                         # stop the daemon when done

$CD execute_3p_developer_tool 1 react_stop_profiling
{"status": "stopped", "traceName": "open-menu", "commits": 5}

$CD execute_3p_developer_tool 1 react_get_trace_overview --params '{"traceName":"open-menu"}'
[{"commit":0,"committedAt":732,"renderDuration":2.3,"layoutDuration":0.6,"passiveDuration":0.8,"componentsChanged":166},
 {"commit":1,"committedAt":739,"renderDuration":2.5,"layoutDuration":2.5,"passiveDuration":0.2,"componentsChanged":156},
 ...]

$CD execute_3p_developer_tool 1 react_get_commit_report --params '{"traceName":"open-menu","commitIndex":1}'
priority: Sync, 156 components, sorted by actualDuration:
  r150 forwardRef styled.div            actual=3.00 self=0.30
  r152 function   Forget(FlexComponent) actual=2.70 self=0.10
  r0   function   Forget(MenuButton)    actual=2.50 self=0.20