Add resizable inline right panels

[shivamhwp]

• Wrap plan and diff sidebars in a shared resizer
• Persist widths as ratios in local storage
• Simplify sidebar layout to use full-width content

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

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI/layout change that introduces a shared drag-resize wrapper and updates persistence keys; main risk is minor regressions in pointer/resize handling and panel sizing across breakpoints.

Overview
Adds a reusable ResizableRightPanel that supports drag-resizing the right-side inline panel, clamps width between 30–80% (default 40%), and persists the chosen width ratio to localStorage.

Updates the inline plan/tasks sidebar (ChatView) and inline diff panel (_chat.$environmentId.$threadId) to use this wrapper, replacing the prior fixed/pixel-based sizing; PlanSidebar now fills its container (w-full) to work inside the resizable panel.

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

Note

Add resizable inline right panels for the diff and plan sidebars

• Introduces ResizableRightPanel, a new component that lets users drag-resize a right panel. Width is stored as a ratio (default 40%, min 30%, max 80%) and persisted to localStorage.
• Wraps the inline plan sidebar in ResizableRightPanel with width persisted under chat_plan_sidebar_width_ratio.
• Rewrites the inline diff panel in _chat.$environmentId.$threadId.tsx to use ResizableRightPanel, replacing the previous pixel-based min/max constraints and SidebarProvider implementation.
• PlanSidebar in sidebar mode now uses w-full instead of a fixed w-[340px] to fill its resizable container.
• Behavioral Change: The diff panel no longer manipulates URL search params to force diff=1 open; open/close is controlled solely by diffOpen.

^{Macroscope summarized 8a193e5.}

[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: 8beeb998-2026-48e1-95ff-94dea8f41e71

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

[macroscopeapp]

Approvability

Verdict: Approved

This PR refactors sidebar resize functionality into a reusable ResizableRightPanel component while simplifying existing code (net -131 lines). Changes are purely client-side UI with no security, auth, or backend implications.

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

Dismissing prior approval to re-evaluate 385b32c

[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 8a193e5. Configure here.}

[cursor]

Inline diff panel loses "keep mounted" optimization on close

Medium Severity

The refactored DiffPanelInlineSidebar returns null when !diffOpen, fully unmounting the diff panel on every close. The old code used renderDiffContent (backed by shouldRenderDiffContent = diffOpen || hasOpenedDiff) to keep the content mounted even when the sidebar was visually hidden, preserving scroll position, view state, and the DiffWorkerPoolProvider worker pool. Now shouldRenderDiffContent is computed but unused in the inline path (it's only used in the sheet path at line 171), and toggling the diff panel repeatedly tears down and recreates the worker pool and component tree.

Additional Locations (1)

• apps/web/src/routes/_chat.$environmentId.$threadId.tsx#L140-L141

 

^{Reviewed by Cursor Bugbot for commit 8a193e5. Configure here.}