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
UI-only layout and localStorage key changes; composer overflow guards limit regressions, and users may need to re-adjust panel width after the switch from pixel to ratio storage.

Overview
Adds a shared ResizableRightPanel so inline right panels (plan/tasks and diff) can be dragged between 30–80% of the chat row, default 40%, with widths saved as separate localStorage ratios (chat_plan_sidebar_width_ratio, chat_diff_sidebar_width_ratio). Resize is blocked when it would squeeze the chat composer below a minimum width.

The inline plan sidebar in ChatView is wrapped in this panel; PlanSidebar drops the fixed 340px width and fills the panel. The thread route’s inline diff panel replaces the old SidebarProvider / resizable Sidebar setup with the same wrapper and a simpler flex layout beside SidebarInset (including removing the inline sidebar’s open-diff navigation hook).

For desktop tests, a Vitest electron alias points imports at a new electronMock stub module.

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

Note

Add resizable inline right panels for plan sidebar and diff panel

• Adds ResizableRightPanel, a reusable component with a draggable handle that resizes a right panel as a ratio (30–80%) of its container, persisting the ratio to localStorage per storageKey.
• Wraps the inline plan sidebar in ChatView and the inline diff panel in the chat thread route with ResizableRightPanel, replacing the previous pixel-based sidebar mechanism for the diff panel.
• Resize logic validates against the chat composer's DOM layout to prevent overflow or violating a minimum composer width, using requestAnimationFrame throttling during drag.
• Adds a Vitest config and Electron API mock for the desktop app to support unit tests that import electron.
• Behavioral Change: the diff panel is now hidden when closed rather than off-canvas, and its width is ratio-based rather than pixel-based.

^{Macroscope summarized f6510cc.}

[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: 6cd8825f-8f98-408c-a782-52daeab971dc

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: Needs human review

This PR introduces a new resizable panel feature with non-trivial interaction logic. An unresolved review comment identifies a medium-severity bug where stored panel widths aren't validated on mount, potentially causing layout issues with the chat composer.

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

Dismissing prior approval to re-evaluate 385b32c

Dismissing prior approval to re-evaluate 52721c9

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

[cursor]

Combined panel widths unchecked on mount

Medium Severity

The ResizableRightPanel applies stored or default width ratios on mount without checking canAcceptComposerWidth. This can cause the chat composer to be clipped, overflow, or become too narrow, especially with dynamic layout changes from other panels.

Additional Locations (1)

• apps/web/src/components/ResizableRightPanel.tsx#L127-L247

 

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