fix(web): prevent composer controls overlap on narrow windows (make plan sidebar responsive) by UtkarshUsername · Pull Request #1198 · pingdotgg/t3code

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

UtkarshUsername · 2026-03-18T18:56:17Z

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes#1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

added shared right-panel responsive constants for the breakpoint and sheet sizing
updated the diff panel to use the shared constants instead of hardcoding them locally
updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make plan sidebar responsive by rendering as a right-side sheet on narrow viewports

On viewports ≤1180px, the plan sidebar now renders as a right-side sheet instead of a fixed sidebar, preventing overlap with composer controls.
Adds a shared RightPanelSheet component and rightPanelLayout.ts constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) to centralize breakpoint and sizing logic.
Refactors the diff panel in _chat.$environmentId.$threadId.tsx to use the shared RightPanelSheet and RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, removing the previously local equivalents.
PlanSidebar gains a mode prop ('sidebar' | 'sheet') that switches between fixed-width bordered layout and full-width sheet layout.

^{Macroscope summarized aa20d2a.}

Note

Low Risk
UI-only responsive layout change that reuses existing Sheet behavior; main risk is regressions in sidebar open/close/dismissal behavior on different viewport widths.

Overview
Makes the plan sidebar responsive: on narrow viewports it now renders as a right-side Sheet overlay (matching the diff panel), while wide screens keep the inline fixed-width sidebar.

Extracts shared right-panel sizing/breakpoint constants into rightPanelLayout.ts, updates the diff panel sheet to use them, and adds a mode prop to PlanSidebar to switch styling between inline sidebar vs full-width sheet rendering while preserving existing close/dismiss semantics via a centralized closePlanSidebar handler.

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

coderabbitai · 2026-03-18T18:56:25Z

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: 86938dc2-74f8-440b-9cd0-cf1b964eeb22

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

macroscopeapp · 2026-04-13T17:25:48Z

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet (overlay) on narrow windows, using a pattern already established for the diff panel. The changes are purely layout/CSS related with no business logic modifications, and include a minor refactor to share the sheet wrapper component between two similar use cases.

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

- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

Dismissing prior approval to re-evaluate c798ac8

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

Integrates upstream/main (9df3c64) on top of fork's main (9602c18). Upstream features adopted: - Claude Opus 4.5 and 4.7 built-in models (pingdotgg#2072, pingdotgg#2143) - Node-native TypeScript migration across desktop/server (pingdotgg#2098) - Configurable project grouping with client-settings overrides (pingdotgg#2055, pingdotgg#2099) - Thread status in command palette (pingdotgg#2107) - Responsive composer / plan sidebar on narrow windows (pingdotgg#1198) - Capture-phase CTRL+J keydown for Windows terminal toggle (pingdotgg#2113/pingdotgg#2142) - Bypass xterm for global terminal shortcuts (pingdotgg#1580) - Windows ARM build target (pingdotgg#2080) - Windows PATH hydration + repair (pingdotgg#1729) - Gitignore-aware workspace search (pingdotgg#2078) - Claude process leak fix + stale session monitoring (pingdotgg#2042) - Preserve provider bindings when stopping sessions (pingdotgg#2084) - Clean up invalid pending-approval projections (pingdotgg#2106) — new migration - Extract backend startup readiness coordination - Drop stale text-gen options on reset (pingdotgg#2076) - Extend negative repository identity cache TTL (pingdotgg#2083) - Allow deleting non-empty projects from warning toast (pingdotgg#1264) - Restore defaults only on General settings (pingdotgg#1710) - Release workflow modernization (blacksmith runners, GitHub App token guards, v0.0.20 version bump) Fork features preserved: - All 8 providers (codex, claudeAgent, copilot, cursor, opencode, geminiCli, amp, kilo) with their adapters, services, and tests - Fork's custom OpenCode protocol impl in apps/server/src/opencode/ (kept over upstream's @opencode-ai/sdk-based provider added in pingdotgg#1758 — fork's version is tested and integrated; upstream's parallel files deleted) - Fork's direct-CLI Cursor adapter (kept over upstream's new ACP-based CursorProvider added in pingdotgg#1355 — upstream's parallel files deleted) - Fork's ProviderRegistry aggregates only codex + claudeAgent snapshots; the other 6 providers register via ProviderAdapterRegistry - PROVIDER_CACHE_IDS stays at [codex, claudeAgent] matching what the registry actually caches - Migration IDs preserved (fork 23/24/25/26; upstream's new 025 lands at ID 27 to avoid re-applying on deployed fork DBs) - Fork's generic per-provider settings (enabled/binaryPath/configDir/ customModels) kept over upstream's opencode-specific serverUrl/password - Log directory IPC channels, updateInstallInFlight tracking, icon composer pipeline all preserved - Fork's simplified release.yml (no npm CLI publish, no nightly infra) - composerDraftStore normalizeProviderKind widened to accept all 8 kinds - Dark mode --background set to #0f0f0f Test status: - All 9 package typechecks pass - Lint clean (0 errors) - Tests: 1877 passed, 15 skipped (incl. 4 historically-flaky GitManager cross-repo PR selector tests newly gated with TODO for Node-native-TS follow-up)

