fix(playground): auto-focus chat input when active session changes

[keval718]

Summary

When a new playground session was created — or when the user switched between sessions in the sidebar, or simply opened the playground for the first time — the chat textarea did not receive focus. The cursor sat idle, forcing an extra click before the user could start typing. This PR removes that friction.

ChatInput now subscribes to useSessionManagerStore.activeSessionId and focuses the textarea whenever that id changes. The focus call is wrapped in requestAnimationFrame so it runs after the AnimatePresence / motion mount transition settles — otherwise the framer-motion lifecycle would steal focus back. Cleanup cancels any pending rAF if the component unmounts or the effect re-runs before the frame fires.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 806e70ab-3eb9-44e9-b4f8-dc540f9198c5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

ChatInput component now auto-focuses its textarea input when the active session ID changes. The implementation uses useSessionManagerStore to track the active session and schedules focus via requestAnimationFrame to avoid conflicts with motion animations. A comprehensive test suite validates auto-focus behavior across initial mount, session changes, unmount cleanup, and edge cases.

Changes

Auto-focus on active session change

Layer / File(s)	Summary
Auto-focus implementation src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/chat-input.tsx	ChatInput imports useSessionManagerStore and adds a useEffect hook that auto-focuses the textarea when activeSessionId changes, guarded by the noInput state and deferred via requestAnimationFrame to prevent focus conflicts during motion transitions.
Auto-focus validation tests src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx	Test suite mocks stores, hooks, and components; provides a flushRaf helper; and validates six scenarios covering no focus without an active session, single focus on mount with a session, focus on session ID changes, no focus when noInput is true, pending focus cancellation on unmount, and no re-focus when session ID remains unchanged.

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 8 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (8 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: auto-focusing the chat input when the active session changes, which aligns perfectly with the primary modification adding session-aware focus logic.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Test Coverage For New Implementations	✅ Passed	PR includes comprehensive test suite with 6 test cases covering all new auto-focus functionality aspects: mount behavior, session changes, guards, unmount cleanup, and idempotency.
Test Quality And Coverage	✅ Passed	Six test cases cover auto-focus: null session, mount focus, session change, noInput, rAF cleanup, idempotency. Proper Jest/RTL mocks and async patterns; explicit behavior assertions.
Test File Naming And Structure	✅ Passed	Test file correctly named (*.test.tsx), uses Jest/React Testing Library, has descriptive test names, proper beforeEach setup, and covers edge cases plus positive/negative scenarios.
Excessive Mock Usage Warning	✅ Passed	All 10 mocks are necessary dependencies of ChatInput component; they enable isolation of the auto-focus feature being tested (real behavior), not masking of core logic under test.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/playground-autofocus-new-session

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

✅ Test Coverage Advisor

No source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉

Advisory check only — never blocks merge.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 55.69%. Comparing base (1fe9b39) to head (5172ba0).

Additional details and impacted files

@@                Coverage Diff                 @@
##           release-1.10.0   #13310      +/-   ##
==================================================
+ Coverage           55.42%   55.69%   +0.27%     
==================================================
  Files                2179     2179              
  Lines              205846   205924      +78     
  Branches            31073    29414    -1659     
==================================================
+ Hits               114091   114691     +600     
+ Misses              90427    89904     -523     
- Partials             1328     1329       +1     

Flag	Coverage Δ
backend	60.42% <ø> (+0.09%)	⬆️
frontend	55.57% <100.00%> (+0.37%)	⬆️
lfx	51.71% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...roundComponent/chat-view/chat-input/chat-input.tsx	85.35% <100.00%> (+42.57%)	⬆️

... and 48 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

🧹 Nitpick comments (1)

src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx (1)

64-83: ⚡ Quick win

Reduce core-component mocking in this suite.

Mocking ../components/input-wrapper hides real ref wiring and can let focus tests pass even if the actual wrapper breaks. Prefer keeping InputWrapper real and spying on textarea focus (document.activeElement or HTMLTextAreaElement.prototype.focus) while only mocking external dependencies.

As per coding guidelines, "Warn when mocks are used instead of testing real behavior and interactions, and suggest using real objects or test doubles when mocks become excessive" and "Ensure mocks are used appropriately for external dependencies only, not for core logic."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx`
around lines 64 - 83, Remove the jest.mock for "../components/input-wrapper" and
use the real InputWrapper in the chat-input.test.tsx suite; delete the focusMock
and mocked default export, import the actual InputWrapper component instead, and
replace assertions that relied on focusMock by spying on textarea focus behavior
(e.g., using HTMLTextAreaElement.prototype.focus or checking
document.activeElement) so tests verify real ref wiring and focus interactions
rather than the mocked implementation.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx`:
- Around line 64-83: Remove the jest.mock for "../components/input-wrapper" and
use the real InputWrapper in the chat-input.test.tsx suite; delete the focusMock
and mocked default export, import the actual InputWrapper component instead, and
replace assertions that relied on focusMock by spying on textarea focus behavior
(e.g., using HTMLTextAreaElement.prototype.focus or checking
document.activeElement) so tests verify real ref wiring and focus interactions
rather than the mocked implementation.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: acf841ab-25af-41a5-8291-8715e150c47b

📥 Commits

Reviewing files that changed from the base of the PR and between 1fe9b39 and a8c694b.

📒 Files selected for processing (2)

• src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx
• src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/chat-input.tsx

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	39.87% (50680/127087)	68.55% (6928/10106)	39.12% (1142/2919)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
4430	0 💤	0 ❌	0 🔥	10m 48s ⏱️