docs: update profiling output examples with changed keys

Author: piotrski

README.md

@@ -97,8 +97,8 @@ agent-react-devtools profile slow
 
 ```
 Slowest (by avg render time):
-  @c5 [fn] TodoList  avg:4.2ms  max:8.1ms  renders:6  causes:props-changed
-  @c4 [fn] SearchBar  avg:2.1ms  max:3.4ms  renders:12  causes:hooks-changed
+  @c5 [fn] TodoList  avg:4.2ms  max:8.1ms  renders:6  causes:props-changed  changed: props: items, onDelete
+  @c4 [fn] SearchBar  avg:2.1ms  max:3.4ms  renders:12  causes:hooks-changed  changed: hooks: #0
   @c2 [fn] Header  avg:0.8ms  max:1.2ms  renders:3  causes:parent-rendered
 ```
 

packages/agent-react-devtools/skills/react-devtools/SKILL.md

@@ -89,12 +89,14 @@ hooks:
 
 ```
 Slowest (by avg render time):
-  @c3 [fn] ExpensiveList  avg:12.3ms  max:18.1ms  renders:47  causes:props-changed
-  @c4 [fn] TodoItem  avg:2.1ms  max:5.0ms  renders:94  causes:parent-rendered, props-changed
+  @c3 [fn] ExpensiveList  avg:12.3ms  max:18.1ms  renders:47  causes:props-changed  changed: props: items, filter
+  @c4 [fn] TodoItem  avg:2.1ms  max:5.0ms  renders:94  causes:parent-rendered, props-changed  changed: props: onToggle
 ```
 
 Render causes: `props-changed`, `state-changed`, `hooks-changed`, `parent-rendered`, `force-update`, `first-mount`.
 
+When specific changed keys are available, a `changed:` suffix shows exactly which props, state keys, or hooks triggered the render (e.g. `changed: props: onClick, className  state: count  hooks: #0`).
+
 ## Common Patterns
 
 ### Wait for the app to connect after a reload

packages/agent-react-devtools/skills/react-devtools/references/commands.md

@@ -65,21 +65,31 @@ Stop profiling and collect data from React. Shows a summary with duration, commi
 ### `agent-react-devtools profile slow [--limit N]`
 Rank components by average render duration (slowest first). Default limit: 10.
 
-Output columns: label, type tag, component name, avg duration, max duration, render count, all causes.
+Output columns: label, type tag, component name, avg duration, max duration, render count, all causes, changed keys.
 
 ### `agent-react-devtools profile rerenders [--limit N]`
 Rank components by render count (most re-renders first). Default limit: 10.
 
-Output columns: label, type tag, component name, render count, all causes.
+Output columns: label, type tag, component name, render count, all causes, changed keys.
 
 ### `agent-react-devtools profile report <@cN | id>`
-Detailed render report for a single component: render count, avg/max/total duration, all render causes.
+Detailed render report for a single component: render count, avg/max/total duration, all render causes, changed keys.
 
 ### `agent-react-devtools profile timeline [--limit N]`
 Chronological list of React commits during the profiling session. Each entry: index, duration, component count.
 
 ### `agent-react-devtools profile commit <N | #N> [--limit N]`
-Detail for a specific commit by index. Shows per-component self/total duration and render causes.
+Detail for a specific commit by index. Shows per-component self/total duration, render causes, and changed keys.
+
+### Changed Keys
+
+When React DevTools reports which specific props, state keys, or hooks triggered a re-render, profiling commands append a `changed:` suffix:
+
+```
+changed: props: onClick, className  state: count  hooks: #0
+```
+
+Categories with no changes are omitted. Keys are deduplicated across commits in aggregate reports (`profile slow`, `profile rerenders`, `profile report`).
 
 ## Setup
 

packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

@@ -59,15 +59,15 @@ Once you identify a suspect, get its full render report:
 agent-react-devtools profile report @c12
 ```
 
-This shows all render causes. Common patterns:
+This shows all render causes and the specific changed keys (e.g. `changed: props: onClick, className  state: count`). Use the changed keys to pinpoint exactly what to stabilize or investigate. Common patterns:
 
-| Cause | Meaning | Typical Fix |
-|-------|---------|-------------|
-| `parent-rendered` | Parent re-rendered, child has no bailout | Wrap child in `React.memo()` |
-| `props-changed` | Received new prop references | Stabilize with `useMemo`/`useCallback` in parent |
-| `state-changed` | Component's own state changed | Check if state update is necessary |
-| `hooks-changed` | A hook dependency changed | Review hook dependencies |
-| `first-mount` | Initial render | Normal — not a problem |
+| Cause | Changed keys example | Meaning | Typical Fix |
+|-------|---------------------|---------|-------------|
+| `parent-rendered` | _(none)_ | Parent re-rendered, child has no bailout | Wrap child in `React.memo()` |
+| `props-changed` | `props: onClick, style` | Received new prop references | Stabilize the listed props with `useMemo`/`useCallback` in parent |
+| `state-changed` | `state: count, filter` | Component's own state changed | Check if the listed state updates are necessary |
+| `hooks-changed` | `hooks: #0, #2` | A hook dependency changed | Review deps of the listed hooks (by index) |
+| `first-mount` | _(none)_ | Initial render | Normal — not a problem |
 
 ### 5. Inspect the Component
 
@@ -101,7 +101,7 @@ Compare render counts and durations to confirm improvement.
 A parent component re-renders (e.g., from a timer or context change) and all children re-render because none use `React.memo`. Look for high re-render counts with `parent-rendered` cause.
 
 ### Unstable prop references
-Parent passes `onClick={() => ...}` or `style={{...}}` inline — creates new references every render, defeating `memo()`. The child shows `props-changed` as the cause even though the values are semantically identical.
+Parent passes `onClick={() => ...}` or `style={{...}}` inline — creates new references every render, defeating `memo()`. The child shows `props-changed` as the cause even though the values are semantically identical. The `changed:` output tells you exactly which props are the culprits (e.g. `changed: props: onClick, style`).
 
 ### Expensive computations without memoization
 A component does heavy work (filtering, sorting, formatting) on every render. Shows up as high avg render time. Fix with `useMemo`.