fix(web): smooth panel and surface transitions

[piyushpradhan]

What Changed

• Smooths left sidebar, right panel, terminal drawer, sheet, dialog, and floating-surface transitions with shared short easing curves.
• Keeps right-panel content alive only for its exit transition and mounts terminal drawers only after first use.
• Prevents the chat column from becoming a transient vertical scroll container while the terminal drawer animates.
• Honors reduced-motion preferences and avoids animation state in the virtualized message list.

Why

Panels and menus changed state abruptly, and the terminal drawer could briefly introduce a scrollbar that shifted the chat layout. The updated transitions preserve spatial continuity without leaving hidden expensive surfaces running.

UI Changes

Closed panel state:

Right panel open:

Terminal drawer open without a viewport gutter shift:

Motion recording:

browser-recording-msrf7m4w.mp4

Across all 20 sampled terminal-animation frames, innerWidth, clientWidth, and body.scrollWidth stayed at 1280 px; document height stayed at 800 px.

Checklist

• I tested the change locally
• I included tests for changed behavior
• I updated documentation where applicable
• I did not include unrelated changes

Generated by GPT-5.6-Sol via the Codex harness in T3 Code.

---

Note

Medium Risk
Touches core ChatView panel/terminal lifecycle and focus/interaction (inert, shortcuts); regressions could affect layout, keyboard handling, or expensive hidden surfaces, but behavior is covered by new logic and shell tests.

Overview
Adds shared motion tokens and exit animations so the right panel, terminal drawer, sidebar, and floating UI change state without abrupt layout jumps.

Right panel keeps the selected surface mounted for ~200ms after close (selectSelectedRightPanelSurface, retainClosedRightPanelContent) while PreviewPanelShell animates width/opacity and marks hidden inline panels inert/aria-hidden. Preview/terminal panels get a visible prop; launcher letter shortcuts disable when the panel is hidden.

Terminal drawer stays mounted when collapsed via grid-row animation (.terminal-drawer-motion) instead of unmounting or hidden; reconcileMountedTerminalThreadIds now treats activeThreadTerminalMounted as open-or-already-mounted so exit transitions can finish.

Layout polish: chat column uses overflow-hidden during drawer motion; scroll-to-bottom pill and buttons get press/motion-reduce behavior; titlebar padding transitions move onto COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS with 240ms drawer easing.

^{Reviewed by Cursor Bugbot for commit 1c497b9. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add smooth animated transitions to chat panels, drawers, and floating surfaces

• Right panel content (preview and terminal) now persists briefly after close to play an exit animation, then becomes inert/aria-hidden rather than unmounting immediately; maximized state clears after the exit duration.
• PreviewPanelShell collapses width to 0 when hidden and uses an overlay to allow sibling expansion during maximized exit transitions.
• PersistentThreadTerminalDrawer stays mounted when invisible, using inert/aria-hidden instead of unmounting, so it can animate entry/exit via the new .terminal-drawer-motion CSS class.
• Shared motion utilities (.floating-surface-motion, .chat-floating-pill-transition) are added to index.css with motion-reduce fallbacks; sidebar open/close timing is updated to 240ms with a drawer-specific easing curve.
• Keyboard shortcuts and interactive state (focus, shortcut labels) are disabled while panels are hidden to prevent interaction with inert content.

^{Macroscope summarized 1c497b9.}

[coderabbitai]

Important

Review skipped

Auto 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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 06b75949-e896-4cf4-9b1b-932e6a285695

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

---

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

[macroscopeapp]

Approvability

Verdict: Approved at 1c497b9

Macroscope's review found this PR approvable — UI animation polish adding smooth transitions to panels, drawers, and surfaces. Changes are visual-only with motion-reduce accessibility support. Author has extensive recent history on these files for this feature.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 1eaa4e8

[macroscopeapp]

Two interaction regressions introduced by the new panel/drawer collapse wrappers. Both are inside the animated containers added by this PR; the rest of the motion-token work (shared --motion-ease-*, floating-surface-motion, primitive motion-reduce fallbacks) looks consistent.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two issues found in the interaction/motion pass. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the motion/visibility refactor against the shared component system. Both findings from the previous run look addressed (the resize handle now sits outside the panel content clip, and the terminal drawer animates with a content-sized grid row instead of a pinned store height). Two new consistency issues below.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new right-panel exit animation. Prior findings (sidebar/titlebar timing desync, inline panel 1px crop, reduced-motion press scale, maximized-exit reveal) all look addressed in this head.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate cc440a8

[macroscopeapp]

One finding: the titlebar control cluster switches containers at the start of the right-panel exit animation instead of after it, so it teleports (Electron) or is painted under the fading panel (browser) for ~200ms. The previously flagged maximized-exit stacking problem looks resolved by isolate on the chat column.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 3338aeb. Configure here.}