From a37edcf8a9b0f61d196370fc787738ef36c754e8 Mon Sep 17 00:00:00 2001
From: Renfei Zhou <renfeiz@andrew.cmu.edu>
Date: Sun, 15 Nov 2026 15:24:58 +0000
Subject: [PATCH 1/2] test(fork): a right-panel tab switches on a press
 anywhere on it

A click on a right-panel tab's padding or its top and bottom edges does
nothing, a click with a few pixels of hand movement is swallowed by the
tab drag sensor, and a working click switches only after mouse-up. This
browser test presses a tab's edges and its label with jitter and checks
that the tab is active before the button is released, that focus stays
where the switch put it, that touch and keyboard switch on click, and
that the close button closes without switching. It fails on main.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../rightPanelSplit/tabPress.browser.test.tsx | 157 ++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 apps/web/src/fork/rightPanelSplit/tabPress.browser.test.tsx

diff --git a/apps/web/src/fork/rightPanelSplit/tabPress.browser.test.tsx b/apps/web/src/fork/rightPanelSplit/tabPress.browser.test.tsx
new file mode 100644
index 0000000000000..8ae6aade06361
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/tabPress.browser.test.tsx
@@ -0,0 +1,157 @@
+import "~/index.css";
+
+import { EnvironmentId } from "@t3tools/contracts";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+import type { ReactNode } from "react";
+
+import { RightPanelTabs, type RightPanelTabsProps } from "~/components/RightPanelTabs";
+import type { RightPanelSurface } from "~/rightPanelStore";
+import { render } from "../../../test/render";
+
+const BROWSER_SURFACE: RightPanelSurface = {
+  id: "browser:tab-1",
+  kind: "preview",
+  resourceId: "tab-1",
+};
+const DIFF_SURFACE: RightPanelSurface = { id: "diff", kind: "diff" };
+
+function tabs(
+  overrides: Pick<RightPanelTabsProps, "onActivate"> &
+    Partial<Pick<RightPanelTabsProps, "onCloseSurface">>,
+  children: ReactNode = null,
+) {
+  const noop = () => {};
+  const props: RightPanelTabsProps = {
+    mode: "inline",
+    keybindings: [],
+    getShortcutContext: () => ({
+      terminalFocus: false,
+      terminalOpen: false,
+      previewFocus: false,
+      previewOpen: true,
+      isWeb: true,
+      isDesktop: false,
+    }),
+    surfaces: [BROWSER_SURFACE, DIFF_SURFACE],
+    environmentId: EnvironmentId.make("environment-local"),
+    activeSurfaceId: DIFF_SURFACE.id,
+    pendingSurfaceIds: new Set(),
+    previewSessions: {},
+    desktopByTabId: {},
+    terminalLabelsById: new Map(),
+    onCloseSurface: noop,
+    onCloseOtherSurfaces: noop,
+    onCloseSurfacesToRight: noop,
+    onCloseAllSurfaces: noop,
+    onCopyFilePath: noop,
+    onAddBrowser: noop,
+    onAddBrowserInProfile: noop,
+    onAddTerminal: noop,
+    onAddDiff: noop,
+    onAddFiles: noop,
+    onAddPullRequest: noop,
+    onAddPullRequests: noop,
+    onAddDevice: noop,
+    browserAvailable: true,
+    terminalAvailable: true,
+    diffAvailable: true,
+    filesAvailable: true,
+    pullRequestAvailable: true,
+    pullRequestsAvailable: true,
+    deviceAvailable: true,
+    ...overrides,
+    children,
+  };
+  return <RightPanelTabs {...props} />;
+}
+
+function pointer(
+  target: EventTarget,
+  type: string,
+  x: number,
+  y: number,
+  pointerType: "mouse" | "touch" = "mouse",
+) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      pointerId: 1,
+      pointerType,
+      isPrimary: true,
+      button: type === "pointermove" ? -1 : 0,
+      buttons: type === "pointerup" ? 0 : 1,
+      clientX: x,
+      clientY: y,
+    }),
+  );
+}
+
+describe("tab activation", () => {
+  it("activates a tab on press anywhere on it, through hand jitter, but not from its close button", async () => {
+    const onActivate = vi.fn();
+    const onCloseSurface = vi.fn();
+    await using screen = await render(tabs({ onActivate, onCloseSurface }));
+    const tab = screen.container.querySelector<HTMLElement>('[data-active-tab="false"]')!;
+    const box = tab.getBoundingClientRect();
+    const midY = box.top + box.height / 2;
+
+    for (const [x, y] of [
+      [box.left + 2, midY],
+      [box.right - 2, midY],
+      [box.left + box.width / 2, box.top + 1],
+    ] as const) {
+      onActivate.mockClear();
+      pointer(document.elementFromPoint(x, y)!, "pointerdown", x, y);
+      expect(onActivate).toHaveBeenCalledWith(BROWSER_SURFACE);
+      pointer(document, "pointerup", x, y);
+    }
+
+    onActivate.mockClear();
+    const label = screen.getByRole("button", { name: "Browser", exact: true }).element();
+    const start = label.getBoundingClientRect();
+    pointer(label, "pointerdown", start.left + 4, start.top + 4);
+    pointer(document, "pointermove", start.left + 14, start.top + 10);
+    pointer(document, "pointerup", start.left + 14, start.top + 10);
+    expect(onActivate).toHaveBeenCalledWith(BROWSER_SURFACE);
+
+    onActivate.mockClear();
+    const close = screen.getByRole("button", { name: "Close Browser" }).element();
+    const closeBox = close.getBoundingClientRect();
+    pointer(close, "pointerdown", closeBox.left + 4, closeBox.top + 4);
+    pointer(document, "pointerup", closeBox.left + 4, closeBox.top + 4);
+    await userEvent.click(close);
+    expect(onCloseSurface).toHaveBeenCalledWith(BROWSER_SURFACE);
+    expect(onActivate).not.toHaveBeenCalled();
+  });
+
+  it("leaves focus where activation put it, activates once per click, and waits for the tap on touch", async () => {
+    const onActivate = vi.fn((_surface: RightPanelSurface) =>
+      document.querySelector<HTMLElement>('[aria-label="Terminal input"]')?.focus(),
+    );
+    await using screen = await render(
+      tabs({ onActivate }, <textarea aria-label="Terminal input" />),
+    );
+    const label = screen.getByRole("button", { name: "Browser", exact: true });
+
+    await userEvent.click(label);
+    expect(onActivate).toHaveBeenCalledExactlyOnceWith(BROWSER_SURFACE);
+    await expect.element(screen.getByRole("textbox", { name: "Terminal input" })).toHaveFocus();
+
+    onActivate.mockClear();
+    const box = label.element().getBoundingClientRect();
+    pointer(label.element(), "pointerdown", box.left + 2, box.top + 2, "touch");
+    expect(onActivate).not.toHaveBeenCalled();
+    label
+      .element()
+      .dispatchEvent(new PointerEvent("click", { bubbles: true, detail: 1, pointerType: "touch" }));
+    expect(onActivate).toHaveBeenCalledExactlyOnceWith(BROWSER_SURFACE);
+
+    onActivate.mockClear();
+    label.element().focus();
+    await userEvent.keyboard("{Enter}");
+    expect(onActivate).toHaveBeenCalledExactlyOnceWith(BROWSER_SURFACE);
+  });
+});

From 975ea642eeb74c6e6576d93b1304a19f7d49ef1d Mon Sep 17 00:00:00 2001
From: Renfei Zhou <renfeiz@andrew.cmu.edu>
Date: Sun, 15 Nov 2026 15:30:08 +0000
Subject: [PATCH 2/2] feat(fork): split the right panel by dragging a tab

Drag a right-panel tab onto the outer third of the panel content: a box
shows the half the new pane will take, and the drop splits the panel into
two side-by-side panes, each with its own tab strip, as with Windows Snap.
Tabs move between panes by drag or the tab menu (Split right, Split left,
Move to the other pane, Unsplit). A splitter resizes the panes. Closing or
moving away a pane's last tab ends the split. New tabs open in the focused
pane. A narrow panel shows all tabs in one strip and keeps the split for
later. A new split widens a narrow panel and gives the width back when it
ends.

The layout is one optional field on the panel's per-thread record, kept
valid by one reconcile step in the store's write path, so the existing
pane-blind open and close calls keep working. The logic lives in
apps/web/src/fork/rightPanelSplit/.

Tabs also switch on a primary press anywhere on the tab instead of on a
click on the title text, so edge clicks and clicks with hand movement no
longer miss, and the switch runs while the button is still held. Touch
and keyboard switch on click; a touch drag needs a short hold so a swipe
scrolls the strip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md                                     |   1 +
 apps/web/src/components/ChatView.tsx          | 132 ++---
 apps/web/src/components/RightPanelTabs.tsx    |  91 ++--
 .../src/components/chat/ChatRightPanel.tsx    |  13 +-
 .../chat/RightPanelSurfaceContent.tsx         |   3 +-
 .../components/chat/useChatTerminalActions.ts |  12 +-
 .../src/components/preview/PreviewPanel.tsx   |   4 +
 .../src/components/preview/PreviewView.tsx    |   6 +-
 .../pullRequest/PullRequestDetailPanel.tsx    |   1 +
 .../pullRequest/PullRequestGuideTab.tsx       |   5 +-
 .../rightPanelSplit/RightPanelDragScope.tsx   | 196 +++++++
 .../RightPanelSplitView.browser.test.tsx      | 332 ++++++++++++
 .../rightPanelSplit/RightPanelSplitView.tsx   | 346 +++++++++++++
 .../rightPanelSplit/dropTarget.logic.test.ts  | 225 ++++++++
 .../fork/rightPanelSplit/dropTarget.logic.ts  | 238 +++++++++
 .../src/fork/rightPanelSplit/renderedSplit.ts |  30 ++
 .../rightPanelSplit/splitLayout.logic.test.ts | 366 +++++++++++++
 .../fork/rightPanelSplit/splitLayout.logic.ts | 490 ++++++++++++++++++
 .../fork/rightPanelSplit/splitStore.test.ts   | 138 +++++
 .../web/src/fork/rightPanelSplit/tabStrip.tsx | 171 ++++++
 .../src/hooks/usePreviewPanelInlineSize.ts    |   7 +-
 .../src/hooks/useRightPanelSurfaceClose.ts    |  25 +-
 apps/web/src/rightPanelStore.ts               |  43 +-
 23 files changed, 2751 insertions(+), 124 deletions(-)
 create mode 100644 apps/web/src/fork/rightPanelSplit/RightPanelDragScope.tsx
 create mode 100644 apps/web/src/fork/rightPanelSplit/RightPanelSplitView.browser.test.tsx
 create mode 100644 apps/web/src/fork/rightPanelSplit/RightPanelSplitView.tsx
 create mode 100644 apps/web/src/fork/rightPanelSplit/dropTarget.logic.test.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/dropTarget.logic.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/renderedSplit.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/splitLayout.logic.test.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/splitLayout.logic.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/splitStore.test.ts
 create mode 100644 apps/web/src/fork/rightPanelSplit/tabStrip.tsx

diff --git a/README.md b/README.md
index d1af3d57f6e76..404b4d625abed 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ This is a fork of T3 Code that integrates a few additional features, including:
   - "Chat + Replies" keeps the main list short: it shows only first messages, and the replies to a message show in a Replies tab in the right panel (+ → Replies, or the reply line under a message). Point at a message and choose Reply to answer under it; the tab has its own reply box. Under each first message you see how many replies it has, how many are new, and a few generated words on what they are about. The agent answers a message with `send_to_user` and that message's id, so each answer lands under the message it answers. A Cite in the main list opens that message's replies and puts the quote in their reply box, unless the main box or the open reply box already has text; then the quote goes there, the main box first.
   - In all three modes the agent sends one reply per message you type, and before a long task it may first send a short "on it" note; a thin line parts two agent messages in a row. To say more, it rewrites its reply in place with its `replace_send_to_user` tool. A rewritten reply shows a small "Edited" mark, and in Chat + Replies it counts as new.
   - Settings → Threads → New threads → Display mode picks the mode for threads you start from the message box in the web or desktop app. Threads that agents, scheduled tasks, side chats or the mobile app start open in Normal, and existing threads keep their mode.
