[AGE-3943] fix(frontend): scroll the build-mode sessions tab row (#5249)

[ardaerzin]

Context

In Playground build mode the horizontal sessions tab row could not be scrolled with the mouse wheel or trackpad, so with many sessions some tabs were unreachable. The row had horizontal overflow but no wheel handling, and a mouse wheel only emits a vertical delta.

Changes

A wheel handler maps the wheel delta to horizontal scroll, normalized for line-mode wheels and applied instantly so it does not fight the strip's smooth-scroll. The strip gets a slight left and right edge fade (the same mask idea as the chat viewport) so tabs dissolve into the edges instead of a hard cut. A newly added session scrolls into view as it animates in, so it is never left off-screen.

Tests / notes

• Typecheck and lint clean.
• Coexists with the upstream Motion session-bar animation. The enter animation is unchanged.

What to QA

• Build mode: create enough sessions to overflow the tab row. Scroll the mouse wheel or trackpad over it; the row scrolls horizontally. The last tab fades at the right edge instead of a hard cut.
• Scroll to the end, add a session. The view scrolls to reveal the new tab.
• Regression: closing a tab still animates the gap closed.

Closes #5249.

[linear-code]

AGE-3943

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jul 12, 2026 10:17pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8c0e1206-42ff-4e14-8a2b-686925009268

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

Walkthrough

SessionTagBar now fades session-strip edges, normalizes wheel and trackpad scrolling, and temporarily disables smooth scrolling during wheel adjustments. Newly added active sessions scroll into view during their width animation.

Changes

Session strip scrolling

Layer / File(s)	Summary
Session strip scrolling and active-tab visibility web/oss/src/components/AgentChatSlice/components/SessionTagBar.tsx	Adds edge-fade masks and normalized wheel scrolling, while scrolling newly added active tabs into view as their animated width grows. Clarifies reduced-motion reveal comments.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• Agenta-AI/agenta#4983: Introduced and used SessionTagBar, which this change extends with scrolling behavior.
• Agenta-AI/agenta#5008: Updated SessionTagBar rendering and session-chip visibility behavior.
• Agenta-AI/agenta#5112: Added related logic for scrolling newly activated session tabs into view.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: enabling scroll behavior for the build-mode sessions tab row.
Description check	✅ Passed	The description matches the implemented scroll handling and related UI polish for the build-mode sessions row.
Linked Issues check	✅ Passed	The PR addresses #5249 by making the build-mode sessions row scroll with wheel and trackpad so hidden sessions are reachable.
Out of Scope Changes check	✅ Passed	The fade mask and auto-reveal behavior are directly tied to the scrolling experience and do not introduce unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fe-fixes/agent-sessions-bar

---

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.}

[ardaerzin]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/oss/src/components/AgentChatSlice/components/SessionTagBar.tsx (1)

135-145: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

onUpdate fires scrollIntoView on every animation frame.

Each onUpdate callback during the spring animation forces a layout reflow via scrollIntoView. Spring animations can run for hundreds of milliseconds at 60fps, producing 30+ calls. Since the element's width is already changing (the animation itself triggers layout), the incremental cost is modest, but if you observe jank on lower-end devices, consider throttling (e.g., requestAnimationFrame coalescing) or only calling scrollIntoView when the element's right edge exceeds the viewport.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 62ab2915-9680-40c4-8528-c674e9c12d83

📥 Commits

Reviewing files that changed from the base of the PR and between cc07623 and a5f149b.

📒 Files selected for processing (1)

• web/oss/src/components/AgentChatSlice/components/SessionTagBar.tsx

[ardaerzin]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.