Fix desktop inline diff panel layout and resize behavior

[sabraman]

Summary

This PR fixes a set of closely related desktop diff panel regressions in the web app.

On desktop, opening the diff panel was still affecting the layout in the wrong places. The header needed to stay fixed while the diff opened inside the main messages area and pushed the rest of the post-header content with it. The inline panel also needed to behave like the original implementation during resize, and the diff header turn strip needed a proper edge fade instead of a detached overlay.

What changed

The desktop thread route now mounts the diff panel inline inside ChatView instead of rendering it as a separate sibling sidebar. ChatView owns the split layout below the header, so the diff opens in the same space as the messages, composer, and checkout toolbar without shifting the header itself.

The inline diff panel now has a draggable resize handle with col-resize cursor feedback. The resize path uses direct DOM width updates during pointer drag and only persists the final width when the drag ends, which restores the smoother behavior from the original implementation and avoids React-driven drag lag.

The diff shell layout was also adjusted so desktop inline empty states fill the available height correctly. That keeps states like No completed turns yet. centered inside the panel instead of sitting at the top of the body.

Finally, the diff turn-strip edge fade no longer uses a painted overlay. The fade is now applied to the scrollable content itself with a dedicated ScrollFadeEffect component and matching mask utilities, which fixes the header misalignment artifact visible while horizontally scrolling the turn chips.

User-visible effect

Before this change:

• Opening the desktop diff panel resized or shifted layout in ways that affected the header.
• The inline resize interaction felt constrained and laggy.
• Empty-state content in the inline diff panel did not stay vertically centered on desktop.
• The turn-strip edge fade could drift visually and appear as a detached dark patch over the header controls.

After this change:

• The header stays fixed while the diff opens below it in the main content area.
• The composer and checkout area shift with the inline diff, not the header.
• The inline diff can be resized smoothly with cursor feedback.
• Empty states are centered inside the desktop inline panel.
• The turn-strip edge fade is aligned with the scrolling content.

Validation

• bun fmt
• bun lint (existing repo warnings only)
• bun typecheck

Notes

This is intentionally scoped to the desktop inline diff layout and its related diff-header interactions. It does not change the mobile diff sheet behavior.

Note

Fix desktop inline diff panel layout and resize behavior in ChatView

• Replaces the previous SidebarProvider-based inline diff implementation with a native resizable aside rendered directly inside ChatView, controlled by the new messagesAside and messagesAsideOpen props.
• The aside sits to the right of the chat column, below the header, with a draggable col-resize handle; width persists to localStorage under chat_diff_inline_width and restores on mount.
• Width is clamped to keep minimum widths for both the aside and the main content column, and recalculates on container resize via ResizeObserver.
• DiffPanelShell no longer imposes its own width in inline mode; width is fully controlled by the parent aside container.
• Adds a new ScrollFadeEffect component and supporting CSS in index.css to fade the turn-chip strip at scroll edges in DiffPanel.
• Behavioral Change: the diff panel no longer uses the Radix sidebar/resizable rail; existing persisted sidebar widths will not carry over to the new localStorage key.

^{Macroscope summarized 7571000.}

---

Note

Medium Risk
Touches core ChatView layout and introduces pointer-driven resizing with persisted width, which could cause desktop UI regressions across viewports and input types despite being client-only.

Overview
Fixes the desktop inline diff experience by moving inline diff rendering/ownership into ChatView (via new messagesAside / messagesAsideOpen props), so the diff opens below the chat header and only the post-header content participates in the split layout.

Adds a resizable right-side aside with pointer-event drag handling, width clamping, and localStorage persistence/restoration for the inline diff width; the route-level inline sidebar implementation is removed while the mobile/narrow diff sheet path remains.

Improves diff panel presentation by making DiffPanelShell fill its parent (so empty states center correctly) and replacing the turn-strip gradient overlays with a ScrollFadeEffect + new CSS mask/scroll-timeline utilities for edge fades. Adds browser tests covering layout placement, collapse behavior during resize sync, and persisted width restore.

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

[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

Run ID: 733739e8-362e-452e-9b34-b1cf5d020ab6

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dc6cd30f0a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR refactors the desktop diff panel from a sidebar-based layout to an inline implementation with custom pointer-based resize handling. While well-tested, it introduces significant new UI behavior including resize logic with state management and localStorage persistence, warranting human review given the scope and that the author is not a frequent contributor to the core ChatView file.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes 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 d167e3d. Configure here.}