fix(frontend): Scroll new session tab into view in agent playground

[ardaerzin]

Context

In the agent playground, the session tab bar scrolls horizontally once there are more tabs than fit. Creating a new session appends its tab at the end of the strip and makes it active, but nothing scrolled the strip. With enough open sessions the new tab landed past the overflow edge, invisible, so it looked like nothing happened.

Changes

Each session tab in SessionTagBar now scrolls itself into view when it becomes active. Since a new session is always created active, this brings the fresh tab into focus; it also fixes the same blind spot when reopening an off-screen session from the history menu, and when the bar mounts with the active tab out of view.

The scroll uses block: "nearest" and inline: "nearest" so it only nudges the horizontal strip and never scrolls the page vertically, and falls back from smooth to instant when the user prefers reduced motion.

Tests / notes

• Prettier and ESLint pass; no behavior change for bars that do not overflow (nearest is a no-op when the tab is already visible).
• The full-screen vertical SessionRail is untouched: it inserts new sessions at the top, so they are visible unless the list is scrolled down.

What to QA

• In the agent playground, open sessions until the tab bar overflows, then click the + button. The new tab slides into view at the right edge and is active.
• With the bar overflowed and scrolled right, open a session from the history menu whose tab is off-screen on the left. The strip scrolls it into view.
• Regression: with only a few tabs, switching between them causes no scrolling or layout jump.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jul 7, 2026 11:45am

[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: ef828d25-dcef-4424-a55f-104875864215

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 auto-scrolls the active session chip into view inside the horizontal session strip, and the strip uses smooth scrolling when motion is allowed.

Changes

Session tag auto-scroll

Layer / File(s)	Summary
Active chip scroll-into-view behavior web/oss/src/components/AgentChatSlice/components/SessionTagBar.tsx	Adds useEffect import, a tabRef on SessionTag, a scrollIntoView effect when the chip becomes active, and motion-safe:scroll-smooth on the sessions strip container.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• Agenta-AI/agenta#4983: Introduces the SessionTagBar session-chip bar and related selection behavior that this scroll-into-view update extends.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: scrolling a new session tab into view in the agent playground.
Description check	✅ Passed	The description accurately describes the same tab-bar scrolling fix and related behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fe-fix/agent-session-tab-scroll-into-view

---

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]

🧹 Nitpick comments (1)

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

71-77: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Optional: extract shared reduced-motion helper.

The window.matchMedia("(prefers-reduced-motion: reduce)").matches check duplicates the pattern already used in AgentChatPanel.tsx's animatePinTo. Consider extracting a tiny shared prefersReducedMotion() utility to avoid drift between the two implementations.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8f47c94e-27a4-49a4-94d9-e64c9fff7215

📥 Commits

Reviewing files that changed from the base of the PR and between 39d482a and cb9d6e5.

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

66-74: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Re-run the scroll when the bar becomes visible
scrollIntoView() can run while the tab strip is still collapsed (for example during onboarding), and then never runs again when the strip expands because only active is in the dependency list. Include the visibility state (chromeHidden / chatMaximized) or another “became visible” signal so the active chip is scrolled into view after reveal.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ceaa9ce1-dcd1-4be0-8435-715f6818debb

📥 Commits

Reviewing files that changed from the base of the PR and between cb9d6e5 and 8bf3505.

📒 Files selected for processing (1)

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