fix: replace misplaced decorative cursor with tracked terminal block cursor

[itomek]

Summary

• Removes the decorative .input-cursor span that was positioned as a flex sibling to the right of the textarea, causing it to appear on the wrong (right) side of the input box
• Replaces it with a properly positioned block cursor inside .input-content that tracks the actual caret position using a mirror-div technique
• The cursor follows the caret while typing, blinks with AMD red glow, and disappears on blur — native caret is hidden via caret-color: transparent

Test plan

• Open Agent UI, click the chat input — block cursor appears at left, AMD red with glow
• Type text — block cursor tracks the caret position character by character
• Use arrow keys and click to reposition — cursor follows correctly
• Use Shift+Enter for multiline — cursor tracks to correct line
• Verify in light mode and dark mode — cursor visible and correctly colored in both
• Blur the input (click away) — cursor disappears
• During streaming — cursor is hidden

Closes #726

[itomek]

@claude review this PR

[github-actions]

Claude finished @itomek's task —— View job

---

Code Review

• Read the changed files
• Analyze the implementation
• Provide code review feedback

---

Overall, this is a solid fix that correctly addresses the misplaced cursor issue. The mirror-div technique for caret tracking is a well-established approach. Here's my detailed review:

🟢 What looks good

1. Correct root cause fix - Moving the cursor from a flex sibling to an absolutely positioned element inside .input-content is the right approach
2. Mirror-div technique - The getCaretXY function properly clones textarea styles for accurate caret measurement
3. Performance considerations - Using requestAnimationFrame to debounce caret updates prevents excessive re-renders
4. Cleanup - The useEffect cleanup properly cancels pending animation frames
5. Accessibility - aria-hidden="true" correctly hides the decorative cursor from screen readers
6. Test updates - Test assertions were updated to verify the new positioning approach

🟡 Suggestions for improvement

1. Duplicate rafRef declaration (ChatView.tsx:208 and ChatView.tsx:229)

   const rafRef = useRef<number>(0);  // line 208
   // ...
   const rafRef = useRef<number | null>(null);  // line 229 (streaming buffer)

   The second declaration shadows the first. Consider renaming one (e.g., caretRafRef and streamRafRef) to avoid confusion, even though both work due to block scoping.

2. Missing updateCaret call on input change (ChatView.tsx:1440-1441)
   The caret position should update when text changes, not just on selection. Consider calling updateCaret inside handleInputChange:

   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setInput(e.target.value);
       // ... existing code ...
       updateCaret();  // Add this
   };

3. Consider memoizing computed styles (ChatView.tsx:60)
   window.getComputedStyle() is called on every caret update. While the rAF debouncing helps, consider caching styles if performance becomes an issue on lower-end devices.

🟢 Minor observations

• The cursor dimensions changed from 8x17 to 10x18 - this is fine and may improve visibility
• pointer-events: none correctly prevents the cursor from interfering with text selection
• The caretColor: transparent inline style cleanly hides the native caret

Test coverage

The test update correctly verifies:

• .input-cursor exists with position: absolute
• pointer-events: none is set
• Width is 10px

The test also fixes unrelated assertions about dependencies vs devDependencies for React/Zustand/lucide-react packages.

---

Verdict: Approve with minor suggestions. The implementation is correct and the fix properly addresses #726. The duplicate rafRef naming could be cleaned up for clarity but doesn't cause bugs.

---

[itomek]

@claude review this PR

[github-actions]

Claude finished @itomek's task —— View job

---

Code Review

• Read the changed files
• Analyze the implementation
• Provide code review feedback

---

All three suggestions from my previous review have been addressed:

1. Duplicate rafRef fixed - Renamed to caretRafRef (line 216) and streamRafRef (line 237)
2. updateCaret in handleInputChange - Added at line 452
3. Computed style caching - _computedStyleCache WeakMap added at line 19

Implementation Quality

🟢 Excellent fixes:

• WeakMap cache (ChatView.tsx:19) prevents memory leaks while avoiding repeated getComputedStyle calls
• caretRafRef vs streamRafRef naming clearly distinguishes the two animation frame refs
• onSelect={updateCaret} handles arrow key navigation and mouse clicks

🟢 The cursor implementation is correct:

• Mirror-div technique (getCaretXY) accurately measures caret position across fonts and multiline
• position: relative on .input-content + position: absolute on .input-cursor = proper containment
• pointer-events: none prevents cursor from blocking text selection
• aria-hidden="true" correctly hides decorative element from screen readers

Minor observation

The computed style cache will persist for the lifetime of the textarea element. If the user resizes the window, computed.width in the cache would be stale. However, since getCaretXY creates a fresh mirror div each call and uses the cached CSSStyleDeclaration object (which is live and updates automatically), this should work correctly. The CSSStyleDeclaration from getComputedStyle() is a live object, so caching it is safe.

---

Verdict: ✅ Approve — All previous feedback addressed, implementation is clean and correct.

---