diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelLayout.test.tsx b/apps/app/src/components/secondary-panel/SecondaryPanelLayout.test.tsx
index 1c52abe5ce..fb59f734d8 100644
--- a/apps/app/src/components/secondary-panel/SecondaryPanelLayout.test.tsx
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelLayout.test.tsx
@@ -305,6 +305,19 @@ beforeEach(() => {
 });
 
 describe("SecondaryPanelLayout", () => {
+  it("registers the thread and right panel as one two-pane resize grid", () => {
+    renderLayout({
+      isCompactViewport: false,
+      open: true,
+      renderPanel: createPanelRenderer(),
+      resetKey: "thread-grid",
+    });
+
+    expect(
+      screen.getByTestId("panel-group").dataset.splitResizeGridRoot,
+    ).toBe("");
+  });
+
   it("preserves routed main content when the panel state identity changes", () => {
     const frames = installAnimationFrameQueue();
     const view = renderLayout({
diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelLayout.tsx b/apps/app/src/components/secondary-panel/SecondaryPanelLayout.tsx
index 3e0edb14f0..95fbe782ff 100644
--- a/apps/app/src/components/secondary-panel/SecondaryPanelLayout.tsx
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelLayout.tsx
@@ -334,6 +334,7 @@ export function SecondaryPanelLayout({
         <PanelGroup
           key={panelGroupKey ?? resetKey}
           ref={horizontalPanelGroupRef}
+          data-split-resize-grid-root=""
           direction="horizontal"
           className="@container h-full min-w-0 flex-1"
           // A clipped group cannot be programmatically scrolled by an iframe's
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 6aa6f4e507..c6408a24ae 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -20,6 +20,7 @@ import {
   createSidebarSplitState,
   focusSidebarPane,
   moveSidebarTab,
+  parseSidebarSplitState,
   serializeSidebarSplitState,
   sidebarSplitStorageKey,
   type SidebarSplitState,
@@ -782,6 +783,165 @@ describe("SidebarSplitContainer", () => {
     });
   });
 
+  it("snaps a right-panel divider to its equal two-pane boundary and persists it", () => {
+    persistState(createTwoPaneState());
+    renderContainer({
+      renderPane: ({ paneId }) => <div>{paneId}</div>,
+    });
+    const separator = screen.getByRole("separator");
+    const hitTarget = separator.firstElementChild;
+    const previous = separator.previousElementSibling;
+    const next = separator.nextElementSibling;
+    if (
+      !(hitTarget instanceof HTMLElement) ||
+      !(previous instanceof HTMLElement) ||
+      !(next instanceof HTMLElement)
+    ) {
+      throw new Error("Expected adjacent right-panel split items");
+    }
+    const grid = separator.parentElement;
+    if (grid === null) throw new Error("Expected a right-panel split grid");
+    expect(separator.dataset.splitResizeGridBoundary).toBe("1");
+    expect(separator.dataset.splitResizeGridCount).toBe("2");
+    Object.defineProperties(hitTarget, {
+      releasePointerCapture: { configurable: true, value: vi.fn() },
+      setPointerCapture: { configurable: true, value: vi.fn() },
+    });
+    vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 300,
+      right: 500,
+      top: 0,
+      width: 200,
+      x: 300,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 501,
+      right: 900,
+      top: 0,
+      width: 399,
+      x: 501,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 500,
+      right: 501,
+      top: 0,
+      width: 1,
+      x: 500,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(grid, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 100,
+      right: 900,
+      top: 0,
+      width: 800,
+      x: 100,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 32 });
+    fireEvent.pointerMove(hitTarget, { clientX: 518, pointerId: 32 });
+
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(
+      199.5 / 599,
+      5,
+    );
+    expect(
+      document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
+        ?.style.left,
+    ).toBe("500px");
+
+    fireEvent.pointerUp(hitTarget, { clientX: 518, pointerId: 32 });
+
+    const persisted = parseSidebarSplitState(
+      window.localStorage.getItem(sidebarSplitStorageKey(PANEL_STATE_ID)),
+      TABS.map((tab) => tab.id),
+      "tab-a",
+    );
+    expect(persisted.layout.root.type).toBe("split");
+    if (persisted.layout.root.type === "split") {
+      expect(persisted.layout.root.sizes[0]).toBeCloseTo(199.5 / 599, 5);
+      expect(persisted.layout.root.sizes[1]).toBeCloseTo(399.5 / 599, 5);
+    }
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("clears the resize overlay when the divider loses pointer capture", () => {
+    persistState(createTwoPaneState());
+    renderContainer({
+      renderPane: ({ paneId }) => <div>{paneId}</div>,
+    });
+    const separator = screen.getByRole("separator");
+    const hitTarget = separator.firstElementChild;
+    const previous = separator.previousElementSibling;
+    const next = separator.nextElementSibling;
+    if (
+      !(hitTarget instanceof HTMLElement) ||
+      !(previous instanceof HTMLElement) ||
+      !(next instanceof HTMLElement)
+    ) {
+      throw new Error("Expected adjacent right-panel split items");
+    }
+    Object.defineProperties(hitTarget, {
+      releasePointerCapture: { configurable: true, value: vi.fn() },
+      setPointerCapture: { configurable: true, value: vi.fn() },
+    });
+    vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 0,
+      right: 400,
+      top: 0,
+      width: 400,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 401,
+      right: 801,
+      top: 0,
+      width: 400,
+      x: 401,
+      y: 0,
+      toJSON: () => ({}),
+    });
+
+    fireEvent.pointerDown(hitTarget, { clientX: 400.5, pointerId: 34 });
+    expect(screen.getByTestId("iframe-drag-guard-overlay")).not.toBeNull();
+
+    fireEvent.lostPointerCapture(hitTarget, { pointerId: 34 });
+
+    expect(screen.queryByTestId("iframe-drag-guard-overlay")).toBeNull();
+  });
+
+  it("keeps right-panel separators out of the tab order", () => {
+    persistState(createTwoPaneState());
+    renderContainer({
+      renderPane: ({ paneId }) => <div>{paneId}</div>,
+    });
+
+    const separator = screen.getByRole("separator");
+    fireEvent.keyDown(separator, { key: "ArrowRight" });
+
+    expect(separator.tabIndex).toBe(-1);
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
   it("does not resize or persist when the divider is pressed and released in place", () => {
     persistState(createTwoPaneState());
     const storageKey = sidebarSplitStorageKey(PANEL_STATE_ID);
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index c47f569237..998c00093e 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -12,7 +12,6 @@ import { useAtomValue } from "jotai";
 import { cn } from "@bb/shared-ui/lib/utils";
 import { beginSplitDrag, type SplitDropTarget } from "@/lib/split-drag";
 import {
-  clampSplitPairFraction,
   computePaneRects,
   countPanes,
   listPanes,
@@ -23,6 +22,7 @@ import {
   type SplitSide,
 } from "@/lib/split-layout";
 import { dimInactiveSplitsAtom } from "@/lib/split-layout/atoms";
+import { createSplitResizeSnapSession } from "@/lib/split-resize-snap";
 import { IframeDragGuardOverlay } from "@/lib/iframe-drag-guard";
 import { MACOS_APP_REGION_NO_DRAG_CLASS } from "@/lib/bb-desktop";
 import {
@@ -558,6 +558,7 @@ function SidebarSplitTrackTree(props: SidebarSplitTrackTreeProps) {
   const node = props.node;
   return (
     <div
+      data-split-resize-grid-root=""
       className={cn(
         "pointer-events-none flex min-h-0 min-w-0 flex-1",
         node.dir === "row" ? "flex-row" : "flex-col",
@@ -567,6 +568,8 @@ function SidebarSplitTrackTree(props: SidebarSplitTrackTreeProps) {
         <Fragment key={sidebarSplitSubtreeKey(child)}>
           {index > 0 ? (
             <SidebarSplitDivider
+              boundaryIndex={index}
+              childCount={node.children.length}
               dir={node.dir}
               hidden={props.maximizedPaneId !== null}
               onResize={(fraction) =>
@@ -712,12 +715,16 @@ function SidebarSplitLeaf(props: SidebarSplitLeafProps) {
 }
 
 function SidebarSplitDivider({
+  boundaryIndex,
+  childCount,
   dir,
   hidden,
   onResize,
   onResizeDragChange,
   onPreviewResize,
 }: {
+  boundaryIndex: number;
+  childCount: number;
   dir: "row" | "col";
   hidden: boolean;
   onResize: (fraction: number) => void;
@@ -758,6 +765,12 @@ function SidebarSplitDivider({
       const pair = createSidebarSplitResizePair(previous, next);
       hitTarget.setPointerCapture(pointerId);
       divider.dataset.dragging = "true";
+      const snapSession = createSplitResizeSnapSession(
+        divider,
+        horizontal ? "x" : "y",
+        { boundaryIndex, childCount },
+      );
+      snapSession.resolve({ end, pointer: pointerDownPosition, start });
       let pendingFraction: number | null = null;
       let receivedPointerMove = false;
       let finished = false;
@@ -765,7 +778,11 @@ function SidebarSplitDivider({
         const pointer = horizontal
           ? pointerEvent.clientX
           : pointerEvent.clientY;
-        const fraction = clampSplitPairFraction((pointer - start) / span);
+        const { fraction } = snapSession.resolve({
+          end,
+          pointer,
+          start,
+        });
         pendingFraction = fraction;
         pair.previous.style.flex = `${pair.total * fraction} 1 0px`;
         pair.next.style.flex = `${pair.total * (1 - fraction)} 1 0px`;
@@ -784,9 +801,11 @@ function SidebarSplitDivider({
         hitTarget.removeEventListener("pointermove", move);
         hitTarget.removeEventListener("pointerup", onUp);
         hitTarget.removeEventListener("pointercancel", cancel);
+        hitTarget.removeEventListener("lostpointercapture", lostCapture);
         if (hitTarget.hasPointerCapture?.(pointerId)) {
           hitTarget.releasePointerCapture(pointerId);
         }
+        snapSession.clear();
         onResizeDragChange(null);
         onPreviewResize(null);
         if (commit && pendingFraction !== null) {
@@ -812,17 +831,31 @@ function SidebarSplitDivider({
         if (cancelEvent.pointerId !== pointerId) return;
         finish(false);
       };
+      const lostCapture = (lostEvent: PointerEvent) => {
+        if (lostEvent.pointerId !== pointerId) return;
+        finish(false);
+      };
       hitTarget.addEventListener("pointermove", move);
       hitTarget.addEventListener("pointerup", onUp);
       hitTarget.addEventListener("pointercancel", cancel);
+      hitTarget.addEventListener("lostpointercapture", lostCapture);
       finishResizeRef.current = () => finish(false);
       onResizeDragChange(horizontal ? "col-resize" : "row-resize");
     },
-    [horizontal, onPreviewResize, onResize, onResizeDragChange],
+    [
+      boundaryIndex,
+      childCount,
+      horizontal,
+      onPreviewResize,
+      onResize,
+      onResizeDragChange,
+    ],
   );
   return (
     <div
       role="separator"
+      data-split-resize-grid-boundary={boundaryIndex}
+      data-split-resize-grid-count={childCount}
       aria-hidden={hidden || undefined}
       aria-label={
         horizontal
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
index 432083097e..841ce2317d 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
@@ -363,6 +363,7 @@ export function ThreadSecondaryPanel({
   const {
     handleSecondaryPanelDragging: handleResizeDragging,
     handleSecondaryPanelResize,
+    handleSecondaryPanelResizePointerDownCapture,
     persistedWidthPercent,
     secondaryPanelRef: panelRef,
     secondaryResizablePanelRef: resizablePanelRef,
@@ -1185,6 +1186,7 @@ export function ThreadSecondaryPanel({
         isConversationCollapsed={isConversationCollapsed}
         matchesSplitDividers={hostLayout !== null}
         onDragging={handleSecondaryPanelDragging}
+        onPointerDown={handleSecondaryPanelResizePointerDownCapture}
       />
       <Panel
         ref={resizablePanelRef}
@@ -1325,6 +1327,7 @@ interface SecondaryPanelResizeHandleProps {
    */
   matchesSplitDividers: boolean;
   onDragging: SecondaryPanelDraggingHandler;
+  onPointerDown: (event: PointerEvent) => void;
 }
 
 function SecondaryPanelResizeHandle({
@@ -1332,6 +1335,7 @@ function SecondaryPanelResizeHandle({
   isConversationCollapsed,
   matchesSplitDividers,
   onDragging,
+  onPointerDown,
 }: SecondaryPanelResizeHandleProps) {
   const isResizing = useAtomValue(threadSecondaryPanelResizingAtom);
   return (
@@ -1342,6 +1346,8 @@ function SecondaryPanelResizeHandle({
       // that state.
       disabled={!isOpen || isConversationCollapsed}
       onDragging={onDragging}
+      onPointerDownCapture={(event) => onPointerDown(event.nativeEvent)}
+      data-panel-resize-snap-handle=""
       hitAreaMargins={PANEL_RESIZE_HIT_AREA_MARGINS}
       className={cn(
         "group relative shrink-0 overflow-visible transition-[width,opacity,background-color]",
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
new file mode 100644
index 0000000000..85f24ae55b
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -0,0 +1,213 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePanelResizeSnap } from "./usePanelResizeSnap";
+
+function rect(left: number, width: number): DOMRect {
+  return {
+    bottom: 600,
+    height: 600,
+    left,
+    right: left + width,
+    top: 0,
+    width,
+    x: left,
+    y: 0,
+    toJSON: () => ({}),
+  };
+}
+
+function SnapHarness({ onResize }: { onResize: (fraction: number) => void }) {
+  const { onPointerDownCapture } = usePanelResizeSnap({
+    axis: "x",
+    onResize,
+    target: { boundaryIndex: 1, childCount: 2 },
+  });
+  return (
+    <div data-split-resize-grid-root="" data-testid="grid">
+      <div data-testid="previous" />
+      <div
+        data-panel-resize-snap-handle=""
+        data-testid="divider"
+        onPointerDownCapture={(event) =>
+          onPointerDownCapture(event.nativeEvent)
+        }
+      >
+        <span data-testid="hit-target" />
+      </div>
+      <div data-testid="next" />
+    </div>
+  );
+}
+
+afterEach(() => cleanup());
+
+describe("usePanelResizeSnap", () => {
+  it("previews pointer movement locally and commits once at drag end", () => {
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
+    const grid = screen.getByTestId("grid");
+    const previous = screen.getByTestId("previous");
+    const divider = screen.getByTestId("divider");
+    const hitTarget = screen.getByTestId("hit-target");
+    const next = screen.getByTestId("next");
+    grid.getBoundingClientRect = () => rect(100, 800);
+    previous.getBoundingClientRect = () => rect(100, 370);
+    divider.getBoundingClientRect = () => rect(470, 1);
+    next.getBoundingClientRect = () => rect(471, 429);
+    const rawPanelMove = vi.fn();
+    document.body.addEventListener("pointermove", rawPanelMove, true);
+
+    try {
+      fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 40 });
+      fireEvent.pointerMove(document.body, {
+        buttons: 1,
+        clientX: 450,
+        pointerId: 40,
+      });
+
+      expect(rawPanelMove).not.toHaveBeenCalled();
+      expect(onResize).not.toHaveBeenCalled();
+      expect(previous.style.flex).toBe("0.4375 1 0px");
+      expect(next.style.flex).toBe("0.5625 1 0px");
+
+      fireEvent.pointerUp(window, { clientX: 450, pointerId: 40 });
+      expect(onResize).toHaveBeenCalledOnce();
+      expect(onResize).toHaveBeenLastCalledWith(0.4375);
+    } finally {
+      fireEvent.pointerUp(window, { clientX: 450, pointerId: 40 });
+      document.body.removeEventListener("pointermove", rawPanelMove, true);
+    }
+  });
+
+  it("disables panel-size transitions only for the active pointer drag", () => {
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
+    const grid = screen.getByTestId("grid");
+    const previous = screen.getByTestId("previous");
+    const divider = screen.getByTestId("divider");
+    const hitTarget = screen.getByTestId("hit-target");
+    const next = screen.getByTestId("next");
+    grid.getBoundingClientRect = () => rect(100, 800);
+    previous.getBoundingClientRect = () => rect(100, 370);
+    divider.getBoundingClientRect = () => rect(470, 1);
+    next.getBoundingClientRect = () => rect(471, 429);
+    grid.style.setProperty("--panel-collapse-duration", "220ms");
+
+    fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 42 });
+    expect(grid.style.getPropertyValue("--panel-collapse-duration")).toBe(
+      "0ms",
+    );
+
+    fireEvent.pointerUp(window, { clientX: 470, pointerId: 42 });
+    expect(grid.style.getPropertyValue("--panel-collapse-duration")).toBe(
+      "220ms",
+    );
+  });
+
+  it("releases when the panel library consumes pointerup before the snap handler", () => {
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
+    const grid = screen.getByTestId("grid");
+    const previous = screen.getByTestId("previous");
+    const divider = screen.getByTestId("divider");
+    const hitTarget = screen.getByTestId("hit-target");
+    const next = screen.getByTestId("next");
+    grid.getBoundingClientRect = () => rect(100, 800);
+    previous.getBoundingClientRect = () => rect(100, 370);
+    divider.getBoundingClientRect = () => rect(470, 1);
+    next.getBoundingClientRect = () => rect(471, 429);
+    grid.style.setProperty("--panel-collapse-duration", "220ms");
+    const consumePointerUp = (event: PointerEvent) =>
+      event.stopImmediatePropagation();
+    window.addEventListener("pointerup", consumePointerUp, true);
+
+    try {
+      fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 43 });
+      fireEvent.pointerMove(document.body, {
+        buttons: 1,
+        clientX: 450,
+        pointerId: 43,
+      });
+      fireEvent.pointerUp(document.body, { clientX: 450, pointerId: 43 });
+      fireEvent.mouseUp(window, { clientX: 450 });
+      expect(onResize).toHaveBeenCalledOnce();
+      expect(onResize).toHaveBeenLastCalledWith(0.4375);
+      const resizeCountAfterRelease = onResize.mock.calls.length;
+
+      fireEvent.pointerMove(document.body, {
+        buttons: 0,
+        clientX: 430,
+        pointerId: 43,
+      });
+
+      expect(onResize).toHaveBeenCalledTimes(resizeCountAfterRelease);
+      expect(grid.style.getPropertyValue("--panel-collapse-duration")).toBe(
+        "220ms",
+      );
+    } finally {
+      window.removeEventListener("pointerup", consumePointerUp, true);
+    }
+  });
+
+  it("releases when pointer movement reports that no buttons remain held", () => {
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
+    const grid = screen.getByTestId("grid");
+    const previous = screen.getByTestId("previous");
+    const divider = screen.getByTestId("divider");
+    const hitTarget = screen.getByTestId("hit-target");
+    const next = screen.getByTestId("next");
+    grid.getBoundingClientRect = () => rect(100, 800);
+    previous.getBoundingClientRect = () => rect(100, 370);
+    divider.getBoundingClientRect = () => rect(470, 1);
+    next.getBoundingClientRect = () => rect(471, 429);
+    grid.style.setProperty("--panel-collapse-duration", "220ms");
+
+    fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 44 });
+    fireEvent.pointerMove(document.body, {
+      buttons: 0,
+      clientX: 450,
+      pointerId: 44,
+    });
+
+    expect(onResize).not.toHaveBeenCalled();
+    expect(grid.style.getPropertyValue("--panel-collapse-duration")).toBe(
+      "220ms",
+    );
+  });
+
+  it("bridges a fast outer-panel crossing into the shared two-pane grid", () => {
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
+    const grid = screen.getByTestId("grid");
+    const previous = screen.getByTestId("previous");
+    const divider = screen.getByTestId("divider");
+    const hitTarget = screen.getByTestId("hit-target");
+    const next = screen.getByTestId("next");
+    grid.getBoundingClientRect = () => rect(100, 800);
+    previous.getBoundingClientRect = () => rect(100, 370);
+    divider.getBoundingClientRect = () => rect(470, 1);
+    next.getBoundingClientRect = () => rect(471, 429);
+
+    fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 41 });
+    fireEvent.pointerMove(document.body, {
+      buttons: 1,
+      clientX: 560,
+      pointerId: 41,
+    });
+
+    expect(onResize).not.toHaveBeenCalled();
+    expect(previous.style.flex).toBe("0.5 1 0px");
+    expect(next.style.flex).toBe("0.5 1 0px");
+    expect(
+      document.querySelector("[data-split-resize-snap-guide]"),
+    ).not.toBeNull();
+
+    fireEvent.pointerUp(window, { clientX: 560, pointerId: 41 });
+    expect(onResize).toHaveBeenLastCalledWith(0.5);
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+});
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
new file mode 100644
index 0000000000..a3314d9ca8
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+  createSplitResizeSnapSession,
+  type SplitResizeAxis,
+  type SplitResizeGridTarget,
+} from "@/lib/split-resize-snap";
+
+interface UsePanelResizeSnapArgs {
+  axis: SplitResizeAxis;
+  onResize: (leadingFraction: number) => void;
+  target: SplitResizeGridTarget;
+}
+
+interface PanelResizeSnapDrag {
+  cancel: () => void;
+  finish: () => void;
+}
+
+export interface PanelResizeSnapController {
+  finish: () => void;
+  onPointerDownCapture: (event: PointerEvent) => void;
+}
+
+/**
+ * Gives react-resizable-panels' outer divider the same single-writer drag path
+ * as bb's other split dividers. Pointer samples update only the adjacent flex
+ * items; the panel library receives one canonical resize when the drag ends.
+ */
+export function usePanelResizeSnap({
+  axis,
+  onResize,
+  target,
+}: UsePanelResizeSnapArgs): PanelResizeSnapController {
+  const { boundaryIndex, childCount } = target;
+  const activeDragRef = useRef<PanelResizeSnapDrag | null>(null);
+  const finish = useCallback(() => {
+    const activeDrag = activeDragRef.current;
+    activeDragRef.current = null;
+    activeDrag?.finish();
+  }, []);
+  const cancel = useCallback(() => {
+    const activeDrag = activeDragRef.current;
+    activeDragRef.current = null;
+    activeDrag?.cancel();
+  }, []);
+
+  useEffect(() => cancel, [cancel]);
+
+  const onPointerDownCapture = useCallback(
+    (event: PointerEvent) => {
+      finish();
+      const eventTarget = event.target;
+      if (!(eventTarget instanceof HTMLElement)) return;
+      const divider = eventTarget.closest<HTMLElement>(
+        "[data-panel-resize-snap-handle]",
+      );
+      if (divider === null) return;
+      const previous = divider.previousElementSibling;
+      const next = divider.nextElementSibling;
+      if (
+        !(previous instanceof HTMLElement) ||
+        !(next instanceof HTMLElement)
+      ) {
+        return;
+      }
+      const previousRect = previous.getBoundingClientRect();
+      const nextRect = next.getBoundingClientRect();
+      const start = axis === "x" ? previousRect.left : previousRect.top;
+      const end = axis === "x" ? nextRect.right : nextRect.bottom;
+      if (end <= start) return;
+
+      const ownerWindow = divider.ownerDocument.defaultView;
+      if (ownerWindow === null) return;
+      const previousGrow = Number.parseFloat(
+        ownerWindow.getComputedStyle(previous).flexGrow,
+      );
+      const nextGrow = Number.parseFloat(
+        ownerWindow.getComputedStyle(next).flexGrow,
+      );
+      const pairTotal =
+        Number.isFinite(previousGrow) &&
+        Number.isFinite(nextGrow) &&
+        previousGrow + nextGrow > 0
+          ? previousGrow + nextGrow
+          : 1;
+      const previousFlex = previous.style.flex;
+      const nextFlex = next.style.flex;
+      const snapSession = createSplitResizeSnapSession(divider, axis, {
+        boundaryIndex,
+        childCount,
+      });
+      const grid = divider.closest<HTMLElement>(
+        "[data-split-resize-grid-root]",
+      );
+      const transitionDuration = grid?.style.getPropertyValue(
+        "--panel-collapse-duration",
+      );
+      const transitionPriority = grid?.style.getPropertyPriority(
+        "--panel-collapse-duration",
+      );
+      grid?.style.setProperty("--panel-collapse-duration", "0ms");
+      const pointerId = event.pointerId;
+      const pointer = axis === "x" ? event.clientX : event.clientY;
+      snapSession.resolve({ end, pointer, start });
+
+      let finished = false;
+      let pendingFraction: number | null = null;
+      const move = (moveEvent: PointerEvent) => {
+        if (moveEvent.pointerId !== pointerId) return;
+        if (moveEvent.buttons === 0) {
+          finish();
+          return;
+        }
+        moveEvent.preventDefault();
+        moveEvent.stopPropagation();
+        const nextPointer =
+          axis === "x" ? moveEvent.clientX : moveEvent.clientY;
+        const result = snapSession.resolve({
+          end,
+          pointer: nextPointer,
+          start,
+        });
+        pendingFraction = result.fraction;
+        previous.style.flex = `${pairTotal * result.fraction} 1 0px`;
+        next.style.flex = `${pairTotal * (1 - result.fraction)} 1 0px`;
+      };
+      const complete = (commit: boolean) => {
+        if (finished) return;
+        finished = true;
+        ownerWindow.removeEventListener("pointermove", move, true);
+        ownerWindow.removeEventListener("pointerup", finishForPointer, true);
+        ownerWindow.removeEventListener(
+          "pointercancel",
+          finishForPointer,
+          true,
+        );
+        ownerWindow.removeEventListener("mouseup", finishOnMouseUp, true);
+        ownerWindow.removeEventListener("blur", finishOnBlur);
+        snapSession.clear();
+        if (grid !== null) {
+          if (transitionDuration === "" || transitionDuration === undefined) {
+            grid.style.removeProperty("--panel-collapse-duration");
+          } else {
+            grid.style.setProperty(
+              "--panel-collapse-duration",
+              transitionDuration,
+              transitionPriority,
+            );
+          }
+        }
+        if (
+          activeDragRef.current?.finish === commitDrag ||
+          activeDragRef.current?.cancel === cancelDrag
+        ) {
+          activeDragRef.current = null;
+        }
+        if (commit && pendingFraction !== null) {
+          onResize(pendingFraction);
+          return;
+        }
+        if (!commit) {
+          previous.style.flex = previousFlex;
+          next.style.flex = nextFlex;
+        }
+      };
+      const commitDrag = () => complete(true);
+      const cancelDrag = () => complete(false);
+      const finishForPointer = (finishEvent: PointerEvent) => {
+        if (finishEvent.pointerId !== pointerId) return;
+        commitDrag();
+      };
+      const finishOnMouseUp = () => commitDrag();
+      const finishOnBlur = () => commitDrag();
+
+      activeDragRef.current = { cancel: cancelDrag, finish: commitDrag };
+      ownerWindow.addEventListener("pointermove", move, true);
+      ownerWindow.addEventListener("pointerup", finishForPointer, true);
+      ownerWindow.addEventListener("pointercancel", finishForPointer, true);
+      ownerWindow.addEventListener("mouseup", finishOnMouseUp, true);
+      ownerWindow.addEventListener("blur", finishOnBlur);
+    },
+    [axis, boundaryIndex, childCount, finish, onResize],
+  );
+
+  return { finish, onPointerDownCapture };
+}
diff --git a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
index 5f510cb389..0cceed11d4 100644
--- a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
+++ b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
@@ -6,6 +6,7 @@ import {
   secondaryPanelWidthPercentAtom,
   threadSecondaryPanelResizingAtom,
 } from "./threadSecondaryPanelAtoms";
+import { usePanelResizeSnap } from "./usePanelResizeSnap";
 
 export type SecondaryPanelDraggingHandler = (isDragging: boolean) => void;
 export type SecondaryPanelWidthChangeHandler = (
@@ -32,6 +33,20 @@ export function useSecondaryPanelResize({
   const secondaryResizablePanelRef = useRef<ImperativePanelHandle | null>(null);
   const isSecondaryPanelDraggingRef = useRef(false);
   const lastSecondaryPanelSizeRef = useRef(persistedWidthPercent);
+  const handleSecondaryPanelPointerResize = useCallback(
+    (leadingFraction: number) => {
+      secondaryResizablePanelRef.current?.resize((1 - leadingFraction) * 100);
+    },
+    [],
+  );
+  const {
+    finish: finishSecondaryPanelResizeSnap,
+    onPointerDownCapture: handleSecondaryPanelResizePointerDownCapture,
+  } = usePanelResizeSnap({
+    axis: "x",
+    onResize: handleSecondaryPanelPointerResize,
+    target: { boundaryIndex: 1, childCount: 2 },
+  });
 
   const prevOpenRef = useRef(isSecondaryPanelOpen);
   useEffect(() => {
@@ -88,9 +103,14 @@ export function useSecondaryPanelResize({
           return;
         }
 
+        finishSecondaryPanelResizeSnap();
         finishSecondaryPanelDragging();
       },
-      [finishSecondaryPanelDragging, setIsResizing],
+      [
+        finishSecondaryPanelDragging,
+        finishSecondaryPanelResizeSnap,
+        setIsResizing,
+      ],
     );
 
   useEffect(
@@ -157,6 +177,7 @@ export function useSecondaryPanelResize({
   return {
     handleSecondaryPanelDragging,
     handleSecondaryPanelResize,
+    handleSecondaryPanelResizePointerDownCapture,
     persistedWidthPercent,
     secondaryPanelRef,
     secondaryResizablePanelRef,
diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
new file mode 100644
index 0000000000..ddbb998241
--- /dev/null
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -0,0 +1,248 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createSplitResizeSnapSession } from "./split-resize-snap";
+
+const SNAP_CAPTURE_PX = 12;
+const SNAP_RELEASE_PX = 30;
+
+function rect({
+  height = 600,
+  left,
+  top = 0,
+  width = 1,
+}: {
+  height?: number;
+  left: number;
+  top?: number;
+  width?: number;
+}): DOMRect {
+  return {
+    bottom: top + height,
+    height,
+    left,
+    right: left + width,
+    top,
+    width,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  };
+}
+
+function divider(bounds: DOMRect, gridBounds: DOMRect): HTMLElement {
+  const grid = document.createElement("div");
+  grid.dataset.splitResizeGridRoot = "";
+  grid.getBoundingClientRect = () => gridBounds;
+  const split = document.createElement("div");
+  const element = document.createElement("div");
+  element.getBoundingClientRect = () => bounds;
+  split.appendChild(element);
+  grid.appendChild(split);
+  document.body.appendChild(grid);
+  return element;
+}
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("split resize snapping", () => {
+  it("snaps the first vertical divider to the one-third boundary", () => {
+    const source = divider(
+      rect({ left: 650 }),
+      rect({ height: 600, left: 100, top: 50, width: 800 }),
+    );
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 3,
+    });
+
+    const result = session.resolve({
+      end: 900,
+      pointer: 366.5 + SNAP_CAPTURE_PX,
+      start: 250,
+    });
+
+    expect(result).toEqual({
+      coordinate: 366.5,
+      fraction: 116 / 649,
+      snapped: true,
+    });
+    const guide = document.querySelector<HTMLElement>(
+      "[data-split-resize-snap-guide]",
+    );
+    expect(guide?.dataset.splitResizeSnapGuide).toBe("x");
+    expect(guide?.style.left).toBe("366.5px");
+    expect(guide?.style.top).toBe("50px");
+    expect(guide?.style.height).toBe("600px");
+
+    session.clear();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("snaps the third horizontal divider to the three-quarter boundary", () => {
+    const source = divider(
+      rect({ height: 1, left: 0, top: 600, width: 900 }),
+      rect({ height: 800, left: 40, top: 100, width: 900 }),
+    );
+    const session = createSplitResizeSnapSession(source, "y", {
+      boundaryIndex: 3,
+      childCount: 4,
+    });
+
+    const result = session.resolve({
+      end: 900,
+      pointer: 700.25 - SNAP_CAPTURE_PX,
+      start: 500,
+    });
+
+    expect(result).toEqual({
+      coordinate: 700.25,
+      fraction: 199.75 / 399,
+      snapped: true,
+    });
+    const guide = document.querySelector<HTMLElement>(
+      "[data-split-resize-snap-guide]",
+    );
+    expect(guide?.dataset.splitResizeSnapGuide).toBe("y");
+    expect(guide?.style.left).toBe("40px");
+    expect(guide?.style.top).toBe("700.25px");
+    expect(guide?.style.width).toBe("900px");
+  });
+
+  it("captures a fast crossing and holds until the pointer clears the release threshold", () => {
+    const source = divider(
+      rect({ left: 500 }),
+      rect({ left: 100, width: 800 }),
+    );
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
+
+    expect(
+      session.resolve({ end: 900, pointer: 470, start: 100 }).snapped,
+    ).toBe(false);
+    expect(
+      session.resolve({ end: 900, pointer: 518, start: 100 }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({
+        end: 900,
+        pointer: 500 + SNAP_RELEASE_PX,
+        start: 100,
+      }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({
+        end: 900,
+        pointer: 500 + SNAP_RELEASE_PX + 1,
+        start: 100,
+      }).snapped,
+    ).toBe(true);
+    const result = session.resolve({
+      end: 900,
+      pointer: 500 + SNAP_RELEASE_PX + 2,
+      start: 100,
+    });
+
+    expect(result.snapped).toBe(false);
+    expect(result.fraction).toBeCloseTo(
+      (500 + SNAP_RELEASE_PX + 2 - 100) / 800,
+      6,
+    );
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("captures a fast crossing when the next pointer sample lands beyond the release threshold", () => {
+    const source = divider(
+      rect({ left: 500 }),
+      rect({ left: 100, width: 800 }),
+    );
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
+
+    expect(
+      session.resolve({ end: 900, pointer: 470, start: 100 }).snapped,
+    ).toBe(false);
+    expect(
+      session.resolve({ end: 900, pointer: 560, start: 100 }),
+    ).toMatchObject({ coordinate: 500, snapped: true });
+    expect(
+      session.resolve({ end: 900, pointer: 560, start: 100 }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({
+        end: 900,
+        pointer: 560 + SNAP_RELEASE_PX,
+        start: 100,
+      }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({
+        end: 900,
+        pointer: 560 + SNAP_RELEASE_PX + 1,
+        start: 100,
+      }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({
+        end: 900,
+        pointer: 560 + SNAP_RELEASE_PX + 2,
+        start: 100,
+      }).snapped,
+    ).toBe(false);
+  });
+
+  it("confirms release after a fast crossing instead of dropping the snap on the next coarse sample", () => {
+    const source = divider(
+      rect({ left: 500 }),
+      rect({ left: 100, width: 800 }),
+    );
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
+
+    expect(
+      session.resolve({ end: 900, pointer: 470, start: 100 }).snapped,
+    ).toBe(false);
+    expect(
+      session.resolve({ end: 900, pointer: 560, start: 100 }).snapped,
+    ).toBe(true);
+
+    // Browsers may coalesce fast hardware motion into samples that leap over
+    // both snap bands. One such sample arms release; a second confirms intent.
+    expect(
+      session.resolve({ end: 900, pointer: 640, start: 100 }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({ end: 900, pointer: 641, start: 100 }).snapped,
+    ).toBe(false);
+  });
+
+  it("reads the divider and grid geometry once instead of during pointer movement", () => {
+    const source = divider(
+      rect({ left: 500 }),
+      rect({ left: 100, width: 800 }),
+    );
+    const grid = source.closest<HTMLElement>("[data-split-resize-grid-root]");
+    if (grid === null) throw new Error("Expected a split resize grid root");
+    const sourceRect = vi.spyOn(source, "getBoundingClientRect");
+    const gridRect = vi.spyOn(grid, "getBoundingClientRect");
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
+
+    for (let pointer = 495; pointer <= 505; pointer += 1) {
+      session.resolve({ end: 900, pointer, start: 100 });
+    }
+
+    expect(sourceRect).toHaveBeenCalledTimes(1);
+    expect(gridRect).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
new file mode 100644
index 0000000000..ec892a72d8
--- /dev/null
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -0,0 +1,221 @@
+import { clampSplitPairFraction } from "@/lib/split-layout";
+
+export type SplitResizeAxis = "x" | "y";
+
+export const SPLIT_RESIZE_SNAP_CAPTURE_PX = 12;
+export const SPLIT_RESIZE_SNAP_RELEASE_PX = 30;
+
+interface ResolveSplitResizePositionArgs {
+  end: number;
+  pointer: number;
+  start: number;
+}
+
+export interface ResolvedSplitResizePosition {
+  coordinate: number;
+  fraction: number;
+  snapped: boolean;
+}
+
+export interface SplitResizeSnapSession {
+  clear: () => void;
+  resolve: (
+    args: ResolveSplitResizePositionArgs,
+  ) => ResolvedSplitResizePosition;
+}
+
+export interface SplitResizeGridTarget {
+  boundaryIndex: number;
+  childCount: number;
+}
+
+function createGuide(
+  document: Document,
+  axis: SplitResizeAxis,
+  coordinate: number,
+  gridRect: DOMRect,
+): HTMLElement {
+  const guide = document.createElement("div");
+  guide.setAttribute("aria-hidden", "true");
+  guide.dataset.splitResizeSnapGuide = axis;
+  guide.className =
+    axis === "x"
+      ? "pointer-events-none fixed z-[100] w-px -translate-x-1/2 bg-ring/50"
+      : "pointer-events-none fixed z-[100] h-px -translate-y-1/2 bg-ring/50";
+  if (axis === "x") {
+    guide.style.height = `${gridRect.height}px`;
+    guide.style.left = `${coordinate}px`;
+    guide.style.top = `${gridRect.top}px`;
+  } else {
+    guide.style.left = `${gridRect.left}px`;
+    guide.style.top = `${coordinate}px`;
+    guide.style.width = `${gridRect.width}px`;
+  }
+  document.body.appendChild(guide);
+  return guide;
+}
+
+function axisExtent(rect: DOMRect, axis: SplitResizeAxis): number {
+  return axis === "x" ? rect.width : rect.height;
+}
+
+function equalGridCoordinate(
+  gridRect: DOMRect,
+  axis: SplitResizeAxis,
+  dividerExtent: number,
+  target: SplitResizeGridTarget,
+): number | null {
+  const { boundaryIndex, childCount } = target;
+  if (
+    !Number.isInteger(boundaryIndex) ||
+    !Number.isInteger(childCount) ||
+    childCount < 2 ||
+    boundaryIndex < 1 ||
+    boundaryIndex >= childCount
+  ) {
+    return null;
+  }
+  const span = axisExtent(gridRect, axis);
+  const contentSpan = span - dividerExtent * (childCount - 1);
+  if (contentSpan <= 0) return null;
+  const start = axis === "x" ? gridRect.left : gridRect.top;
+  return (
+    start +
+    (contentSpan * boundaryIndex) / childCount +
+    dividerExtent * (boundaryIndex - 0.5)
+  );
+}
+
+/**
+ * Starts one divider drag's snap lifecycle. Every split node owns an equal
+ * sibling grid: two children snap to halves, three to thirds, and so on.
+ * Capture and release use different thresholds to create magnetic resistance,
+ * and geometry is read only once.
+ */
+export function createSplitResizeSnapSession(
+  divider: HTMLElement,
+  axis: SplitResizeAxis,
+  target: SplitResizeGridTarget,
+): SplitResizeSnapSession {
+  let guide: HTMLElement | null = null;
+  let fastCrossingAnchor: number | null = null;
+  let lastPointer: number | null = null;
+  let releasePending = false;
+  let snapped = false;
+  const grid = divider.closest<HTMLElement>("[data-split-resize-grid-root]");
+  const gridRect = grid?.getBoundingClientRect() ?? null;
+  const extent = axisExtent(divider.getBoundingClientRect(), axis);
+  const gridCoordinate =
+    gridRect === null
+      ? null
+      : equalGridCoordinate(gridRect, axis, extent, target);
+
+  const clear = () => {
+    guide?.remove();
+    guide = null;
+    fastCrossingAnchor = null;
+    lastPointer = null;
+    releasePending = false;
+    snapped = false;
+  };
+
+  const showGuide = (coordinate: number) => {
+    if (gridRect === null) return;
+    guide ??= createGuide(divider.ownerDocument, axis, coordinate, gridRect);
+    if (axis === "x") guide.style.left = `${coordinate}px`;
+    else guide.style.top = `${coordinate}px`;
+  };
+
+  const hideGuide = () => {
+    guide?.remove();
+    guide = null;
+  };
+
+  return {
+    clear,
+    resolve: ({ end, pointer, start }) => {
+      const span = end - start;
+      const unsnappedFraction = clampSplitPairFraction(
+        span > 0 ? (pointer - start) / span : 0.5,
+      );
+      const previousPointer = lastPointer;
+      lastPointer = pointer;
+      const contentSpan = span - extent;
+      if (gridCoordinate === null || contentSpan <= 0) {
+        releasePending = false;
+        snapped = false;
+        hideGuide();
+        return {
+          coordinate: start + span * unsnappedFraction,
+          fraction: unsnappedFraction,
+          snapped: false,
+        };
+      }
+
+      const fraction = clampSplitPairFraction(
+        (gridCoordinate - start - extent / 2) / contentSpan,
+      );
+      const coordinate = start + contentSpan * fraction + extent / 2;
+      const reachable = Math.abs(coordinate - gridCoordinate) <= 0.01;
+      const distance = Math.abs(pointer - gridCoordinate);
+      const previousDelta =
+        previousPointer === null ? null : previousPointer - gridCoordinate;
+      const pointerDelta = pointer - gridCoordinate;
+      const crossedGrid =
+        previousDelta !== null &&
+        ((previousDelta < 0 && pointerDelta >= 0) ||
+          (previousDelta > 0 && pointerDelta <= 0));
+      let shouldSnap = false;
+      if (reachable) {
+        if (distance <= SPLIT_RESIZE_SNAP_CAPTURE_PX) {
+          fastCrossingAnchor = null;
+          releasePending = false;
+          shouldSnap = true;
+        } else if (crossedGrid) {
+          // Pointer events can jump over the entire release zone during a
+          // fast drag. Anchor hysteresis at that sample so the crossing still
+          // produces a deliberate stop instead of being discarded.
+          fastCrossingAnchor =
+            distance > SPLIT_RESIZE_SNAP_RELEASE_PX ? pointer : null;
+          releasePending = false;
+          shouldSnap = true;
+        } else if (snapped) {
+          if (distance <= SPLIT_RESIZE_SNAP_RELEASE_PX) {
+            fastCrossingAnchor = null;
+            releasePending = false;
+            shouldSnap = true;
+          } else if (
+            fastCrossingAnchor !== null &&
+            Math.abs(pointer - fastCrossingAnchor) <=
+              SPLIT_RESIZE_SNAP_RELEASE_PX
+          ) {
+            releasePending = false;
+            shouldSnap = true;
+          } else if (!releasePending) {
+            // A fast pointer can cross the entire exit band between rendered
+            // frames. Require a second consecutive out-of-band sample so the
+            // captured state produces real resistance instead of a one-frame
+            // guide flash; returning to either band cancels the pending exit.
+            releasePending = true;
+            shouldSnap = true;
+          }
+        }
+      }
+      if (!shouldSnap) {
+        fastCrossingAnchor = null;
+        releasePending = false;
+        snapped = false;
+        hideGuide();
+        return {
+          coordinate: start + span * unsnappedFraction,
+          fraction: unsnappedFraction,
+          snapped: false,
+        };
+      }
+
+      snapped = true;
+      showGuide(coordinate);
+      return { coordinate, fraction, snapped: true };
+    },
+  };
+}
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
index f9b3cd70d3..eda46ccca2 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -147,8 +147,8 @@ vi.mock("react-resizable-panels", async () => {
       getLayout: () => number[];
       setLayout: (layout: number[]) => void;
     },
-    { children?: ReactNode }
-  >(({ children }, ref) => {
+    React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode }
+  >(({ children, ...props }, ref) => {
     React.useImperativeHandle(
       ref,
       () => ({
@@ -159,7 +159,11 @@ vi.mock("react-resizable-panels", async () => {
       }),
       [],
     );
-    return <div data-testid="workspace-panel-group">{children}</div>;
+    return (
+      <div {...props} data-testid="workspace-panel-group">
+        {children}
+      </div>
+    );
   });
   PanelGroup.displayName = "MockPanelGroup";
   // Record each panel's lifecycle callbacks so a test can fire the ones the
@@ -1175,6 +1179,112 @@ describe("SplitThreadArea", () => {
     expect(offscreenRow.style.containIntrinsicBlockSize).toBe("");
   });
 
+  it("snaps a workspace divider to its equal two-pane boundary and clears its guide", () => {
+    const store = renderSplitArea({
+      path: threadPath("thr-a"),
+      layout: twoPaneLayout("pane-1"),
+    });
+    const separator = screen.getByRole("separator");
+    const previous = separator.previousElementSibling;
+    const next = separator.nextElementSibling;
+    const hitTarget = separator.querySelector<HTMLElement>(
+      "[data-split-divider-hit-target]",
+    );
+    if (
+      hitTarget === null ||
+      !(previous instanceof HTMLElement) ||
+      !(next instanceof HTMLElement)
+    ) {
+      throw new Error("Expected adjacent workspace split items");
+    }
+    const grid = separator.parentElement;
+    if (grid === null) throw new Error("Expected a workspace split grid");
+    expect(separator.dataset.splitResizeGridBoundary).toBe("1");
+    expect(separator.dataset.splitResizeGridCount).toBe("2");
+    Object.defineProperties(hitTarget, {
+      releasePointerCapture: { configurable: true, value: vi.fn() },
+      setPointerCapture: { configurable: true, value: vi.fn() },
+    });
+    vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 300,
+      right: 500,
+      top: 0,
+      width: 200,
+      x: 300,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 501,
+      right: 900,
+      top: 0,
+      width: 399,
+      x: 501,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 500,
+      right: 501,
+      top: 0,
+      width: 1,
+      x: 500,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(grid, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 100,
+      right: 900,
+      top: 0,
+      width: 800,
+      x: 100,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 31 });
+    fireEvent.pointerMove(hitTarget, { clientX: 518, pointerId: 31 });
+
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(
+      199.5 / 599,
+      5,
+    );
+    expect(
+      document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
+        ?.style.left,
+    ).toBe("500px");
+
+    fireEvent.pointerUp(hitTarget, { clientX: 518, pointerId: 31 });
+
+    const root = store.get(splitLayoutAtom)?.root;
+    expect(root?.type).toBe("split");
+    if (root?.type === "split") {
+      expect(root.sizes[0]).toBeCloseTo(199.5 / 599, 5);
+      expect(root.sizes[1]).toBeCloseTo(399.5 / 599, 5);
+    }
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("keeps workspace separators out of the tab order", () => {
+    renderSplitArea({
+      path: threadPath("thr-a"),
+      layout: twoPaneLayout("pane-1"),
+    });
+
+    const separator = screen.getByRole("separator");
+    fireEvent.keyDown(separator, { key: "ArrowRight" });
+
+    expect(separator.tabIndex).toBe(-1);
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
   it("gives a top-to-bottom split a full-width drag target without thickening its seam", () => {
     const store = renderSplitArea({
       path: threadPath("thr-a"),
@@ -1251,6 +1361,10 @@ describe("SplitThreadArea", () => {
     });
 
     const toggle = await screen.findByTestId("split-workspace-panel-toggle");
+    expect(
+      screen.getByTestId("workspace-panel-group").dataset
+        .splitResizeGridRoot,
+    ).toBe("");
     expect(
       screen.queryAllByTestId("split-workspace-panel-toggle"),
     ).toHaveLength(1);
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 70dd441b58..60af212152 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -32,7 +32,6 @@ import {
   splitLayoutAtom,
 } from "@/lib/split-layout/atoms";
 import {
-  clampSplitPairFraction,
   computePaneRects,
   countPanes,
   findPane,
@@ -44,6 +43,7 @@ import {
   setFocus,
   swapPanes,
 } from "@/lib/split-layout";
+import { createSplitResizeSnapSession } from "@/lib/split-resize-snap";
 import type {
   LayoutNode,
   PaneContent,
@@ -889,6 +889,7 @@ function SplitTree(props: SplitTreeProps) {
 
   return (
     <div
+      data-split-resize-grid-root=""
       className={cn(
         "flex min-h-0 min-w-0 flex-1",
         node.dir === "col" ? "flex-col" : "flex-row",
@@ -898,6 +899,8 @@ function SplitTree(props: SplitTreeProps) {
         <Fragment key={paneKey(child)}>
           {index > 0 ? (
             <SplitDivider
+              boundaryIndex={index}
+              childCount={node.children.length}
               dir={node.dir}
               hidden={props.maximizedPaneId !== null}
               onResize={(fraction) => props.onResize(path, index - 1, fraction)}
@@ -1313,6 +1316,8 @@ function NonThreadPaneContent({
 }
 
 interface SplitDividerProps {
+  boundaryIndex: number;
+  childCount: number;
   dir: "row" | "col";
   hidden: boolean;
   onResize: (fraction: number) => void;
@@ -1393,12 +1398,26 @@ function freezeOffscreenTimelineRows(
   };
 }
 
-function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
+function SplitDivider({
+  boundaryIndex,
+  childCount,
+  dir,
+  hidden,
+  onResize,
+}: SplitDividerProps) {
   const horizontal = dir === "row";
+  const finishResizeRef = useRef<(() => void) | null>(null);
+  useEffect(
+    () => () => {
+      finishResizeRef.current?.();
+    },
+    [],
+  );
 
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       event.preventDefault();
+      finishResizeRef.current?.();
       const hitTarget = event.currentTarget;
       const divider = hitTarget.parentElement;
       if (!(divider instanceof HTMLDivElement)) {
@@ -1425,6 +1444,14 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
 
       hitTarget.setPointerCapture(event.pointerId);
       divider.dataset.dragging = "true";
+      const pointerId = event.pointerId;
+      const snapSession = createSplitResizeSnapSession(
+        divider,
+        horizontal ? "x" : "y",
+        { boundaryIndex, childCount },
+      );
+      const pointerDownPosition = horizontal ? event.clientX : event.clientY;
+      snapSession.resolve({ end, pointer: pointerDownPosition, start });
 
       const previousGrow = Number.parseFloat(
         window.getComputedStyle(previous).flexGrow,
@@ -1445,8 +1472,13 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
       let finished = false;
 
       const onMove = (moveEvent: PointerEvent) => {
+        if (moveEvent.pointerId !== pointerId) return;
         const pointer = horizontal ? moveEvent.clientX : moveEvent.clientY;
-        const fraction = clampSplitPairFraction((pointer - start) / span);
+        const { fraction } = snapSession.resolve({
+          end,
+          pointer,
+          start,
+        });
         pendingFraction = fraction;
 
         // Keep high-frequency drag state local to the two flex items. Writing
@@ -1458,10 +1490,16 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
       const finish = (commit: boolean) => {
         if (finished) return;
         finished = true;
+        finishResizeRef.current = null;
         delete divider.dataset.dragging;
         hitTarget.removeEventListener("pointermove", onMove);
         hitTarget.removeEventListener("pointerup", onUp);
         hitTarget.removeEventListener("pointercancel", onCancel);
+        hitTarget.removeEventListener("lostpointercapture", onLostCapture);
+        if (hitTarget.hasPointerCapture?.(pointerId)) {
+          hitTarget.releasePointerCapture(pointerId);
+        }
+        snapSession.clear();
         restoreTimelineRows();
         if (commit && pendingFraction !== null) {
           // Commit once so the imperative flex values above become the
@@ -1472,18 +1510,32 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         previous.style.flex = previousFlex;
         next.style.flex = nextFlex;
       };
-      const onUp = () => finish(true);
-      const onCancel = () => finish(false);
+      const onUp = (upEvent: PointerEvent) => {
+        if (upEvent.pointerId !== pointerId) return;
+        finish(true);
+      };
+      const onCancel = (cancelEvent: PointerEvent) => {
+        if (cancelEvent.pointerId !== pointerId) return;
+        finish(false);
+      };
+      const onLostCapture = (lostEvent: PointerEvent) => {
+        if (lostEvent.pointerId !== pointerId) return;
+        finish(false);
+      };
       hitTarget.addEventListener("pointermove", onMove);
       hitTarget.addEventListener("pointerup", onUp);
       hitTarget.addEventListener("pointercancel", onCancel);
+      hitTarget.addEventListener("lostpointercapture", onLostCapture);
+      finishResizeRef.current = () => finish(false);
     },
-    [horizontal, onResize],
+    [boundaryIndex, childCount, horizontal, onResize],
   );
 
   return (
     <div
       role="separator"
+      data-split-resize-grid-boundary={boundaryIndex}
+      data-split-resize-grid-count={childCount}
       aria-orientation={horizontal ? "vertical" : "horizontal"}
       className={cn(
         // A one-pixel seam between flush tiles — squared ends, no rounding,
diff --git a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
index 9a18deb16b..30a169d5fb 100644
--- a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
+++ b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
@@ -1,4 +1,5 @@
 import {
+  useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -42,6 +43,7 @@ import {
 } from "@/components/secondary-panel/panelTransitionTokens";
 import { MACOS_APP_REGION_NO_DRAG_CLASS } from "@/lib/bb-desktop";
 import { PluginComposerHostProvider } from "@/components/plugin/plugin-composer-host";
+import { usePanelResizeSnap } from "@/components/secondary-panel/usePanelResizeSnap";
 import {
   type PaneSecondaryPanelRegistry,
   usePaneSecondaryPanelModel,
@@ -173,11 +175,30 @@ export function SplitWorkspaceSecondaryPanelHost({
   // pane's panel shows next. Dragging it collapsed closes the window panel.
   const setPanelWidthPercent = useSetAtom(secondaryPanelWidthPercentAtom);
   const lastEmptyPanelSizeRef = useRef(0);
+  const handleEmptyPanelPointerResize = useCallback(
+    (leadingFraction: number) => {
+      panelGroupRef.current?.setLayout([
+        leadingFraction * 100,
+        (1 - leadingFraction) * 100,
+      ]);
+    },
+    [],
+  );
+  const {
+    finish: finishEmptyPanelResizeSnap,
+    onPointerDownCapture: handleEmptyPanelResizePointerDownCapture,
+  } = usePanelResizeSnap({
+    axis: "x",
+    onResize: handleEmptyPanelPointerResize,
+    target: { boundaryIndex: 1, childCount: 2 },
+  });
   const handleEmptyPanelResize = (size: number) => {
     if (size > 0) lastEmptyPanelSizeRef.current = size;
   };
   const handleEmptyPanelDragging = (isDragging: boolean) => {
-    if (isDragging || lastEmptyPanelSizeRef.current <= 0) return;
+    if (isDragging) return;
+    finishEmptyPanelResizeSnap();
+    if (lastEmptyPanelSizeRef.current <= 0) return;
     setPanelWidthPercent(lastEmptyPanelSizeRef.current);
   };
   const handleEmptyPanelCollapse = () => {
@@ -255,6 +276,7 @@ export function SplitWorkspaceSecondaryPanelHost({
         </div>
         <PanelGroup
           ref={panelGroupRef}
+          data-split-resize-grid-root=""
           direction="horizontal"
           className="@container h-full min-w-0 flex-1"
           style={{ overflow: "clip" }}
@@ -294,6 +316,10 @@ export function SplitWorkspaceSecondaryPanelHost({
                 id="split-workspace-empty-secondary-panel-handle"
                 disabled={!isOpen}
                 onDragging={handleEmptyPanelDragging}
+                onPointerDownCapture={(event) =>
+                  handleEmptyPanelResizePointerDownCapture(event.nativeEvent)
+                }
+                data-panel-resize-snap-handle=""
                 hitAreaMargins={PANEL_RESIZE_HIT_AREA_MARGINS}
                 className={cn(
                   "relative shrink-0 overflow-visible bg-border-seam transition-[width,opacity,background-color] hover:bg-ring/40 data-[resize-handle-state=drag]:bg-ring/40",