+- **Split the right panel in two:** drag a right-panel tab onto the left or right part of the panel's content and drop it to get two panes side by side, each with its own tabs, as with Windows Snap. Drag tabs between the panes, drag the line between them to resize (double-click resets it), and close or move away a pane's last tab to go back to one pane. The tab menu has Split right, Split left, Move to the other pane and Unsplit. New tabs open in the pane you last used. A narrow window shows all tabs in one strip and keeps the split for when there is room. A press anywhere on a tab now switches to it at once.
 - Copy buttons on pages in the preview browser now put the copied text into your own clipboard.
 - **Two preview browser modes:** Settings → Browser → Preview browser picks the browser the server runs for preview tabs. **T3 native** (fast) is the default. It runs chrome-headless-shell, Chrome's small build that runs without a window. **Chrome** (slow) runs full Chrome, for pages that don't work in T3 native. On platforms where T3 has no Chrome for Testing build (Google's Chrome build for test automation), both choices run T3 native. Switching closes the open preview tabs.
 - **Compact when idle for Claude threads:** a choice in Settings → Providers → Advanced → Compact idle threads. Besides compacting before the prompt cache expires, it compacts a large idle Claude thread (default 400K tokens or more) a set time (default 15 minutes) after the last message or answer from a user or a bot, so the compaction runs while no one waits for a reply. The token counts and the wait are set right under the choice.
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 462e5532ac4c7..afabd2d9a249f 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -167,6 +167,7 @@ import {
   selectActiveRightPanelSurface,
   selectThreadPanelOpen,
   selectThreadRightPanelState,
+  type RightPanelSurface,
   useRightPanelStore,
 } from "../rightPanelStore";
 import { isPreviewSupportedInRuntime, useThreadPreviewState } from "../previewStateStore";
@@ -364,6 +365,8 @@ import { observeResize } from "~/lib/observeResize";
 import { ThreadVisitWatermark } from "./chat/ThreadVisitWatermark";
 import { ChatTerminalDrawers } from "./chat/ChatTerminalDrawers";
 import { ChatRightPanel } from "./chat/ChatRightPanel";
+import { useSplitRendered } from "../fork/rightPanelSplit/renderedSplit";
+import { unfocusedPaneSurface } from "../fork/rightPanelSplit/splitLayout.logic";
 import { useDashboardSurfaceAdder } from "../fork/dashboard/dashboardSurface";
 import { REPLY_BOX_QUEUE_EDIT_BLOCKED, subThreadDraftId } from "../fork/subThreads/subThreadReply";
 import { useSubThreadCite } from "../fork/subThreads/subThreadCite";
@@ -1083,6 +1086,7 @@ export default function ChatView(props: ChatViewProps) {
   const rightPanelPresenceValue = {
     activeSurface: activeRightPanelSurface,
     surfaces: rightPanelState.surfaces,
+    split: rightPanelState.split,
   };
   const rightPanelPresence = usePanelPresence(
     rightPanelOpen && activeThreadRef !== null,
@@ -1097,10 +1101,16 @@ export default function ChatView(props: ChatViewProps) {
   const rightPanelControlsAtRoot = rightPanelPresent && !shouldUsePlanSidebarSheet;
   const renderedRightPanelSurface = rightPanelPresence.value?.activeSurface ?? null;
   const renderedRightPanelSurfaces = rightPanelPresence.value?.surfaces ?? [];
-  const previewMiniPlayerVisible = shouldRenderPreviewMiniPlayer(
-    activePreviewMiniPlayer?.source ?? null,
-    renderedRightPanelSurface,
-  );
+  const rightPanelSplitRendered = useSplitRendered(activeThreadKey);
+  const previewMiniPlayerVisible =
+    shouldRenderPreviewMiniPlayer(
+      activePreviewMiniPlayer?.source ?? null,
+      renderedRightPanelSurface,
+    ) &&
+    shouldRenderPreviewMiniPlayer(
+      activePreviewMiniPlayer?.source ?? null,
+      rightPanelSplitRendered ? unfocusedPaneSurface(rightPanelState) : null,
+    );
   const canMaximizeRightPanel = rightPanelOpen;
   // An embedded side chat has no panel; a stale maximized flag would hide its own column.
   const rightPanelMaximized =
@@ -3210,59 +3220,60 @@ export default function ChatView(props: ChatViewProps) {
     return embedded ? null : <NoActiveThreadState />;
   }
 
-  const rightPanelContent = activeThreadRef ? (
-    <RightPanelSurfaceContent
-      surface={renderedRightPanelSurface}
-      activeSurfaceId={activeRightPanelSurface?.id ?? null}
-      threadRef={activeThreadRef}
-      environmentId={activeThread.environmentId}
-      visible={rightPanelOpen}
-      composerDraftTarget={composerDraftTarget}
-      keybindings={keybindings}
-      configuredPreviewUrls={configuredPreviewUrls}
-      workspaceMutationId={workspaceMutationId}
-      getShortcutContext={getShortcutContextStable}
-      onSendAnnotation={sendPreviewAnnotationStable}
-      onCloseSurface={closeRightPanelSurface}
-      sideChatParentPanel={sideChatParentPanel}
-      onCiteAssistantText={citeAssistantTextStable}
-      terminal={{
-        launchContext: activeTerminalLaunchContext ?? null,
-        keybindings,
-        onAddTerminalContext: addTerminalContextToDraftStable,
-        onSplitTerminal: splitPanelTerminalStable,
-        onSplitTerminalVertical: splitPanelTerminalVerticalStable,
-        onNewTerminal: addTerminalSurfaceStable,
-        onActiveTerminalChange: activatePanelTerminalStable,
-        onCloseTerminal: closePanelTerminalStable,
-        splitShortcutLabel: splitTerminalShortcutLabel ?? undefined,
-        splitVerticalShortcutLabel: splitTerminalVerticalShortcutLabel ?? undefined,
-        newShortcutLabel: newTerminalShortcutLabel ?? undefined,
-        closeShortcutLabel: closeTerminalShortcutLabel ?? undefined,
-      }}
-      pullRequest={{
-        capabilityKnown: pullRequestsCapabilityKnown,
-        supported: supportsPullRequests,
-        projectId: activeThread.projectId,
-        pullRequests: visiblePullRequests,
-        linkedPullRequest: linkedThreadPullRequest,
-        branchPullRequest: activeThreadShell?.branchPullRequest ?? activeThread.branchPullRequest,
-        onBack:
-          pullRequestsSurfaceAvailable && visiblePullRequestCount > 1
-            ? addPullRequestsSurfaceStable
-            : undefined,
-      }}
-      files={{
-        projectId: activeProject?.id,
-        projectName: activeProject?.title ?? null,
-        workspaceRoot: activeWorkspaceRoot,
-        availableEditors,
-        pendingSurfaceIds: pendingFileSurfaceIds,
-        onOpenFile: openFileSurfaceStable,
-        onPendingChange: handleFilePendingChangeStable,
-      }}
-    />
-  ) : null;
+  const renderRightPanelSurface = (surface: RightPanelSurface, visible: boolean) =>
+    activeThreadRef ? (
+      <RightPanelSurfaceContent
+        surface={surface}
+        activeSurfaceId={activeRightPanelSurface?.id ?? null}
+        threadRef={activeThreadRef}
+        environmentId={activeThread.environmentId}
+        visible={visible}
+        composerDraftTarget={composerDraftTarget}
+        keybindings={keybindings}
+        configuredPreviewUrls={configuredPreviewUrls}
+        workspaceMutationId={workspaceMutationId}
+        getShortcutContext={getShortcutContextStable}
+        onSendAnnotation={sendPreviewAnnotationStable}
+        onCloseSurface={closeRightPanelSurface}
+        sideChatParentPanel={sideChatParentPanel}
+        onCiteAssistantText={citeAssistantTextStable}
+        terminal={{
+          launchContext: activeTerminalLaunchContext ?? null,
+          keybindings,
+          onAddTerminalContext: addTerminalContextToDraftStable,
+          onSplitTerminal: splitPanelTerminalStable,
+          onSplitTerminalVertical: splitPanelTerminalVerticalStable,
+          onNewTerminal: addTerminalSurfaceStable,
+          onActiveTerminalChange: activatePanelTerminalStable,
+          onCloseTerminal: closePanelTerminalStable,
+          splitShortcutLabel: splitTerminalShortcutLabel ?? undefined,
+          splitVerticalShortcutLabel: splitTerminalVerticalShortcutLabel ?? undefined,
+          newShortcutLabel: newTerminalShortcutLabel ?? undefined,
+          closeShortcutLabel: closeTerminalShortcutLabel ?? undefined,
+        }}
+        pullRequest={{
+          capabilityKnown: pullRequestsCapabilityKnown,
+          supported: supportsPullRequests,
+          projectId: activeThread.projectId,
+          pullRequests: visiblePullRequests,
+          linkedPullRequest: linkedThreadPullRequest,
+          branchPullRequest: activeThreadShell?.branchPullRequest ?? activeThread.branchPullRequest,
+          onBack:
+            pullRequestsSurfaceAvailable && visiblePullRequestCount > 1
+              ? addPullRequestsSurfaceStable
+              : undefined,
+        }}
+        files={{
+          projectId: activeProject?.id,
+          projectName: activeProject?.title ?? null,
+          workspaceRoot: activeWorkspaceRoot,
+          availableEditors,
+          pendingSurfaceIds: pendingFileSurfaceIds,
+          onOpenFile: openFileSurfaceStable,
+          onPendingChange: handleFilePendingChangeStable,
+        }}
+      />
+    ) : null;
   const panelToggleControlProps = {
     terminalAvailable: activeProject !== null,
     terminalOpen: terminalUiState.terminalOpen,
@@ -4027,9 +4038,10 @@ export default function ChatView(props: ChatViewProps) {
           deviceAvailable={activeThreadRef !== null}
           sideChatAvailable={sideChat.available}
           sideChatDisabledReason={sideChatDisabledReason}
-        >
-          {rightPanelContent}
-        </ChatRightPanel>
+          threadRef={activeThreadRef}
+          split={rightPanelPresence.value?.split}
+          renderSurface={renderRightPanelSurface}
+        />
       ) : null}
 
       {subThreadDraft === null ? (
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index 51b7c6ea8be1a..e7c4c0becc6f4 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -25,14 +25,15 @@ import type {
 } from "@t3tools/contracts";
 import { getTerminalLabel } from "@t3tools/shared/terminalLabels";
 import { dashboardSurfaceActions, ModeSurfaceIcon } from "~/fork/dashboard/dashboardSurface";
+import type { SplitMenuAction } from "~/fork/rightPanelSplit/splitLayout.logic";
 import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
+  SplitPaneFrame,
+  useRightPanelPane,
+  useTabDragData,
+  useTabDragSensors,
+  useTabPress,
+} from "~/fork/rightPanelSplit/tabStrip";
+import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -130,9 +131,10 @@ export interface RightPanelTabsProps {
   onActivate: (surface: RightPanelSurface) => void;
   onRenameDevice?: (surfaceId: string, title: string) => void;
   onCloseSurface: (surface: RightPanelSurface) => void;
-  onCloseOtherSurfaces: (surface: RightPanelSurface) => void;
-  onCloseSurfacesToRight: (surface: RightPanelSurface) => void;
-  onCloseAllSurfaces: () => void;
+  /** `strip` is the strip that opened the menu: one pane of a split, or every tab. */
+  onCloseOtherSurfaces: (surface: RightPanelSurface, strip: readonly RightPanelSurface[]) => void;
+  onCloseSurfacesToRight: (surface: RightPanelSurface, strip: readonly RightPanelSurface[]) => void;
+  onCloseAllSurfaces: (strip: readonly RightPanelSurface[]) => void;
   onMoveSurface?: (surfaceId: string, toIndex: number) => void;
   onCopyFilePath: (relativePath: string) => void;
   onAddBrowser: () => void;
@@ -842,7 +844,8 @@ function SortableTabList(props: {
   onMove: ((surfaceId: string, toIndex: number) => void) | undefined;
   children: ReactNode;
 }) {
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+  const sensors = useTabDragSensors();
+  const inDragScope = useRightPanelPane() !== null;
   const surfaceIds = props.surfaces.map((surface) => surface.id);
   const { onMove, surfaces } = props;
   const handleDragEnd = ({ active, over }: DragEndEvent) => {
@@ -850,6 +853,12 @@ function SortableTabList(props: {
     const toIndex = surfaces.findIndex((surface) => surface.id === over.id);
     if (toIndex >= 0) onMove?.(String(active.id), toIndex);
   };
+  const sortable = (
+    <SortableContext items={surfaceIds} strategy={horizontalListSortingStrategy}>
+      {props.children}
+    </SortableContext>
+  );
+  if (inDragScope) return sortable;
   return (
     <DndContext
       sensors={sensors}
@@ -857,9 +866,7 @@ function SortableTabList(props: {
       modifiers={TAB_DRAG_MODIFIERS}
       onDragEnd={handleDragEnd}
     >
-      <SortableContext items={surfaceIds} strategy={horizontalListSortingStrategy}>
-        {props.children}
-      </SortableContext>
+      {sortable}
     </DndContext>
   );
 }
@@ -910,9 +917,13 @@ function RightPanelTab(
     onStartRename,
     onFinishRename,
   } = props;
+  const press = useTabPress(surface, onActivate);
+  const inDragScope = useRightPanelPane() !== null;
+  const dragData = useTabDragData(props.title);
   const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: surface.id,
     disabled: props.dragDisabled,
+    data: dragData,
   });
   const sideChatShell = useQuietThreadShell(
     surface.kind === "side-chat" && props.environmentId !== null
@@ -991,12 +1002,12 @@ function RightPanelTab(
             render={
               <button
                 type="button"
+                data-tab-title
                 onDoubleClick={() => {
                   if (surface.kind === "device" && props.canRename) onStartRename(surface.id);
                 }}
                 className="cursor-pointer flex min-w-0 items-center"
                 aria-label={sideChatState === null ? undefined : `${title}, ${sideChatState}`}
-                onClick={() => onActivate(surface)}
               >
                 <span className="truncate">{title}</span>
               </button>
@@ -1020,11 +1031,19 @@ function RightPanelTab(
   return (
     <div
       data-active-tab={props.active}
-      onMouseDown={preventTabMiddleButtonDefault}
+      onMouseDown={(event) => {
+        preventTabMiddleButtonDefault(event);
+        press.onMouseDown(event);
+      }}
       onMouseUp={preventTabMiddleButtonDefault}
       onAuxClick={(event) => onAuxClick(event, surface)}
       onContextMenu={(event) => onContextMenu(event, surface)}
+      onClick={press.onClick}
       {...listeners}
+      onPointerDown={(event) => {
+        press.onPointerDown(event);
+        listeners?.onPointerDown?.(event);
+      }}
       ref={setNodeRef}
       style={{ transform: CSS.Translate.toString(transform), transition }}
       className={cn(
@@ -1033,7 +1052,7 @@ function RightPanelTab(
         props.active
           ? "bg-accent text-foreground"
           : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
-        isDragging && "relative z-10",
+        isDragging && (inDragScope ? "opacity-50" : "relative z-10"),
       )}
     >
       {content}
@@ -1074,12 +1093,15 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
       setAddSurfaceMenuOpen(true);
     }
   });
+  // Inside ChatView's split view, which owns the shell and the split menu entries.
+  const pane = useRightPanelPane();
+  const takesNewSurfaceShortcut = props.open !== false && pane?.focused !== false;
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- subscribes a document keydown listener for the new surface shortcut while the panel is open
   useEffect(() => {
-    if (props.open === false) return;
+    if (!takesNewSurfaceShortcut) return;
     document.addEventListener("keydown", onNewSurfaceKeyDown, true);
     return () => document.removeEventListener("keydown", onNewSurfaceKeyDown, true);
-  }, [props.open]);
+  }, [takesNewSurfaceShortcut]);
 
   const updateTabScrollState = (viewport: HTMLDivElement) => {
     const hasOverflow = viewport.scrollWidth - viewport.clientWidth > TAB_SCROLL_EDGE_TOLERANCE;
@@ -1200,7 +1222,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
     const surfaceIndex = props.surfaces.findIndex((entry) => entry.id === surface.id);
     if (surfaceIndex < 0) return;
 
-    const items: ContextMenuItem<TabContextMenuAction>[] = [];
+    const items: ContextMenuItem<TabContextMenuAction | SplitMenuAction>[] = [];
     if (surface.kind === "device" && props.onRenameDevice)
       items.push({ id: "rename", label: "Rename" });
     if (surface.kind === "file" && surface.attachment === undefined) {
@@ -1235,6 +1257,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
         label: "Close all",
         disabled: props.surfaces.length === 0,
       },
+      ...(pane?.tabMenu.items(surface) ?? []),
     );
 
     const action = await api.contextMenu.show(items, { x: event.clientX, y: event.clientY });
@@ -1261,16 +1284,18 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
         props.onCloseSurface(surface);
         break;
       case "close-others":
-        props.onCloseOtherSurfaces(surface);
+        props.onCloseOtherSurfaces(surface, props.surfaces);
         break;
       case "close-to-right":
-        props.onCloseSurfacesToRight(surface);
+        props.onCloseSurfacesToRight(surface, props.surfaces);
         break;
       case "close-all":
-        props.onCloseAllSurfaces();
+        props.onCloseAllSurfaces(props.surfaces);
         break;
       case null:
         break;
+      default:
+        pane?.tabMenu.select(action, surface);
     }
   };
   const handleTabAuxClick = (event: ReactMouseEvent, surface: RightPanelSurface) => {
@@ -1336,8 +1361,11 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
     };
   };
 
+  const Frame = pane ? SplitPaneFrame : PreviewPanelShell;
+  const atLeftEdge = pane?.side !== "right";
+  const atRightEdge = pane?.side !== "left";
   return (
-    <PreviewPanelShell
+    <Frame
       workspaceArea
       workspaceFocusKey={`panel:${props.environmentId}:${props.activeSurfaceId ?? "empty"}`}
       workspaceLabel={
@@ -1362,10 +1390,13 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
       <div
         className={cn(
           "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1 pl-2",
-          props.mode === "inline" && !props.layoutControls ? "pr-28" : "pr-3",
+          props.mode === "inline" && !props.layoutControls && atRightEdge ? "pr-28" : "pr-3",
           ownsDesktopTitleBar && "drag-region",
-          ownsDesktopTitleBar && "wco:pr-(--workspace-native-controls-inset)",
-          props.mode === "inline" && props.maximized && COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
+          ownsDesktopTitleBar && atRightEdge && "wco:pr-(--workspace-native-controls-inset)",
+          props.mode === "inline" &&
+            props.maximized &&
+            atLeftEdge &&
+            COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
         )}
         data-right-panel-tabbar
       >
@@ -1539,10 +1570,10 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
           </div>
         ) : null}
         {props.layoutControls}
-        {ownsDesktopTitleBar && !props.layoutControls ? (
+        {ownsDesktopTitleBar && !props.layoutControls && atRightEdge ? (
           <span aria-hidden className="hidden w-24 shrink-0 wco:block" />
         ) : null}
-        {ownsDesktopTitleBar ? (
+        {ownsDesktopTitleBar && atRightEdge ? (
           <span
             aria-hidden
             className="pointer-events-none fixed top-[var(--workspace-controls-top)] right-[var(--workspace-controls-right)] h-[var(--workspace-topbar-height)] w-28 [-webkit-app-region:no-drag]"
@@ -1577,7 +1608,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
           props.children
         )}
       </div>
-    </PreviewPanelShell>
+    </Frame>
   );
 }
 
diff --git a/apps/web/src/components/chat/ChatRightPanel.tsx b/apps/web/src/components/chat/ChatRightPanel.tsx
index 69da3a9ddccd1..90def1a1687cd 100644
--- a/apps/web/src/components/chat/ChatRightPanel.tsx
+++ b/apps/web/src/components/chat/ChatRightPanel.tsx
@@ -1,8 +1,11 @@
 import { usePreviewPanelInlineSize } from "../../hooks/usePreviewPanelInlineSize";
+import {
+  RightPanelSplitView,
+  type RightPanelSplitViewProps,
+} from "../../fork/rightPanelSplit/RightPanelSplitView";
 import { RightPanelSheet } from "../RightPanelSheet";
-import { RightPanelTabs, type RightPanelTabsProps } from "../RightPanelTabs";
 
-type ChatRightPanelProps = Omit<RightPanelTabsProps, "mode" | "inlineSize" | "maximized"> & {
+type ChatRightPanelProps = Omit<RightPanelSplitViewProps, "mode" | "inlineSize" | "maximized"> & {
   readonly sheet: boolean;
   readonly maximized: boolean;
   readonly workspaceLayoutElement: HTMLElement | null;
@@ -32,7 +35,9 @@ export function ChatRightPanel(props: ChatRightPanelProps) {
     widthStorageKey,
   });
   if (!sheet) {
-    return <RightPanelTabs {...tabs} mode="inline" maximized={maximized} inlineSize={inlineSize} />;
+    return (
+      <RightPanelSplitView {...tabs} mode="inline" maximized={maximized} inlineSize={inlineSize} />
+    );
   }
   return (
     <RightPanelSheet
@@ -40,7 +45,7 @@ export function ChatRightPanel(props: ChatRightPanelProps) {
       open={tabs.open === true}
       onClose={onCloseSheet}
     >
-      <RightPanelTabs
+      <RightPanelSplitView
         {...tabs}
         mode="sheet"
         inlineSize={inlineSize}
diff --git a/apps/web/src/components/chat/RightPanelSurfaceContent.tsx b/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
index 95abc34ebcc77..876dd3695f8f8 100644
--- a/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
+++ b/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
@@ -96,6 +96,7 @@ export function RightPanelSurfaceContent(props: {
             tabId={surface.resourceId}
             configuredUrls={props.configuredPreviewUrls}
             visible={visible}
+            actionsEnabled={props.activeSurfaceId === surface.id}
             onSendAnnotation={props.onSendAnnotation}
           />
         </Suspense>
@@ -239,7 +240,7 @@ export function RightPanelSurfaceContent(props: {
             composerDraftTarget={props.composerDraftTarget}
             keybindings={props.keybindings}
             availableEditors={files.availableEditors}
-            openInShortcutEnabled={visible}
+            openInShortcutEnabled={visible && props.activeSurfaceId === surface.id}
             relativePath={surface.kind === "file" ? surface.relativePath : null}
             {...(attachment ? { attachment } : {})}
             revealLine={surface.kind === "file" ? (surface.revealLine ?? null) : null}
diff --git a/apps/web/src/components/chat/useChatTerminalActions.ts b/apps/web/src/components/chat/useChatTerminalActions.ts
index a64c748e81432..3f8ad78287511 100644
--- a/apps/web/src/components/chat/useChatTerminalActions.ts
+++ b/apps/web/src/components/chat/useChatTerminalActions.ts
@@ -363,10 +363,14 @@ export function useChatTerminalActions(input: ChatTerminalActionsInput) {
   };
   const splitPanelTerminalVerticalStable = useStableCallback(splitPanelTerminalVertical);
   const activatePanelTerminal = (terminalId: string) => {
-    if (!activeThreadRef || activeRightPanelSurface?.kind !== "terminal") return;
-    useRightPanelStore
-      .getState()
-      .activateTerminal(activeThreadRef, activeRightPanelSurface.id, terminalId);
+    if (!activeThreadRef) return;
+    // Look the owner up: a press in a split panel's other pane runs before its focus change renders.
+    const store = useRightPanelStore.getState();
+    const surface = selectThreadRightPanelState(store.byThreadKey, activeThreadRef).surfaces.find(
+      (entry) => entry.kind === "terminal" && entry.terminalIds.includes(terminalId),
+    );
+    if (!surface) return;
+    store.activateTerminal(activeThreadRef, surface.id, terminalId);
     focusTerminal(activeThreadRef, terminalId);
   };
   const activatePanelTerminalStable = useStableCallback(activatePanelTerminal);
diff --git a/apps/web/src/components/preview/PreviewPanel.tsx b/apps/web/src/components/preview/PreviewPanel.tsx
index 9de48226672f5..903cab1defba3 100644
--- a/apps/web/src/components/preview/PreviewPanel.tsx
+++ b/apps/web/src/components/preview/PreviewPanel.tsx
@@ -17,6 +17,8 @@ interface Props {
   tabId?: string | null;
   configuredUrls?: ReadonlyArray<string> | undefined;
   visible: boolean;
+  /** False in a split view's unfocused pane, so preview commands reach one browser. */
+  actionsEnabled?: boolean;
   onSendAnnotation?: (
     annotation: PreviewAnnotationPayload,
     image: ComposerImageAttachment | null,
@@ -29,6 +31,7 @@ export function PreviewPanel({
   tabId,
   configuredUrls,
   visible,
+  actionsEnabled,
   onSendAnnotation,
 }: Props) {
   const available = usePreviewAvailable(threadRef.environmentId);
@@ -54,6 +57,7 @@ export function PreviewPanel({
         {...(tabId !== undefined ? { tabId } : {})}
         configuredUrls={configuredUrls}
         visible={visible}
+        actionsEnabled={actionsEnabled ?? true}
         {...(onSendAnnotation ? { onSendAnnotation } : {})}
       />
     </PreviewPanelShell>
diff --git a/apps/web/src/components/preview/PreviewView.tsx b/apps/web/src/components/preview/PreviewView.tsx
index f7cb3082491e9..a51835066c1ff 100644
--- a/apps/web/src/components/preview/PreviewView.tsx
+++ b/apps/web/src/components/preview/PreviewView.tsx
@@ -108,6 +108,7 @@ interface Props {
   tabId?: string | null;
   configuredUrls?: ReadonlyArray<string> | undefined;
   visible: boolean;
+  actionsEnabled?: boolean;
   onSendAnnotation?: (
     annotation: PreviewAnnotationPayload,
     image: ComposerImageAttachment | null,
@@ -164,6 +165,7 @@ export function PreviewView({
   tabId: requestedTabId,
   configuredUrls,
   visible,
+  actionsEnabled = true,
   onSendAnnotation,
 }: Props) {
   const urlInputRef = useRef<HTMLInputElement | null>(null);
@@ -947,7 +949,7 @@ export function PreviewView({
   );
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- subscribes to preview and desktop menu actions while the view is visible
   useEffect(() => {
-    if (!visible) return;
+    if (!visible || !actionsEnabled) return;
     const unsubscribeAction = subscribePreviewAction((action) => onPreviewAction(action));
     // A focused page swallows its own keydowns, so the desktop forwards these
     // shortcuts from the guest as menu actions instead.
@@ -962,7 +964,7 @@ export function PreviewView({
       unsubscribeAction();
       unsubscribeMenu?.();
     };
-  }, [visible]);
+  }, [visible, actionsEnabled]);
 
   return (
     <div
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 130741ae1f928..fbe029852d000 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -1905,6 +1905,7 @@ export function PullRequestDetailPanel({
                   environmentId={environmentId}
                   reference={reference}
                   active={tab === "guide"}
+                  keysEnabled={shortcutsEnabled}
                   title={detail.title}
                   workspaceRoot={detail.workspaceRoot}
                   canComment={
diff --git a/apps/web/src/components/pullRequest/PullRequestGuideTab.tsx b/apps/web/src/components/pullRequest/PullRequestGuideTab.tsx
index f16156482a9dc..2af579b675c48 100644
--- a/apps/web/src/components/pullRequest/PullRequestGuideTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestGuideTab.tsx
@@ -25,6 +25,7 @@ export function PullRequestGuideTab({
   title,
   workspaceRoot,
   active,
+  keysEnabled = true,
   canComment,
   rangeComments,
   completionScope,
@@ -39,6 +40,8 @@ export function PullRequestGuideTab({
   title: string | null;
   workspaceRoot: string;
   active: boolean;
+  /** False while another pane of a split panel has focus, so j and k reach only one guide. */
+  keysEnabled?: boolean;
   canComment: boolean;
   rangeComments: boolean;
   completionScope: PullRequestCompletionScope | null;
@@ -157,7 +160,7 @@ export function PullRequestGuideTab({
         reference={reference}
         guide={guide}
         banner={banner}
-        active={active}
+        active={active && keysEnabled}
         commenting={commenting}
         onAsk={
           onAskAboutStop === null
diff --git a/apps/web/src/fork/rightPanelSplit/RightPanelDragScope.tsx b/apps/web/src/fork/rightPanelSplit/RightPanelDragScope.tsx
new file mode 100644
index 0000000000000..e428f99cf63bf
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/RightPanelDragScope.tsx
@@ -0,0 +1,196 @@
+import {
+  type Announcements,
+  type CollisionDetection,
+  DndContext,
+  type DragEndEvent,
+  type DragMoveEvent,
+  DragOverlay,
+  type DragStartEvent,
+  type Over,
+} from "@dnd-kit/core";
+import type { ScopedThreadRef } from "@t3tools/contracts";
+import { createContext, type ReactNode, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { selectThreadRightPanelState, useRightPanelStore } from "~/rightPanelStore";
+
+import {
+  type ContentDropData,
+  type DropGhost,
+  type DropOver,
+  type DropPlan,
+  panelCollision,
+  resolveDrop,
+  samePlan,
+} from "./dropTarget.logic";
+import { paneLayout, paneOf, type SplitChange } from "./splitLayout.logic";
+import { type TabDragData, useTabDragSensors } from "./tabStrip";
+
+/** Only tab strips scroll while a tab is dragged; a diff or file view under the pointer stays put. */
+const AUTO_SCROLL = {
+  canScroll: (element: Element) =>
+    element.matches('[data-slot="scroll-area-viewport"]') &&
+    element.closest("[data-right-panel-tab-list]") !== null,
+};
+
+function titleOf(data: unknown): string {
+  return (data as Partial<TabDragData> | undefined)?.title ?? "Tab";
+}
+
+function dropOverOf(over: Over | null): DropOver | null {
+  if (over === null) return null;
+  const data = over.data.current as Partial<TabDragData> | ContentDropData | undefined;
+  if (data?.kind === "content") return { kind: "content", pane: data.pane, rect: over.rect };
+  if (data?.kind === "tab") return { kind: "tab", id: String(over.id), rect: over.rect };
+  return null;
+}
+
+/** Records a press before it activates its tab; each pane hands it to its strip. */
+export const NotePressContext = createContext<(surfaceId: string) => void>(() => {});
+
+const ANNOUNCEMENTS: Announcements = {
+  onDragStart: ({ active }) => `Picked up ${titleOf(active.data.current)}.`,
+  onDragOver: ({ active, over }) =>
+    over ? `${titleOf(active.data.current)} is over a drop target.` : undefined,
+  onDragEnd: ({ active, over }) =>
+    over
+      ? `${titleOf(active.data.current)} was dropped.`
+      : `${titleOf(active.data.current)} was put back.`,
+  onDragCancel: ({ active }) => `Moving ${titleOf(active.data.current)} was cancelled.`,
+};
+
+/**
+ * One drag context around every strip and pane of a ChatView panel, so a tab can be reordered,
+ * moved to the other pane, or dropped on content to split. Drag state renders only the chip and
+ * the ghost, never a surface.
+ */
+export function RightPanelDragScope(props: {
+  readonly threadRef: ScopedThreadRef;
+  readonly splitAllowed: boolean;
+  readonly splitRendered: boolean;
+  readonly splitGrowth: number;
+  /** Applies a drop's layout change; the split view owns what a change does beyond the store. */
+  readonly applyChange: (change: SplitChange) => void;
+  readonly children: ReactNode;
+}) {
+  const { threadRef } = props;
+  const sensors = useTabDragSensors();
+  const [session, setSession] = useState<{ title: string; plan: DropPlan | null } | null>(null);
+  const press = useRef<{ surfaceId: string; restoreShown: string | null } | null>(null);
+  // The latest pointer, as collision detection last saw it. An event's `delta` would not do:
+  // dnd-kit adds the tab strip's auto-scroll to it.
+  const pointer = useRef<{ x: number; y: number } | null>(null);
+  const readThread = () =>
+    selectThreadRightPanelState(useRightPanelStore.getState().byThreadKey, threadRef);
+
+  const notePress = (surfaceId: string) => {
+    const thread = readThread();
+    const layout = paneLayout(thread);
+    const shown =
+      layout.kind === "split" ? layout[paneOf(thread, surfaceId)].shown.id : thread.activeSurfaceId;
+    press.current = { surfaceId, restoreShown: shown === surfaceId ? null : shown };
+  };
+
+  const collisionDetection: CollisionDetection = (args) => {
+    pointer.current = args.pointerCoordinates;
+    return panelCollision(args);
+  };
+
+  const planFor = (event: DragMoveEvent | DragEndEvent): DropPlan | null => {
+    const draggedId = String(event.active.id);
+    return resolveDrop({
+      arrangement: readThread(),
+      splitRendered: props.splitRendered,
+      splitAllowed: props.splitAllowed,
+      draggedId,
+      over: dropOverOf(event.over),
+      pointer: pointer.current,
+      restoreShown: press.current?.surfaceId === draggedId ? press.current.restoreShown : null,
+      splitGrowth: props.splitGrowth,
+    });
+  };
+
+  // `over` also changes without a move, once droppables are measured or a strip scrolls.
+  const updatePlan = (event: DragMoveEvent) => {
+    const plan = planFor(event);
+    setSession((current) =>
+      current === null || samePlan(current.plan, plan) ? current : { ...current, plan },
+    );
+  };
+
+  const finish = () => {
+    press.current = null;
+    pointer.current = null;
+    setSession(null);
+  };
+
+  return (
+    <NotePressContext value={notePress}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetection}
+        autoScroll={AUTO_SCROLL}
+        accessibility={{ announcements: ANNOUNCEMENTS }}
+        onDragStart={({ active, activatorEvent }: DragStartEvent) => {
+          // A touch drag starts without a press activation, so an older press record is stale.
+          const pressed =
+            activatorEvent instanceof PointerEvent && activatorEvent.pointerType !== "touch";
+          if (!pressed || press.current?.surfaceId !== active.id) press.current = null;
+          setSession({ title: titleOf(active.data.current), plan: null });
+        }}
+        onDragMove={updatePlan}
+        onDragOver={updatePlan}
+        onDragEnd={(event) => {
+          const plan = planFor(event);
+          finish();
+          if (plan) props.applyChange(plan.change);
+        }}
+        onDragCancel={finish}
+      >
+        {props.children}
+        {createPortal(
+          <>
+            <DragOverlay dropAnimation={null} zIndex={60}>
+              {session ? (
+                <div className="flex h-6 max-w-36 items-center rounded-md bg-accent px-2 text-xs text-foreground shadow-md">
+                  <span className="truncate">{session.title}</span>
+                </div>
+              ) : null}
+            </DragOverlay>
+            {/* Code views and hosted browser pages under the pointer must not see the drag. */}
+            {session ? (
+              <div
+                aria-hidden
+                data-right-panel-drag-shield
+                className="fixed inset-0 z-40 cursor-grabbing"
+              />
+            ) : null}
+            {session?.plan?.ghost ? <DropGhostView ghost={session.plan.ghost} /> : null}
+          </>,
+          document.body,
+        )}
+      </DndContext>
+    </NotePressContext>
+  );
+}
+
+function DropGhostView({ ghost }: { ghost: DropGhost }) {
+  if (ghost.kind === "marker") {
+    return (
+      <div
+        aria-hidden
+        data-right-panel-drop-ghost="marker"
+        className="pointer-events-none fixed z-[70] w-0.5 rounded-full bg-primary"
+        style={{ left: ghost.left, top: ghost.top, height: ghost.height }}
+      />
+    );
+  }
+  return (
+    <div
+      aria-hidden
+      data-right-panel-drop-ghost="box"
+      className="pointer-events-none fixed z-50 rounded-md bg-primary/15 ring-2 ring-primary/45 ring-inset"
+      style={{ left: ghost.left, top: ghost.top, width: ghost.width, height: ghost.height }}
+    />
+  );
+}
diff --git a/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.browser.test.tsx b/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.browser.test.tsx
new file mode 100644
index 0000000000000..7911b0bcdbba9
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.browser.test.tsx
@@ -0,0 +1,332 @@
+import "~/index.css";
+
+import { scopedThreadKey, scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { EnvironmentId, ThreadId } from "@t3tools/contracts";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+
+import type { ResizableWidthHandlers } from "~/hooks/useResizableWidth";
+import { startWorkspaceFocus } from "~/lib/workspaceFocus";
+import {
+  type RightPanelSurface,
+  selectThreadRightPanelState,
+  type ThreadRightPanelState,
+  useRightPanelStore,
+} from "~/rightPanelStore";
+import { render } from "../../../test/render";
+import { RightPanelSplitView } from "./RightPanelSplitView";
+
+const environmentId = EnvironmentId.make("environment-local");
+const ref = scopeThreadRef(environmentId, ThreadId.make("thread-split-view"));
+
+const file = (name: string): RightPanelSurface => ({
+  id: `file:${name}`,
+  kind: "file",
+  relativePath: name,
+  revealLine: null,
+  revealRequestId: 1,
+});
+const TERMINAL: RightPanelSurface = {
+  id: "terminal:1",
+  kind: "terminal",
+  resourceId: "1",
+  terminalIds: ["1"],
+  activeTerminalId: "1",
+};
+
+const NO_HANDLERS: ResizableWidthHandlers = {
+  ref: () => undefined,
+  onPointerDown: () => {},
+  onPointerMove: () => {},
+  onPointerUp: () => {},
+  onPointerCancel: () => {},
+  onLostPointerCapture: () => {},
+};
+
+function setup(thread: ThreadRightPanelState) {
+  useRightPanelStore.setState({
+    byThreadKey: { [scopedThreadKey(ref)]: thread },
+    threadPanelVisibilityByThreadKey: {},
+    userActionRevisionByThreadKey: {},
+    closeRevisionByThreadKey: {},
+  });
+}
+
+const thread = () => selectThreadRightPanelState(useRightPanelStore.getState().byThreadKey, ref);
+
+function StubSurface(props: { surface: RightPanelSurface; onRender: (id: string) => void }) {
+  props.onRender(props.surface.id);
+  return (
+    <div data-testid={`surface ${props.surface.id}`} className="flex min-h-0 flex-1 flex-col p-2">
+      {props.surface.kind === "terminal" ? (
+        <textarea aria-label="Terminal input" />
+      ) : (
+        <button type="button">Action in {props.surface.id}</button>
+      )}
+    </div>
+  );
+}
+
+/** ChatView's wiring of the split view to the store, with stub surfaces. */
+function Panel(props: { width: number; onRender: (id: string) => void }) {
+  const state = useRightPanelStore((store) => selectThreadRightPanelState(store.byThreadKey, ref));
+  const store = () => useRightPanelStore.getState();
+  const close = (strip: readonly RightPanelSurface[]) => {
+    for (const surface of strip) store().closeSurface(ref, surface.id);
+  };
+  const noop = () => {};
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end", width: 1200, height: 480 }}>
+      <RightPanelSplitView
+        mode="inline"
+        open
+        maximized={false}
+        inlineSize={{
+          width: props.width,
+          handlers: NO_HANDLERS,
+          setWidth: noop,
+          maxWidth: props.width,
+          observeRow: () => noop,
+        }}
+        keybindings={[]}
+        getShortcutContext={() => ({
+          terminalFocus: false,
+          terminalOpen: false,
+          previewFocus: false,
+          previewOpen: false,
+          isWeb: true,
+          isDesktop: false,
+        })}
+        surfaces={state.surfaces}
+        environmentId={environmentId}
+        activeSurfaceId={state.activeSurfaceId}
+        pendingSurfaceIds={new Set()}
+        previewSessions={{}}
+        desktopByTabId={{}}
+        terminalLabelsById={new Map()}
+        onActivate={(surface) => store().activateSurface(ref, surface.id)}
+        onCloseSurface={(surface) => store().closeSurface(ref, surface.id)}
+        onCloseOtherSurfaces={(surface, strip) =>
+          close(strip.filter((entry) => entry.id !== surface.id))
+        }
+        onCloseSurfacesToRight={(surface, strip) =>
+          close(strip.slice(strip.findIndex((entry) => entry.id === surface.id) + 1))
+        }
+        onCloseAllSurfaces={close}
+        onMoveSurface={(surfaceId, toIndex) => store().moveSurface(ref, surfaceId, toIndex)}
+        onCopyFilePath={noop}
+        onAddBrowser={noop}
+        onAddBrowserInProfile={noop}
+        onAddTerminal={noop}
+        onAddDiff={noop}
+        onAddFiles={noop}
+        onAddPullRequest={noop}
+        onAddPullRequests={noop}
+        onAddDevice={noop}
+        browserAvailable={false}
+        terminalAvailable={false}
+        diffAvailable={false}
+        filesAvailable={false}
+        pullRequestAvailable={false}
+        pullRequestsAvailable={false}
+        deviceAvailable={false}
+        threadRef={ref}
+        split={state.split}
+        renderSurface={(surface) => <StubSurface surface={surface} onRender={props.onRender} />}
+      />
+    </div>
+  );
+}
+
+function pointer(target: EventTarget, type: string, at: { x: number; y: number }) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      pointerId: 1,
+      pointerType: "mouse",
+      isPrimary: true,
+      button: type === "pointermove" ? -1 : 0,
+      buttons: type === "pointerup" ? 0 : 1,
+      clientX: at.x,
+      clientY: at.y,
+    }),
+  );
+}
+
+function center(element: Element) {
+  const box = element.getBoundingClientRect();
+  return { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+}
+
+/** Presses a tab and drags it into the right third of the panel content, until the ghost shows. */
+async function dragIntoRightThird(screen: { container: HTMLElement }, title: string) {
+  const tab = page.getByRole("button", { name: title, exact: true }).element();
+  const content = screen.container
+    .querySelector("[data-right-panel-surface-content]")!
+    .getBoundingClientRect();
+  const start = center(tab);
+  const target = { x: content.right - 40, y: content.top + content.height / 2 };
+  pointer(tab, "pointerdown", start);
+  pointer(document, "pointermove", { x: start.x + 10, y: start.y + 10 });
+  pointer(document, "pointermove", target);
+  const ghost = await vi.waitFor(() => {
+    const element = document.querySelector("[data-right-panel-drop-ghost='box']");
+    expect(element).not.toBeNull();
+    expect(document.querySelector("[data-right-panel-drag-shield]")).not.toBeNull();
+    return element!.getBoundingClientRect();
+  });
+  return { content, target, ghost };
+}
+
+describe("RightPanelSplitView", () => {
+  it("splits when a background tab is dropped on the right third, keeping the source pane's tab", async () => {
+    await page.viewport(1280, 800);
+    setup({ isOpen: true, activeSurfaceId: "file:a.ts", surfaces: [file("a.ts"), file("b.ts")] });
+    await using screen = await render(<Panel width={600} onRender={() => {}} />);
+
+    const { content, target, ghost } = await dragIntoRightThird(screen, "b.ts");
+    expect(ghost.left).toBeCloseTo(content.left + content.width / 2, 0);
+    expect(ghost.width).toBeCloseTo(content.width / 2, 0);
+    expect(ghost.height).toBeCloseTo(content.height, 0);
+    pointer(document, "pointerup", target);
+
+    const left = screen.getByRole("region", { name: "Left pane" });
+    const right = screen.getByRole("region", { name: "Right pane" });
+    await expect.element(right.getByRole("button", { name: "b.ts", exact: true })).toBeVisible();
+    await expect.element(left.getByTestId("surface file:a.ts")).toBeVisible();
+    await expect.element(right.getByTestId("surface file:b.ts")).toBeVisible();
+    expect(left.getByRole("button", { name: "b.ts", exact: true }).query()).toBeNull();
+    expect(thread().activeSurfaceId).toBe("file:b.ts");
+    expect(document.querySelector("[data-right-panel-drop-ghost]")).toBeNull();
+    expect(document.querySelector("[data-right-panel-drag-shield]")).toBeNull();
+  });
+
+  it("cancels a drag on Escape and leaves the layout as it was", async () => {
+    await page.viewport(1280, 800);
+    setup({ isOpen: true, activeSurfaceId: "file:a.ts", surfaces: [file("a.ts"), file("b.ts")] });
+    await using screen = await render(<Panel width={600} onRender={() => {}} />);
+
+    const { target } = await dragIntoRightThird(screen, "b.ts");
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true }),
+    );
+    await vi.waitFor(() => {
+      expect(document.querySelector("[data-right-panel-drop-ghost]")).toBeNull();
+      expect(document.querySelector("[data-right-panel-drag-shield]")).toBeNull();
+    });
+    pointer(document, "pointerup", target);
+
+    expect(thread().split).toBeUndefined();
+    expect(thread().surfaces.map((surface) => surface.id)).toEqual(["file:a.ts", "file:b.ts"]);
+    expect(screen.getByRole("region", { name: "Right pane" }).query()).toBeNull();
+  });
+
+  it("resizes the panes from the splitter without rendering the surfaces until release", async () => {
+    await page.viewport(1280, 800);
+    setup({
+      isOpen: true,
+      activeSurfaceId: "file:a.ts",
+      surfaces: [file("a.ts"), file("b.ts")],
+      split: { rightIds: ["file:b.ts"], otherShownId: "file:b.ts", ratio: 0.5 },
+    });
+    const onRender = vi.fn();
+    await using screen = await render(<Panel width={600} onRender={onRender} />);
+    const left = screen.getByRole("region", { name: "Left pane" }).element();
+    const handle = screen.getByRole("separator", { name: "Resize split panes" }).element();
+    const row = left.closest("[data-right-panel-split-row]")!.getBoundingClientRect();
+    const startWidth = left.getBoundingClientRect().width;
+    const rendersBefore = onRender.mock.calls.length;
+    // Synthetic drag events have no active browser pointer to capture.
+    using _capture = vi.spyOn(handle, "setPointerCapture").mockImplementation(() => {});
+
+    const start = center(handle);
+    pointer(handle, "pointerdown", start);
+    pointer(handle, "pointermove", { x: start.x - 60, y: start.y });
+    await vi.waitFor(() => {
+      expect(left.getBoundingClientRect().width).toBeCloseTo(startWidth - 60, 0);
+    });
+    expect(onRender.mock.calls.length).toBe(rendersBefore);
+
+    pointer(handle, "pointerup", { x: start.x - 60, y: start.y });
+    await vi.waitFor(() => {
+      expect(thread().split?.ratio).toBeCloseTo((startWidth - 60) / row.width, 3);
+    });
+  });
+
+  it("steps the splitter by keyboard from where the divider is drawn", async () => {
+    await page.viewport(1280, 800);
+    setup({
+      isOpen: true,
+      activeSurfaceId: "file:a.ts",
+      surfaces: [file("a.ts"), file("b.ts")],
+      split: { rightIds: ["file:b.ts"], otherShownId: "file:b.ts", ratio: 0.2 },
+    });
+    await using screen = await render(<Panel width={600} onRender={() => {}} />);
+    const left = screen.getByRole("region", { name: "Left pane" }).element();
+    const row = left.closest("[data-right-panel-split-row]")!.getBoundingClientRect();
+    const drawn = left.getBoundingClientRect().width;
+    expect(drawn).toBeGreaterThan(0.2 * row.width);
+
+    screen.getByRole("separator", { name: "Resize split panes" }).element().focus();
+    await userEvent.keyboard("{ArrowRight}");
+
+    expect(thread().split?.ratio).toBeCloseTo((drawn + 16) / row.width, 3);
+  });
+
+  it.each([
+    ["a background tab", "b.ts"],
+    ["the tab the pane already shows", "a.ts"],
+  ])(
+    "moves focus into the pane on a press of %s and keeps it active there",
+    async (_case, name) => {
+      await page.viewport(1280, 800);
+      setup({
+        isOpen: true,
+        activeSurfaceId: TERMINAL.id,
+        surfaces: [TERMINAL, file("a.ts"), file("b.ts")],
+        split: { rightIds: ["file:a.ts", "file:b.ts"], otherShownId: "file:a.ts", ratio: 0.5 },
+      });
+      await using screen = await render(<Panel width={600} onRender={() => {}} />);
+      using _focus = { [Symbol.dispose]: startWorkspaceFocus(screen.router!) };
+      const right = screen.getByRole("region", { name: "Right pane" });
+      screen.getByRole("textbox", { name: "Terminal input" }).element().focus();
+
+      await userEvent.click(right.getByRole("button", { name, exact: true }));
+
+      await vi.waitFor(() => {
+        expect(right.element().contains(document.activeElement)).toBe(true);
+      });
+      expect(thread().activeSurfaceId).toBe(`file:${name}`);
+      expect(thread().split?.otherShownId).toBe(TERMINAL.id);
+    },
+  );
+
+  it("shows a hidden split as one strip whose Close others closes every other visible tab", async () => {
+    await page.viewport(1280, 800);
+    setup({
+      isOpen: true,
+      activeSurfaceId: "file:a.ts",
+      surfaces: ["a.ts", "b.ts", "c.ts", "d.ts"].map(file),
+      split: { rightIds: ["file:c.ts", "file:d.ts"], otherShownId: "file:c.ts", ratio: 0.5 },
+    });
+    await using screen = await render(<Panel width={400} onRender={() => {}} />);
+    expect(screen.getByRole("region", { name: "Right pane" }).query()).toBeNull();
+    for (const name of ["a.ts", "b.ts", "c.ts", "d.ts"]) {
+      await expect.element(screen.getByRole("button", { name, exact: true })).toBeVisible();
+    }
+
+    await userEvent.click(screen.getByRole("button", { name: "a.ts", exact: true }), {
+      button: "right",
+    });
+    await expect.element(page.getByRole("menuitem", { name: "Unsplit" })).toBeVisible();
+    expect(page.getByRole("menuitem", { name: "Move to the right pane" }).query()).toBeNull();
+    await page.getByRole("menuitem", { name: "Close others" }).click();
+
+    await vi.waitFor(() => {
+      expect(thread().surfaces.map((surface) => surface.id)).toEqual(["file:a.ts"]);
+    });
+    expect(thread().split).toBeUndefined();
+  });
+});
diff --git a/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.tsx b/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.tsx
new file mode 100644
index 0000000000000..3f2752c0e2f23
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/RightPanelSplitView.tsx
@@ -0,0 +1,346 @@
+import { useDroppable } from "@dnd-kit/core";
+import { scopedThreadKey } from "@t3tools/client-runtime/environment";
+import type { ScopedThreadRef } from "@t3tools/contracts";
+import {
+  type CSSProperties,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  useContext,
+  useEffect,
+} from "react";
+
+import { PreviewPanelShell } from "~/components/preview/PreviewPanelShell";
+import { RightPanelResizeHandle } from "~/components/preview/RightPanelResizeHandle";
+import { RightPanelTabs, type RightPanelTabsProps } from "~/components/RightPanelTabs";
+import { useMediaQuery } from "~/hooks/useMediaQuery";
+import { useResizeDrag } from "~/hooks/useResizeDrag";
+import { cn } from "~/lib/utils";
+import { requestWorkspaceFocus } from "~/lib/workspaceFocus";
+import { setActivePreviewTab } from "~/previewStateStore";
+import { RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY } from "~/rightPanelLayout";
+import {
+  type RightPanelSurface,
+  selectActiveRightPanelSurface,
+  selectThreadRightPanelState,
+  useRightPanelStore,
+} from "~/rightPanelStore";
+
+import type { ContentDropData } from "./dropTarget.logic";
+import { useReportSplitRendered } from "./renderedSplit";
+import { NotePressContext, RightPanelDragScope } from "./RightPanelDragScope";
+import {
+  clampSplitRatio,
+  PANE_MIN_WIDTH,
+  type PaneSide,
+  paneLayout,
+  type RightPanelSplit,
+  SPLIT_MIN_PANEL_WIDTH,
+  SPLIT_RATIO_DEFAULT,
+  SPLIT_RATIO_MAX,
+  SPLIT_RATIO_MIN,
+  type SplitChange,
+  splitMenuChange,
+  splitMenuItems,
+  SPLITTER_WIDTH,
+  splitWidenTarget,
+  widthToGiveBack,
+} from "./splitLayout.logic";
+import { RightPanelPaneContext, type RightPanelTabMenu } from "./tabStrip";
+
+type RenderPanelSurface = (surface: RightPanelSurface, visible: boolean) => ReactNode;
+
+export type RightPanelSplitViewProps = Omit<RightPanelTabsProps, "children"> & {
+  readonly threadRef: ScopedThreadRef;
+  readonly split: RightPanelSplit | undefined;
+  readonly renderSurface: RenderPanelSurface;
+};
+
+const RATIO_PROPERTY = "--right-panel-split-ratio";
+const KEYBOARD_STEP = 16;
+/** What a split widened, by thread, so the unsplit can give the width back. */
+const widenedPanels = new Map<string, { readonly before: number; readonly set: number }>();
+// The unfocused pane's shown tab reads as selected but not active.
+const UNFOCUSED_PANE_CLASS =
+  "[&_[data-right-panel-tabbar]_[data-active-tab=true]]:text-muted-foreground";
+
+/**
+ * ChatView's right panel: one shell around one pane, or two side by side. The left pane keeps
+ * its React identity across split and unsplit, so the surface the user reads does not remount.
+ */
+export function RightPanelSplitView(props: RightPanelSplitViewProps) {
+  const { threadRef, split, renderSurface, layoutControls, ...tabs } = props;
+  const sheetQuery = useMediaQuery(RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY);
+  const splitAllowed =
+    props.mode === "inline" &&
+    !sheetQuery &&
+    (props.maximized === true || (props.inlineSize?.width ?? 0) >= SPLIT_MIN_PANEL_WIDTH);
+  const arrangement = { surfaces: props.surfaces, activeSurfaceId: props.activeSurfaceId, split };
+  const layout = paneLayout(arrangement);
+  const panes = splitAllowed && layout.kind === "split" ? layout : null;
+  const threadKey = scopedThreadKey(threadRef);
+  useReportSplitRendered(threadKey, panes !== null);
+  useHostedBrowserPaneFocus(threadRef, panes !== null);
+  const inlineSize = props.inlineSize;
+  const widenTarget =
+    props.maximized || !inlineSize ? null : splitWidenTarget(inlineSize.width, inlineSize.maxWidth);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- gives back the panel width a split took; any path that ends the split (close, move, menu) lands here
+  useEffect(() => {
+    if (split !== undefined || !inlineSize) return;
+    const widened = widenedPanels.get(threadKey);
+    if (widened === undefined) return;
+    widenedPanels.delete(threadKey);
+    const width = widthToGiveBack(inlineSize.width, widened);
+    if (width !== null) inlineSize.setWidth(width);
+  }, [split, threadKey, inlineSize]);
+
+  const readThread = () =>
+    selectThreadRightPanelState(useRightPanelStore.getState().byThreadKey, threadRef);
+  const updateSplit = (change: SplitChange) => {
+    const wasSplit = readThread().split !== undefined;
+    useRightPanelStore.getState().updateSplit(threadRef, change);
+    if (!wasSplit && readThread().split !== undefined && inlineSize && widenTarget !== null) {
+      widenedPanels.set(threadKey, { before: inlineSize.width, set: widenTarget });
+      inlineSize.setWidth(widenTarget);
+    }
+    // As a tab press does, keep the preview's selected browser on the newly focused tab.
+    const focusedSurface = selectActiveRightPanelSurface(
+      useRightPanelStore.getState().byThreadKey,
+      threadRef,
+    );
+    if (focusedSurface?.kind === "preview" && focusedSurface.resourceId) {
+      setActivePreviewTab(threadRef, focusedSurface.resourceId);
+    }
+    // The moved tab's pane is now focused; keyboard focus follows it out of the other pane.
+    if (change.type === "split" || change.type === "move") requestWorkspaceFocus({ area: "panel" });
+  };
+  const tabMenu: RightPanelTabMenu = {
+    items: (surface) =>
+      splitMenuItems(arrangement, surface.id, { splitAllowed, splitRendered: panes !== null }),
+    select: (action, surface) => updateSplit(splitMenuChange(action, readThread(), surface.id)),
+  };
+  const visible = props.open !== false;
+  const single = props.surfaces.find((surface) => surface.id === props.activeSurfaceId) ?? null;
+  const leftShown = panes ? panes.left.shown : single;
+  return (
+    <RightPanelDragScope
+      threadRef={threadRef}
+      splitAllowed={splitAllowed}
+      splitRendered={panes !== null}
+      splitGrowth={widenTarget === null || !inlineSize ? 0 : widenTarget - inlineSize.width}
+      applyChange={updateSplit}
+    >
+      <PreviewPanelShell
+        mode={props.mode}
+        {...(props.maximized !== undefined ? { maximized: props.maximized } : {})}
+        {...(props.open !== undefined ? { open: props.open } : {})}
+        {...(props.inlineSize ? { inlineSize: props.inlineSize } : {})}
+      >
+        <div
+          data-right-panel-split-row
+          className="flex h-full min-h-0 min-w-0 flex-1"
+          style={{ [RATIO_PROPERTY]: panes?.ratio ?? SPLIT_RATIO_DEFAULT } as CSSProperties}
+        >
+          <PaneSection
+            key="left"
+            side={panes ? "left" : null}
+            focused={panes ? panes.focused === "left" : true}
+            shown={leftShown}
+            tabs={{ ...tabs, surfaces: panes ? panes.left.surfaces : props.surfaces }}
+            tabMenu={tabMenu}
+            layoutControls={panes ? undefined : layoutControls}
+            content={leftShown ? renderSurface(leftShown, visible) : null}
+            onFocus={() => updateSplit({ type: "focus", pane: "left" })}
+          />
+          {panes ? (
+            <SplitDivider
+              key="divider"
+              ratio={panes.ratio}
+              onCommit={(ratio) => updateSplit({ type: "ratio", ratio })}
+            />
+          ) : null}
+          {panes ? (
+            <PaneSection
+              key="right"
+              side="right"
+              focused={panes.focused === "right"}
+              shown={panes.right.shown}
+              tabs={{ ...tabs, surfaces: panes.right.surfaces }}
+              tabMenu={tabMenu}
+              layoutControls={layoutControls}
+              content={renderSurface(panes.right.shown, visible)}
+              onFocus={() => updateSplit({ type: "focus", pane: "right" })}
+            />
+          ) : null}
+        </div>
+      </PreviewPanelShell>
+    </RightPanelDragScope>
+  );
+}
+
+function PaneSection(props: {
+  readonly side: PaneSide | null;
+  readonly focused: boolean;
+  readonly shown: RightPanelSurface | null;
+  readonly tabs: Omit<RightPanelTabsProps, "children" | "activeSurfaceId">;
+  readonly tabMenu: RightPanelTabMenu;
+  readonly layoutControls: ReactNode;
+  readonly content: ReactNode;
+  readonly onFocus: () => void;
+}) {
+  const { side, focused, shown } = props;
+  const paneSide = side ?? "left";
+  const notePress = useContext(NotePressContext);
+  const { setNodeRef } = useDroppable({
+    id: `content:${paneSide}`,
+    data: { kind: "content", pane: paneSide } satisfies ContentDropData,
+  });
+  const attachContent = (section: HTMLElement | null) => {
+    setNodeRef(section?.querySelector<HTMLElement>("[data-right-panel-surface-content]") ?? null);
+  };
+  return (
+    <div
+      ref={attachContent}
+      onPointerDownCapture={(event) => {
+        // A tab press activates its tab, which focuses the pane and moves keyboard focus with it.
+        if (focused || (event.target as Element).closest("[data-active-tab]")) return;
+        // The primary button, and thumb buttons so back and forward reach this pane's browser.
+        if (event.button === 0 || event.button === 3 || event.button === 4) props.onFocus();
+      }}
+      onFocusCapture={() => {
+        if (!focused) props.onFocus();
+      }}
+      className={cn(
+        "flex min-h-0 min-w-0 flex-col",
+        side === "left" ? "shrink-0" : "flex-1",
+        !focused && UNFOCUSED_PANE_CLASS,
+      )}
+      style={
+        side === "left"
+          ? {
+              width: `clamp(${PANE_MIN_WIDTH}px, calc(var(${RATIO_PROPERTY}) * 100%), calc(100% - ${PANE_MIN_WIDTH + SPLITTER_WIDTH}px))`,
+            }
+          : undefined
+      }
+    >
+      <RightPanelPaneContext value={{ side, focused, tabMenu: props.tabMenu, notePress }}>
+        <RightPanelTabs
+          {...props.tabs}
+          activeSurfaceId={shown?.id ?? null}
+          layoutControls={props.layoutControls}
+        >
+          {props.content}
+        </RightPanelTabs>
+      </RightPanelPaneContext>
+    </div>
+  );
+}
+
+/** The pane splitter: a drag writes the row's ratio variable each frame and commits on release. */
+function SplitDivider(props: {
+  readonly ratio: number;
+  readonly onCommit: (ratio: number) => void;
+}) {
+  const bounds = (row: HTMLElement) => {
+    const width = row.getBoundingClientRect().width;
+    return {
+      width,
+      min: Math.max(PANE_MIN_WIDTH, width * SPLIT_RATIO_MIN),
+      max: Math.min(width - PANE_MIN_WIDTH - SPLITTER_WIDTH, width * SPLIT_RATIO_MAX),
+    };
+  };
+  const rowOf = (element: Element) => element.closest<HTMLElement>("[data-right-panel-split-row]");
+  const drag = useResizeDrag<HTMLElement>((event) => {
+    const row = rowOf(event.currentTarget);
+    if (!row) return null;
+    const { width, min, max } = bounds(row);
+    if (width <= 0 || max < min) return null;
+    return {
+      width: Math.min(max, Math.max(min, props.ratio * width)),
+      edge: "right",
+      bounds: { min, max },
+      resize(next) {
+        row.style.setProperty(RATIO_PROPERTY, String(next / width));
+        return next;
+      },
+      finish(final, moved) {
+        if (moved) props.onCommit(final / width);
+        else row.style.setProperty(RATIO_PROPERTY, String(props.ratio));
+      },
+      cleanup(committed) {
+        if (!committed) row.style.setProperty(RATIO_PROPERTY, String(props.ratio));
+      },
+    };
+  });
+  const { cancel: _cancel, refresh: _refresh, ...handlers } = drag;
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
+    const row = rowOf(event.currentTarget);
+    if (!row) return;
+    const { width, min, max } = bounds(row);
+    if (width <= 0) return;
+    // Start from the divider as drawn: CSS may hold a pane at its minimum against the ratio.
+    const current = Math.min(max, Math.max(min, clampSplitRatio(props.ratio) * width));
+    const next =
+      event.key === "ArrowLeft"
+        ? current - KEYBOARD_STEP
+        : event.key === "ArrowRight"
+          ? current + KEYBOARD_STEP
+          : event.key === "Home"
+            ? min
+            : event.key === "End"
+              ? max
+              : event.key === "Enter"
+                ? SPLIT_RATIO_DEFAULT * width
+                : null;
+    if (next === null) return;
+    event.preventDefault();
+    props.onCommit(Math.min(max, Math.max(min, next)) / width);
+  };
+  return (
+    <div
+      className="relative w-px shrink-0 bg-border"
+      onDoubleClick={() => props.onCommit(SPLIT_RATIO_DEFAULT)}
+    >
+      <RightPanelResizeHandle
+        handlers={handlers}
+        label="Resize split panes"
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        aria-valuenow={Math.round(clampSplitRatio(props.ratio) * 100)}
+        aria-valuemin={Math.round(SPLIT_RATIO_MIN * 100)}
+        aria-valuemax={Math.round(SPLIT_RATIO_MAX * 100)}
+        className="[-webkit-app-region:no-drag]"
+      />
+    </div>
+  );
+}
+
+/**
+ * Desktop browser views render outside the panel, and the desktop replays a press in one as a
+ * pointerdown on its `<webview>`. That press focuses the pane showing the browser.
+ */
+function useHostedBrowserPaneFocus(threadRef: ScopedThreadRef, enabled: boolean) {
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- listens for presses replayed from hosted browser views, which live outside the panel's DOM
+  useEffect(() => {
+    if (!enabled) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement) || target.localName !== "webview") return;
+      const tabId = target.dataset.previewServerTab;
+      if (!tabId) return;
+      const store = useRightPanelStore.getState();
+      const thread = selectThreadRightPanelState(store.byThreadKey, threadRef);
+      const layout = paneLayout(thread);
+      if (layout.kind !== "split") return;
+      // The mini player shows a browser no pane shows; a press there is not a pane press.
+      const side = (["left", "right"] as const).find(
+        (pane) => layout[pane].shown.id === `browser:${tabId}`,
+      );
+      const surface = side ? layout[side].shown : undefined;
+      if (!side || surface?.kind !== "preview" || !surface.resourceId) return;
+      store.updateSplit(threadRef, { type: "focus", pane: side });
+      setActivePreviewTab(threadRef, surface.resourceId);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled, threadRef]);
+}
diff --git a/apps/web/src/fork/rightPanelSplit/dropTarget.logic.test.ts b/apps/web/src/fork/rightPanelSplit/dropTarget.logic.test.ts
new file mode 100644
index 0000000000000..f22af42fe7be4
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/dropTarget.logic.test.ts
@@ -0,0 +1,225 @@
+import type { ClientRect, DroppableContainer } from "@dnd-kit/core";
+import { describe, expect, it } from "vite-plus/test";
+
+import type { RightPanelSurface } from "~/rightPanelStore";
+
+import { type DropInput, panelCollision, resolveDrop } from "./dropTarget.logic";
+import type { PanelArrangement } from "./splitLayout.logic";
+
+const file = (id: string): RightPanelSurface => ({
+  id: `file:${id}`,
+  kind: "file",
+  relativePath: id,
+  revealLine: null,
+  revealRequestId: 1,
+});
+const id = (name: string) => file(name).id;
+
+function rect(left: number, top: number, width: number, height: number): ClientRect {
+  return { left, top, width, height, right: left + width, bottom: top + height };
+}
+
+const flat: PanelArrangement = {
+  surfaces: ["a", "b", "c"].map(file),
+  activeSurfaceId: id("b"),
+};
+const twoPanes: PanelArrangement = {
+  surfaces: ["a", "b", "c", "d"].map(file),
+  activeSurfaceId: id("a"),
+  split: { rightIds: [id("c"), id("d")], otherShownId: id("c"), ratio: 0.5 },
+};
+const content = rect(0, 40, 600, 400);
+const tabRect = rect(300, 8, 80, 24);
+
+function drop(input: Partial<DropInput> & Pick<DropInput, "draggedId" | "over" | "pointer">) {
+  return resolveDrop({
+    arrangement: flat,
+    splitRendered: false,
+    splitAllowed: true,
+    restoreShown: null,
+    splitGrowth: 0,
+    ...input,
+  });
+}
+
+describe("resolveDrop", () => {
+  it("splits to the side of an outer third and previews the new half", () => {
+    expect(
+      drop({
+        draggedId: id("b"),
+        over: { kind: "content", pane: "left", rect: content },
+        pointer: { x: 500, y: 200 },
+        restoreShown: id("a"),
+      }),
+    ).toEqual({
+      change: { type: "split", surfaceId: id("b"), side: "right", restoreShown: id("a") },
+      ghost: { kind: "box", left: 300, top: 40, width: 300, height: 400 },
+    });
+    expect(
+      drop({
+        draggedId: id("b"),
+        over: { kind: "content", pane: "left", rect: content },
+        pointer: { x: 100, y: 200 },
+      })?.change,
+    ).toEqual({ type: "split", surfaceId: id("b"), side: "left" });
+  });
+
+  it("previews the half of the panel a split will widen it to", () => {
+    const over = { kind: "content", pane: "left", rect: content } as const;
+    expect(
+      drop({ draggedId: id("b"), over, pointer: { x: 500, y: 200 }, splitGrowth: 200 })?.ghost,
+    ).toEqual({ kind: "box", left: 200, top: 40, width: 400, height: 400 });
+    expect(
+      drop({ draggedId: id("b"), over, pointer: { x: 100, y: 200 }, splitGrowth: 200 })?.ghost,
+    ).toEqual({ kind: "box", left: -200, top: 40, width: 400, height: 400 });
+  });
+
+  it.each([
+    ["the centre third", { pointer: { x: 300, y: 200 } }],
+    ["a panel too narrow to split", { pointer: { x: 500, y: 200 }, splitAllowed: false }],
+    [
+      "a lone tab",
+      {
+        pointer: { x: 500, y: 200 },
+        arrangement: { surfaces: [file("b")], activeSurfaceId: id("b") },
+      },
+    ],
+    ["no target", { pointer: { x: 500, y: 200 }, over: null }],
+  ] as const)("does nothing over %s", (_name, overrides) => {
+    expect(
+      drop({
+        draggedId: id("b"),
+        over: { kind: "content", pane: "left", rect: content },
+        ...overrides,
+      }),
+    ).toBeNull();
+  });
+
+  it("gives the other pane the tab at its end, and ignores the tab's own pane", () => {
+    const right = rect(301, 40, 299, 400);
+    expect(
+      drop({
+        arrangement: twoPanes,
+        splitRendered: true,
+        draggedId: id("b"),
+        over: { kind: "content", pane: "right", rect: right },
+        pointer: { x: 400, y: 200 },
+      }),
+    ).toEqual({
+      change: { type: "move", surfaceId: id("b"), pane: "right", beforeId: null },
+      ghost: { kind: "box", left: 301, top: 40, width: 299, height: 400 },
+    });
+    expect(
+      drop({
+        arrangement: twoPanes,
+        splitRendered: true,
+        draggedId: id("b"),
+        over: { kind: "content", pane: "left", rect: rect(0, 40, 300, 400) },
+        pointer: { x: 100, y: 200 },
+      }),
+    ).toBeNull();
+  });
+
+  it("reorders inside the tab's own strip without a ghost, and a drop on itself is nothing", () => {
+    expect(
+      drop({
+        draggedId: id("a"),
+        over: { kind: "tab", id: id("c"), rect: tabRect },
+        pointer: { x: 340, y: 20 },
+      }),
+    ).toEqual({ change: { type: "reorder", surfaceId: id("a"), beforeId: null }, ghost: null });
+    expect(
+      drop({
+        draggedId: id("a"),
+        over: { kind: "tab", id: id("a"), rect: tabRect },
+        pointer: { x: 340, y: 20 },
+      }),
+    ).toBeNull();
+  });
+
+  it("places a tab before or after a tab of the other strip by the half under the pointer", () => {
+    const over = { kind: "tab", id: id("c"), rect: tabRect } as const;
+    expect(
+      drop({
+        arrangement: twoPanes,
+        splitRendered: true,
+        draggedId: id("b"),
+        over,
+        pointer: { x: 310, y: 20 },
+        restoreShown: id("a"),
+      }),
+    ).toEqual({
+      change: {
+        type: "move",
+        surfaceId: id("b"),
+        pane: "right",
+        beforeId: id("c"),
+        restoreShown: id("a"),
+      },
+      ghost: { kind: "marker", left: 299, top: 8, height: 24 },
+    });
+    expect(
+      drop({
+        arrangement: twoPanes,
+        splitRendered: true,
+        draggedId: id("b"),
+        over,
+        pointer: { x: 370, y: 20 },
+      })?.change,
+    ).toEqual({ type: "move", surfaceId: id("b"), pane: "right", beforeId: id("d") });
+  });
+
+  it("on a narrow panel a reorder onto the other pane's tab adopts that pane", () => {
+    expect(
+      drop({
+        arrangement: twoPanes,
+        splitAllowed: false,
+        draggedId: id("a"),
+        over: { kind: "tab", id: id("c"), rect: tabRect },
+        pointer: { x: 340, y: 20 },
+      })?.change,
+    ).toEqual({ type: "move", surfaceId: id("a"), pane: "right", beforeId: id("d") });
+  });
+});
+
+describe("panelCollision", () => {
+  function container(name: string, data: unknown): DroppableContainer {
+    return {
+      id: name,
+      key: name,
+      data: { current: data },
+      disabled: false,
+      node: { current: null },
+      rect: { current: null },
+    } as DroppableContainer;
+  }
+  const entries: Array<[DroppableContainer, ClientRect]> = [
+    [container("t1", { kind: "tab", pane: "left" }), rect(4, 8, 60, 24)],
+    [container("t2", { kind: "tab", pane: "left" }), rect(68, 8, 60, 24)],
+    // Scrolled out of the left strip, so its rect lies over the right pane.
+    [container("t9", { kind: "tab", pane: "left" }), rect(320, 8, 60, 24)],
+    [container("t3", { kind: "tab", pane: "right" }), rect(305, 8, 60, 24)],
+    [container("content:left", { kind: "content", pane: "left" }), rect(0, 40, 300, 400)],
+    [container("content:right", { kind: "content", pane: "right" }), rect(301, 40, 299, 400)],
+  ];
+  const at = (x: number, y: number) =>
+    panelCollision({
+      active: {} as never,
+      collisionRect: rect(x, y, 1, 1),
+      droppableContainers: entries.map(([entry]) => entry),
+      droppableRects: new Map(entries.map(([entry, box]) => [entry.id, box])),
+      pointerCoordinates: { x, y },
+    }).map((collision) => collision.id);
+
+  it.each([
+    ["a tab under the pointer", 80, 20, ["t2"]],
+    ["the gap between two tabs, to the nearest", 67, 20, ["t2"]],
+    ["just below the strip's tabs", 30, 36, ["t1"]],
+    ["a scrolled-out tab of the other strip, to this pane's tab", 330, 20, ["t3"]],
+    ["the pane content", 150, 200, ["content:left"]],
+    ["the right pane content", 450, 200, ["content:right"]],
+    ["outside the panel", 650, 200, []],
+  ] as const)("aims %s", (_name, x, y, expected) => {
+    expect(at(x, y)).toEqual(expected);
+  });
+});
diff --git a/apps/web/src/fork/rightPanelSplit/dropTarget.logic.ts b/apps/web/src/fork/rightPanelSplit/dropTarget.logic.ts
new file mode 100644
index 0000000000000..1f760a724bc53
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/dropTarget.logic.ts
@@ -0,0 +1,238 @@
+import {
+  type ClientRect,
+  type Collision,
+  type CollisionDetection,
+  type DroppableContainer,
+  pointerWithin,
+} from "@dnd-kit/core";
+
+import {
+  paneOf,
+  type PaneSide,
+  type PanelArrangement,
+  type SplitChange,
+} from "./splitLayout.logic";
+
+export interface ContentDropData {
+  readonly kind: "content";
+  readonly pane: PaneSide;
+}
+
+export type DropOver =
+  | { readonly kind: "tab"; readonly id: string; readonly rect: ClientRect }
+  | { readonly kind: "content"; readonly pane: PaneSide; readonly rect: ClientRect };
+
+/** Viewport coordinates. A box previews the new pane or the receiving pane; a marker is a slot. */
+export type DropGhost =
+  | {
+      readonly kind: "box";
+      readonly left: number;
+      readonly top: number;
+      readonly width: number;
+      readonly height: number;
+    }
+  | {
+      readonly kind: "marker";
+      readonly left: number;
+      readonly top: number;
+      readonly height: number;
+    };
+
+export interface DropPlan {
+  readonly change: SplitChange;
+  /** Null for a reorder in the tab's own strip, where the strip's live shift shows the slot. */
+  readonly ghost: DropGhost | null;
+}
+
+export interface DropInput {
+  /** The live store state, so a tab opened or closed mid-drag cannot mislead the plan. */
+  readonly arrangement: PanelArrangement;
+  /** Two strips are on screen. */
+  readonly splitRendered: boolean;
+  readonly splitAllowed: boolean;
+  readonly draggedId: string;
+  readonly over: DropOver | null;
+  readonly pointer: { readonly x: number; readonly y: number } | null;
+  /** What the dragged tab's pane showed before the press activated the tab. */
+  readonly restoreShown: string | null;
+  /** How far a new split widens the panel (it grows to the left), so the ghost shows the result. */
+  readonly splitGrowth: number;
+}
+
+const MARKER_WIDTH = 2;
+
+function restore(restoreShown: string | null): { restoreShown?: string } {
+  return restoreShown === null ? {} : { restoreShown };
+}
+
+function sameStripReorder(input: DropInput, overId: string): SplitChange | null {
+  const { arrangement, draggedId } = input;
+  const strip = input.splitRendered
+    ? arrangement.surfaces.filter(
+        (surface) => paneOf(arrangement, surface.id) === paneOf(arrangement, draggedId),
+      )
+    : arrangement.surfaces;
+  const from = strip.findIndex((surface) => surface.id === draggedId);
+  const to = strip.findIndex((surface) => surface.id === overId);
+  if (from < 0 || to < 0 || from === to) return null;
+  const order = strip.map((surface) => surface.id);
+  order.splice(to, 0, ...order.splice(from, 1));
+  const beforeId = order[to + 1] ?? null;
+  const pane = paneOf(arrangement, overId);
+  if (pane !== paneOf(arrangement, draggedId)) {
+    return { type: "move", surfaceId: draggedId, pane, beforeId, ...restore(input.restoreShown) };
+  }
+  return {
+    type: "reorder",
+    surfaceId: draggedId,
+    beforeId: beforeId !== null && paneOf(arrangement, beforeId) === pane ? beforeId : null,
+  };
+}
+
+/**
+ * What a drop at the current pointer would do. Same strip: reorder. Other strip: the half of
+ * the tab under the pointer picks the slot. One pane's content: the outer thirds split to that
+ * side (the centre does nothing). Split content: the other pane takes the tab at its end.
+ * A plan that would change nothing is null, so no ghost promises it.
+ */
+export function resolveDrop(input: DropInput): DropPlan | null {
+  const { arrangement, draggedId, over, pointer } = input;
+  if (over === null || pointer === null) return null;
+  if (!arrangement.surfaces.some((surface) => surface.id === draggedId)) return null;
+  const draggedPane = paneOf(arrangement, draggedId);
+
+  if (over.kind === "tab") {
+    if (!arrangement.surfaces.some((surface) => surface.id === over.id)) return null;
+    const overPane = paneOf(arrangement, over.id);
+    if (!input.splitRendered || overPane === draggedPane) {
+      const change = sameStripReorder(input, over.id);
+      return change === null ? null : { change, ghost: null };
+    }
+    const after = pointer.x >= over.rect.left + over.rect.width / 2;
+    const strip = arrangement.surfaces.filter(
+      (surface) => paneOf(arrangement, surface.id) === overPane,
+    );
+    const index = strip.findIndex((surface) => surface.id === over.id);
+    const beforeId = after ? (strip[index + 1]?.id ?? null) : over.id;
+    return {
+      change: {
+        type: "move",
+        surfaceId: draggedId,
+        pane: overPane,
+        beforeId,
+        ...restore(input.restoreShown),
+      },
+      ghost: {
+        kind: "marker",
+        left: (after ? over.rect.right : over.rect.left) - MARKER_WIDTH / 2,
+        top: over.rect.top,
+        height: over.rect.height,
+      },
+    };
+  }
+
+  const { rect } = over;
+  if (!input.splitRendered) {
+    if (!input.splitAllowed || arrangement.split !== undefined) return null;
+    if (arrangement.surfaces.length < 2) return null;
+    const third = rect.width / 3;
+    const side: PaneSide | null =
+      pointer.x < rect.left + third ? "left" : pointer.x > rect.right - third ? "right" : null;
+    if (side === null) return null;
+    const grownLeft = rect.left - input.splitGrowth;
+    const half = (rect.right - grownLeft) / 2;
+    return {
+      change: { type: "split", surfaceId: draggedId, side, ...restore(input.restoreShown) },
+      ghost: {
+        kind: "box",
+        left: side === "left" ? grownLeft : grownLeft + half,
+        top: rect.top,
+        width: half,
+        height: rect.height,
+      },
+    };
+  }
+  if (over.pane === draggedPane) return null;
+  return {
+    change: {
+      type: "move",
+      surfaceId: draggedId,
+      pane: over.pane,
+      beforeId: null,
+      ...restore(input.restoreShown),
+    },
+    ghost: { kind: "box", left: rect.left, top: rect.top, width: rect.width, height: rect.height },
+  };
+}
+
+export function samePlan(left: DropPlan | null, right: DropPlan | null): boolean {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+/** A pointer this far above or below a strip's tabs, but over its pane, still aims at the strip. */
+const STRIP_SLOP = 8;
+
+type DropData =
+  | { readonly kind: "tab"; readonly pane: PaneSide | null }
+  | ContentDropData
+  | undefined;
+
+function dataOf(container: DroppableContainer): DropData {
+  return container.data.current as DropData;
+}
+
+function contains(rect: ClientRect, x: number, y: number): boolean {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+
+function collision(container: DroppableContainer, value: number): Collision {
+  return { id: container.id, data: { droppableContainer: container, value } };
+}
+
+/**
+ * A tab under the pointer wins. A pointer in a strip's row but between tabs aims at the
+ * strip's nearest tab. Then the pane content under the pointer. Else nothing.
+ * Tabs count only over their own pane, since a scrolled-out tab keeps a rect past its strip.
+ */
+export const panelCollision: CollisionDetection = (args) => {
+  const pointer = args.pointerCoordinates;
+  if (pointer === null) return [];
+  const rectOf = (container: DroppableContainer) => args.droppableRects.get(container.id);
+  const content = args.droppableContainers.find((container) => {
+    const data = dataOf(container);
+    const rect = rectOf(container);
+    return data?.kind === "content" && rect && pointer.x >= rect.left && pointer.x <= rect.right;
+  });
+  if (content === undefined) return [];
+  const pane = (dataOf(content) as ContentDropData).pane;
+  const tabs = args.droppableContainers.filter((container) => {
+    const data = dataOf(container);
+    return data?.kind === "tab" && rectOf(container) && (data.pane ?? "left") === pane;
+  });
+
+  const hit = pointerWithin(args).find((entry) =>
+    tabs.some((container) => container.id === entry.id),
+  );
+  if (hit) return [hit];
+
+  if (tabs.length > 0) {
+    const rects = tabs.map((container) => rectOf(container)!);
+    const top = Math.min(...rects.map((rect) => rect.top)) - STRIP_SLOP;
+    const bottom = Math.max(...rects.map((rect) => rect.bottom)) + STRIP_SLOP;
+    if (pointer.y >= top && pointer.y <= bottom) {
+      let nearest = 0;
+      let distance = Infinity;
+      rects.forEach((rect, index) => {
+        const gap = Math.abs(pointer.x - (rect.left + rect.width / 2));
+        if (gap < distance) {
+          distance = gap;
+          nearest = index;
+        }
+      });
+      return [collision(tabs[nearest]!, distance)];
+    }
+  }
+
+  const contentRect = rectOf(content);
+  return contentRect && contains(contentRect, pointer.x, pointer.y) ? [collision(content, 0)] : [];
+};
diff --git a/apps/web/src/fork/rightPanelSplit/renderedSplit.ts b/apps/web/src/fork/rightPanelSplit/renderedSplit.ts
new file mode 100644
index 0000000000000..67c921546a31e
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/renderedSplit.ts
@@ -0,0 +1,30 @@
+import { useLayoutEffect } from "react";
+import { create } from "zustand";
+
+/** Threads whose panel shows two panes now; a stored split can be hidden on a narrow panel. */
+const useRenderedSplitStore = create<{ readonly threadKeys: ReadonlySet<string> }>(() => ({
+  threadKeys: new Set(),
+}));
+
+export function useSplitRendered(threadKey: string | null): boolean {
+  return useRenderedSplitStore((state) => threadKey !== null && state.threadKeys.has(threadKey));
+}
+
+function setRendered(threadKey: string, rendered: boolean) {
+  useRenderedSplitStore.setState((state) => {
+    if (state.threadKeys.has(threadKey) === rendered) return state;
+    const next = new Set(state.threadKeys);
+    if (rendered) next.add(threadKey);
+    else next.delete(threadKey);
+    return { threadKeys: next };
+  });
+}
+
+export function useReportSplitRendered(threadKey: string, rendered: boolean) {
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- tells ChatView's mini player, which renders outside the panel, that a second pane is on screen
+  useLayoutEffect(() => {
+    if (!rendered) return;
+    setRendered(threadKey, true);
+    return () => setRendered(threadKey, false);
+  }, [threadKey, rendered]);
+}
diff --git a/apps/web/src/fork/rightPanelSplit/splitLayout.logic.test.ts b/apps/web/src/fork/rightPanelSplit/splitLayout.logic.test.ts
new file mode 100644
index 0000000000000..9a2ca13c12d1e
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/splitLayout.logic.test.ts
@@ -0,0 +1,366 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import type { RightPanelSurface, ThreadRightPanelState } from "~/rightPanelStore";
+
+import {
+  applySplitChange,
+  reconcileSplit,
+  restorePersistedSplit,
+  type SplitChange,
+  splitWidenTarget,
+  type SplitWriteKind,
+  widthToGiveBack,
+} from "./splitLayout.logic";
+
+function surface(id: string): RightPanelSurface {
+  if (id === "files") return { id, kind: "files" };
+  if (id === "diff") return { id, kind: "diff" };
+  return { id: `file:${id}`, kind: "file", relativePath: id, revealLine: null, revealRequestId: 1 };
+}
+
+const sid = (id: string) => surface(id).id;
+
+function unsplit(ids: readonly string[], active: string | null): ThreadRightPanelState {
+  return {
+    isOpen: true,
+    activeSurfaceId: active === null ? null : sid(active),
+    surfaces: ids.map(surface),
+  };
+}
+
+function split(
+  left: readonly string[],
+  right: readonly string[],
+  active: string,
+  other: string,
+  ratio = 0.5,
+): ThreadRightPanelState {
+  return {
+    ...unsplit([...left, ...right], active),
+    split: { rightIds: right.map(sid), otherShownId: sid(other), ratio },
+  };
+}
+
+/** A store write in the shape the upstream actions produce: new surfaces and a new active id. */
+function written(
+  prev: ThreadRightPanelState,
+  ids: readonly string[],
+  active: string | null,
+): ThreadRightPanelState {
+  return {
+    ...prev,
+    surfaces: ids.map(surface),
+    activeSurfaceId: active === null ? null : sid(active),
+  };
+}
+
+function view(state: ThreadRightPanelState) {
+  const ids = (list: readonly RightPanelSurface[]) => list.map((entry) => entry.id);
+  if (state.split === undefined) {
+    return { surfaces: ids(state.surfaces), active: state.activeSurfaceId };
+  }
+  const right = new Set<string>(state.split.rightIds);
+  const left = ids(state.surfaces.filter((entry) => !right.has(entry.id)));
+  const rightIds = ids(state.surfaces.filter((entry) => right.has(entry.id)));
+  return {
+    left,
+    right: rightIds,
+    active: state.activeSurfaceId,
+    other: state.split.otherShownId,
+    ratio: state.split.ratio,
+    partitioned: ids(state.surfaces).join() === [...left, ...rightIds].join(),
+  };
+}
+
+function panes(left: string[], right: string[], active: string, other: string, ratio = 0.5) {
+  return {
+    left: left.map(sid),
+    right: right.map(sid),
+    active: sid(active),
+    other: sid(other),
+    ratio,
+    partitioned: true,
+  };
+}
+
+function single(ids: string[], active: string | null) {
+  return { surfaces: ids.map(sid), active: active === null ? null : sid(active) };
+}
+
+describe("reconcileSplit", () => {
+  const rows: ReadonlyArray<{
+    name: string;
+    prev: ThreadRightPanelState;
+    next: (prev: ThreadRightPanelState) => ThreadRightPanelState;
+    kind: SplitWriteKind;
+    expected: ReturnType<typeof panes> | ReturnType<typeof single>;
+  }> = [
+    {
+      name: "R1: an open while the right pane is focused lands in the right pane",
+      prev: split(["a", "b"], ["c"], "c", "a"),
+      next: (prev) => written(prev, ["a", "b", "c", "d"], "d"),
+      kind: "user",
+      expected: panes(["a", "b"], ["c", "d"], "d", "a"),
+    },
+    {
+      name: "R1: an open while the left pane is focused lands in the left pane",
+      prev: split(["a", "b"], ["c"], "a", "c"),
+      next: (prev) => written(prev, ["a", "b", "c", "d"], "d"),
+      kind: "automatic",
+      expected: panes(["a", "b", "d"], ["c"], "d", "c"),
+    },
+    {
+      name: "R1b: a chat link replacing an explorer alone in the unfocused pane keeps the split",
+      prev: split(["a", "b"], ["files"], "a", "files"),
+      next: (prev) => written(prev, ["a", "b", "x"], "x"),
+      kind: "user",
+      expected: panes(["a", "b"], ["x"], "x", "a"),
+    },
+    {
+      name: "R1b: a replacement of the focused pane's only tab stays in that pane",
+      prev: split(["files"], ["c"], "files", "c"),
+      next: (prev) => written(prev, ["c", "x"], "x"),
+      kind: "user",
+      expected: panes(["x"], ["c"], "x", "c"),
+    },
+    {
+      name: "R2: closing the focused pane's last tab keeps the surviving pane's shown tab",
+      prev: split(["a"], ["c", "d"], "a", "d"),
+      next: (prev) => written(prev, ["c", "d"], "c"),
+      kind: "close",
+      expected: single(["c", "d"], "d"),
+    },
+    {
+      name: "R2: closing the unfocused pane's last tab keeps the focused tab",
+      prev: split(["a", "b"], ["c"], "b", "c"),
+      next: (prev) => written(prev, ["a", "b"], "b"),
+      kind: "close",
+      expected: single(["a", "b"], "b"),
+    },
+    {
+      name: "R2: a user write that empties a pane keeps the target it named",
+      prev: split(["files"], ["x", "y"], "files", "y"),
+      next: (prev) => written(prev, ["x", "y"], "x"),
+      kind: "user",
+      expected: single(["x", "y"], "x"),
+    },
+    {
+      name: "R3: closing the active tab falls back inside its pane, not across",
+      prev: split(["a", "b"], ["c"], "b", "c"),
+      next: (prev) => written(prev, ["a", "c"], "c"),
+      kind: "close",
+      expected: panes(["a"], ["c"], "a", "c"),
+    },
+    {
+      name: "R3: an automatic removal of the active tab also falls back inside its pane",
+      prev: split(["a", "b", "e"], ["c", "d"], "b", "d"),
+      next: (prev) => written(prev, ["a", "e", "c", "d"], "a"),
+      kind: "automatic",
+      expected: panes(["a", "e"], ["c", "d"], "e", "d"),
+    },
+    {
+      name: "R3: a user navigation to a tab in the other pane is not overridden",
+      prev: split(["a", "files", "b"], ["x"], "files", "x"),
+      next: (prev) => written(prev, ["a", "b", "x"], "x"),
+      kind: "user",
+      expected: panes(["a", "b"], ["x"], "x", "a"),
+    },
+    {
+      name: "R4: activating a tab in the other pane remembers what this pane showed",
+      prev: split(["a", "b"], ["c", "d"], "b", "d"),
+      next: (prev) => written(prev, ["a", "b", "c", "d"], "c"),
+      kind: "user",
+      expected: panes(["a", "b"], ["c", "d"], "c", "b"),
+    },
+    {
+      name: "the unfocused pane's shown tab closing falls back to its neighbour",
+      prev: split(["a"], ["c", "d", "e"], "a", "d"),
+      next: (prev) => written(prev, ["a", "c", "e"], "a"),
+      kind: "close",
+      expected: panes(["a"], ["c", "e"], "a", "e"),
+    },
+    {
+      name: "R5: an upstream move across the boundary is re-partitioned",
+      prev: split(["a", "b"], ["c"], "a", "c"),
+      next: (prev) => written(prev, ["a", "c", "b"], "a"),
+      kind: "automatic",
+      expected: panes(["a", "b"], ["c"], "a", "c"),
+    },
+  ];
+
+  it.each(rows)("$name", (row) => {
+    expect(view(reconcileSplit(row.prev, row.next(row.prev), row.kind))).toEqual(row.expected);
+  });
+
+  it("passes a valid state and a thread without a split through by reference", () => {
+    const valid = split(["a"], ["b", "c"], "b", "a");
+    expect(reconcileSplit(valid, valid, "user")).toBe(valid);
+    const flat = unsplit(["a", "b"], "a");
+    const next = written(flat, ["a", "b", "c"], "c");
+    expect(reconcileSplit(flat, next, "user")).toBe(next);
+  });
+});
+
+describe("applySplitChange", () => {
+  const rows: ReadonlyArray<{
+    name: string;
+    thread: ThreadRightPanelState;
+    change: SplitChange;
+    expected: ReturnType<typeof panes> | ReturnType<typeof single> | "same";
+  }> = [
+    {
+      name: "split right: the source pane gets back the tab it showed before the press",
+      thread: unsplit(["a", "b", "c"], "b"),
+      change: { type: "split", surfaceId: sid("b"), side: "right", restoreShown: sid("a") },
+      expected: panes(["a", "c"], ["b"], "b", "a"),
+    },
+    {
+      name: "split left from the menu keeps the active tab in the other pane",
+      thread: unsplit(["a", "b", "c"], "a"),
+      change: { type: "split", surfaceId: sid("c"), side: "left" },
+      expected: panes(["c"], ["a", "b"], "c", "a"),
+    },
+    {
+      name: "split needs two tabs",
+      thread: unsplit(["a"], "a"),
+      change: { type: "split", surfaceId: sid("a"), side: "right" },
+      expected: "same",
+    },
+    {
+      name: "move to the other pane focuses it there; the source pane keeps its tab",
+      thread: split(["a", "b"], ["c"], "a", "c"),
+      change: { type: "move", surfaceId: sid("b"), pane: "right", beforeId: sid("c") },
+      expected: panes(["a"], ["b", "c"], "b", "a"),
+    },
+    {
+      name: "move with restoreShown gives the source pane back its press-time tab",
+      thread: split(["a", "b"], ["c"], "b", "c"),
+      change: {
+        type: "move",
+        surfaceId: sid("b"),
+        pane: "right",
+        beforeId: null,
+        restoreShown: sid("a"),
+      },
+      expected: panes(["a"], ["c", "b"], "b", "a"),
+    },
+    {
+      name: "moving a pane's only tab to the other pane unsplits",
+      thread: split(["a"], ["b", "c"], "b", "a"),
+      change: { type: "move", surfaceId: sid("a"), pane: "right", beforeId: sid("c") },
+      expected: single(["b", "a", "c"], "a"),
+    },
+    {
+      name: "reorder within the right pane keeps the active tab",
+      thread: split(["a"], ["b", "c", "d"], "a", "c"),
+      change: { type: "reorder", surfaceId: sid("d"), beforeId: sid("b") },
+      expected: panes(["a"], ["d", "b", "c"], "a", "c"),
+    },
+    {
+      name: "reorder to the end of the left pane stays in the left pane",
+      thread: split(["a", "b"], ["c"], "a", "c"),
+      change: { type: "reorder", surfaceId: sid("a"), beforeId: null },
+      expected: panes(["b", "a"], ["c"], "a", "c"),
+    },
+    {
+      name: "reorder without a split moves in the flat list",
+      thread: unsplit(["a", "b", "c"], "b"),
+      change: { type: "reorder", surfaceId: sid("a"), beforeId: null },
+      expected: single(["b", "c", "a"], "b"),
+    },
+    {
+      name: "unsplit keeps order and the active tab",
+      thread: split(["a"], ["b", "c"], "c", "a"),
+      change: { type: "unsplit" },
+      expected: single(["a", "b", "c"], "c"),
+    },
+    {
+      name: "focus the other pane shows its tab and remembers this one",
+      thread: split(["a", "b"], ["c"], "b", "c"),
+      change: { type: "focus", pane: "right" },
+      expected: panes(["a", "b"], ["c"], "c", "b"),
+    },
+    {
+      name: "focus the focused pane changes nothing",
+      thread: split(["a"], ["b"], "a", "b"),
+      change: { type: "focus", pane: "left" },
+      expected: "same",
+    },
+    {
+      name: "ratio is clamped",
+      thread: split(["a"], ["b"], "a", "b"),
+      change: { type: "ratio", ratio: 0.95 },
+      expected: panes(["a"], ["b"], "a", "b", 0.8),
+    },
+    {
+      name: "an unchanged ratio changes nothing",
+      thread: split(["a"], ["b"], "a", "b", 0.3),
+      change: { type: "ratio", ratio: 0.3 },
+      expected: "same",
+    },
+    {
+      name: "a stale command is a no-op",
+      thread: split(["a"], ["b"], "a", "b"),
+      change: { type: "move", surfaceId: sid("gone"), pane: "right", beforeId: null },
+      expected: "same",
+    },
+  ];
+
+  it.each(rows)("$name", (row) => {
+    const next = applySplitChange(row.thread, row.change);
+    if (row.expected === "same") expect(next).toBe(row.thread);
+    else expect(view(next)).toEqual(row.expected);
+    expect(reconcileSplit(row.thread, next, "user")).toBe(next);
+  });
+});
+
+describe("restorePersistedSplit", () => {
+  const record = unsplit(["a", "b", "c"], "a");
+
+  it.each([
+    ["a v14 record has no split", undefined, single(["a", "b", "c"], "a")],
+    [
+      "dangling ids are dropped",
+      { rightIds: [sid("c"), "file:gone"], otherShownId: sid("c"), ratio: 0.4 },
+      panes(["a", "b"], ["c"], "a", "c", 0.4),
+    ],
+    [
+      "only dangling ids drop the split",
+      { rightIds: ["file:gone"], otherShownId: "x" },
+      single(["a", "b", "c"], "a"),
+    ],
+    [
+      "a split holding every tab is dropped",
+      { rightIds: ["a", "b", "c"].map(sid), otherShownId: sid("b") },
+      single(["a", "b", "c"], "a"),
+    ],
+    [
+      "a malformed value is dropped",
+      { rightIds: "c", otherShownId: 3 },
+      single(["a", "b", "c"], "a"),
+    ],
+    [
+      "a same-version record is repaired: order, shown tab and ratio",
+      { rightIds: [sid("a")], otherShownId: sid("a"), ratio: 3 },
+      panes(["b", "c"], ["a"], "a", "b", 0.8),
+    ],
+  ] as const)("%s", (_name, raw, expected) => {
+    expect(view(restorePersistedSplit(record, raw))).toEqual(expected);
+  });
+});
+
+describe("split width", () => {
+  it.each([
+    ["widens a narrow panel to the comfortable width", 540, 1000, 800],
+    ["widens only as far as the chat column allows", 540, 700, 700],
+    ["leaves a panel at its cap", 540, 540, null],
+    ["leaves a panel already wide enough", 900, 1000, null],
+  ] as const)("%s", (_name, width, maxWidth, expected) => {
+    expect(splitWidenTarget(width, maxWidth)).toBe(expected);
+  });
+
+  it("gives the width back only while the panel keeps the width the split set", () => {
+    expect(widthToGiveBack(800, { before: 540, set: 800 })).toBe(540);
+    expect(widthToGiveBack(650, { before: 540, set: 800 })).toBeNull();
+  });
+});
diff --git a/apps/web/src/fork/rightPanelSplit/splitLayout.logic.ts b/apps/web/src/fork/rightPanelSplit/splitLayout.logic.ts
new file mode 100644
index 0000000000000..2c85d222a538a
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/splitLayout.logic.ts
@@ -0,0 +1,490 @@
+import type { ContextMenuItem } from "@t3tools/contracts";
+
+import type { RightPanelKind, RightPanelSurface, ThreadRightPanelState } from "~/rightPanelStore";
+
+export type PaneSide = "left" | "right";
+
+/**
+ * `ThreadRightPanelState.split`. The left pane holds every surface not in `rightIds`, and
+ * `surfaces` lists the left pane's tabs before the right pane's. The focused pane is the one
+ * holding `activeSurfaceId`; `otherShownId` is the tab the other pane shows.
+ */
+export interface RightPanelSplit {
+  readonly rightIds: readonly string[];
+  readonly otherShownId: string;
+  /** The left pane's share of the row. */
+  readonly ratio: number;
+}
+
+export type SplitChange =
+  | { type: "split"; surfaceId: string; side: PaneSide; restoreShown?: string }
+  | {
+      type: "move";
+      surfaceId: string;
+      pane: PaneSide;
+      beforeId: string | null;
+      restoreShown?: string;
+    }
+  | { type: "reorder"; surfaceId: string; beforeId: string | null }
+  | { type: "unsplit" }
+  | { type: "focus"; pane: PaneSide }
+  | { type: "ratio"; ratio: number };
+
+/** How a store write came about: a close and an automatic removal fall back inside the pane. */
+export type SplitWriteKind = "user" | "close" | "automatic";
+
+export const PANE_MIN_WIDTH = 220;
+export const SPLITTER_WIDTH = 1;
+export const SPLIT_MIN_PANEL_WIDTH = 2 * PANE_MIN_WIDTH + SPLITTER_WIDTH;
+/** A new split widens a narrower panel toward this, as far as the chat column allows. */
+const SPLIT_COMFORT_PANEL_WIDTH = 800;
+
+/** The width a new split widens the panel to, or null when the panel would not grow. */
+export function splitWidenTarget(width: number, maxWidth: number): number | null {
+  const target = Math.min(maxWidth, SPLIT_COMFORT_PANEL_WIDTH);
+  return target > width ? target : null;
+}
+
+/** The width an ended split gives back: only while the panel still has the width it set. */
+export function widthToGiveBack(
+  currentWidth: number,
+  widened: { readonly before: number; readonly set: number },
+): number | null {
+  return currentWidth === widened.set ? widened.before : null;
+}
+export const SPLIT_RATIO_MIN = 0.2;
+export const SPLIT_RATIO_MAX = 0.8;
+export const SPLIT_RATIO_DEFAULT = 0.5;
+
+/** A user choice bumps the action revision: it requests focus and refuses pending proactive opens. */
+const USER_SPLIT_CHANGES: Record<SplitChange["type"], boolean> = {
+  split: true,
+  move: true,
+  unsplit: true,
+  reorder: false,
+  focus: false,
+  ratio: false,
+};
+
+export function isUserSplitChange(change: SplitChange): boolean {
+  return USER_SPLIT_CHANGES[change.type];
+}
+
+export interface PanelArrangement {
+  readonly surfaces: readonly RightPanelSurface[];
+  readonly activeSurfaceId: string | null;
+  readonly split?: RightPanelSplit | undefined;
+}
+
+export function clampSplitRatio(ratio: number): number {
+  if (!Number.isFinite(ratio)) return SPLIT_RATIO_DEFAULT;
+  return Math.min(SPLIT_RATIO_MAX, Math.max(SPLIT_RATIO_MIN, ratio));
+}
+
+function withoutSplit<T extends PanelArrangement>(state: T): T {
+  if (state.split === undefined) return state;
+  const { split: _split, ...rest } = state;
+  return rest as T;
+}
+
+function sideOf(right: ReadonlySet<string>, id: string | null): PaneSide {
+  return id !== null && right.has(id) ? "right" : "left";
+}
+
+function otherSide(side: PaneSide): PaneSide {
+  return side === "left" ? "right" : "left";
+}
+
+function paneSurfaces(
+  surfaces: readonly RightPanelSurface[],
+  right: ReadonlySet<string>,
+  side: PaneSide,
+): RightPanelSurface[] {
+  return surfaces.filter((surface) => right.has(surface.id) === (side === "right"));
+}
+
+function neighbourOf(
+  before: readonly RightPanelSurface[],
+  after: readonly RightPanelSurface[],
+  id: string,
+): string | null {
+  if (after.length === 0) return null;
+  const index = Math.max(
+    0,
+    before.findIndex((surface) => surface.id === id),
+  );
+  return after[Math.min(index, after.length - 1)]!.id;
+}
+
+function sameIds(left: readonly string[], right: readonly string[]): boolean {
+  return left.length === right.length && left.every((id, index) => id === right[index]);
+}
+
+/**
+ * Builds a valid two-pane state. Both panes must be non-empty. Returns `next` itself when it
+ * already is that state, so the store's unchanged-record check holds.
+ */
+function withPanes<T extends PanelArrangement>(
+  next: T,
+  right: ReadonlySet<string>,
+  activeSurfaceId: string | null,
+  otherShownCandidate: string | null,
+  ratio: number,
+): T {
+  const left = paneSurfaces(next.surfaces, right, "left");
+  const rightSurfaces = paneSurfaces(next.surfaces, right, "right");
+  const focused = sideOf(right, activeSurfaceId);
+  const other = focused === "left" ? rightSurfaces : left;
+  const otherShownId = other.some((surface) => surface.id === otherShownCandidate)
+    ? otherShownCandidate!
+    : other[0]!.id;
+  const surfaces = [...left, ...rightSurfaces];
+  const rightIds = rightSurfaces.map((surface) => surface.id);
+  const clamped = clampSplitRatio(ratio);
+  const sameSurfaces = surfaces.every((surface, index) => surface === next.surfaces[index]);
+  const current = next.split;
+  const sameSplit =
+    current !== undefined &&
+    current.otherShownId === otherShownId &&
+    current.ratio === clamped &&
+    sameIds(current.rightIds, rightIds);
+  if (sameSurfaces && sameSplit && activeSurfaceId === next.activeSurfaceId) return next;
+  return {
+    ...next,
+    surfaces: sameSurfaces ? next.surfaces : surfaces,
+    activeSurfaceId,
+    split: sameSplit ? current : { rightIds, otherShownId, ratio: clamped },
+  };
+}
+
+/** Repairs a split against its own surfaces: dangling ids, an empty pane, order, ratio. */
+function normalizeSplit<T extends PanelArrangement>(state: T): T {
+  const split = state.split;
+  if (split === undefined) return state;
+  const present = new Set<string>(state.surfaces.map((surface) => surface.id));
+  const right = new Set(split.rightIds.filter((id) => present.has(id)));
+  if (right.size === 0 || right.size === present.size) return withoutSplit(state);
+  return withPanes(state, right, state.activeSurfaceId, split.otherShownId, split.ratio);
+}
+
+/**
+ * Keeps a split valid across a pane-blind store write (`prev` to `next`). A write that set
+ * `split` itself is only repaired. A thread without a split passes through by reference.
+ */
+export function reconcileSplit<T extends PanelArrangement>(
+  prev: PanelArrangement,
+  next: T,
+  kind: SplitWriteKind,
+): T {
+  const split = next.split;
+  if (split === undefined) return next;
+  if (split !== prev.split) return normalizeSplit(next);
+
+  const before = new Set(split.rightIds);
+  const prevIds = new Set<string>(prev.surfaces.map((surface) => surface.id));
+  const nextIds = new Set<string>(next.surfaces.map((surface) => surface.id));
+  const prevFocus = sideOf(before, prev.activeSurfaceId);
+  const kept = (side: PaneSide) =>
+    next.surfaces.some(
+      (surface) => prevIds.has(surface.id) && before.has(surface.id) === (side === "right"),
+    );
+  const added = next.surfaces.some((surface) => !prevIds.has(surface.id));
+  // A replacement that empties a pane (an explorer turning into a file) refills that pane.
+  const target =
+    added && kept("left") !== kept("right") ? (kept("left") ? "right" : "left") : prevFocus;
+  const right = new Set<string>(
+    next.surfaces
+      .filter((surface) => (prevIds.has(surface.id) ? before.has(surface.id) : target === "right"))
+      .map((surface) => surface.id),
+  );
+  const prevShown = (side: PaneSide) =>
+    side === prevFocus ? prev.activeSurfaceId : split.otherShownId;
+
+  if (right.size === 0 || right.size === nextIds.size) {
+    const collapsed = withoutSplit(next);
+    if (kind === "user") return collapsed;
+    const shown = prevShown(right.size === 0 ? "left" : "right");
+    return shown !== null && nextIds.has(shown) && shown !== collapsed.activeSurfaceId
+      ? { ...collapsed, activeSurfaceId: shown }
+      : collapsed;
+  }
+
+  let activeSurfaceId = next.activeSurfaceId;
+  const prevActive = prev.activeSurfaceId;
+  if (kind !== "user" && prevActive !== null && !nextIds.has(prevActive)) {
+    activeSurfaceId = neighbourOf(
+      paneSurfaces(prev.surfaces, before, prevFocus),
+      paneSurfaces(next.surfaces, right, prevFocus),
+      prevActive,
+    );
+  }
+
+  const nextFocus = sideOf(right, activeSurfaceId);
+  let otherShown: string | null;
+  if (nextFocus !== prevFocus) {
+    otherShown = prevActive;
+  } else if (nextIds.has(split.otherShownId)) {
+    otherShown = split.otherShownId;
+  } else {
+    const side = otherSide(prevFocus);
+    otherShown = neighbourOf(
+      paneSurfaces(prev.surfaces, before, side),
+      paneSurfaces(next.surfaces, right, side),
+      split.otherShownId,
+    );
+  }
+  return withPanes(next, right, activeSurfaceId, otherShown, split.ratio);
+}
+
+function moved(
+  surfaces: readonly RightPanelSurface[],
+  surface: RightPanelSurface,
+  beforeId: string | null,
+): RightPanelSurface[] {
+  const rest = surfaces.filter((entry) => entry.id !== surface.id);
+  const index = beforeId === null ? -1 : rest.findIndex((entry) => entry.id === beforeId);
+  return index < 0 ? [...rest, surface] : [...rest.slice(0, index), surface, ...rest.slice(index)];
+}
+
+/** The reducer behind `updateSplit`. Ids, never indices: a stale command is a no-op. */
+export function applySplitChange<T extends PanelArrangement>(thread: T, change: SplitChange): T {
+  const split = thread.split;
+  const right = new Set(split?.rightIds ?? []);
+  switch (change.type) {
+    case "split": {
+      if (split !== undefined || thread.surfaces.length < 2) return thread;
+      const others = thread.surfaces.filter((surface) => surface.id !== change.surfaceId);
+      if (others.length === thread.surfaces.length) return thread;
+      const restore = change.restoreShown ?? thread.activeSurfaceId;
+      const shown = others.some((surface) => surface.id === restore)
+        ? restore
+        : neighbourOf(thread.surfaces, others, change.surfaceId);
+      const nextRight = new Set<string>(
+        change.side === "right" ? [change.surfaceId] : others.map((surface) => surface.id),
+      );
+      return withPanes(thread, nextRight, change.surfaceId, shown, SPLIT_RATIO_DEFAULT);
+    }
+    case "move": {
+      if (split === undefined) return thread;
+      const surface = thread.surfaces.find((entry) => entry.id === change.surfaceId);
+      if (!surface) return thread;
+      const from = sideOf(right, surface.id);
+      if (from === change.pane) {
+        return applySplitChange(thread, {
+          type: "reorder",
+          surfaceId: change.surfaceId,
+          beforeId: change.beforeId,
+        });
+      }
+      const beforeId =
+        change.beforeId !== null && sideOf(right, change.beforeId) === change.pane
+          ? change.beforeId
+          : null;
+      const surfaces = moved(thread.surfaces, surface, beforeId);
+      const nextRight = new Set(right);
+      if (change.pane === "right") nextRight.add(surface.id);
+      else nextRight.delete(surface.id);
+      const sourceBefore = paneSurfaces(thread.surfaces, right, from);
+      const sourceAfter = paneSurfaces(surfaces, nextRight, from);
+      if (sourceAfter.length === 0) {
+        return withoutSplit({ ...thread, surfaces, activeSurfaceId: surface.id });
+      }
+      const prevFocus = sideOf(right, thread.activeSurfaceId);
+      const sourceShown = from === prevFocus ? thread.activeSurfaceId : split.otherShownId;
+      const shown = [change.restoreShown, sourceShown].find((id) =>
+        sourceAfter.some((entry) => entry.id === id),
+      );
+      return withPanes(
+        { ...thread, surfaces },
+        nextRight,
+        surface.id,
+        shown ?? neighbourOf(sourceBefore, sourceAfter, surface.id),
+        split.ratio,
+      );
+    }
+    case "reorder": {
+      const surface = thread.surfaces.find((entry) => entry.id === change.surfaceId);
+      if (!surface) return thread;
+      const beforeId =
+        change.beforeId !== null && sideOf(right, change.beforeId) === sideOf(right, surface.id)
+          ? change.beforeId
+          : null;
+      const surfaces =
+        beforeId === null && split !== undefined && !right.has(surface.id)
+          ? moved(
+              thread.surfaces,
+              surface,
+              thread.surfaces.find((entry) => right.has(entry.id))?.id ?? null,
+            )
+          : moved(thread.surfaces, surface, beforeId);
+      if (surfaces.every((entry, index) => entry === thread.surfaces[index])) return thread;
+      if (split === undefined) return { ...thread, surfaces };
+      return withPanes(
+        { ...thread, surfaces },
+        right,
+        thread.activeSurfaceId,
+        split.otherShownId,
+        split.ratio,
+      );
+    }
+    case "unsplit":
+      return withoutSplit(thread);
+    case "focus": {
+      if (split === undefined || sideOf(right, thread.activeSurfaceId) === change.pane) {
+        return thread;
+      }
+      return withPanes(thread, right, split.otherShownId, thread.activeSurfaceId, split.ratio);
+    }
+    case "ratio": {
+      if (split === undefined) return thread;
+      const ratio = clampSplitRatio(change.ratio);
+      return ratio === split.ratio ? thread : { ...thread, split: { ...split, ratio } };
+    }
+  }
+}
+
+/** Hydrate boundary: parses a persisted `split`, then repairs it, or drops it. */
+export function restorePersistedSplit<T extends PanelArrangement>(record: T, rawSplit: unknown): T {
+  const base = withoutSplit(record);
+  if (!rawSplit || typeof rawSplit !== "object" || !Array.isArray(base.surfaces)) return base;
+  const { rightIds, otherShownId, ratio } = rawSplit as Record<string, unknown>;
+  if (!Array.isArray(rightIds) || typeof otherShownId !== "string") return base;
+  return normalizeSplit({
+    ...base,
+    split: {
+      rightIds: rightIds.filter((id): id is string => typeof id === "string"),
+      otherShownId,
+      ratio: typeof ratio === "number" ? ratio : SPLIT_RATIO_DEFAULT,
+    },
+  });
+}
+
+/** The migration's hook: the split, and the order it needs, for a record rebuilt from storage. */
+export function persistedSplitFields(
+  record: { readonly surfaces: RightPanelSurface[]; readonly activeSurfaceId: string | null },
+  rawSplit: unknown,
+): Partial<Pick<ThreadRightPanelState, "split" | "surfaces">> {
+  const restored = restorePersistedSplit<
+    Pick<ThreadRightPanelState, "surfaces" | "activeSurfaceId" | "split">
+  >(record, rawSplit);
+  return restored.split === undefined ? {} : { split: restored.split, surfaces: restored.surfaces };
+}
+
+/** zustand's `merge`: a same-version load skips `migrate`, so it repairs splits here too. */
+export function mergePersistedRightPanelState<
+  S extends { byThreadKey: Record<string, ThreadRightPanelState> },
+>(persisted: unknown, current: S): S {
+  const merged: S = { ...current, ...(persisted as Partial<S>) };
+  if (!merged.byThreadKey || typeof merged.byThreadKey !== "object") return merged;
+  return {
+    ...merged,
+    byThreadKey: Object.fromEntries(
+      Object.entries(merged.byThreadKey).map(([threadKey, record]) => [
+        threadKey,
+        record && typeof record === "object" && "split" in record
+          ? restorePersistedSplit(record, record.split)
+          : record,
+      ]),
+    ),
+  };
+}
+
+interface PaneView {
+  readonly side: PaneSide;
+  readonly surfaces: readonly RightPanelSurface[];
+  readonly shown: RightPanelSurface;
+}
+
+type PaneLayout =
+  | { readonly kind: "single" }
+  | {
+      readonly kind: "split";
+      readonly left: PaneView;
+      readonly right: PaneView;
+      readonly focused: PaneSide;
+      readonly ratio: number;
+    };
+
+const SINGLE: PaneLayout = { kind: "single" };
+
+/** Total: a split that does not fit the given surfaces reads as one pane. */
+export function paneLayout(arrangement: PanelArrangement): PaneLayout {
+  const split = arrangement.split;
+  if (split === undefined) return SINGLE;
+  const right = new Set(split.rightIds);
+  const focused = sideOf(right, arrangement.activeSurfaceId);
+  const view = (side: PaneSide): PaneView | null => {
+    const surfaces = paneSurfaces(arrangement.surfaces, right, side);
+    const shownId = side === focused ? arrangement.activeSurfaceId : split.otherShownId;
+    const shown = surfaces.find((surface) => surface.id === shownId) ?? surfaces[0];
+    return shown === undefined ? null : { side, surfaces, shown };
+  };
+  const left = view("left");
+  const rightView = view("right");
+  if (left === null || rightView === null) return SINGLE;
+  return { kind: "split", left, right: rightView, focused, ratio: clampSplitRatio(split.ratio) };
+}
+
+export function paneOf(arrangement: PanelArrangement, surfaceId: string): PaneSide {
+  return arrangement.split?.rightIds.includes(surfaceId) ? "right" : "left";
+}
+
+/** What the pane the user is not working in shows, or null without a split. */
+export function unfocusedPaneSurface(arrangement: PanelArrangement): RightPanelSurface | null {
+  const layout = paneLayout(arrangement);
+  if (layout.kind === "single") return null;
+  return layout.focused === "left" ? layout.right.shown : layout.left.shown;
+}
+
+/** Kinds an open panel shows in either pane; an automatic open must not replace them. */
+export function shownPanelKinds(thread: ThreadRightPanelState): RightPanelKind[] {
+  if (!thread.isOpen) return [];
+  const active = thread.surfaces.find((surface) => surface.id === thread.activeSurfaceId);
+  return [active, unfocusedPaneSurface(thread)].flatMap((surface) =>
+    surface ? [surface.kind] : [],
+  );
+}
+
+export type SplitMenuAction = "split-right" | "split-left" | "move-to-other-pane" | "unsplit";
+
+/** The tab menu's split entries, the non-drag path to every layout change. */
+export function splitMenuItems(
+  arrangement: PanelArrangement,
+  surfaceId: string,
+  view: { readonly splitAllowed: boolean; readonly splitRendered: boolean },
+): ContextMenuItem<SplitMenuAction>[] {
+  if (arrangement.split === undefined) {
+    if (!view.splitAllowed || arrangement.surfaces.length < 2) return [];
+    return [
+      { id: "split-right", label: "Split right", separatorBefore: true },
+      { id: "split-left", label: "Split left" },
+    ];
+  }
+  const unsplit: ContextMenuItem<SplitMenuAction> = { id: "unsplit", label: "Unsplit" };
+  if (!view.splitRendered) return [{ ...unsplit, separatorBefore: true }];
+  const label =
+    paneOf(arrangement, surfaceId) === "left" ? "Move to the right pane" : "Move to the left pane";
+  return [{ id: "move-to-other-pane", label, separatorBefore: true }, unsplit];
+}
+
+export function splitMenuChange(
+  action: SplitMenuAction,
+  arrangement: PanelArrangement,
+  surfaceId: string,
+): SplitChange {
+  switch (action) {
+    case "split-right":
+      return { type: "split", surfaceId, side: "right" };
+    case "split-left":
+      return { type: "split", surfaceId, side: "left" };
+    case "move-to-other-pane":
+      return {
+        type: "move",
+        surfaceId,
+        pane: otherSide(paneOf(arrangement, surfaceId)),
+        beforeId: null,
+      };
+    case "unsplit":
+      return { type: "unsplit" };
+  }
+}
diff --git a/apps/web/src/fork/rightPanelSplit/splitStore.test.ts b/apps/web/src/fork/rightPanelSplit/splitStore.test.ts
new file mode 100644
index 0000000000000..0ee99e5ad6fe6
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/splitStore.test.ts
@@ -0,0 +1,138 @@
+import { scopedThreadKey, scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { type EnvironmentId, RunId, ThreadId } from "@t3tools/contracts";
+import { beforeEach, describe, expect, it } from "vite-plus/test";
+
+import {
+  migratePersistedRightPanelState,
+  selectThreadRightPanelState,
+  useRightPanelStore,
+} from "~/rightPanelStore";
+
+const ref = scopeThreadRef("env-1" as EnvironmentId, ThreadId.make("thread-split"));
+const key = scopedThreadKey(ref);
+
+beforeEach(() => {
+  useRightPanelStore.setState({
+    byThreadKey: {},
+    threadPanelVisibilityByThreadKey: {},
+    userActionRevisionByThreadKey: {},
+    closeRevisionByThreadKey: {},
+  });
+});
+
+const thread = () => selectThreadRightPanelState(useRightPanelStore.getState().byThreadKey, ref);
+
+/** Left pane a.ts, right pane b.ts (focused). */
+function splitAB() {
+  const store = useRightPanelStore.getState();
+  store.openFile(ref, "a.ts");
+  store.openFile(ref, "b.ts");
+  store.updateSplit(ref, { type: "split", surfaceId: "file:b.ts", side: "right" });
+}
+
+describe("right panel split in the store", () => {
+  it("lands an upstream open in the focused right pane", () => {
+    splitAB();
+    useRightPanelStore.getState().openFile(ref, "c.ts");
+    expect(thread().split?.rightIds).toEqual(["file:b.ts", "file:c.ts"]);
+    expect(thread().activeSurfaceId).toBe("file:c.ts");
+    expect(thread().split?.otherShownId).toBe("file:a.ts");
+  });
+
+  it("bumps the user revision for a move, not for a reorder, a focus or a ratio", () => {
+    splitAB();
+    const store = useRightPanelStore.getState();
+    store.openFile(ref, "c.ts");
+    const revision = () => useRightPanelStore.getState().getUserActionRevision(ref);
+    const before = revision();
+    store.updateSplit(ref, { type: "reorder", surfaceId: "file:c.ts", beforeId: "file:b.ts" });
+    store.updateSplit(ref, { type: "focus", pane: "left" });
+    store.updateSplit(ref, { type: "ratio", ratio: 0.3 });
+    expect(revision()).toBe(before);
+    expect(thread().split).toEqual({
+      rightIds: ["file:c.ts", "file:b.ts"],
+      otherShownId: "file:c.ts",
+      ratio: 0.3,
+    });
+    store.updateSplit(ref, { type: "move", surfaceId: "file:b.ts", pane: "left", beforeId: null });
+    expect(revision()).toBe(before + 1);
+    expect(thread().split?.rightIds).toEqual(["file:c.ts"]);
+  });
+
+  it("refuses a proactive diff that the unfocused pane already shows", () => {
+    const store = useRightPanelStore.getState();
+    store.open(ref, "diff");
+    store.openFile(ref, "a.ts");
+    store.updateSplit(ref, { type: "split", surfaceId: "diff", side: "right" });
+    store.updateSplit(ref, { type: "focus", pane: "left" });
+    const revision = store.getUserActionRevision(ref);
+    expect(store.openProactive(ref, { kind: "diff", turnId: RunId.make("turn-1") }, revision)).toBe(
+      false,
+    );
+    expect(thread().activeSurfaceId).toBe("file:a.ts");
+  });
+
+  it("migrates a v14 record without a split and keeps a v15 split", () => {
+    const record = {
+      isOpen: true,
+      activeSurfaceId: "file:b.ts",
+      surfaces: [
+        {
+          id: "file:a.ts",
+          kind: "file",
+          relativePath: "a.ts",
+          revealLine: null,
+          revealRequestId: 1,
+        },
+        {
+          id: "file:b.ts",
+          kind: "file",
+          relativePath: "b.ts",
+          revealLine: null,
+          revealRequestId: 1,
+        },
+      ],
+    };
+    const split = { rightIds: ["file:b.ts"], otherShownId: "file:a.ts", ratio: 0.4 };
+    expect(
+      migratePersistedRightPanelState({ byThreadKey: { [key]: record } }).byThreadKey[key]?.split,
+    ).toBeUndefined();
+    expect(
+      migratePersistedRightPanelState({ byThreadKey: { [key]: { ...record, split } } }).byThreadKey[
+        key
+      ]?.split,
+    ).toEqual(split);
+  });
+
+  it("round-trips a split through storage and repairs a same-version record", async () => {
+    splitAB();
+    useRightPanelStore.getState().updateSplit(ref, { type: "ratio", ratio: 0.6 });
+    const saved = thread().split;
+    const { storage, name } = useRightPanelStore.persist.getOptions();
+    const persisted = (await storage!.getItem(name!))!;
+    expect(persisted.version).toBe(15);
+    // Resetting the store writes it to storage, so the saved value goes back before rehydrating.
+    const reload = async (value: typeof persisted) => {
+      useRightPanelStore.setState(useRightPanelStore.getInitialState());
+      await storage!.setItem(name!, value);
+      await useRightPanelStore.persist.rehydrate();
+    };
+
+    await reload(persisted);
+    expect(thread().split).toEqual(saved);
+
+    const corrupt = structuredClone(persisted);
+    const state = corrupt.state as { byThreadKey: Record<string, { split: unknown }> };
+    state.byThreadKey[key]!.split = {
+      rightIds: ["file:gone", "file:b.ts"],
+      otherShownId: "file:b.ts",
+      ratio: 9,
+    };
+    await reload(corrupt);
+    expect(thread().split).toEqual({
+      rightIds: ["file:b.ts"],
+      otherShownId: "file:a.ts",
+      ratio: 0.8,
+    });
+  });
+});
diff --git a/apps/web/src/fork/rightPanelSplit/tabStrip.tsx b/apps/web/src/fork/rightPanelSplit/tabStrip.tsx
new file mode 100644
index 0000000000000..58075ac4803af
--- /dev/null
+++ b/apps/web/src/fork/rightPanelSplit/tabStrip.tsx
@@ -0,0 +1,171 @@
+import {
+  PointerSensor,
+  type PointerSensorOptions,
+  TouchSensor,
+  type TouchSensorOptions,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { ContextMenuItem } from "@t3tools/contracts";
+import {
+  type ComponentProps,
+  createContext,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type TouchEvent as ReactTouchEvent,
+  useContext,
+  useRef,
+} from "react";
+
+import type { PreviewPanelShell } from "~/components/preview/PreviewPanelShell";
+import { workspaceAreaProps } from "~/lib/workspaceFocus";
+import type { RightPanelSurface } from "~/rightPanelStore";
+
+import type { PaneSide, SplitMenuAction } from "./splitLayout.logic";
+
+/** Split entries for a tab's context menu. */
+export interface RightPanelTabMenu {
+  readonly items: (surface: RightPanelSurface) => ContextMenuItem<SplitMenuAction>[];
+  readonly select: (action: SplitMenuAction, surface: RightPanelSurface) => void;
+}
+
+export interface TabDragData {
+  readonly kind: "tab";
+  readonly title: string;
+  readonly pane: PaneSide | null;
+}
+
+/**
+ * What a `RightPanelTabs` inside ChatView's split view knows about its pane. Absent on the Pull
+ * requests page. Inside it, one drag context spans every strip, so a tab can leave its strip.
+ */
+export interface RightPanelPane {
+  /** Null for the only pane. */
+  readonly side: PaneSide | null;
+  readonly focused: boolean;
+  readonly tabMenu: RightPanelTabMenu;
+  /** Runs before a press activates its tab, so a drop can give the pane back what it showed. */
+  readonly notePress: (surfaceId: string) => void;
+}
+
+export const RightPanelPaneContext = createContext<RightPanelPane | null>(null);
+
+export function useRightPanelPane(): RightPanelPane | null {
+  return useContext(RightPanelPaneContext);
+}
+
+export function useTabDragData(title: string): TabDragData {
+  return { kind: "tab", title, pane: useRightPanelPane()?.side ?? null };
+}
+
+/** Close, mute and the rename input: a press on them neither activates nor drags. */
+function isTabControl(target: EventTarget | null, tab: EventTarget | null): boolean {
+  if (!(target instanceof Element) || !(tab instanceof Element)) return false;
+  const control = target.closest("button:not([data-tab-title]), input");
+  return control !== null && control !== tab && tab.contains(control);
+}
+
+/**
+ * Activation for a whole tab. A primary mouse or pen press activates at once, before any drag
+ * threshold can swallow it, and keeps focus where activation put it (a terminal). Touch and
+ * keyboard activate on click; the click that ends a press activation does nothing.
+ */
+export function useTabPress(
+  surface: RightPanelSurface,
+  onActivate: (surface: RightPanelSurface) => void,
+) {
+  const pane = useRightPanelPane();
+  const pressActivated = useRef(false);
+  return {
+    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => {
+      pressActivated.current = false;
+      if (event.button !== 0 || (event.pointerType !== "mouse" && event.pointerType !== "pen")) {
+        return;
+      }
+      if (isTabControl(event.target, event.currentTarget)) return;
+      pressActivated.current = true;
+      pane?.notePress(surface.id);
+      onActivate(surface);
+    },
+    onMouseDown: (event: ReactMouseEvent<HTMLElement>) => {
+      // An open rename input still ends on a press elsewhere on its tab.
+      if (event.currentTarget.querySelector("input")) return;
+      if (event.button === 0 && !isTabControl(event.target, event.currentTarget)) {
+        event.preventDefault();
+      }
+    },
+    onClick: (event: ReactMouseEvent<HTMLElement>) => {
+      if (isTabControl(event.target, event.currentTarget)) return;
+      const endsPress = pressActivated.current && event.detail !== 0;
+      pressActivated.current = false;
+      if (!endsPress) onActivate(surface);
+    },
+  };
+}
+
+class TabPointerSensor extends PointerSensor {
+  static override activators = [
+    {
+      eventName: "onPointerDown" as const,
+      handler: (event: ReactPointerEvent, { onActivation }: PointerSensorOptions) => {
+        const { nativeEvent } = event;
+        if (!nativeEvent.isPrimary || nativeEvent.button !== 0) return false;
+        if (nativeEvent.pointerType === "touch") return false;
+        if (isTabControl(event.target, event.currentTarget)) return false;
+        onActivation?.({ event: nativeEvent });
+        return true;
+      },
+    },
+  ];
+}
+
+class TabTouchSensor extends TouchSensor {
+  static override activators = [
+    {
+      eventName: "onTouchStart" as const,
+      handler: (event: ReactTouchEvent, { onActivation }: TouchSensorOptions) => {
+        if (event.nativeEvent.touches.length > 1) return false;
+        if (isTabControl(event.target, event.currentTarget)) return false;
+        onActivation?.({ event: event.nativeEvent });
+        return true;
+      },
+    },
+  ];
+}
+
+/** A touch drag needs a hold, so a swipe scrolls the strip and a tap activates. */
+export function useTabDragSensors() {
+  return useSensors(
+    useSensor(TabPointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(TabTouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }),
+  );
+}
+
+const PANE_LABELS: Record<PaneSide, string> = { left: "Left pane", right: "Right pane" };
+
+/**
+ * What a split view's `RightPanelTabs` renders instead of its own `PreviewPanelShell`; the split
+ * view owns the one shell. Only the focused pane is a workspace area, so programmatic focus never
+ * lands in the other one.
+ */
+export function SplitPaneFrame(props: ComponentProps<typeof PreviewPanelShell>) {
+  const pane = useRightPanelPane();
+  const label = pane?.side ? PANE_LABELS[pane.side] : (props.workspaceLabel ?? "Workspace panel");
+  const area =
+    props.workspaceArea && pane?.focused !== false
+      ? {
+          ...workspaceAreaProps("panel", 4, label),
+          "data-workspace-focus-key": props.workspaceFocusKey,
+        }
+      : { role: "region", "aria-label": label };
+  return (
+    <div
+      {...area}
+      className="flex h-full min-h-0 min-w-0 flex-1 flex-col"
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/apps/web/src/hooks/usePreviewPanelInlineSize.ts b/apps/web/src/hooks/usePreviewPanelInlineSize.ts
index 8881f5314f3a2..7921e094eb289 100644
--- a/apps/web/src/hooks/usePreviewPanelInlineSize.ts
+++ b/apps/web/src/hooks/usePreviewPanelInlineSize.ts
@@ -6,6 +6,9 @@ import { observeResize } from "../lib/observeResize";
 export interface PreviewPanelInlineSize {
   readonly width: number;
   readonly handlers: ResizableWidthHandlers;
+  readonly setWidth: (width: number) => void;
+  /** The widest the panel may be now; `setWidth` clamps to it. */
+  readonly maxWidth: number;
   /** Ref-callback body for the panel host: measures the row the panel shares. */
   readonly observeRow: (host: HTMLElement) => () => void;
 }
@@ -30,7 +33,7 @@ export function usePreviewPanelInlineSize(
   const [maxWidth, setMaxWidth] = useState(() =>
     getPreviewPanelMaxWidth(typeof window === "undefined" ? 1280 : window.innerWidth),
   );
-  const { width, handlers } = useResizableWidth({
+  const { width, handlers, setWidth } = useResizableWidth({
     storageKey: options.widthStorageKey ?? PREVIEW_PANEL_WIDTH_STORAGE_KEY,
     defaultWidth: options.defaultWidth ?? PREVIEW_PANEL_DEFAULT_WIDTH,
     minWidth: PREVIEW_PANEL_MIN_WIDTH,
@@ -62,7 +65,7 @@ export function usePreviewPanelInlineSize(
       stopObserving?.();
     };
   };
-  return { width, handlers, observeRow };
+  return { width, handlers, setWidth, maxWidth, observeRow };
 }
 
 function getPreviewPanelMaxWidth(viewportWidth: number, containerWidth?: number): number {
diff --git a/apps/web/src/hooks/useRightPanelSurfaceClose.ts b/apps/web/src/hooks/useRightPanelSurfaceClose.ts
index 305c2a73dd3b4..9b818ceb6838a 100644
--- a/apps/web/src/hooks/useRightPanelSurfaceClose.ts
+++ b/apps/web/src/hooks/useRightPanelSurfaceClose.ts
@@ -47,9 +47,6 @@ export function useRightPanelSurfaceClose(input: {
   const previewState = useThreadPreviewState(threadRef);
   const terminalActions = useThreadTerminalActions(threadRef);
   const storeCloseTerminal = useTerminalUiStateStore((state) => state.closeTerminal);
-  const surfaces = useRightPanelStore(
-    (state) => selectThreadRightPanelState(state.byThreadKey, threadRef).surfaces,
-  );
 
   const releaseSurfaceResources = (ref: ScopedThreadRef, surface: RightPanelSurface) => {
     // Without preview access, server state remains until an authorized close or restart.
@@ -156,15 +153,21 @@ export function useRightPanelSurfaceClose(input: {
       },
     );
   });
-  const closeOtherSurfaces = useStableCallback((surface: RightPanelSurface) =>
-    closeSurfaces(surfaces.filter((entry) => entry.id !== surface.id)),
+  // A menu passes its strip: one pane of a split, or every tab.
+  const closeOtherSurfaces = useStableCallback(
+    (surface: RightPanelSurface, strip: readonly RightPanelSurface[]) =>
+      closeSurfaces(strip.filter((entry) => entry.id !== surface.id)),
+  );
+  const closeSurfacesToRight = useStableCallback(
+    (surface: RightPanelSurface, strip: readonly RightPanelSurface[]) => {
+      const surfaceIndex = strip.findIndex((entry) => entry.id === surface.id);
+      if (surfaceIndex < 0) return;
+      closeSurfaces(strip.slice(surfaceIndex + 1));
+    },
+  );
+  const closeAllSurfaces = useStableCallback((strip: readonly RightPanelSurface[]) =>
+    closeSurfaces(strip),
   );
-  const closeSurfacesToRight = useStableCallback((surface: RightPanelSurface) => {
-    const surfaceIndex = surfaces.findIndex((entry) => entry.id === surface.id);
-    if (surfaceIndex < 0) return;
-    closeSurfaces(surfaces.slice(surfaceIndex + 1));
-  });
-  const closeAllSurfaces = useStableCallback(() => closeSurfaces(surfaces));
 
   return { closeSurface, closeOtherSurfaces, closeSurfacesToRight, closeAllSurfaces };
 }
diff --git a/apps/web/src/rightPanelStore.ts b/apps/web/src/rightPanelStore.ts
index 0e474faaa708f..81c2606b637fd 100644
--- a/apps/web/src/rightPanelStore.ts
+++ b/apps/web/src/rightPanelStore.ts
@@ -11,6 +11,17 @@ import { useClosedViewStore } from "./closedViewStore";
 import { resolveStorage } from "./lib/storage";
 import type { ThreadPanelPresentation } from "./rightPanelLayout";
 import type { ChatFileAttachment } from "./types";
+import {
+  applySplitChange,
+  isUserSplitChange,
+  mergePersistedRightPanelState,
+  persistedSplitFields,
+  reconcileSplit,
+  shownPanelKinds,
+  type RightPanelSplit,
+  type SplitChange,
+  type SplitWriteKind,
+} from "./fork/rightPanelSplit/splitLayout.logic";
 
 const RIGHT_PANEL_KINDS = [
   "diff",
@@ -85,7 +96,7 @@ export type RightPanelSurface =
   | { id: "replies"; kind: "replies" };
 
 const RIGHT_PANEL_STORAGE_KEY = "t3code:right-panel-state:v2";
-const RIGHT_PANEL_STORAGE_VERSION = 14;
+const RIGHT_PANEL_STORAGE_VERSION = 15;
 
 export const PULL_REQUESTS_PANEL_REF = scopeThreadRef(
   EnvironmentId.make("pull-requests-panel"),
@@ -101,6 +112,7 @@ export interface ThreadRightPanelState {
   dismissedDeviceSurfaceIds?: string[];
   maximized?: true;
   proactiveDiffTurnId?: RunId;
+  split?: RightPanelSplit;
 }
 
 export interface ThreadPanelVisibility {
@@ -184,6 +196,7 @@ interface RightPanelStoreState {
   closeSurfacesToRight: (ref: ScopedThreadRef, surfaceId: string) => void;
   closeAllSurfaces: (ref: ScopedThreadRef) => void;
   moveSurface: (ref: ScopedThreadRef, surfaceId: string, toIndex: number) => void;
+  updateSplit: (ref: ScopedThreadRef, change: SplitChange) => void;
   reconcileBrowserSurfaces: (
     ref: ScopedThreadRef,
     tabIds: readonly string[],
@@ -332,9 +345,10 @@ const updateThreadStateMap = (
   byThreadKey: Record<string, ThreadRightPanelState>,
   threadKey: string,
   updater: (current: ThreadRightPanelState) => ThreadRightPanelState,
+  kind: SplitWriteKind,
 ): Record<string, ThreadRightPanelState> => {
   const current = byThreadKey[threadKey] ?? EMPTY_THREAD_STATE;
-  const next = updater(current);
+  const next = reconcileSplit(current, updater(current), kind);
   if (
     !next.isOpen &&
     next.activeSurfaceId === null &&
@@ -374,10 +388,11 @@ type RightPanelStoreData = Pick<
 const updateThread = (
   state: RightPanelStoreData,
   threadKey: string,
+  kind: SplitWriteKind,
   updater: (current: ThreadRightPanelState) => ThreadRightPanelState,
 ): RightPanelStoreData => {
   const current = state.byThreadKey[threadKey] ?? EMPTY_THREAD_STATE;
-  const byThreadKey = updateThreadStateMap(state.byThreadKey, threadKey, updater);
+  const byThreadKey = updateThreadStateMap(state.byThreadKey, threadKey, updater, kind);
   const next = byThreadKey[threadKey] ?? EMPTY_THREAD_STATE;
   let threadPanelVisibilityByThreadKey = state.threadPanelVisibilityByThreadKey;
 
@@ -406,7 +421,7 @@ const automaticUpdate = (
   threadKey: string,
   updater: (current: ThreadRightPanelState) => ThreadRightPanelState,
 ): Partial<RightPanelStoreState> => ({
-  ...updateThread(state, threadKey, updater),
+  ...updateThread(state, threadKey, "automatic", updater),
 });
 
 // A side chat pane has no panel of its own, so its panel actions open in its parent's panel.
@@ -443,7 +458,7 @@ const userActionOnThread = (
   updater: (current: ThreadRightPanelState) => ThreadRightPanelState,
   closesView: boolean,
 ): Partial<RightPanelStoreState> => ({
-  ...updateThread(state, threadKey, (current) => {
+  ...updateThread(state, threadKey, closesView ? "close" : "user", (current) => {
     const next = updater(current);
     if (next === current) return current;
     const removedDevices = current.surfaces.filter(
@@ -620,6 +635,7 @@ export function migratePersistedRightPanelState(persistedState: unknown): {
                       }
                     : {}),
                   ...(validThreadState?.maximized === true ? { maximized: true as const } : {}),
+                  ...persistedSplitFields({ surfaces, activeSurfaceId }, validThreadState?.split),
                 },
               ];
             }),
@@ -676,13 +692,13 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
           if (request.kind === "diff") {
             const current = selectThreadRightPanelState(state.byThreadKey, ref);
             if (current.proactiveDiffTurnId === request.turnId) return state;
-            const activePanel = selectActiveRightPanel(state.byThreadKey, ref);
+            const shownPanels = shownPanelKinds(current);
             const pullRequestActive =
-              activePanel === "pull-request" || activePanel === "pull-requests";
+              shownPanels.includes("pull-request") || shownPanels.includes("pull-requests");
             opened =
               (state.userActionRevisionByThreadKey[threadKey] ?? 0) ===
                 expectedUserActionRevision &&
-              activePanel !== "diff" &&
+              !shownPanels.includes("diff") &&
               !pullRequestActive;
             // Record the offer even when refused, so a revisit does not retry this turn.
             return automaticUpdate(state, threadKey, (thread) => ({
@@ -1038,7 +1054,7 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
         ),
       moveSurface: (ref, surfaceId, toIndex) =>
         set((state) =>
-          updateThread(state, scopedThreadKey(ref), (current) => {
+          updateThread(state, scopedThreadKey(ref), "automatic", (current) => {
             const fromIndex = current.surfaces.findIndex((surface) => surface.id === surfaceId);
             if (fromIndex < 0 || fromIndex === toIndex) return current;
             const surfaces = [...current.surfaces];
@@ -1046,6 +1062,14 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
             return { ...current, surfaces };
           }),
         ),
+      updateSplit: (ref, change) =>
+        set((state) =>
+          (isUserSplitChange(change) ? userAction : automaticUpdate)(
+            state,
+            scopedThreadKey(ref),
+            (current) => applySplitChange(current, change),
+          ),
+        ),
       reconcileBrowserSurfaces: (ref, tabIds, hiddenTabIds) =>
         set((state) =>
           automaticUpdate(state, scopedThreadKey(ref), (current) => {
@@ -1220,6 +1244,7 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
         ),
       }),
       migrate: migratePersistedRightPanelState,
+      merge: mergePersistedRightPanelState,
     },
   ),
 );