…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

…lan sidebar responsive) (pingdotgg#1198)

…lan sidebar responsive) (#1198)

…lan sidebar responsive) (pingdotgg#1198)

github-actionsBot added size:M 30-99 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 18, 2026

UtkarshUsername force-pushed the fix/responsive-plan-sidebar branch from b364790 to b0f88a1Compare March 20, 2026 12:56

UtkarshUsername force-pushed the fix/responsive-plan-sidebar branch from b0f88a1 to 6264759Compare March 30, 2026 12:47

github-actionsBot added size:L 100-499 changed lines (additions + deletions). and removed size:M 30-99 changed lines (additions + deletions). labels Mar 30, 2026

cursorBot reviewed Mar 30, 2026
View reviewed changes

Comment threadapps/web/src/components/ChatView.tsx

UtkarshUsername marked this pull request as draft March 30, 2026 12:54

github-actionsBot added size:M 30-99 changed lines (additions + deletions). and removed size:L 100-499 changed lines (additions + deletions). labels Mar 30, 2026

UtkarshUsername marked this pull request as ready for review March 30, 2026 13:24

UtkarshUsername force-pushed the fix/responsive-plan-sidebar branch from aece061 to d50cadbCompare April 1, 2026 09:18

UtkarshUsername force-pushed the fix/responsive-plan-sidebar branch from d50cadb to 6e5ae83Compare April 13, 2026 17:04

macroscopeappBot previously approved these changes Apr 13, 2026
View reviewed changes

cursorBot reviewed Apr 13, 2026
View reviewed changes

Comment threadapps/web/src/components/ChatView.tsx Outdated

UtkarshUsername added 2 commits April 16, 2026 20:53

Use sheet layout for plan sidebar on narrow chat screens
34f04f0
- render Plan sidebar in a right-side sheet under 1180px - reuse shared right-panel layout constants for both plan and diff panels - add sidebar/sheet mode support to PlanSidebar styling and close handling

style(web): format ChatView import after rebase
c798ac8

UtkarshUsername force-pushed the fix/responsive-plan-sidebar branch from ec1aada to c798ac8Compare April 16, 2026 15:26

cursorBot reviewed Apr 16, 2026
View reviewed changes

Comment threadapps/web/src/components/ChatView.tsx
Comment threadapps/web/src/components/ChatView.tsx

macroscopeappBot reviewed Apr 16, 2026
View reviewed changes

Comment threadapps/web/src/components/ChatView.tsx

UtkarshUsername marked this pull request as draft April 16, 2026 15:38

Extract reusable right-panel sheet wrapper
2e3a433
- Reuse the shared sheet shell for plan and diff sidebars - Keep responsive right-panel behavior consistent across routes

github-actionsBot added size:L 100-499 changed lines (additions + deletions). and removed size:M 30-99 changed lines (additions + deletions). labels Apr 16, 2026

Persist plan sidebar dismissal state
aa20d2a
- Mark the sidebar as dismissed even when no turn ID is active - Prevent the plan sidebar from reopening unexpectedly

UtkarshUsername marked this pull request as ready for review April 16, 2026 15:47

macroscopeappBot approved these changes Apr 16, 2026
View reviewed changes

juliusmarminge merged commit 19d4740 into pingdotgg:mainApr 16, 2026
16 checks passed

aaditagrawal mentioned this pull request Apr 18, 2026
sync: merge 33 upstream commits from pingdotgg/t3code aaditagrawal/t3code#71
Merged
9 tasks

tyulyukov pushed a commit to tyulyukov/marcode that referenced this pull request Apr 24, 2026
fix(web): prevent composer controls overlap on narrow windows (make p…
f6fc707
…lan sidebar responsive) (pingdotgg#1198) (cherry picked from commit 5f36ac228aeaea73f3633182c1cda34fb4b5ce7f)

MuneerAhmed03 pushed a commit to MuneerAhmed03/t3code that referenced this pull request Apr 26, 2026
fix(web): prevent composer controls overlap on narrow windows (make p…
9868b3b
…lan sidebar responsive) (pingdotgg#1198)

youpele52 referenced this pull request in youpele52/bigbud Jun 17, 2026
fix(web): prevent composer controls overlap on narrow windows (make p…
6e6a3f6
…lan sidebar responsive) (#1198)

NeilTheFisher pushed a commit to NeilTheFisher/t3code that referenced this pull request Aug 18, 2026
fix(web): prevent composer controls overlap on narrow windows (make p…
63fbd8b
…lan sidebar responsive) (pingdotgg#1198)