Add resizable inline right panels#2512
Conversation
- Wrap plan and diff sidebars in a shared resizer - Persist widths as ratios in local storage - Simplify sidebar layout to use full-width content
- Coalesce width ratio updates through a single commit helper - Keep the ref and React state in sync during pointer-driven resizing
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
…e-fix # Conflicts: # apps/web/src/routes/_chat.$environmentId.$threadId.tsx
ApprovabilityVerdict: Needs human review Introduces new user-facing behavior (resizable right panels) via a new component. While implementation is clean and simplifies existing code, new UI capabilities warrant human review. You can customize Macroscope's approvability policy. Learn more. |
Dismissing prior approval to re-evaluate 385b32c
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 3 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 01315d1. Configure here.
- Guard body style cleanup to avoid leaking resize cursor state - Keep the diff sidebar mounted when closed so width is preserved
Dismissing prior approval to re-evaluate 52721c9

What Changed
Added a reusable resizable right-panel wrapper and used it for the inline plan/tasks sidebar and inline diff panel. The panel now defaults to 40% of the available chat area, can be resized between 30% and 80%, and persists the chosen width separately for plan/tasks and diff panels.
Why
The plan/tasks sidebar was fixed-width, so users could not adjust the space split between the conversation and the right-side detail panel. A percentage-based resizer matches the requested behavior and keeps the layout proportional when the window or left sidebar changes.
UI Changes
Screen.Recording.2026-05-05.at.7.34.29.AM.mov
Checklist
Note
Medium Risk
Introduces new pointer-driven resizing logic and localStorage persistence for sidebar widths, which can affect layout behavior across screen sizes and input devices. Risk is moderate due to UI interaction complexity but remains confined to chat right-panel rendering.
Overview
Adds a shared
ResizableRightPanelwrapper to make inline right-side panels draggable-resizable, persisting width as a clamped ratio (default 40%, 30–80%) in localStorage.Updates the chat plan/tasks sidebar and the inline diff viewer to use this wrapper (with new
*_width_ratiokeys), and adjustsPlanSidebarsidebar mode to fill its container rather than enforce a fixed width. The diff route’s inline panel implementation is simplified by removing the previousSidebarProvider/pixel-constraint resizer in favor of the new ratio-based panel.Reviewed by Cursor Bugbot for commit 52721c9. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add resizable inline right panels for Plan and Diff sidebars
ResizableRightPanel, a generic draggable panel that clamps its width ratio between 30%–80% and persists it tolocalStorage.ResizableRightPanel(stored underchat_plan_sidebar_width_ratio);PlanSidebardrops its fixed 340px width in favor ofw-full.SidebarProvider-based inline diff panel in_chat.$environmentId.$threadId.tsxwithResizableRightPanel(stored underchat_diff_sidebar_width_ratio), removing previous pixel-based min/max width constraints.Macroscope summarized 52721c9.