feat(web): drag reorder right-panel tabs

[extoci]

What Changed

• Makes every right-panel tab reorderable in the shared web/desktop tab strip, including chat sheets and pull request tabs.
• Activates an inactive tab as soon as it is picked up, matching browser tab behavior.
• Persists the new order per thread and preserves custom interleaving when browser surfaces reconcile.

Why

Right-panel surfaces currently stay in creation order, which makes it harder to organize several files, terminals, previews, and pull requests. Drag-to-reorder gives users the familiar browser-tab interaction while keeping the existing active surface and close-to-the-right behavior coherent with the visible order.

UI Changes

• Before: Right-panel tabs stayed in creation order.
• After: Tabs can be dragged horizontally; picking up an inactive tab activates it immediately.

Interaction video:

Screen.Recording.2026-08-13.at.3.12.16.AM.mov

Checklist

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

Generated with GPT-5.6-sol via Codex in T3 Code.

---

Note

Low Risk
UI-only panel tab ordering with unit tests; reconcile change is localized to browser surface sync behavior.

Overview
Adds horizontal drag-to-reorder for right-panel tabs (chat, desktop, and pull-requests), using @dnd-kit sortable tabs with a 6px drag threshold and horizontal-only movement.

Dropping a tab on another calls reorderSurface on the per-thread right panel store, which moves surfaces in the list without changing the active tab. Picking up an inactive tab activates it immediately (browser-style). reconcileBrowserSurfaces no longer groups non-browser tabs ahead of browsers—it keeps the current order and only appends new browser tabs.

Active-tab auto-scroll is skipped while dragging via scrollActiveRightPanelTabIntoView; user docs mention drag reorder.

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

Note

Add drag-to-reorder support for right-panel tabs

• Implements drag-and-drop tab reordering in RightPanelTabs.tsx using @dnd-kit, with a new SortableSurfaceTab component that handles drag listeners and styles.
• Adds reorderSurface to the right panel store in rightPanelStore.ts, which moves a surface to a target index and preserves custom ordering during browser tab reconciliation.
• Suppresses auto-scroll of the active tab while a drag is in progress via a new scrollActiveRightPanelTabIntoView helper in rightPanelTabs.logic.ts.
• Wires the onReorderSurface prop through ChatView and the pull requests route to connect UI events to the store.

^{Macroscope summarized 29537f1.}

[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 Plus

Run ID: d0a7992d-a966-42bd-b694-fb8a70c5d966

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

---

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort 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 bfa8b33. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved 29537f1

This PR adds drag-and-drop reordering for right-panel tabs using the standard @dnd-kit library. The changes are purely UI-focused, well-tested, and don't affect any backend behavior or data processing.

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