🤖 feat: RightSidebar dock-lite with drag-and-drop and e2e tests #1340

ammar-agent · 2025-12-27T18:34:20Z

Summary

Implements IDE-like "dock-lite" functionality for the RightSidebar with persistent nested splits, tabsets, drag-and-drop tab moving (including reordering), and stable embedded Terminal behavior.

Key Changes

Sidebar Width Unification

Unified sidebar width across all tabs (was previously separate for costs vs review)
Single RIGHT_SIDEBAR_WIDTH_KEY replaces per-tab width keys

Global Drag Layer

Added SidebarDragLayer component for consistent drag preview across panes
Drag preview remains visible when crossing pane boundaries in split layouts

Drag Interruption Fix

DragAwarePanelResizeHandle disables pointer events during tab drags
Edge drop zones always rendered (visibility toggled) to avoid mount/unmount issues

E2E Test Infrastructure

Created dragElement helper using programmatic DragEvent dispatch
- Bypasses Playwright mouse.move() which hangs in Xvfb environments
- Works correctly with react-dnd HTML5Backend
New sidebarDragDrop.spec.ts with 3 tests:
- Tab reordering via drag-and-drop
- Tab click interactions
- Split layout rendering from localStorage

Testing

# Unit tests
bun test src/browser/utils/rightSidebarLayout.test.ts

# UI integration tests  
TEST_INTEGRATION=1 bun x jest tests/ui/rightSidebar.integration.test.ts

# E2E tests (requires xvfb)
MUX_E2E_LOAD_DIST=1 xvfb-run -a bun x playwright test tests/e2e/scenarios/sidebarDragDrop.spec.ts

Generated with mux • Model: anthropic:claude-opus-4-5 • Thinking: high

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/browser/utils/rightSidebarLayout.ts

ammar-agent · 2025-12-27T18:54:47Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/browser/components/RightSidebar.tsx

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/browser/components/RightSidebar.tsx

ammar-agent · 2025-12-27T19:00:53Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/browser/components/TerminalView.tsx

ammar-agent · 2025-12-27T19:07:02Z

@codex review

ammar-agent · 2025-12-27T19:12:51Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/browser/components/RightSidebar/TerminalTab.tsx

ammar-agent · 2025-12-27T19:21:05Z

@codex review

chatgpt-codex-connector · 2025-12-27T19:25:45Z

Codex Review: Didn't find any major issues. More of your lovely PRs please.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Implements an IDE-like dock-lite sidebar with nested split/tabset layout: - Terminal tab embedded in RightSidebar (stable, not destroyed on tab switch) - Tab dragging with @dnd-kit for reliable click vs drag disambiguation - Edge docking to create horizontal/vertical splits - Unified sidebar width across all tabs (resizing affects all equally) - Layout state persisted in localStorage Technical highlights: - Migrated from react-dnd HTML5Backend to @dnd-kit with PointerSensor - 8px distance activation constraint prevents accidental drags - DragOverlay for smooth cursor-following preview - No tooltip interference (not built on HTML5 Drag API) - Proper MUX_ROOT support for e2e tests --- _Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_

When switching between workspaces (e.g., SSH → Local), the TerminalTab was passing the old workspace's session ID to TerminalView before the useEffect synced the state. This caused errors like 'trying to open SSH terminal for local project'. Fix: Read sessionId directly from the Map instead of caching in useState. The Map lookup always returns the correct session for the current workspaceId, eliminating the timing bug. --- _Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_

Sidebar layout (splits, tabs, terminal instances) is now stored per- workspace instead of globally. This allows each workspace to have its own pane configuration, including different numbers of terminals. Global settings that remain shared across workspaces: - Sidebar width (prevents layout flash when switching) - Collapsed state Changes: - RIGHT_SIDEBAR_LAYOUT_KEY → getRightSidebarLayoutKey(workspaceId) - Command palette layout commands only available with workspace context - Updated stories and tests to use workspace-specific keys --- _Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_

ammar-agent force-pushed the window-layout-614q branch from 5c7fc7b to 13d2de5 Compare December 27, 2025 18:36

chatgpt-codex-connector bot reviewed Dec 27, 2025

View reviewed changes

src/browser/utils/rightSidebarLayout.ts Show resolved Hide resolved

ammar-agent force-pushed the window-layout-614q branch 3 times, most recently from ff4881d to 0fd9247 Compare December 27, 2025 18:51

ammar-agent force-pushed the window-layout-614q branch from 0fd9247 to bfd6b1f Compare December 27, 2025 18:56

chatgpt-codex-connector bot reviewed Dec 27, 2025

View reviewed changes

src/browser/components/RightSidebar.tsx Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Dec 27, 2025

View reviewed changes

src/browser/components/RightSidebar.tsx Show resolved Hide resolved

ammar-agent force-pushed the window-layout-614q branch from afc69b4 to 0c9258d Compare December 27, 2025 19:03

chatgpt-codex-connector bot reviewed Dec 27, 2025

View reviewed changes

src/browser/components/TerminalView.tsx Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Dec 27, 2025

View reviewed changes

src/browser/components/RightSidebar/TerminalTab.tsx Show resolved Hide resolved

ammar-agent force-pushed the window-layout-614q branch from e0b22e0 to 7607c66 Compare December 27, 2025 19:50

ammar-agent force-pushed the window-layout-614q branch from 65f6c0e to fd4ea21 Compare December 28, 2025 18:45

ammar-agent added 2 commits December 28, 2025 12:49

🤖 feat: RightSidebar dock-lite with drag-and-drop and e2e tests #1340

Are you sure you want to change the base?

🤖 feat: RightSidebar dock-lite with drag-and-drop and e2e tests #1340

Uh oh!

Conversation

ammar-agent commented Dec 27, 2025

Summary

Key Changes

Sidebar Width Unification

Global Drag Layer

Drag Interruption Fix

E2E Test Infrastructure

Testing

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

ammar-agent commented Dec 27, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

ammar-agent commented Dec 27, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

ammar-agent commented Dec 27, 2025

Uh oh!

ammar-agent commented Dec 27, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

ammar-agent commented Dec 27, 2025

Uh oh!

chatgpt-codex-connector bot commented Dec 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant