feat: auto-scroll to edit location after user edits in diff view

[roomote]

Summary

This PR implements automatic scrolling to the edit location when users make manual edits in the diff view and approve changes, improving the user experience as described in #7996.

Changes

• Added a React ref () to track the user edit diff element
• Implemented a hook that detects when user edits appear ( messages)
• Added smooth scrolling behavior that centers the edited content in the viewport
• Included a small delay (100ms) to ensure the element is fully rendered before scrolling

Technical Details

The implementation:

1. Uses React's to create a reference to the diff view element
2. Monitors for messages via
3. Calls with smooth behavior and center alignment when edits appear
4. Follows existing code patterns and conventions in the codebase

Testing

• ✅ All existing tests pass (1034 tests passed)
• ✅ Type checking passes
• ✅ Linting passes
• ✅ Code review shows 95% confidence with no security issues

Related Issue

Fixes #7996

Future Considerations

As suggested in the review, we might consider adding a user preference setting to disable auto-scroll if some users find it disruptive. The current implementation should work well across different viewport sizes with the 'center' block alignment.

Screenshots/Demo

The feature automatically scrolls to show user edits in the center of the viewport after they are applied, making it easier to see and continue working with the changes.

---

Important

Adds auto-scroll to edit location in diff view after user edits in ChatRow.tsx, triggered by user_feedback_diff message.

• Behavior:
  • Auto-scroll to edit location in diff view after user edits, triggered by user_feedback_diff message.
  • Smooth scrolling with center alignment and 100ms delay for rendering.
• Implementation:
  • Added userEditRef using useRef in ChatRowContent.
  • useEffect in ChatRowContent listens for user_feedback_diff and scrolls to userEditRef.
• Testing:
  • All existing tests pass (1034 tests).
  • Type checking and linting pass.

^{This description was created by for 28cf54b. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Reviewing my own code is like debugging in a mirror - everything looks backwards but the bugs are still mine.

[roomote]

Is this intentional? The code assumes scrollIntoView is always available, but it might not be supported in all environments (e.g., during SSR or in test environments). Consider adding a safety check:

Suggested change

	userEditRef.current?.scrollIntoView({
	if (userEditRef.current?.scrollIntoView) {
	userEditRef.current.scrollIntoView({
	behavior: "smooth",
	block: "center",
	})
	}

[roomote]

Could we improve performance here? This useEffect runs on every render when message.say === "user_feedback_diff". The tool is parsed twice - once in the condition check and once inside. Consider memoizing the parsed tool to avoid unnecessary JSON parsing on each render.

[roomote]

Minor suggestion: Consider extracting this magic number to a named constant like SCROLL_DELAY_MS = 100 at the top of the file for better maintainability and clarity about its purpose.