From 27b6f806be5359dbc1d4b11d096216e05682ccde Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 03:55:00 -0700
Subject: [PATCH 01/15] Add split resize snap targets

---
 .../SidebarSplitContainer.test.tsx            | 111 +++++++++++
 .../secondary-panel/SidebarSplitContainer.tsx |  16 +-
 apps/app/src/lib/split-resize-snap.test.ts    | 109 +++++++++++
 apps/app/src/lib/split-resize-snap.ts         | 185 ++++++++++++++++++
 .../thread-detail/SplitThreadArea.test.tsx    | 108 ++++++++++
 .../views/thread-detail/SplitThreadArea.tsx   |  41 +++-
 6 files changed, 562 insertions(+), 8 deletions(-)
 create mode 100644 apps/app/src/lib/split-resize-snap.test.ts
 create mode 100644 apps/app/src/lib/split-resize-snap.ts

diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 6aa6f4e507..4cd02df376 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,116 @@ describe("SidebarSplitContainer", () => {
     });
   });
 
+  it("snaps a right-panel divider to a workspace divider and persists the exact fraction", () => {
+    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: () => ({}),
+    });
+    vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 400,
+      right: 401,
+      top: 0,
+      width: 1,
+      x: 400,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const workspaceDivider = document.createElement("div");
+    workspaceDivider.dataset.splitResizeAxis = "x";
+    workspaceDivider.getBoundingClientRect = () => ({
+      bottom: 600,
+      height: 600,
+      left: 560,
+      right: 561,
+      top: 0,
+      width: 1,
+      x: 560,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const workspaceSplit = document.createElement("div");
+    workspaceSplit.appendChild(workspaceDivider);
+    document.body.appendChild(workspaceSplit);
+
+    fireEvent.pointerDown(hitTarget, { clientX: 400.5, pointerId: 32 });
+    fireEvent.pointerMove(hitTarget, { clientX: 567, pointerId: 32 });
+
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.7, 5);
+    expect(workspaceDivider.dataset.splitResizeSnapTarget).toBe("true");
+    expect(
+      document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
+        ?.style.left,
+    ).toBe("560.5px");
+
+    fireEvent.pointerUp(hitTarget, { clientX: 567, 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(0.7, 5);
+      expect(persisted.layout.root.sizes[1]).toBeCloseTo(0.3, 5);
+    }
+    expect(workspaceDivider.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+    workspaceSplit.remove();
+  });
+
+  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..3a6f60d5c8 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 {
@@ -758,6 +758,10 @@ function SidebarSplitDivider({
       const pair = createSidebarSplitResizePair(previous, next);
       hitTarget.setPointerCapture(pointerId);
       divider.dataset.dragging = "true";
+      const snapSession = createSplitResizeSnapSession(
+        divider,
+        horizontal ? "x" : "y",
+      );
       let pendingFraction: number | null = null;
       let receivedPointerMove = false;
       let finished = false;
@@ -765,7 +769,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`;
@@ -787,6 +795,7 @@ function SidebarSplitDivider({
         if (hitTarget.hasPointerCapture?.(pointerId)) {
           hitTarget.releasePointerCapture(pointerId);
         }
+        snapSession.clear();
         onResizeDragChange(null);
         onPreviewResize(null);
         if (commit && pendingFraction !== null) {
@@ -823,6 +832,7 @@ function SidebarSplitDivider({
   return (
     <div
       role="separator"
+      data-split-resize-axis={horizontal ? "x" : "y"}
       aria-hidden={hidden || undefined}
       aria-label={
         horizontal
@@ -831,7 +841,7 @@ function SidebarSplitDivider({
       }
       aria-orientation={horizontal ? "vertical" : "horizontal"}
       className={cn(
-        "group relative z-[25] shrink-0 bg-border-seam transition-colors hover:bg-ring/40 data-[dragging]:bg-ring/40",
+        "group relative z-[25] shrink-0 bg-border-seam transition-colors hover:bg-ring/40 data-[dragging]:bg-ring/40 data-[split-resize-snap-target]:bg-ring/60",
         MACOS_APP_REGION_NO_DRAG_CLASS,
         "pointer-events-auto",
         hidden && "invisible pointer-events-none",
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..b7efe4af2a
--- /dev/null
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  createSplitResizeSnapSession,
+  SPLIT_RESIZE_SNAP_THRESHOLD_PX,
+} from "./split-resize-snap";
+
+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(axis: "x" | "y", bounds: DOMRect): HTMLElement {
+  const split = document.createElement("div");
+  const element = document.createElement("div");
+  element.dataset.splitResizeAxis = axis;
+  element.getBoundingClientRect = () => bounds;
+  split.appendChild(element);
+  document.body.appendChild(split);
+  return element;
+}
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("split resize snapping", () => {
+  it("snaps within the threshold to the exact same-axis coordinate", () => {
+    const source = divider("x", rect({ left: 300 }));
+    const target = divider("x", rect({ left: 500 }));
+    const session = createSplitResizeSnapSession(source, "x");
+
+    const result = session.resolve({
+      end: 900,
+      pointer: 500.5 + SPLIT_RESIZE_SNAP_THRESHOLD_PX,
+      start: 100,
+    });
+
+    expect(result).toEqual({
+      coordinate: 500.5,
+      fraction: 400 / 799,
+      snapped: true,
+    });
+    expect(target.dataset.splitResizeSnapTarget).toBe("true");
+    const guide = document.querySelector<HTMLElement>(
+      "[data-split-resize-snap-guide]",
+    );
+    expect(guide?.dataset.splitResizeSnapGuide).toBe("x");
+    expect(guide?.style.left).toBe("500.5px");
+
+    session.clear();
+    expect(target.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("clears the guide outside the threshold and ignores the cross axis", () => {
+    const source = divider("x", rect({ left: 300 }));
+    const sameAxis = divider("x", rect({ left: 500 }));
+    divider("y", rect({ height: 1, left: 0, top: 510, width: 900 }));
+    const session = createSplitResizeSnapSession(source, "x");
+
+    expect(
+      session.resolve({ end: 900, pointer: 500, start: 100 }).snapped,
+    ).toBe(true);
+    const unsnapped = session.resolve({
+      end: 900,
+      pointer: 500.5 + SPLIT_RESIZE_SNAP_THRESHOLD_PX + 0.1,
+      start: 100,
+    });
+
+    expect(unsnapped.snapped).toBe(false);
+    expect(unsnapped.fraction).toBeCloseTo(0.51075, 5);
+    expect(sameAxis.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+
+  it("does not advertise an aligned target that the resize bounds cannot reach", () => {
+    const source = divider("x", rect({ left: 300 }));
+    const target = divider("x", rect({ left: 40 }));
+    const session = createSplitResizeSnapSession(source, "x");
+
+    const result = session.resolve({ end: 900, pointer: 40.5, start: 100 });
+
+    expect(result.snapped).toBe(false);
+    expect(result.fraction).toBe(0.15);
+    expect(target.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+  });
+});
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..66a6ce2c09
--- /dev/null
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -0,0 +1,185 @@
+import { clampSplitPairFraction } from "@/lib/split-layout";
+
+export type SplitResizeAxis = "x" | "y";
+
+export const SPLIT_RESIZE_SNAP_THRESHOLD_PX = 8;
+
+interface ResolveSplitResizePositionArgs {
+  axis: SplitResizeAxis;
+  divider: HTMLElement;
+  end: number;
+  pointer: number;
+  start: number;
+}
+
+export interface ResolvedSplitResizePosition {
+  coordinate: number;
+  fraction: number;
+  snapped: boolean;
+}
+
+export interface SplitResizeSnapSession {
+  clear: () => void;
+  resolve: (
+    args: Omit<ResolveSplitResizePositionArgs, "axis" | "divider">,
+  ) => ResolvedSplitResizePosition;
+}
+
+function dividerCoordinate(rect: DOMRect, axis: SplitResizeAxis): number {
+  return axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+}
+
+function dividerExtent(rect: DOMRect, axis: SplitResizeAxis): number {
+  return axis === "x" ? rect.width : rect.height;
+}
+
+function isVisibleSnapTarget(element: HTMLElement, rect: DOMRect): boolean {
+  if (
+    element.getAttribute("aria-hidden") === "true" ||
+    element.closest('[aria-hidden="true"]') !== null
+  ) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  return (
+    rect.bottom > 0 &&
+    rect.right > 0 &&
+    rect.top < window.innerHeight &&
+    rect.left < window.innerWidth
+  );
+}
+
+function nearestSnapTarget(
+  divider: HTMLElement,
+  axis: SplitResizeAxis,
+  pointer: number,
+): { coordinate: number; element: HTMLElement } | null {
+  let nearest: { coordinate: number; element: HTMLElement } | null = null;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  const candidates = divider.ownerDocument.querySelectorAll<HTMLElement>(
+    `[data-split-resize-axis="${axis}"]`,
+  );
+  for (const candidate of candidates) {
+    const sourceSplit = divider.parentElement;
+    const candidateSplit = candidate.parentElement;
+    if (
+      candidate === divider ||
+      sourceSplit?.contains(candidate) === true ||
+      candidateSplit?.contains(divider) === true
+    ) {
+      continue;
+    }
+    const rect = candidate.getBoundingClientRect();
+    if (!isVisibleSnapTarget(candidate, rect)) continue;
+    const coordinate = dividerCoordinate(rect, axis);
+    const distance = Math.abs(coordinate - pointer);
+    if (
+      distance > SPLIT_RESIZE_SNAP_THRESHOLD_PX ||
+      distance >= nearestDistance
+    ) {
+      continue;
+    }
+    nearest = { coordinate, element: candidate };
+    nearestDistance = distance;
+  }
+  return nearest;
+}
+
+function createGuide(
+  document: Document,
+  axis: SplitResizeAxis,
+  coordinate: number,
+): HTMLElement {
+  const guide = document.createElement("div");
+  guide.setAttribute("aria-hidden", "true");
+  guide.dataset.splitResizeSnapGuide = axis;
+  guide.className =
+    axis === "x"
+      ? "pointer-events-none fixed inset-y-0 z-[100] w-px -translate-x-1/2 bg-ring/50"
+      : "pointer-events-none fixed inset-x-0 z-[100] h-px -translate-y-1/2 bg-ring/50";
+  if (axis === "x") guide.style.left = `${coordinate}px`;
+  else guide.style.top = `${coordinate}px`;
+  document.body.appendChild(guide);
+  return guide;
+}
+
+/**
+ * Starts one divider drag's snap lifecycle. Compatible dividers opt in with
+ * `data-split-resize-axis`; candidates are re-read for each move because a
+ * nested divider can itself move while an ancestor pair is resized.
+ */
+export function createSplitResizeSnapSession(
+  divider: HTMLElement,
+  axis: SplitResizeAxis,
+): SplitResizeSnapSession {
+  let guide: HTMLElement | null = null;
+  let target: HTMLElement | null = null;
+
+  const clear = () => {
+    guide?.remove();
+    guide = null;
+    if (target !== null) delete target.dataset.splitResizeSnapTarget;
+    target = null;
+  };
+
+  const showSnapTarget = (element: HTMLElement, coordinate: number) => {
+    if (target !== element) {
+      if (target !== null) delete target.dataset.splitResizeSnapTarget;
+      target = element;
+      target.dataset.splitResizeSnapTarget = "true";
+    }
+    guide ??= createGuide(divider.ownerDocument, axis, coordinate);
+    if (axis === "x") guide.style.left = `${coordinate}px`;
+    else guide.style.top = `${coordinate}px`;
+  };
+
+  return {
+    clear,
+    resolve: ({ end, pointer, start }) => {
+      const span = end - start;
+      const unsnappedFraction = clampSplitPairFraction(
+        span > 0 ? (pointer - start) / span : 0.5,
+      );
+      const candidate = nearestSnapTarget(divider, axis, pointer);
+      if (candidate === null || span <= 0) {
+        clear();
+        return {
+          coordinate: start + span * unsnappedFraction,
+          fraction: unsnappedFraction,
+          snapped: false,
+        };
+      }
+
+      // Flex lays the adjacent panes out in the pair's outer span minus this
+      // divider. Account for that one-pixel seam so the divider centers land
+      // on the same viewport coordinate instead of merely sharing a ratio.
+      const extent = dividerExtent(divider.getBoundingClientRect(), axis);
+      const contentSpan = span - extent;
+      if (contentSpan <= 0) {
+        clear();
+        return {
+          coordinate: start + span * unsnappedFraction,
+          fraction: unsnappedFraction,
+          snapped: false,
+        };
+      }
+      const fraction = clampSplitPairFraction(
+        (candidate.coordinate - start - extent / 2) / contentSpan,
+      );
+      const coordinate = start + contentSpan * fraction + extent / 2;
+      // A target outside the pair's 15–85% resize bounds is not reachable.
+      if (Math.abs(coordinate - candidate.coordinate) > 0.01) {
+        clear();
+        return {
+          coordinate: start + span * unsnappedFraction,
+          fraction: unsnappedFraction,
+          snapped: false,
+        };
+      }
+
+      showSnapTarget(candidate.element, 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..c54d5ff51f 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -1175,6 +1175,114 @@ describe("SplitThreadArea", () => {
     expect(offscreenRow.style.containIntrinsicBlockSize).toBe("");
   });
 
+  it("snaps a workspace divider to a visible right-panel divider 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");
+    }
+    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: 406,
+      right: 806,
+      top: 0,
+      width: 400,
+      x: 406,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 403,
+      right: 404,
+      top: 0,
+      width: 1,
+      x: 403,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const rightPanelDivider = document.createElement("div");
+    rightPanelDivider.dataset.splitResizeAxis = "x";
+    rightPanelDivider.getBoundingClientRect = () => ({
+      bottom: 600,
+      height: 600,
+      left: 563.5,
+      right: 564.5,
+      top: 0,
+      width: 1,
+      x: 563.5,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const rightPanelSplit = document.createElement("div");
+    rightPanelSplit.appendChild(rightPanelDivider);
+    document.body.appendChild(rightPanelSplit);
+
+    fireEvent.pointerDown(hitTarget, { clientX: 403.5, pointerId: 31 });
+    fireEvent.pointerMove(hitTarget, { clientX: 570, pointerId: 31 });
+
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.7, 5);
+    expect(rightPanelDivider.dataset.splitResizeSnapTarget).toBe("true");
+    expect(
+      document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
+        ?.style.left,
+    ).toBe("564px");
+
+    fireEvent.pointerUp(hitTarget, { clientX: 570, pointerId: 31 });
+
+    const root = store.get(splitLayoutAtom)?.root;
+    expect(root?.type).toBe("split");
+    if (root?.type === "split") {
+      expect(root.sizes[0]).toBeCloseTo(0.7, 5);
+      expect(root.sizes[1]).toBeCloseTo(0.3, 5);
+    }
+    expect(rightPanelDivider.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+    rightPanelSplit.remove();
+  });
+
+  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"),
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 70dd441b58..d5e5332e33 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,
@@ -1395,10 +1395,18 @@ function freezeOffscreenTimelineRows(
 
 function SplitDivider({ 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 +1433,11 @@ 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",
+      );
 
       const previousGrow = Number.parseFloat(
         window.getComputedStyle(previous).flexGrow,
@@ -1445,8 +1458,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 +1476,15 @@ 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);
+        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,11 +1495,18 @@ 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);
+      };
       hitTarget.addEventListener("pointermove", onMove);
       hitTarget.addEventListener("pointerup", onUp);
       hitTarget.addEventListener("pointercancel", onCancel);
+      finishResizeRef.current = () => finish(false);
     },
     [horizontal, onResize],
   );
@@ -1484,6 +1514,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
   return (
     <div
       role="separator"
+      data-split-resize-axis={horizontal ? "x" : "y"}
       aria-orientation={horizontal ? "vertical" : "horizontal"}
       className={cn(
         // A one-pixel seam between flush tiles — squared ends, no rounding,
@@ -1496,7 +1527,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         // lower divider layer loses the grab target to that header.
         "group relative z-[25] flex-shrink-0 transition-colors",
         "bg-border-seam",
-        "hover:bg-ring/40 data-[dragging]:bg-ring/40",
+        "hover:bg-ring/40 data-[dragging]:bg-ring/40 data-[split-resize-snap-target]:bg-ring/60",
         hidden && "invisible pointer-events-none",
         horizontal ? "w-px cursor-col-resize" : "h-px cursor-row-resize",
       )}

From 00e0e21d85b3ca2ca261341a69ab56d10482fcae Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 19:38:46 -0700
Subject: [PATCH 02/15] Prevent split resize input freezes

---
 .../SidebarSplitContainer.test.tsx            | 51 +++++++++++++++++++
 .../secondary-panel/SidebarSplitContainer.tsx |  6 +++
 apps/app/src/lib/split-resize-snap.test.ts    | 17 ++++++-
 apps/app/src/lib/split-resize-snap.ts         | 45 +++++++++++-----
 .../views/thread-detail/SplitThreadArea.tsx   |  6 +++
 5 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 4cd02df376..79bc323359 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -880,6 +880,57 @@ describe("SidebarSplitContainer", () => {
     workspaceSplit.remove();
   });
 
+  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({
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index 3a6f60d5c8..d54b9d1b5a 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -792,6 +792,7 @@ 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);
         }
@@ -821,9 +822,14 @@ 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");
     },
diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index b7efe4af2a..f345ebcf04 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   createSplitResizeSnapSession,
   SPLIT_RESIZE_SNAP_THRESHOLD_PX,
@@ -106,4 +106,19 @@ describe("split resize snapping", () => {
     expect(target.dataset.splitResizeSnapTarget).toBeUndefined();
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
+
+  it("reads target geometry once per drag instead of forcing layout on every pointer move", () => {
+    const source = divider("x", rect({ left: 300 }));
+    const target = divider("x", rect({ left: 500 }));
+    const sourceRect = vi.spyOn(source, "getBoundingClientRect");
+    const targetRect = vi.spyOn(target, "getBoundingClientRect");
+    const session = createSplitResizeSnapSession(source, "x");
+
+    for (let pointer = 495; pointer <= 505; pointer += 1) {
+      session.resolve({ end: 900, pointer, start: 100 });
+    }
+
+    expect(sourceRect).toHaveBeenCalledTimes(1);
+    expect(targetRect).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 66a6ce2c09..7f8638fccd 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -50,13 +50,16 @@ function isVisibleSnapTarget(element: HTMLElement, rect: DOMRect): boolean {
   );
 }
 
-function nearestSnapTarget(
+interface SplitResizeSnapTarget {
+  coordinate: number;
+  element: HTMLElement;
+}
+
+function listSnapTargets(
   divider: HTMLElement,
   axis: SplitResizeAxis,
-  pointer: number,
-): { coordinate: number; element: HTMLElement } | null {
-  let nearest: { coordinate: number; element: HTMLElement } | null = null;
-  let nearestDistance = Number.POSITIVE_INFINITY;
+): SplitResizeSnapTarget[] {
+  const targets: SplitResizeSnapTarget[] = [];
   const candidates = divider.ownerDocument.querySelectorAll<HTMLElement>(
     `[data-split-resize-axis="${axis}"]`,
   );
@@ -72,15 +75,30 @@ function nearestSnapTarget(
     }
     const rect = candidate.getBoundingClientRect();
     if (!isVisibleSnapTarget(candidate, rect)) continue;
-    const coordinate = dividerCoordinate(rect, axis);
-    const distance = Math.abs(coordinate - pointer);
+    targets.push({
+      coordinate: dividerCoordinate(rect, axis),
+      element: candidate,
+    });
+  }
+  return targets;
+}
+
+function nearestSnapTarget(
+  targets: SplitResizeSnapTarget[],
+  pointer: number,
+): SplitResizeSnapTarget | null {
+  let nearest: SplitResizeSnapTarget | null = null;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (const candidate of targets) {
+    if (!candidate.element.isConnected) continue;
+    const distance = Math.abs(candidate.coordinate - pointer);
     if (
       distance > SPLIT_RESIZE_SNAP_THRESHOLD_PX ||
       distance >= nearestDistance
     ) {
       continue;
     }
-    nearest = { coordinate, element: candidate };
+    nearest = candidate;
     nearestDistance = distance;
   }
   return nearest;
@@ -106,8 +124,10 @@ function createGuide(
 
 /**
  * Starts one divider drag's snap lifecycle. Compatible dividers opt in with
- * `data-split-resize-axis`; candidates are re-read for each move because a
- * nested divider can itself move while an ancestor pair is resized.
+ * `data-split-resize-axis`. Candidate geometry is captured once so the hot
+ * pointer-move path never forces layout after it writes the source pair's flex
+ * values. Ancestor and descendant dividers are excluded because their
+ * coordinates can move with the source pair.
  */
 export function createSplitResizeSnapSession(
   divider: HTMLElement,
@@ -115,6 +135,8 @@ export function createSplitResizeSnapSession(
 ): SplitResizeSnapSession {
   let guide: HTMLElement | null = null;
   let target: HTMLElement | null = null;
+  const targets = listSnapTargets(divider, axis);
+  const extent = dividerExtent(divider.getBoundingClientRect(), axis);
 
   const clear = () => {
     guide?.remove();
@@ -141,7 +163,7 @@ export function createSplitResizeSnapSession(
       const unsnappedFraction = clampSplitPairFraction(
         span > 0 ? (pointer - start) / span : 0.5,
       );
-      const candidate = nearestSnapTarget(divider, axis, pointer);
+      const candidate = nearestSnapTarget(targets, pointer);
       if (candidate === null || span <= 0) {
         clear();
         return {
@@ -154,7 +176,6 @@ export function createSplitResizeSnapSession(
       // Flex lays the adjacent panes out in the pair's outer span minus this
       // divider. Account for that one-pixel seam so the divider centers land
       // on the same viewport coordinate instead of merely sharing a ratio.
-      const extent = dividerExtent(divider.getBoundingClientRect(), axis);
       const contentSpan = span - extent;
       if (contentSpan <= 0) {
         clear();
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index d5e5332e33..2ad57a1a6f 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -1481,6 +1481,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         hitTarget.removeEventListener("pointermove", onMove);
         hitTarget.removeEventListener("pointerup", onUp);
         hitTarget.removeEventListener("pointercancel", onCancel);
+        hitTarget.removeEventListener("lostpointercapture", onLostCapture);
         if (hitTarget.hasPointerCapture?.(pointerId)) {
           hitTarget.releasePointerCapture(pointerId);
         }
@@ -1503,9 +1504,14 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         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],

From 2e49a840382b393c87a4f7ae7d5f1d377a9a6c6a Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 20:19:27 -0700
Subject: [PATCH 03/15] Snap split resizing to midpoint grid

---
 .../SidebarSplitContainer.test.tsx            |  38 ++---
 .../secondary-panel/SidebarSplitContainer.tsx |   3 +-
 apps/app/src/lib/split-resize-snap.test.ts    |  73 +++++-----
 apps/app/src/lib/split-resize-snap.ts         | 131 ++----------------
 .../thread-detail/SplitThreadArea.test.tsx    |  34 +----
 .../views/thread-detail/SplitThreadArea.tsx   |   3 +-
 6 files changed, 64 insertions(+), 218 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 79bc323359..2ca61efcc5 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -755,8 +755,8 @@ describe("SidebarSplitContainer", () => {
       clientY: 400,
       pointerId: 3,
     });
-    expect(Number.parseFloat(previous.style.flex)).toBeCloseTo(0.499, 3);
-    expect(Number.parseFloat(next.style.flex)).toBeCloseTo(0.501, 3);
+    expect(Number.parseFloat(previous.style.flex)).toBeCloseTo(0.5, 3);
+    expect(Number.parseFloat(next.style.flex)).toBeCloseTo(0.5, 3);
 
     fireEvent.pointerMove(hitTarget, {
       clientX: 700,
@@ -783,7 +783,7 @@ describe("SidebarSplitContainer", () => {
     });
   });
 
-  it("snaps a right-panel divider to a workspace divider and persists the exact fraction", () => {
+  it("snaps a right-panel divider to its horizontal midpoint and persists 50/50", () => {
     persistState(createTwoPaneState());
     renderContainer({
       renderPane: ({ paneId }) => <div>{paneId}</div>,
@@ -836,34 +836,16 @@ describe("SidebarSplitContainer", () => {
       y: 0,
       toJSON: () => ({}),
     });
-    const workspaceDivider = document.createElement("div");
-    workspaceDivider.dataset.splitResizeAxis = "x";
-    workspaceDivider.getBoundingClientRect = () => ({
-      bottom: 600,
-      height: 600,
-      left: 560,
-      right: 561,
-      top: 0,
-      width: 1,
-      x: 560,
-      y: 0,
-      toJSON: () => ({}),
-    });
-    const workspaceSplit = document.createElement("div");
-    workspaceSplit.appendChild(workspaceDivider);
-    document.body.appendChild(workspaceSplit);
-
     fireEvent.pointerDown(hitTarget, { clientX: 400.5, pointerId: 32 });
-    fireEvent.pointerMove(hitTarget, { clientX: 567, pointerId: 32 });
+    fireEvent.pointerMove(hitTarget, { clientX: 407.5, pointerId: 32 });
 
-    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.7, 5);
-    expect(workspaceDivider.dataset.splitResizeSnapTarget).toBe("true");
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.5, 5);
     expect(
       document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
         ?.style.left,
-    ).toBe("560.5px");
+    ).toBe("400.5px");
 
-    fireEvent.pointerUp(hitTarget, { clientX: 567, pointerId: 32 });
+    fireEvent.pointerUp(hitTarget, { clientX: 407.5, pointerId: 32 });
 
     const persisted = parseSidebarSplitState(
       window.localStorage.getItem(sidebarSplitStorageKey(PANEL_STATE_ID)),
@@ -872,12 +854,10 @@ describe("SidebarSplitContainer", () => {
     );
     expect(persisted.layout.root.type).toBe("split");
     if (persisted.layout.root.type === "split") {
-      expect(persisted.layout.root.sizes[0]).toBeCloseTo(0.7, 5);
-      expect(persisted.layout.root.sizes[1]).toBeCloseTo(0.3, 5);
+      expect(persisted.layout.root.sizes[0]).toBeCloseTo(0.5, 5);
+      expect(persisted.layout.root.sizes[1]).toBeCloseTo(0.5, 5);
     }
-    expect(workspaceDivider.dataset.splitResizeSnapTarget).toBeUndefined();
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
-    workspaceSplit.remove();
   });
 
   it("clears the resize overlay when the divider loses pointer capture", () => {
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index d54b9d1b5a..2a058415ea 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -838,7 +838,6 @@ function SidebarSplitDivider({
   return (
     <div
       role="separator"
-      data-split-resize-axis={horizontal ? "x" : "y"}
       aria-hidden={hidden || undefined}
       aria-label={
         horizontal
@@ -847,7 +846,7 @@ function SidebarSplitDivider({
       }
       aria-orientation={horizontal ? "vertical" : "horizontal"}
       className={cn(
-        "group relative z-[25] shrink-0 bg-border-seam transition-colors hover:bg-ring/40 data-[dragging]:bg-ring/40 data-[split-resize-snap-target]:bg-ring/60",
+        "group relative z-[25] shrink-0 bg-border-seam transition-colors hover:bg-ring/40 data-[dragging]:bg-ring/40",
         MACOS_APP_REGION_NO_DRAG_CLASS,
         "pointer-events-auto",
         hidden && "invisible pointer-events-none",
diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index f345ebcf04..8bb82524e0 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -30,10 +30,9 @@ function rect({
   };
 }
 
-function divider(axis: "x" | "y", bounds: DOMRect): HTMLElement {
+function divider(bounds: DOMRect): HTMLElement {
   const split = document.createElement("div");
   const element = document.createElement("div");
-  element.dataset.splitResizeAxis = axis;
   element.getBoundingClientRect = () => bounds;
   split.appendChild(element);
   document.body.appendChild(split);
@@ -45,80 +44,78 @@ afterEach(() => {
 });
 
 describe("split resize snapping", () => {
-  it("snaps within the threshold to the exact same-axis coordinate", () => {
-    const source = divider("x", rect({ left: 300 }));
-    const target = divider("x", rect({ left: 500 }));
+  it("snaps a vertical divider to its split's horizontal midpoint without another divider", () => {
+    const source = divider(rect({ left: 300 }));
     const session = createSplitResizeSnapSession(source, "x");
 
     const result = session.resolve({
       end: 900,
-      pointer: 500.5 + SPLIT_RESIZE_SNAP_THRESHOLD_PX,
+      pointer: 500 + SPLIT_RESIZE_SNAP_THRESHOLD_PX,
       start: 100,
     });
 
     expect(result).toEqual({
-      coordinate: 500.5,
-      fraction: 400 / 799,
+      coordinate: 500,
+      fraction: 0.5,
       snapped: true,
     });
-    expect(target.dataset.splitResizeSnapTarget).toBe("true");
     const guide = document.querySelector<HTMLElement>(
       "[data-split-resize-snap-guide]",
     );
     expect(guide?.dataset.splitResizeSnapGuide).toBe("x");
-    expect(guide?.style.left).toBe("500.5px");
+    expect(guide?.style.left).toBe("500px");
 
     session.clear();
-    expect(target.dataset.splitResizeSnapTarget).toBeUndefined();
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
-  it("clears the guide outside the threshold and ignores the cross axis", () => {
-    const source = divider("x", rect({ left: 300 }));
-    const sameAxis = divider("x", rect({ left: 500 }));
-    divider("y", rect({ height: 1, left: 0, top: 510, width: 900 }));
-    const session = createSplitResizeSnapSession(source, "x");
+  it("snaps a horizontal divider to its split's vertical midpoint", () => {
+    const source = divider(
+      rect({ height: 1, left: 0, top: 300, width: 900 }),
+    );
+    const session = createSplitResizeSnapSession(source, "y");
 
-    expect(
-      session.resolve({ end: 900, pointer: 500, start: 100 }).snapped,
-    ).toBe(true);
-    const unsnapped = session.resolve({
-      end: 900,
-      pointer: 500.5 + SPLIT_RESIZE_SNAP_THRESHOLD_PX + 0.1,
+    const result = session.resolve({
+      end: 700,
+      pointer: 400 - SPLIT_RESIZE_SNAP_THRESHOLD_PX,
       start: 100,
     });
 
-    expect(unsnapped.snapped).toBe(false);
-    expect(unsnapped.fraction).toBeCloseTo(0.51075, 5);
-    expect(sameAxis.dataset.splitResizeSnapTarget).toBeUndefined();
-    expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
+    expect(result).toEqual({ coordinate: 400, fraction: 0.5, snapped: true });
+    const guide = document.querySelector<HTMLElement>(
+      "[data-split-resize-snap-guide]",
+    );
+    expect(guide?.dataset.splitResizeSnapGuide).toBe("y");
+    expect(guide?.style.top).toBe("400px");
   });
 
-  it("does not advertise an aligned target that the resize bounds cannot reach", () => {
-    const source = divider("x", rect({ left: 300 }));
-    const target = divider("x", rect({ left: 40 }));
+  it("clears the midpoint guide after the pointer leaves the threshold", () => {
+    const source = divider(rect({ left: 300 }));
     const session = createSplitResizeSnapSession(source, "x");
 
-    const result = session.resolve({ end: 900, pointer: 40.5, start: 100 });
+    expect(
+      session.resolve({ end: 900, pointer: 500, start: 100 }).snapped,
+    ).toBe(true);
+    const result = session.resolve({
+      end: 900,
+      pointer: 500 + SPLIT_RESIZE_SNAP_THRESHOLD_PX + 0.1,
+      start: 100,
+    });
 
     expect(result.snapped).toBe(false);
-    expect(result.fraction).toBe(0.15);
-    expect(target.dataset.splitResizeSnapTarget).toBeUndefined();
+    expect(result.fraction).toBeCloseTo(0.510125, 6);
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
-  it("reads target geometry once per drag instead of forcing layout on every pointer move", () => {
-    const source = divider("x", rect({ left: 300 }));
-    const target = divider("x", rect({ left: 500 }));
+  it("does not read divider geometry during a drag", () => {
+    const source = divider(rect({ left: 300 }));
     const sourceRect = vi.spyOn(source, "getBoundingClientRect");
-    const targetRect = vi.spyOn(target, "getBoundingClientRect");
     const session = createSplitResizeSnapSession(source, "x");
 
     for (let pointer = 495; pointer <= 505; pointer += 1) {
       session.resolve({ end: 900, pointer, start: 100 });
     }
 
-    expect(sourceRect).toHaveBeenCalledTimes(1);
-    expect(targetRect).toHaveBeenCalledTimes(1);
+    expect(sourceRect).not.toHaveBeenCalled();
   });
 });
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 7f8638fccd..b53287b5c6 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -5,8 +5,6 @@ export type SplitResizeAxis = "x" | "y";
 export const SPLIT_RESIZE_SNAP_THRESHOLD_PX = 8;
 
 interface ResolveSplitResizePositionArgs {
-  axis: SplitResizeAxis;
-  divider: HTMLElement;
   end: number;
   pointer: number;
   start: number;
@@ -21,89 +19,10 @@ export interface ResolvedSplitResizePosition {
 export interface SplitResizeSnapSession {
   clear: () => void;
   resolve: (
-    args: Omit<ResolveSplitResizePositionArgs, "axis" | "divider">,
+    args: ResolveSplitResizePositionArgs,
   ) => ResolvedSplitResizePosition;
 }
 
-function dividerCoordinate(rect: DOMRect, axis: SplitResizeAxis): number {
-  return axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
-}
-
-function dividerExtent(rect: DOMRect, axis: SplitResizeAxis): number {
-  return axis === "x" ? rect.width : rect.height;
-}
-
-function isVisibleSnapTarget(element: HTMLElement, rect: DOMRect): boolean {
-  if (
-    element.getAttribute("aria-hidden") === "true" ||
-    element.closest('[aria-hidden="true"]') !== null
-  ) {
-    return false;
-  }
-  const style = window.getComputedStyle(element);
-  if (style.display === "none" || style.visibility === "hidden") return false;
-  return (
-    rect.bottom > 0 &&
-    rect.right > 0 &&
-    rect.top < window.innerHeight &&
-    rect.left < window.innerWidth
-  );
-}
-
-interface SplitResizeSnapTarget {
-  coordinate: number;
-  element: HTMLElement;
-}
-
-function listSnapTargets(
-  divider: HTMLElement,
-  axis: SplitResizeAxis,
-): SplitResizeSnapTarget[] {
-  const targets: SplitResizeSnapTarget[] = [];
-  const candidates = divider.ownerDocument.querySelectorAll<HTMLElement>(
-    `[data-split-resize-axis="${axis}"]`,
-  );
-  for (const candidate of candidates) {
-    const sourceSplit = divider.parentElement;
-    const candidateSplit = candidate.parentElement;
-    if (
-      candidate === divider ||
-      sourceSplit?.contains(candidate) === true ||
-      candidateSplit?.contains(divider) === true
-    ) {
-      continue;
-    }
-    const rect = candidate.getBoundingClientRect();
-    if (!isVisibleSnapTarget(candidate, rect)) continue;
-    targets.push({
-      coordinate: dividerCoordinate(rect, axis),
-      element: candidate,
-    });
-  }
-  return targets;
-}
-
-function nearestSnapTarget(
-  targets: SplitResizeSnapTarget[],
-  pointer: number,
-): SplitResizeSnapTarget | null {
-  let nearest: SplitResizeSnapTarget | null = null;
-  let nearestDistance = Number.POSITIVE_INFINITY;
-  for (const candidate of targets) {
-    if (!candidate.element.isConnected) continue;
-    const distance = Math.abs(candidate.coordinate - pointer);
-    if (
-      distance > SPLIT_RESIZE_SNAP_THRESHOLD_PX ||
-      distance >= nearestDistance
-    ) {
-      continue;
-    }
-    nearest = candidate;
-    nearestDistance = distance;
-  }
-  return nearest;
-}
-
 function createGuide(
   document: Document,
   axis: SplitResizeAxis,
@@ -123,34 +42,23 @@ function createGuide(
 }
 
 /**
- * Starts one divider drag's snap lifecycle. Compatible dividers opt in with
- * `data-split-resize-axis`. Candidate geometry is captured once so the hot
- * pointer-move path never forces layout after it writes the source pair's flex
- * values. Ancestor and descendant dividers are excluded because their
- * coordinates can move with the source pair.
+ * Starts one divider drag's snap lifecycle. Each split has one fixed grid
+ * point at 50/50 on the divider's active axis: vertical dividers move only
+ * left/right, and horizontal dividers move only up/down. The pointer-move path
+ * uses the adjacent pair bounds captured by the caller and never reads layout.
  */
 export function createSplitResizeSnapSession(
   divider: HTMLElement,
   axis: SplitResizeAxis,
 ): SplitResizeSnapSession {
   let guide: HTMLElement | null = null;
-  let target: HTMLElement | null = null;
-  const targets = listSnapTargets(divider, axis);
-  const extent = dividerExtent(divider.getBoundingClientRect(), axis);
 
   const clear = () => {
     guide?.remove();
     guide = null;
-    if (target !== null) delete target.dataset.splitResizeSnapTarget;
-    target = null;
   };
 
-  const showSnapTarget = (element: HTMLElement, coordinate: number) => {
-    if (target !== element) {
-      if (target !== null) delete target.dataset.splitResizeSnapTarget;
-      target = element;
-      target.dataset.splitResizeSnapTarget = "true";
-    }
+  const showGuide = (coordinate: number) => {
     guide ??= createGuide(divider.ownerDocument, axis, coordinate);
     if (axis === "x") guide.style.left = `${coordinate}px`;
     else guide.style.top = `${coordinate}px`;
@@ -163,8 +71,7 @@ export function createSplitResizeSnapSession(
       const unsnappedFraction = clampSplitPairFraction(
         span > 0 ? (pointer - start) / span : 0.5,
       );
-      const candidate = nearestSnapTarget(targets, pointer);
-      if (candidate === null || span <= 0) {
+      if (span <= 0) {
         clear();
         return {
           coordinate: start + span * unsnappedFraction,
@@ -173,24 +80,8 @@ export function createSplitResizeSnapSession(
         };
       }
 
-      // Flex lays the adjacent panes out in the pair's outer span minus this
-      // divider. Account for that one-pixel seam so the divider centers land
-      // on the same viewport coordinate instead of merely sharing a ratio.
-      const contentSpan = span - extent;
-      if (contentSpan <= 0) {
-        clear();
-        return {
-          coordinate: start + span * unsnappedFraction,
-          fraction: unsnappedFraction,
-          snapped: false,
-        };
-      }
-      const fraction = clampSplitPairFraction(
-        (candidate.coordinate - start - extent / 2) / contentSpan,
-      );
-      const coordinate = start + contentSpan * fraction + extent / 2;
-      // A target outside the pair's 15–85% resize bounds is not reachable.
-      if (Math.abs(coordinate - candidate.coordinate) > 0.01) {
+      const coordinate = start + span / 2;
+      if (Math.abs(pointer - coordinate) > SPLIT_RESIZE_SNAP_THRESHOLD_PX) {
         clear();
         return {
           coordinate: start + span * unsnappedFraction,
@@ -199,8 +90,8 @@ export function createSplitResizeSnapSession(
         };
       }
 
-      showSnapTarget(candidate.element, coordinate);
-      return { coordinate, fraction, snapped: true };
+      showGuide(coordinate);
+      return { coordinate, fraction: 0.5, 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 c54d5ff51f..3fee2d4f71 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -1175,7 +1175,7 @@ describe("SplitThreadArea", () => {
     expect(offscreenRow.style.containIntrinsicBlockSize).toBe("");
   });
 
-  it("snaps a workspace divider to a visible right-panel divider and clears its guide", () => {
+  it("snaps a workspace divider to its horizontal midpoint and clears its guide", () => {
     const store = renderSplitArea({
       path: threadPath("thr-a"),
       layout: twoPaneLayout("pane-1"),
@@ -1230,44 +1230,24 @@ describe("SplitThreadArea", () => {
       y: 0,
       toJSON: () => ({}),
     });
-    const rightPanelDivider = document.createElement("div");
-    rightPanelDivider.dataset.splitResizeAxis = "x";
-    rightPanelDivider.getBoundingClientRect = () => ({
-      bottom: 600,
-      height: 600,
-      left: 563.5,
-      right: 564.5,
-      top: 0,
-      width: 1,
-      x: 563.5,
-      y: 0,
-      toJSON: () => ({}),
-    });
-    const rightPanelSplit = document.createElement("div");
-    rightPanelSplit.appendChild(rightPanelDivider);
-    document.body.appendChild(rightPanelSplit);
-
     fireEvent.pointerDown(hitTarget, { clientX: 403.5, pointerId: 31 });
-    fireEvent.pointerMove(hitTarget, { clientX: 570, pointerId: 31 });
+    fireEvent.pointerMove(hitTarget, { clientX: 410, pointerId: 31 });
 
-    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.7, 5);
-    expect(rightPanelDivider.dataset.splitResizeSnapTarget).toBe("true");
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(0.5, 5);
     expect(
       document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
         ?.style.left,
-    ).toBe("564px");
+    ).toBe("403px");
 
-    fireEvent.pointerUp(hitTarget, { clientX: 570, pointerId: 31 });
+    fireEvent.pointerUp(hitTarget, { clientX: 410, pointerId: 31 });
 
     const root = store.get(splitLayoutAtom)?.root;
     expect(root?.type).toBe("split");
     if (root?.type === "split") {
-      expect(root.sizes[0]).toBeCloseTo(0.7, 5);
-      expect(root.sizes[1]).toBeCloseTo(0.3, 5);
+      expect(root.sizes[0]).toBeCloseTo(0.5, 5);
+      expect(root.sizes[1]).toBeCloseTo(0.5, 5);
     }
-    expect(rightPanelDivider.dataset.splitResizeSnapTarget).toBeUndefined();
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
-    rightPanelSplit.remove();
   });
 
   it("keeps workspace separators out of the tab order", () => {
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 2ad57a1a6f..5a73c28fd8 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -1520,7 +1520,6 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
   return (
     <div
       role="separator"
-      data-split-resize-axis={horizontal ? "x" : "y"}
       aria-orientation={horizontal ? "vertical" : "horizontal"}
       className={cn(
         // A one-pixel seam between flush tiles — squared ends, no rounding,
@@ -1533,7 +1532,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         // lower divider layer loses the grab target to that header.
         "group relative z-[25] flex-shrink-0 transition-colors",
         "bg-border-seam",
-        "hover:bg-ring/40 data-[dragging]:bg-ring/40 data-[split-resize-snap-target]:bg-ring/60",
+        "hover:bg-ring/40 data-[dragging]:bg-ring/40",
         hidden && "invisible pointer-events-none",
         horizontal ? "w-px cursor-col-resize" : "h-px cursor-row-resize",
       )}

From 42c0376cd225e97f0b78bdb067d07d53d7ca5ece Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 20:57:01 -0700
Subject: [PATCH 04/15] Make split snapping magnetic and grid-aligned

---
 .../SidebarSplitContainer.test.tsx            | 61 ++++++++-----
 .../secondary-panel/SidebarSplitContainer.tsx |  2 +
 apps/app/src/lib/split-resize-snap.test.ts    | 88 +++++++++++++------
 apps/app/src/lib/split-resize-snap.ts         | 86 ++++++++++++++----
 .../thread-detail/SplitThreadArea.test.tsx    | 55 ++++++++----
 .../views/thread-detail/SplitThreadArea.tsx   |  3 +
 6 files changed, 213 insertions(+), 82 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 2ca61efcc5..334e21db1e 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -755,8 +755,8 @@ describe("SidebarSplitContainer", () => {
       clientY: 400,
       pointerId: 3,
     });
-    expect(Number.parseFloat(previous.style.flex)).toBeCloseTo(0.5, 3);
-    expect(Number.parseFloat(next.style.flex)).toBeCloseTo(0.5, 3);
+    expect(Number.parseFloat(previous.style.flex)).toBeCloseTo(0.499, 3);
+    expect(Number.parseFloat(next.style.flex)).toBeCloseTo(0.501, 3);
 
     fireEvent.pointerMove(hitTarget, {
       clientX: 700,
@@ -783,7 +783,7 @@ describe("SidebarSplitContainer", () => {
     });
   });
 
-  it("snaps a right-panel divider to its horizontal midpoint and persists 50/50", () => {
+  it("snaps a right-panel divider to the shared surface midpoint and persists it", () => {
     persistState(createTwoPaneState());
     renderContainer({
       renderPane: ({ paneId }) => <div>{paneId}</div>,
@@ -799,6 +799,11 @@ describe("SidebarSplitContainer", () => {
     ) {
       throw new Error("Expected adjacent right-panel split items");
     }
+    const grid = document.querySelector<HTMLElement>(
+      "[data-sidebar-split-container]",
+    );
+    if (grid === null) throw new Error("Expected a right-panel split grid");
+    grid.dataset.splitResizeGridRoot = "";
     Object.defineProperties(hitTarget, {
       releasePointerCapture: { configurable: true, value: vi.fn() },
       setPointerCapture: { configurable: true, value: vi.fn() },
@@ -806,46 +811,60 @@ describe("SidebarSplitContainer", () => {
     vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 0,
-      right: 400,
+      left: 300,
+      right: 500,
       top: 0,
-      width: 400,
-      x: 0,
+      width: 200,
+      x: 300,
       y: 0,
       toJSON: () => ({}),
     });
     vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 401,
-      right: 801,
+      left: 501,
+      right: 900,
       top: 0,
-      width: 400,
-      x: 401,
+      width: 399,
+      x: 501,
       y: 0,
       toJSON: () => ({}),
     });
     vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 400,
-      right: 401,
+      left: 500,
+      right: 501,
       top: 0,
       width: 1,
-      x: 400,
+      x: 500,
       y: 0,
       toJSON: () => ({}),
     });
-    fireEvent.pointerDown(hitTarget, { clientX: 400.5, pointerId: 32 });
-    fireEvent.pointerMove(hitTarget, { clientX: 407.5, pointerId: 32 });
+    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(0.5, 5);
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(
+      199.5 / 599,
+      5,
+    );
     expect(
       document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
         ?.style.left,
-    ).toBe("400.5px");
+    ).toBe("500px");
 
-    fireEvent.pointerUp(hitTarget, { clientX: 407.5, pointerId: 32 });
+    fireEvent.pointerUp(hitTarget, { clientX: 518, pointerId: 32 });
 
     const persisted = parseSidebarSplitState(
       window.localStorage.getItem(sidebarSplitStorageKey(PANEL_STATE_ID)),
@@ -854,8 +873,8 @@ describe("SidebarSplitContainer", () => {
     );
     expect(persisted.layout.root.type).toBe("split");
     if (persisted.layout.root.type === "split") {
-      expect(persisted.layout.root.sizes[0]).toBeCloseTo(0.5, 5);
-      expect(persisted.layout.root.sizes[1]).toBeCloseTo(0.5, 5);
+      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();
   });
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index 2a058415ea..e79f940260 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -491,6 +491,7 @@ export function SidebarSplitContainer({
     <div
       className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
       data-sidebar-split-container=""
+      data-split-resize-grid-root=""
       data-sidebar-split-root-direction={
         presentedLayout.root.type === "split"
           ? presentedLayout.root.dir
@@ -762,6 +763,7 @@ function SidebarSplitDivider({
         divider,
         horizontal ? "x" : "y",
       );
+      snapSession.resolve({ end, pointer: pointerDownPosition, start });
       let pendingFraction: number | null = null;
       let receivedPointerMove = false;
       let finished = false;
diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index 8bb82524e0..632f338f85 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -1,10 +1,10 @@
 // @vitest-environment jsdom
 
 import { afterEach, describe, expect, it, vi } from "vitest";
-import {
-  createSplitResizeSnapSession,
-  SPLIT_RESIZE_SNAP_THRESHOLD_PX,
-} from "./split-resize-snap";
+import { createSplitResizeSnapSession } from "./split-resize-snap";
+
+const SNAP_CAPTURE_PX = 12;
+const SNAP_RELEASE_PX = 24;
 
 function rect({
   height = 600,
@@ -30,12 +30,16 @@ function rect({
   };
 }
 
-function divider(bounds: DOMRect): HTMLElement {
+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);
-  document.body.appendChild(split);
+  grid.appendChild(split);
+  document.body.appendChild(grid);
   return element;
 }
 
@@ -44,19 +48,22 @@ afterEach(() => {
 });
 
 describe("split resize snapping", () => {
-  it("snaps a vertical divider to its split's horizontal midpoint without another divider", () => {
-    const source = divider(rect({ left: 300 }));
+  it("snaps a vertical divider to the split surface's horizontal grid line", () => {
+    const source = divider(
+      rect({ left: 650 }),
+      rect({ height: 600, left: 100, top: 50, width: 800 }),
+    );
     const session = createSplitResizeSnapSession(source, "x");
 
     const result = session.resolve({
       end: 900,
-      pointer: 500 + SPLIT_RESIZE_SNAP_THRESHOLD_PX,
-      start: 100,
+      pointer: 500 + SNAP_CAPTURE_PX,
+      start: 300,
     });
 
     expect(result).toEqual({
       coordinate: 500,
-      fraction: 0.5,
+      fraction: 199.5 / 599,
       snapped: true,
     });
     const guide = document.querySelector<HTMLElement>(
@@ -64,58 +71,87 @@ describe("split resize snapping", () => {
     );
     expect(guide?.dataset.splitResizeSnapGuide).toBe("x");
     expect(guide?.style.left).toBe("500px");
+    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 a horizontal divider to its split's vertical midpoint", () => {
+  it("snaps a horizontal divider to the split surface's vertical grid line", () => {
     const source = divider(
-      rect({ height: 1, left: 0, top: 300, width: 900 }),
+      rect({ height: 1, left: 0, top: 600, width: 900 }),
+      rect({ height: 800, left: 40, top: 100, width: 900 }),
     );
     const session = createSplitResizeSnapSession(source, "y");
 
     const result = session.resolve({
-      end: 700,
-      pointer: 400 - SPLIT_RESIZE_SNAP_THRESHOLD_PX,
-      start: 100,
+      end: 900,
+      pointer: 500 - SNAP_CAPTURE_PX,
+      start: 300,
     });
 
-    expect(result).toEqual({ coordinate: 400, fraction: 0.5, snapped: true });
+    expect(result).toEqual({
+      coordinate: 500,
+      fraction: 199.5 / 599,
+      snapped: true,
+    });
     const guide = document.querySelector<HTMLElement>(
       "[data-split-resize-snap-guide]",
     );
     expect(guide?.dataset.splitResizeSnapGuide).toBe("y");
-    expect(guide?.style.top).toBe("400px");
+    expect(guide?.style.left).toBe("40px");
+    expect(guide?.style.top).toBe("500px");
+    expect(guide?.style.width).toBe("900px");
   });
 
-  it("clears the midpoint guide after the pointer leaves the threshold", () => {
-    const source = divider(rect({ left: 300 }));
+  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");
 
     expect(
-      session.resolve({ end: 900, pointer: 500, start: 100 }).snapped,
+      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);
     const result = session.resolve({
       end: 900,
-      pointer: 500 + SPLIT_RESIZE_SNAP_THRESHOLD_PX + 0.1,
+      pointer: 500 + SNAP_RELEASE_PX + 1,
       start: 100,
     });
 
     expect(result.snapped).toBe(false);
-    expect(result.fraction).toBeCloseTo(0.510125, 6);
+    expect(result.fraction).toBeCloseTo(0.53125, 6);
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
-  it("does not read divider geometry during a drag", () => {
-    const source = divider(rect({ left: 300 }));
+  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");
 
     for (let pointer = 495; pointer <= 505; pointer += 1) {
       session.resolve({ end: 900, pointer, start: 100 });
     }
 
-    expect(sourceRect).not.toHaveBeenCalled();
+    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
index b53287b5c6..491cccc1de 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -2,7 +2,8 @@ import { clampSplitPairFraction } from "@/lib/split-layout";
 
 export type SplitResizeAxis = "x" | "y";
 
-export const SPLIT_RESIZE_SNAP_THRESHOLD_PX = 8;
+export const SPLIT_RESIZE_SNAP_CAPTURE_PX = 12;
+export const SPLIT_RESIZE_SNAP_RELEASE_PX = 24;
 
 interface ResolveSplitResizePositionArgs {
   end: number;
@@ -27,43 +28,76 @@ 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 inset-y-0 z-[100] w-px -translate-x-1/2 bg-ring/50"
-      : "pointer-events-none fixed inset-x-0 z-[100] h-px -translate-y-1/2 bg-ring/50";
-  if (axis === "x") guide.style.left = `${coordinate}px`;
-  else guide.style.top = `${coordinate}px`;
+      ? "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 axisCoordinate(rect: DOMRect, axis: SplitResizeAxis): number {
+  return axis === "x"
+    ? rect.left + rect.width / 2
+    : rect.top + rect.height / 2;
+}
+
+function axisExtent(rect: DOMRect, axis: SplitResizeAxis): number {
+  return axis === "x" ? rect.width : rect.height;
+}
+
 /**
- * Starts one divider drag's snap lifecycle. Each split has one fixed grid
- * point at 50/50 on the divider's active axis: vertical dividers move only
- * left/right, and horizontal dividers move only up/down. The pointer-move path
- * uses the adjacent pair bounds captured by the caller and never reads layout.
+ * Starts one divider drag's snap lifecycle. Every divider within a split
+ * surface shares that surface's 50% grid line on its active axis, so dividers
+ * in separate branches can align exactly. Capture and release use different
+ * thresholds to create magnetic resistance, and geometry is read only once.
  */
 export function createSplitResizeSnapSession(
   divider: HTMLElement,
   axis: SplitResizeAxis,
 ): SplitResizeSnapSession {
   let guide: HTMLElement | null = null;
+  let lastPointer: number | null = null;
+  let snapped = false;
+  const grid = divider.closest<HTMLElement>("[data-split-resize-grid-root]");
+  const gridRect = grid?.getBoundingClientRect() ?? null;
+  const gridCoordinate =
+    gridRect === null ? null : axisCoordinate(gridRect, axis);
+  const extent = axisExtent(divider.getBoundingClientRect(), axis);
 
   const clear = () => {
     guide?.remove();
     guide = null;
+    lastPointer = null;
+    snapped = false;
   };
 
   const showGuide = (coordinate: number) => {
-    guide ??= createGuide(divider.ownerDocument, axis, coordinate);
+    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 }) => {
@@ -71,8 +105,12 @@ export function createSplitResizeSnapSession(
       const unsnappedFraction = clampSplitPairFraction(
         span > 0 ? (pointer - start) / span : 0.5,
       );
-      if (span <= 0) {
-        clear();
+      const previousPointer = lastPointer;
+      lastPointer = pointer;
+      const contentSpan = span - extent;
+      if (gridCoordinate === null || contentSpan <= 0) {
+        snapped = false;
+        hideGuide();
         return {
           coordinate: start + span * unsnappedFraction,
           fraction: unsnappedFraction,
@@ -80,9 +118,24 @@ export function createSplitResizeSnapSession(
         };
       }
 
-      const coordinate = start + span / 2;
-      if (Math.abs(pointer - coordinate) > SPLIT_RESIZE_SNAP_THRESHOLD_PX) {
-        clear();
+      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 crossedGrid =
+        previousPointer !== null &&
+        (previousPointer - gridCoordinate) * (pointer - gridCoordinate) <= 0;
+      const shouldSnap =
+        reachable &&
+        (snapped
+          ? distance <= SPLIT_RESIZE_SNAP_RELEASE_PX
+          : distance <= SPLIT_RESIZE_SNAP_CAPTURE_PX ||
+            (crossedGrid && distance <= SPLIT_RESIZE_SNAP_RELEASE_PX));
+      if (!shouldSnap) {
+        snapped = false;
+        hideGuide();
         return {
           coordinate: start + span * unsnappedFraction,
           fraction: unsnappedFraction,
@@ -90,8 +143,9 @@ export function createSplitResizeSnapSession(
         };
       }
 
+      snapped = true;
       showGuide(coordinate);
-      return { coordinate, fraction: 0.5, snapped: true };
+      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 3fee2d4f71..71b8b128cb 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -1175,7 +1175,7 @@ describe("SplitThreadArea", () => {
     expect(offscreenRow.style.containIntrinsicBlockSize).toBe("");
   });
 
-  it("snaps a workspace divider to its horizontal midpoint and clears its guide", () => {
+  it("snaps a workspace divider to the shared surface midpoint and clears its guide", () => {
     const store = renderSplitArea({
       path: threadPath("thr-a"),
       layout: twoPaneLayout("pane-1"),
@@ -1193,6 +1193,9 @@ describe("SplitThreadArea", () => {
     ) {
       throw new Error("Expected adjacent workspace split items");
     }
+    const grid = separator.parentElement;
+    if (grid === null) throw new Error("Expected a workspace split grid");
+    grid.dataset.splitResizeGridRoot = "";
     Object.defineProperties(hitTarget, {
       releasePointerCapture: { configurable: true, value: vi.fn() },
       setPointerCapture: { configurable: true, value: vi.fn() },
@@ -1200,52 +1203,66 @@ describe("SplitThreadArea", () => {
     vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 0,
-      right: 400,
+      left: 300,
+      right: 500,
       top: 0,
-      width: 400,
-      x: 0,
+      width: 200,
+      x: 300,
       y: 0,
       toJSON: () => ({}),
     });
     vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 406,
-      right: 806,
+      left: 501,
+      right: 900,
       top: 0,
-      width: 400,
-      x: 406,
+      width: 399,
+      x: 501,
       y: 0,
       toJSON: () => ({}),
     });
     vi.spyOn(separator, "getBoundingClientRect").mockReturnValue({
       bottom: 600,
       height: 600,
-      left: 403,
-      right: 404,
+      left: 500,
+      right: 501,
       top: 0,
       width: 1,
-      x: 403,
+      x: 500,
       y: 0,
       toJSON: () => ({}),
     });
-    fireEvent.pointerDown(hitTarget, { clientX: 403.5, pointerId: 31 });
-    fireEvent.pointerMove(hitTarget, { clientX: 410, pointerId: 31 });
+    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(0.5, 5);
+    expect(Number.parseFloat(previous.style.flexGrow)).toBeCloseTo(
+      199.5 / 599,
+      5,
+    );
     expect(
       document.querySelector<HTMLElement>("[data-split-resize-snap-guide]")
         ?.style.left,
-    ).toBe("403px");
+    ).toBe("500px");
 
-    fireEvent.pointerUp(hitTarget, { clientX: 410, pointerId: 31 });
+    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(0.5, 5);
-      expect(root.sizes[1]).toBeCloseTo(0.5, 5);
+      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();
   });
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 5a73c28fd8..0adda424e1 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -699,6 +699,7 @@ function SplitThreadAreaContent({ routeContent }: SplitThreadAreaProps) {
       <div
         ref={preservedScrollWorkspaceRef}
         className="relative -m-4 flex min-h-0 min-w-0 flex-1 overflow-hidden md:-m-5"
+        data-split-resize-grid-root=""
       >
         <SplitWorkspaceSecondaryPanelHost
           focusedPaneId={effectiveMaximizedPaneId ?? layout.focusedPaneId}
@@ -1438,6 +1439,8 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         divider,
         horizontal ? "x" : "y",
       );
+      const pointerDownPosition = horizontal ? event.clientX : event.clientY;
+      snapSession.resolve({ end, pointer: pointerDownPosition, start });
 
       const previousGrow = Number.parseFloat(
         window.getComputedStyle(previous).flexGrow,

From 6027fb15a5ff557648d51371b1728b7cc3a25595 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 21:12:59 -0700
Subject: [PATCH 05/15] Snap split resizing to equal sibling grids

---
 .../SidebarSplitContainer.test.tsx            |  9 ++--
 .../secondary-panel/SidebarSplitContainer.tsx | 20 ++++++-
 apps/app/src/lib/split-resize-snap.test.ts    | 44 +++++++++------
 apps/app/src/lib/split-resize-snap.ts         | 53 ++++++++++++++-----
 .../thread-detail/SplitThreadArea.test.tsx    |  5 +-
 .../views/thread-detail/SplitThreadArea.tsx   | 19 +++++--
 6 files changed, 110 insertions(+), 40 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index 334e21db1e..c6408a24ae 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -783,7 +783,7 @@ describe("SidebarSplitContainer", () => {
     });
   });
 
-  it("snaps a right-panel divider to the shared surface midpoint and persists it", () => {
+  it("snaps a right-panel divider to its equal two-pane boundary and persists it", () => {
     persistState(createTwoPaneState());
     renderContainer({
       renderPane: ({ paneId }) => <div>{paneId}</div>,
@@ -799,11 +799,10 @@ describe("SidebarSplitContainer", () => {
     ) {
       throw new Error("Expected adjacent right-panel split items");
     }
-    const grid = document.querySelector<HTMLElement>(
-      "[data-sidebar-split-container]",
-    );
+    const grid = separator.parentElement;
     if (grid === null) throw new Error("Expected a right-panel split grid");
-    grid.dataset.splitResizeGridRoot = "";
+    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() },
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index e79f940260..998c00093e 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -491,7 +491,6 @@ export function SidebarSplitContainer({
     <div
       className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
       data-sidebar-split-container=""
-      data-split-resize-grid-root=""
       data-sidebar-split-root-direction={
         presentedLayout.root.type === "split"
           ? presentedLayout.root.dir
@@ -559,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",
@@ -568,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) =>
@@ -713,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;
@@ -762,6 +768,7 @@ function SidebarSplitDivider({
       const snapSession = createSplitResizeSnapSession(
         divider,
         horizontal ? "x" : "y",
+        { boundaryIndex, childCount },
       );
       snapSession.resolve({ end, pointer: pointerDownPosition, start });
       let pendingFraction: number | null = null;
@@ -835,11 +842,20 @@ function SidebarSplitDivider({
       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/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index 632f338f85..d0c49201eb 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -48,29 +48,32 @@ afterEach(() => {
 });
 
 describe("split resize snapping", () => {
-  it("snaps a vertical divider to the split surface's horizontal grid line", () => {
+  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");
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 3,
+    });
 
     const result = session.resolve({
       end: 900,
-      pointer: 500 + SNAP_CAPTURE_PX,
-      start: 300,
+      pointer: 366.5 + SNAP_CAPTURE_PX,
+      start: 250,
     });
 
     expect(result).toEqual({
-      coordinate: 500,
-      fraction: 199.5 / 599,
+      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("500px");
+    expect(guide?.style.left).toBe("366.5px");
     expect(guide?.style.top).toBe("50px");
     expect(guide?.style.height).toBe("600px");
 
@@ -78,22 +81,25 @@ describe("split resize snapping", () => {
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
-  it("snaps a horizontal divider to the split surface's vertical grid line", () => {
+  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");
+    const session = createSplitResizeSnapSession(source, "y", {
+      boundaryIndex: 3,
+      childCount: 4,
+    });
 
     const result = session.resolve({
       end: 900,
-      pointer: 500 - SNAP_CAPTURE_PX,
-      start: 300,
+      pointer: 700.25 - SNAP_CAPTURE_PX,
+      start: 500,
     });
 
     expect(result).toEqual({
-      coordinate: 500,
-      fraction: 199.5 / 599,
+      coordinate: 700.25,
+      fraction: 199.75 / 399,
       snapped: true,
     });
     const guide = document.querySelector<HTMLElement>(
@@ -101,7 +107,7 @@ describe("split resize snapping", () => {
     );
     expect(guide?.dataset.splitResizeSnapGuide).toBe("y");
     expect(guide?.style.left).toBe("40px");
-    expect(guide?.style.top).toBe("500px");
+    expect(guide?.style.top).toBe("700.25px");
     expect(guide?.style.width).toBe("900px");
   });
 
@@ -110,7 +116,10 @@ describe("split resize snapping", () => {
       rect({ left: 500 }),
       rect({ left: 100, width: 800 }),
     );
-    const session = createSplitResizeSnapSession(source, "x");
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
 
     expect(
       session.resolve({ end: 900, pointer: 470, start: 100 }).snapped,
@@ -145,7 +154,10 @@ describe("split resize snapping", () => {
     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");
+    const session = createSplitResizeSnapSession(source, "x", {
+      boundaryIndex: 1,
+      childCount: 2,
+    });
 
     for (let pointer = 495; pointer <= 505; pointer += 1) {
       session.resolve({ end: 900, pointer, start: 100 });
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 491cccc1de..07d253c74c 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -24,6 +24,11 @@ export interface SplitResizeSnapSession {
   ) => ResolvedSplitResizePosition;
 }
 
+export interface SplitResizeGridTarget {
+  boundaryIndex: number;
+  childCount: number;
+}
+
 function createGuide(
   document: Document,
   axis: SplitResizeAxis,
@@ -50,34 +55,58 @@ function createGuide(
   return guide;
 }
 
-function axisCoordinate(rect: DOMRect, axis: SplitResizeAxis): number {
-  return axis === "x"
-    ? rect.left + rect.width / 2
-    : rect.top + rect.height / 2;
-}
-
 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 divider within a split
- * surface shares that surface's 50% grid line on its active axis, so dividers
- * in separate branches can align exactly. Capture and release use different
- * thresholds to create magnetic resistance, and geometry is read only once.
+ * 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 lastPointer: number | null = null;
   let snapped = false;
   const grid = divider.closest<HTMLElement>("[data-split-resize-grid-root]");
   const gridRect = grid?.getBoundingClientRect() ?? null;
-  const gridCoordinate =
-    gridRect === null ? null : axisCoordinate(gridRect, axis);
   const extent = axisExtent(divider.getBoundingClientRect(), axis);
+  const gridCoordinate =
+    gridRect === null
+      ? null
+      : equalGridCoordinate(gridRect, axis, extent, target);
 
   const clear = () => {
     guide?.remove();
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
index 71b8b128cb..fe5e2c5416 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -1175,7 +1175,7 @@ describe("SplitThreadArea", () => {
     expect(offscreenRow.style.containIntrinsicBlockSize).toBe("");
   });
 
-  it("snaps a workspace divider to the shared surface midpoint and clears its guide", () => {
+  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"),
@@ -1195,7 +1195,8 @@ describe("SplitThreadArea", () => {
     }
     const grid = separator.parentElement;
     if (grid === null) throw new Error("Expected a workspace split grid");
-    grid.dataset.splitResizeGridRoot = "";
+    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() },
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 0adda424e1..60af212152 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -699,7 +699,6 @@ function SplitThreadAreaContent({ routeContent }: SplitThreadAreaProps) {
       <div
         ref={preservedScrollWorkspaceRef}
         className="relative -m-4 flex min-h-0 min-w-0 flex-1 overflow-hidden md:-m-5"
-        data-split-resize-grid-root=""
       >
         <SplitWorkspaceSecondaryPanelHost
           focusedPaneId={effectiveMaximizedPaneId ?? layout.focusedPaneId}
@@ -890,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",
@@ -899,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)}
@@ -1314,6 +1316,8 @@ function NonThreadPaneContent({
 }
 
 interface SplitDividerProps {
+  boundaryIndex: number;
+  childCount: number;
   dir: "row" | "col";
   hidden: boolean;
   onResize: (fraction: number) => void;
@@ -1394,7 +1398,13 @@ 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(
@@ -1438,6 +1448,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
       const snapSession = createSplitResizeSnapSession(
         divider,
         horizontal ? "x" : "y",
+        { boundaryIndex, childCount },
       );
       const pointerDownPosition = horizontal ? event.clientX : event.clientY;
       snapSession.resolve({ end, pointer: pointerDownPosition, start });
@@ -1517,12 +1528,14 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
       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,

From 41d5bc64532c3ae57fb1dbf45918fd54c4629b5d Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 21:29:47 -0700
Subject: [PATCH 06/15] Capture fast split snap crossings

---
 apps/app/src/lib/split-resize-snap.test.ts | 27 ++++++++++++++
 apps/app/src/lib/split-resize-snap.ts      | 42 +++++++++++++++++-----
 2 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index d0c49201eb..deed02e0a5 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -145,6 +145,33 @@ describe("split resize snapping", () => {
     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: 584, start: 100 }).snapped,
+    ).toBe(true);
+    expect(
+      session.resolve({ end: 900, pointer: 585, start: 100 }).snapped,
+    ).toBe(false);
+  });
+
   it("reads the divider and grid geometry once instead of during pointer movement", () => {
     const source = divider(
       rect({ left: 500 }),
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 07d253c74c..3709eb00f2 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -98,6 +98,7 @@ export function createSplitResizeSnapSession(
   target: SplitResizeGridTarget,
 ): SplitResizeSnapSession {
   let guide: HTMLElement | null = null;
+  let fastCrossingAnchor: number | null = null;
   let lastPointer: number | null = null;
   let snapped = false;
   const grid = divider.closest<HTMLElement>("[data-split-resize-grid-root]");
@@ -111,6 +112,7 @@ export function createSplitResizeSnapSession(
   const clear = () => {
     guide?.remove();
     guide = null;
+    fastCrossingAnchor = null;
     lastPointer = null;
     snapped = false;
   };
@@ -153,16 +155,40 @@ export function createSplitResizeSnapSession(
       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 =
-        previousPointer !== null &&
-        (previousPointer - gridCoordinate) * (pointer - gridCoordinate) <= 0;
-      const shouldSnap =
-        reachable &&
-        (snapped
-          ? distance <= SPLIT_RESIZE_SNAP_RELEASE_PX
-          : distance <= SPLIT_RESIZE_SNAP_CAPTURE_PX ||
-            (crossedGrid && distance <= SPLIT_RESIZE_SNAP_RELEASE_PX));
+        previousDelta !== null &&
+        ((previousDelta < 0 && pointerDelta >= 0) ||
+          (previousDelta > 0 && pointerDelta <= 0));
+      let shouldSnap = false;
+      if (reachable) {
+        if (distance <= SPLIT_RESIZE_SNAP_CAPTURE_PX) {
+          fastCrossingAnchor = null;
+          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;
+          shouldSnap = true;
+        } else if (snapped) {
+          if (distance <= SPLIT_RESIZE_SNAP_RELEASE_PX) {
+            fastCrossingAnchor = null;
+            shouldSnap = true;
+          } else if (
+            fastCrossingAnchor !== null &&
+            Math.abs(pointer - fastCrossingAnchor) <=
+              SPLIT_RESIZE_SNAP_RELEASE_PX
+          ) {
+            shouldSnap = true;
+          }
+        }
+      }
       if (!shouldSnap) {
+        fastCrossingAnchor = null;
         snapped = false;
         hideGuide();
         return {

From a1eb90d95992438cc7d9b7ddf1bd1d3e1ed2f291 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 21:42:22 -0700
Subject: [PATCH 07/15] Snap the thread right-panel divider

---
 .../SecondaryPanelLayout.test.tsx             |  13 ++
 .../secondary-panel/SecondaryPanelLayout.tsx  |   1 +
 .../secondary-panel/ThreadSecondaryPanel.tsx  |   6 +
 .../usePanelResizeSnap.test.tsx               |  73 ++++++++++++
 .../secondary-panel/usePanelResizeSnap.ts     | 111 ++++++++++++++++++
 .../useSecondaryPanelResize.ts                |  10 ++
 .../thread-detail/SplitThreadArea.test.tsx    |  14 ++-
 .../SplitWorkspaceSecondaryPanelHost.tsx      |  18 +++
 8 files changed, 243 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
 create mode 100644 apps/app/src/components/secondary-panel/usePanelResizeSnap.ts

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/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..6b06b06cd3
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -0,0 +1,73 @@
+// @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({ onSnap }: { onSnap: (fraction: number) => void }) {
+  const onPointerDownCapture = usePanelResizeSnap({
+    axis: "x",
+    onSnap,
+    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("bridges a fast outer-panel crossing into the shared two-pane grid", () => {
+    const onSnap = vi.fn();
+    render(<SnapHarness onSnap={onSnap} />);
+    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, { clientX: 560, pointerId: 41 });
+
+    expect(onSnap).toHaveBeenLastCalledWith(0.5);
+    expect(
+      document.querySelector("[data-split-resize-snap-guide]"),
+    ).not.toBeNull();
+
+    fireEvent.pointerUp(window, { clientX: 560, pointerId: 41 });
+    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..e3ef6fba58
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+  createSplitResizeSnapSession,
+  type SplitResizeAxis,
+  type SplitResizeGridTarget,
+} from "@/lib/split-resize-snap";
+
+interface UsePanelResizeSnapArgs {
+  axis: SplitResizeAxis;
+  onSnap: (leadingFraction: number) => void;
+  target: SplitResizeGridTarget;
+}
+
+/**
+ * Bridges react-resizable-panels' outer divider into bb's shared magnetic
+ * split grid. The library applies its raw pointer layout first; this listener
+ * runs afterward and overrides only samples captured by the snap session.
+ */
+export function usePanelResizeSnap({
+  axis,
+  onSnap,
+  target,
+}: UsePanelResizeSnapArgs): (event: PointerEvent) => void {
+  const { boundaryIndex, childCount } = target;
+  const cleanupRef = useRef<(() => void) | null>(null);
+  const clear = useCallback(() => {
+    const cleanup = cleanupRef.current;
+    cleanupRef.current = null;
+    cleanup?.();
+  }, []);
+
+  useEffect(() => clear, [clear]);
+
+  return useCallback(
+    (event: PointerEvent) => {
+      clear();
+      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 snapSession = createSplitResizeSnapSession(
+        divider,
+        axis,
+        { boundaryIndex, childCount },
+      );
+      const pointerId = event.pointerId;
+      const pointer = axis === "x" ? event.clientX : event.clientY;
+      snapSession.resolve({ end, pointer, start });
+
+      const ownerDocument = divider.ownerDocument;
+      const ownerWindow = ownerDocument.defaultView;
+      if (ownerWindow === null) {
+        snapSession.clear();
+        return;
+      }
+
+      let finished = false;
+      const move = (moveEvent: PointerEvent) => {
+        if (moveEvent.pointerId !== pointerId) return;
+        const nextPointer =
+          axis === "x" ? moveEvent.clientX : moveEvent.clientY;
+        const result = snapSession.resolve({
+          end,
+          pointer: nextPointer,
+          start,
+        });
+        if (result.snapped) onSnap(result.fraction);
+      };
+      const finish = (finishEvent?: PointerEvent) => {
+        if (finishEvent !== undefined && finishEvent.pointerId !== pointerId) {
+          return;
+        }
+        if (finished) return;
+        finished = true;
+        ownerDocument.body.removeEventListener("pointermove", move, true);
+        ownerWindow.removeEventListener("pointerup", finish, true);
+        ownerWindow.removeEventListener("pointercancel", finish, true);
+        ownerWindow.removeEventListener("blur", finishOnBlur);
+        snapSession.clear();
+        if (cleanupRef.current === finish) cleanupRef.current = null;
+      };
+      const finishOnBlur = () => finish();
+
+      cleanupRef.current = finish;
+      // react-resizable-panels installs its body capture listener first. The
+      // shared snap listener is added after pointer-down so it sees and can
+      // override the library's raw layout within the same event turn.
+      ownerDocument.body.addEventListener("pointermove", move, true);
+      ownerWindow.addEventListener("pointerup", finish, true);
+      ownerWindow.addEventListener("pointercancel", finish, true);
+      ownerWindow.addEventListener("blur", finishOnBlur);
+    },
+    [axis, boundaryIndex, childCount, clear, onSnap],
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
index 5f510cb389..bb0fb49d92 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,14 @@ export function useSecondaryPanelResize({
   const secondaryResizablePanelRef = useRef<ImperativePanelHandle | null>(null);
   const isSecondaryPanelDraggingRef = useRef(false);
   const lastSecondaryPanelSizeRef = useRef(persistedWidthPercent);
+  const handleSecondaryPanelSnap = useCallback((leadingFraction: number) => {
+    secondaryResizablePanelRef.current?.resize((1 - leadingFraction) * 100);
+  }, []);
+  const handleSecondaryPanelResizePointerDownCapture = usePanelResizeSnap({
+    axis: "x",
+    onSnap: handleSecondaryPanelSnap,
+    target: { boundaryIndex: 1, childCount: 2 },
+  });
 
   const prevOpenRef = useRef(isSecondaryPanelOpen);
   useEffect(() => {
@@ -157,6 +166,7 @@ export function useSecondaryPanelResize({
   return {
     handleSecondaryPanelDragging,
     handleSecondaryPanelResize,
+    handleSecondaryPanelResizePointerDownCapture,
     persistedWidthPercent,
     secondaryPanelRef,
     secondaryResizablePanelRef,
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
index fe5e2c5416..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
@@ -1357,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/SplitWorkspaceSecondaryPanelHost.tsx b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
index 9a18deb16b..24672ed276 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,6 +175,17 @@ export function SplitWorkspaceSecondaryPanelHost({
   // pane's panel shows next. Dragging it collapsed closes the window panel.
   const setPanelWidthPercent = useSetAtom(secondaryPanelWidthPercentAtom);
   const lastEmptyPanelSizeRef = useRef(0);
+  const handleEmptyPanelSnap = useCallback((leadingFraction: number) => {
+    panelGroupRef.current?.setLayout([
+      leadingFraction * 100,
+      (1 - leadingFraction) * 100,
+    ]);
+  }, []);
+  const handleEmptyPanelResizePointerDownCapture = usePanelResizeSnap({
+    axis: "x",
+    onSnap: handleEmptyPanelSnap,
+    target: { boundaryIndex: 1, childCount: 2 },
+  });
   const handleEmptyPanelResize = (size: number) => {
     if (size > 0) lastEmptyPanelSizeRef.current = size;
   };
@@ -255,6 +268,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 +308,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",

From 271403f0c4ce7806419e7f7d74407449cc01efd1 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 21:46:40 -0700
Subject: [PATCH 08/15] Strengthen split snap resistance

---
 apps/app/src/lib/split-resize-snap.test.ts | 19 +++++++++++++++----
 apps/app/src/lib/split-resize-snap.ts      |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index deed02e0a5..84c76e6dc8 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -4,7 +4,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createSplitResizeSnapSession } from "./split-resize-snap";
 
 const SNAP_CAPTURE_PX = 12;
-const SNAP_RELEASE_PX = 24;
+const SNAP_RELEASE_PX = 48;
 
 function rect({
   height = 600,
@@ -141,7 +141,10 @@ describe("split resize snapping", () => {
     });
 
     expect(result.snapped).toBe(false);
-    expect(result.fraction).toBeCloseTo(0.53125, 6);
+    expect(result.fraction).toBeCloseTo(
+      (500 + SNAP_RELEASE_PX + 1 - 100) / 800,
+      6,
+    );
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
@@ -165,10 +168,18 @@ describe("split resize snapping", () => {
       session.resolve({ end: 900, pointer: 560, start: 100 }).snapped,
     ).toBe(true);
     expect(
-      session.resolve({ end: 900, pointer: 584, start: 100 }).snapped,
+      session.resolve({
+        end: 900,
+        pointer: 560 + SNAP_RELEASE_PX,
+        start: 100,
+      }).snapped,
     ).toBe(true);
     expect(
-      session.resolve({ end: 900, pointer: 585, start: 100 }).snapped,
+      session.resolve({
+        end: 900,
+        pointer: 560 + SNAP_RELEASE_PX + 1,
+        start: 100,
+      }).snapped,
     ).toBe(false);
   });
 
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 3709eb00f2..71d4938ce6 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -3,7 +3,7 @@ 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 = 24;
+export const SPLIT_RESIZE_SNAP_RELEASE_PX = 48;
 
 interface ResolveSplitResizePositionArgs {
   end: number;

From 4bd0f91a68f8a02f5f7502aaf0210e7882400912 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 21:52:00 -0700
Subject: [PATCH 09/15] Tune split snap resistance

---
 apps/app/src/lib/split-resize-snap.test.ts | 2 +-
 apps/app/src/lib/split-resize-snap.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index 84c76e6dc8..0cde35f5ad 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -4,7 +4,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createSplitResizeSnapSession } from "./split-resize-snap";
 
 const SNAP_CAPTURE_PX = 12;
-const SNAP_RELEASE_PX = 48;
+const SNAP_RELEASE_PX = 30;
 
 function rect({
   height = 600,
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 71d4938ce6..9f99fa55e2 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -3,7 +3,7 @@ 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 = 48;
+export const SPLIT_RESIZE_SNAP_RELEASE_PX = 30;
 
 interface ResolveSplitResizePositionArgs {
   end: number;

From 3af7f21f155c6ef2f3fc77d8151b6876a8c0424c Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 22:21:01 -0700
Subject: [PATCH 10/15] Remove outer split resize lag

---
 .../usePanelResizeSnap.test.tsx               | 66 ++++++++++++++++---
 .../secondary-panel/usePanelResizeSnap.ts     | 52 ++++++++++-----
 .../useSecondaryPanelResize.ts                | 11 ++--
 .../SplitWorkspaceSecondaryPanelHost.tsx      | 17 +++--
 4 files changed, 111 insertions(+), 35 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
index 6b06b06cd3..23a0b5e09d 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -18,10 +18,10 @@ function rect(left: number, width: number): DOMRect {
   };
 }
 
-function SnapHarness({ onSnap }: { onSnap: (fraction: number) => void }) {
+function SnapHarness({ onResize }: { onResize: (fraction: number) => void }) {
   const onPointerDownCapture = usePanelResizeSnap({
     axis: "x",
-    onSnap,
+    onResize,
     target: { boundaryIndex: 1, childCount: 2 },
   });
   return (
@@ -44,9 +44,61 @@ function SnapHarness({ onSnap }: { onSnap: (fraction: number) => void }) {
 afterEach(() => cleanup());
 
 describe("usePanelResizeSnap", () => {
+  it("owns unsnapped pointer movement instead of letting the panel library resize first", () => {
+    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, { clientX: 450, pointerId: 40 });
+
+      expect(rawPanelMove).not.toHaveBeenCalled();
+      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("bridges a fast outer-panel crossing into the shared two-pane grid", () => {
-    const onSnap = vi.fn();
-    render(<SnapHarness onSnap={onSnap} />);
+    const onResize = vi.fn();
+    render(<SnapHarness onResize={onResize} />);
     const grid = screen.getByTestId("grid");
     const previous = screen.getByTestId("previous");
     const divider = screen.getByTestId("divider");
@@ -60,14 +112,12 @@ describe("usePanelResizeSnap", () => {
     fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 41 });
     fireEvent.pointerMove(document.body, { clientX: 560, pointerId: 41 });
 
-    expect(onSnap).toHaveBeenLastCalledWith(0.5);
+    expect(onResize).toHaveBeenLastCalledWith(0.5);
     expect(
       document.querySelector("[data-split-resize-snap-guide]"),
     ).not.toBeNull();
 
     fireEvent.pointerUp(window, { clientX: 560, pointerId: 41 });
-    expect(
-      document.querySelector("[data-split-resize-snap-guide]"),
-    ).toBeNull();
+    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
index e3ef6fba58..f81dd6ff05 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -7,18 +7,19 @@ import {
 
 interface UsePanelResizeSnapArgs {
   axis: SplitResizeAxis;
-  onSnap: (leadingFraction: number) => void;
+  onResize: (leadingFraction: number) => void;
   target: SplitResizeGridTarget;
 }
 
 /**
- * Bridges react-resizable-panels' outer divider into bb's shared magnetic
- * split grid. The library applies its raw pointer layout first; this listener
- * runs afterward and overrides only samples captured by the snap session.
+ * Gives react-resizable-panels' outer divider the same single-writer drag path
+ * as bb's other split dividers. A window-capture listener resolves every
+ * pointer sample through the shared magnetic grid before the panel library's
+ * body listener can apply a second raw layout.
  */
 export function usePanelResizeSnap({
   axis,
-  onSnap,
+  onResize,
   target,
 }: UsePanelResizeSnapArgs): (event: PointerEvent) => void {
   const { boundaryIndex, childCount } = target;
@@ -54,11 +55,20 @@ export function usePanelResizeSnap({
       const end = axis === "x" ? nextRect.right : nextRect.bottom;
       if (end <= start) return;
 
-      const snapSession = createSplitResizeSnapSession(
-        divider,
-        axis,
-        { boundaryIndex, childCount },
+      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 });
@@ -73,6 +83,8 @@ export function usePanelResizeSnap({
       let finished = false;
       const move = (moveEvent: PointerEvent) => {
         if (moveEvent.pointerId !== pointerId) return;
+        moveEvent.preventDefault();
+        moveEvent.stopPropagation();
         const nextPointer =
           axis === "x" ? moveEvent.clientX : moveEvent.clientY;
         const result = snapSession.resolve({
@@ -80,7 +92,7 @@ export function usePanelResizeSnap({
           pointer: nextPointer,
           start,
         });
-        if (result.snapped) onSnap(result.fraction);
+        onResize(result.fraction);
       };
       const finish = (finishEvent?: PointerEvent) => {
         if (finishEvent !== undefined && finishEvent.pointerId !== pointerId) {
@@ -88,24 +100,32 @@ export function usePanelResizeSnap({
         }
         if (finished) return;
         finished = true;
-        ownerDocument.body.removeEventListener("pointermove", move, true);
+        ownerWindow.removeEventListener("pointermove", move, true);
         ownerWindow.removeEventListener("pointerup", finish, true);
         ownerWindow.removeEventListener("pointercancel", finish, 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 (cleanupRef.current === finish) cleanupRef.current = null;
       };
       const finishOnBlur = () => finish();
 
       cleanupRef.current = finish;
-      // react-resizable-panels installs its body capture listener first. The
-      // shared snap listener is added after pointer-down so it sees and can
-      // override the library's raw layout within the same event turn.
-      ownerDocument.body.addEventListener("pointermove", move, true);
+      ownerWindow.addEventListener("pointermove", move, true);
       ownerWindow.addEventListener("pointerup", finish, true);
       ownerWindow.addEventListener("pointercancel", finish, true);
       ownerWindow.addEventListener("blur", finishOnBlur);
     },
-    [axis, boundaryIndex, childCount, clear, onSnap],
+    [axis, boundaryIndex, childCount, clear, onResize],
   );
 }
diff --git a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
index bb0fb49d92..b46c7f3b80 100644
--- a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
+++ b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
@@ -33,12 +33,15 @@ export function useSecondaryPanelResize({
   const secondaryResizablePanelRef = useRef<ImperativePanelHandle | null>(null);
   const isSecondaryPanelDraggingRef = useRef(false);
   const lastSecondaryPanelSizeRef = useRef(persistedWidthPercent);
-  const handleSecondaryPanelSnap = useCallback((leadingFraction: number) => {
-    secondaryResizablePanelRef.current?.resize((1 - leadingFraction) * 100);
-  }, []);
+  const handleSecondaryPanelPointerResize = useCallback(
+    (leadingFraction: number) => {
+      secondaryResizablePanelRef.current?.resize((1 - leadingFraction) * 100);
+    },
+    [],
+  );
   const handleSecondaryPanelResizePointerDownCapture = usePanelResizeSnap({
     axis: "x",
-    onSnap: handleSecondaryPanelSnap,
+    onResize: handleSecondaryPanelPointerResize,
     target: { boundaryIndex: 1, childCount: 2 },
   });
 
diff --git a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
index 24672ed276..095f9928de 100644
--- a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
+++ b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
@@ -175,15 +175,18 @@ export function SplitWorkspaceSecondaryPanelHost({
   // pane's panel shows next. Dragging it collapsed closes the window panel.
   const setPanelWidthPercent = useSetAtom(secondaryPanelWidthPercentAtom);
   const lastEmptyPanelSizeRef = useRef(0);
-  const handleEmptyPanelSnap = useCallback((leadingFraction: number) => {
-    panelGroupRef.current?.setLayout([
-      leadingFraction * 100,
-      (1 - leadingFraction) * 100,
-    ]);
-  }, []);
+  const handleEmptyPanelPointerResize = useCallback(
+    (leadingFraction: number) => {
+      panelGroupRef.current?.setLayout([
+        leadingFraction * 100,
+        (1 - leadingFraction) * 100,
+      ]);
+    },
+    [],
+  );
   const handleEmptyPanelResizePointerDownCapture = usePanelResizeSnap({
     axis: "x",
-    onSnap: handleEmptyPanelSnap,
+    onResize: handleEmptyPanelPointerResize,
     target: { boundaryIndex: 1, childCount: 2 },
   });
   const handleEmptyPanelResize = (size: number) => {

From 5714016f2481c23f1005640d35ba761ad2ba636c Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 22:31:31 -0700
Subject: [PATCH 11/15] Release outer split resize after pointerup

---
 .../usePanelResizeSnap.test.tsx               | 82 ++++++++++++++++++-
 .../secondary-panel/usePanelResizeSnap.ts     |  7 ++
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
index 23a0b5e09d..4c9e73126d 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -61,7 +61,11 @@ describe("usePanelResizeSnap", () => {
 
     try {
       fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 40 });
-      fireEvent.pointerMove(document.body, { clientX: 450, pointerId: 40 });
+      fireEvent.pointerMove(document.body, {
+        buttons: 1,
+        clientX: 450,
+        pointerId: 40,
+      });
 
       expect(rawPanelMove).not.toHaveBeenCalled();
       expect(onResize).toHaveBeenLastCalledWith(0.4375);
@@ -96,6 +100,76 @@ describe("usePanelResizeSnap", () => {
     );
   });
 
+  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,
+      });
+      const resizeCountBeforeRelease = onResize.mock.calls.length;
+
+      fireEvent.pointerUp(document.body, { clientX: 450, pointerId: 43 });
+      fireEvent.mouseUp(window, { clientX: 450 });
+      fireEvent.pointerMove(document.body, {
+        buttons: 0,
+        clientX: 430,
+        pointerId: 43,
+      });
+
+      expect(onResize).toHaveBeenCalledTimes(resizeCountBeforeRelease);
+      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} />);
@@ -110,7 +184,11 @@ describe("usePanelResizeSnap", () => {
     next.getBoundingClientRect = () => rect(471, 429);
 
     fireEvent.pointerDown(hitTarget, { clientX: 470, pointerId: 41 });
-    fireEvent.pointerMove(document.body, { clientX: 560, pointerId: 41 });
+    fireEvent.pointerMove(document.body, {
+      buttons: 1,
+      clientX: 560,
+      pointerId: 41,
+    });
 
     expect(onResize).toHaveBeenLastCalledWith(0.5);
     expect(
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
index f81dd6ff05..daf2213463 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -83,6 +83,10 @@ export function usePanelResizeSnap({
       let finished = false;
       const move = (moveEvent: PointerEvent) => {
         if (moveEvent.pointerId !== pointerId) return;
+        if (moveEvent.buttons === 0) {
+          clear();
+          return;
+        }
         moveEvent.preventDefault();
         moveEvent.stopPropagation();
         const nextPointer =
@@ -103,6 +107,7 @@ export function usePanelResizeSnap({
         ownerWindow.removeEventListener("pointermove", move, true);
         ownerWindow.removeEventListener("pointerup", finish, true);
         ownerWindow.removeEventListener("pointercancel", finish, true);
+        ownerWindow.removeEventListener("mouseup", finishOnMouseUp, true);
         ownerWindow.removeEventListener("blur", finishOnBlur);
         snapSession.clear();
         if (grid !== null) {
@@ -118,12 +123,14 @@ export function usePanelResizeSnap({
         }
         if (cleanupRef.current === finish) cleanupRef.current = null;
       };
+      const finishOnMouseUp = () => finish();
       const finishOnBlur = () => finish();
 
       cleanupRef.current = finish;
       ownerWindow.addEventListener("pointermove", move, true);
       ownerWindow.addEventListener("pointerup", finish, true);
       ownerWindow.addEventListener("pointercancel", finish, true);
+      ownerWindow.addEventListener("mouseup", finishOnMouseUp, true);
       ownerWindow.addEventListener("blur", finishOnBlur);
     },
     [axis, boundaryIndex, childCount, clear, onResize],

From 11d76d8e42c5a53c2208b0b63f6334c4799a4336 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 23:14:44 -0700
Subject: [PATCH 12/15] Strengthen outer divider snap resistance

---
 .../usePanelResizeSnap.test.tsx               | 37 +++++++++++++++++++
 .../secondary-panel/usePanelResizeSnap.ts     | 22 +++++++++--
 apps/app/src/lib/split-resize-snap.ts         | 14 ++++---
 3 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
index 4c9e73126d..ab04ddcf5b 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -198,4 +198,41 @@ describe("usePanelResizeSnap", () => {
     fireEvent.pointerUp(window, { clientX: 560, pointerId: 41 });
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
+
+  it("holds the outer divider for 25% farther than direct split dividers", () => {
+    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: 45 });
+    fireEvent.pointerMove(document.body, {
+      buttons: 1,
+      clientX: 500,
+      pointerId: 45,
+    });
+    fireEvent.pointerMove(document.body, {
+      buttons: 1,
+      clientX: 536,
+      pointerId: 45,
+    });
+
+    expect(onResize).toHaveBeenLastCalledWith(0.5);
+
+    fireEvent.pointerMove(document.body, {
+      buttons: 1,
+      clientX: 539,
+      pointerId: 45,
+    });
+    expect(onResize).toHaveBeenLastCalledWith(0.54875);
+
+    fireEvent.pointerUp(window, { clientX: 539, pointerId: 45 });
+  });
 });
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
index daf2213463..eba0a18253 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
   createSplitResizeSnapSession,
+  SPLIT_RESIZE_SNAP_RELEASE_PX,
   type SplitResizeAxis,
   type SplitResizeGridTarget,
 } from "@/lib/split-resize-snap";
 
+const OUTER_PANEL_SNAP_RELEASE_PX = SPLIT_RESIZE_SNAP_RELEASE_PX * 1.25;
+
 interface UsePanelResizeSnapArgs {
   axis: SplitResizeAxis;
   onResize: (leadingFraction: number) => void;
@@ -55,10 +58,21 @@ export function usePanelResizeSnap({
       const end = axis === "x" ? nextRect.right : nextRect.bottom;
       if (end <= start) return;
 
-      const snapSession = createSplitResizeSnapSession(divider, axis, {
-        boundaryIndex,
-        childCount,
-      });
+      const snapSession = createSplitResizeSnapSession(
+        divider,
+        axis,
+        {
+          boundaryIndex,
+          childCount,
+        },
+        {
+          // The panel library mediates this divider rather than letting bb move
+          // its adjacent flex panes directly, so the same numeric band feels
+          // lighter. A modestly longer hold restores perceptual parity without
+          // changing capture or the direct split defaults.
+          releasePx: OUTER_PANEL_SNAP_RELEASE_PX,
+        },
+      );
       const grid = divider.closest<HTMLElement>(
         "[data-split-resize-grid-root]",
       );
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 9f99fa55e2..a4cfcb4baa 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -29,6 +29,10 @@ export interface SplitResizeGridTarget {
   childCount: number;
 }
 
+interface SplitResizeSnapSessionOptions {
+  releasePx?: number;
+}
+
 function createGuide(
   document: Document,
   axis: SplitResizeAxis,
@@ -96,7 +100,9 @@ export function createSplitResizeSnapSession(
   divider: HTMLElement,
   axis: SplitResizeAxis,
   target: SplitResizeGridTarget,
+  options: SplitResizeSnapSessionOptions = {},
 ): SplitResizeSnapSession {
+  const releasePx = options.releasePx ?? SPLIT_RESIZE_SNAP_RELEASE_PX;
   let guide: HTMLElement | null = null;
   let fastCrossingAnchor: number | null = null;
   let lastPointer: number | null = null;
@@ -171,17 +177,15 @@ export function createSplitResizeSnapSession(
           // 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;
+          fastCrossingAnchor = distance > releasePx ? pointer : null;
           shouldSnap = true;
         } else if (snapped) {
-          if (distance <= SPLIT_RESIZE_SNAP_RELEASE_PX) {
+          if (distance <= releasePx) {
             fastCrossingAnchor = null;
             shouldSnap = true;
           } else if (
             fastCrossingAnchor !== null &&
-            Math.abs(pointer - fastCrossingAnchor) <=
-              SPLIT_RESIZE_SNAP_RELEASE_PX
+            Math.abs(pointer - fastCrossingAnchor) <= releasePx
           ) {
             shouldSnap = true;
           }

From 3988c35f68b171baa9c9965908ff761e61ee7601 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 26 Aug 2026 23:30:12 -0700
Subject: [PATCH 13/15] Ease center divider snap resistance

---
 .../secondary-panel/usePanelResizeSnap.test.tsx        | 10 +++++-----
 .../components/secondary-panel/usePanelResizeSnap.ts   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
index ab04ddcf5b..808eb3f913 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -199,7 +199,7 @@ describe("usePanelResizeSnap", () => {
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
   });
 
-  it("holds the outer divider for 25% farther than direct split dividers", () => {
+  it("holds the outer divider for 12.5% farther than direct split dividers", () => {
     const onResize = vi.fn();
     render(<SnapHarness onResize={onResize} />);
     const grid = screen.getByTestId("grid");
@@ -220,7 +220,7 @@ describe("usePanelResizeSnap", () => {
     });
     fireEvent.pointerMove(document.body, {
       buttons: 1,
-      clientX: 536,
+      clientX: 533,
       pointerId: 45,
     });
 
@@ -228,11 +228,11 @@ describe("usePanelResizeSnap", () => {
 
     fireEvent.pointerMove(document.body, {
       buttons: 1,
-      clientX: 539,
+      clientX: 534,
       pointerId: 45,
     });
-    expect(onResize).toHaveBeenLastCalledWith(0.54875);
+    expect(onResize).toHaveBeenLastCalledWith(0.5425);
 
-    fireEvent.pointerUp(window, { clientX: 539, pointerId: 45 });
+    fireEvent.pointerUp(window, { clientX: 534, pointerId: 45 });
   });
 });
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
index eba0a18253..8b5162d849 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -6,7 +6,7 @@ import {
   type SplitResizeGridTarget,
 } from "@/lib/split-resize-snap";
 
-const OUTER_PANEL_SNAP_RELEASE_PX = SPLIT_RESIZE_SNAP_RELEASE_PX * 1.25;
+const OUTER_PANEL_SNAP_RELEASE_PX = SPLIT_RESIZE_SNAP_RELEASE_PX * 1.125;
 
 interface UsePanelResizeSnapArgs {
   axis: SplitResizeAxis;

From 709c039e205064b3b8fe88bc44d9c4ccd2bd5b72 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 27 Aug 2026 00:22:21 -0700
Subject: [PATCH 14/15] Smooth center divider resizing

---
 .../usePanelResizeSnap.test.tsx               |  59 +++-----
 .../secondary-panel/usePanelResizeSnap.ts     | 136 +++++++++++-------
 .../useSecondaryPanelResize.ts                |  12 +-
 apps/app/src/lib/split-resize-snap.ts         |  14 +-
 .../SplitWorkspaceSecondaryPanelHost.tsx      |   9 +-
 5 files changed, 124 insertions(+), 106 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
index 808eb3f913..85f24ae55b 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.test.tsx
@@ -19,7 +19,7 @@ function rect(left: number, width: number): DOMRect {
 }
 
 function SnapHarness({ onResize }: { onResize: (fraction: number) => void }) {
-  const onPointerDownCapture = usePanelResizeSnap({
+  const { onPointerDownCapture } = usePanelResizeSnap({
     axis: "x",
     onResize,
     target: { boundaryIndex: 1, childCount: 2 },
@@ -44,7 +44,7 @@ function SnapHarness({ onResize }: { onResize: (fraction: number) => void }) {
 afterEach(() => cleanup());
 
 describe("usePanelResizeSnap", () => {
-  it("owns unsnapped pointer movement instead of letting the panel library resize first", () => {
+  it("previews pointer movement locally and commits once at drag end", () => {
     const onResize = vi.fn();
     render(<SnapHarness onResize={onResize} />);
     const grid = screen.getByTestId("grid");
@@ -68,6 +68,12 @@ describe("usePanelResizeSnap", () => {
       });
 
       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 });
@@ -124,17 +130,19 @@ describe("usePanelResizeSnap", () => {
         clientX: 450,
         pointerId: 43,
       });
-      const resizeCountBeforeRelease = onResize.mock.calls.length;
-
       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(resizeCountBeforeRelease);
+      expect(onResize).toHaveBeenCalledTimes(resizeCountAfterRelease);
       expect(grid.style.getPropertyValue("--panel-collapse-duration")).toBe(
         "220ms",
       );
@@ -190,49 +198,16 @@ describe("usePanelResizeSnap", () => {
       pointerId: 41,
     });
 
-    expect(onResize).toHaveBeenLastCalledWith(0.5);
+    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();
   });
 
-  it("holds the outer divider for 12.5% farther than direct split dividers", () => {
-    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: 45 });
-    fireEvent.pointerMove(document.body, {
-      buttons: 1,
-      clientX: 500,
-      pointerId: 45,
-    });
-    fireEvent.pointerMove(document.body, {
-      buttons: 1,
-      clientX: 533,
-      pointerId: 45,
-    });
-
-    expect(onResize).toHaveBeenLastCalledWith(0.5);
-
-    fireEvent.pointerMove(document.body, {
-      buttons: 1,
-      clientX: 534,
-      pointerId: 45,
-    });
-    expect(onResize).toHaveBeenLastCalledWith(0.5425);
-
-    fireEvent.pointerUp(window, { clientX: 534, pointerId: 45 });
-  });
 });
diff --git a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
index 8b5162d849..a3314d9ca8 100644
--- a/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
+++ b/apps/app/src/components/secondary-panel/usePanelResizeSnap.ts
@@ -1,43 +1,54 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
   createSplitResizeSnapSession,
-  SPLIT_RESIZE_SNAP_RELEASE_PX,
   type SplitResizeAxis,
   type SplitResizeGridTarget,
 } from "@/lib/split-resize-snap";
 
-const OUTER_PANEL_SNAP_RELEASE_PX = SPLIT_RESIZE_SNAP_RELEASE_PX * 1.125;
-
 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. A window-capture listener resolves every
- * pointer sample through the shared magnetic grid before the panel library's
- * body listener can apply a second raw layout.
+ * 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): (event: PointerEvent) => void {
+}: UsePanelResizeSnapArgs): PanelResizeSnapController {
   const { boundaryIndex, childCount } = target;
-  const cleanupRef = useRef<(() => void) | null>(null);
-  const clear = useCallback(() => {
-    const cleanup = cleanupRef.current;
-    cleanupRef.current = null;
-    cleanup?.();
+  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(() => clear, [clear]);
+  useEffect(() => cancel, [cancel]);
 
-  return useCallback(
+  const onPointerDownCapture = useCallback(
     (event: PointerEvent) => {
-      clear();
+      finish();
       const eventTarget = event.target;
       if (!(eventTarget instanceof HTMLElement)) return;
       const divider = eventTarget.closest<HTMLElement>(
@@ -58,21 +69,26 @@ export function usePanelResizeSnap({
       const end = axis === "x" ? nextRect.right : nextRect.bottom;
       if (end <= start) return;
 
-      const snapSession = createSplitResizeSnapSession(
-        divider,
-        axis,
-        {
-          boundaryIndex,
-          childCount,
-        },
-        {
-          // The panel library mediates this divider rather than letting bb move
-          // its adjacent flex panes directly, so the same numeric band feels
-          // lighter. A modestly longer hold restores perceptual parity without
-          // changing capture or the direct split defaults.
-          releasePx: OUTER_PANEL_SNAP_RELEASE_PX,
-        },
+      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]",
       );
@@ -87,18 +103,12 @@ export function usePanelResizeSnap({
       const pointer = axis === "x" ? event.clientX : event.clientY;
       snapSession.resolve({ end, pointer, start });
 
-      const ownerDocument = divider.ownerDocument;
-      const ownerWindow = ownerDocument.defaultView;
-      if (ownerWindow === null) {
-        snapSession.clear();
-        return;
-      }
-
       let finished = false;
+      let pendingFraction: number | null = null;
       const move = (moveEvent: PointerEvent) => {
         if (moveEvent.pointerId !== pointerId) return;
         if (moveEvent.buttons === 0) {
-          clear();
+          finish();
           return;
         }
         moveEvent.preventDefault();
@@ -110,17 +120,20 @@ export function usePanelResizeSnap({
           pointer: nextPointer,
           start,
         });
-        onResize(result.fraction);
+        pendingFraction = result.fraction;
+        previous.style.flex = `${pairTotal * result.fraction} 1 0px`;
+        next.style.flex = `${pairTotal * (1 - result.fraction)} 1 0px`;
       };
-      const finish = (finishEvent?: PointerEvent) => {
-        if (finishEvent !== undefined && finishEvent.pointerId !== pointerId) {
-          return;
-        }
+      const complete = (commit: boolean) => {
         if (finished) return;
         finished = true;
         ownerWindow.removeEventListener("pointermove", move, true);
-        ownerWindow.removeEventListener("pointerup", finish, true);
-        ownerWindow.removeEventListener("pointercancel", finish, true);
+        ownerWindow.removeEventListener("pointerup", finishForPointer, true);
+        ownerWindow.removeEventListener(
+          "pointercancel",
+          finishForPointer,
+          true,
+        );
         ownerWindow.removeEventListener("mouseup", finishOnMouseUp, true);
         ownerWindow.removeEventListener("blur", finishOnBlur);
         snapSession.clear();
@@ -135,18 +148,39 @@ export function usePanelResizeSnap({
             );
           }
         }
-        if (cleanupRef.current === finish) cleanupRef.current = null;
+        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 finishOnMouseUp = () => finish();
-      const finishOnBlur = () => finish();
+      const commitDrag = () => complete(true);
+      const cancelDrag = () => complete(false);
+      const finishForPointer = (finishEvent: PointerEvent) => {
+        if (finishEvent.pointerId !== pointerId) return;
+        commitDrag();
+      };
+      const finishOnMouseUp = () => commitDrag();
+      const finishOnBlur = () => commitDrag();
 
-      cleanupRef.current = finish;
+      activeDragRef.current = { cancel: cancelDrag, finish: commitDrag };
       ownerWindow.addEventListener("pointermove", move, true);
-      ownerWindow.addEventListener("pointerup", finish, true);
-      ownerWindow.addEventListener("pointercancel", finish, true);
+      ownerWindow.addEventListener("pointerup", finishForPointer, true);
+      ownerWindow.addEventListener("pointercancel", finishForPointer, true);
       ownerWindow.addEventListener("mouseup", finishOnMouseUp, true);
       ownerWindow.addEventListener("blur", finishOnBlur);
     },
-    [axis, boundaryIndex, childCount, clear, onResize],
+    [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 b46c7f3b80..0cceed11d4 100644
--- a/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
+++ b/apps/app/src/components/secondary-panel/useSecondaryPanelResize.ts
@@ -39,7 +39,10 @@ export function useSecondaryPanelResize({
     },
     [],
   );
-  const handleSecondaryPanelResizePointerDownCapture = usePanelResizeSnap({
+  const {
+    finish: finishSecondaryPanelResizeSnap,
+    onPointerDownCapture: handleSecondaryPanelResizePointerDownCapture,
+  } = usePanelResizeSnap({
     axis: "x",
     onResize: handleSecondaryPanelPointerResize,
     target: { boundaryIndex: 1, childCount: 2 },
@@ -100,9 +103,14 @@ export function useSecondaryPanelResize({
           return;
         }
 
+        finishSecondaryPanelResizeSnap();
         finishSecondaryPanelDragging();
       },
-      [finishSecondaryPanelDragging, setIsResizing],
+      [
+        finishSecondaryPanelDragging,
+        finishSecondaryPanelResizeSnap,
+        setIsResizing,
+      ],
     );
 
   useEffect(
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index a4cfcb4baa..9f99fa55e2 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -29,10 +29,6 @@ export interface SplitResizeGridTarget {
   childCount: number;
 }
 
-interface SplitResizeSnapSessionOptions {
-  releasePx?: number;
-}
-
 function createGuide(
   document: Document,
   axis: SplitResizeAxis,
@@ -100,9 +96,7 @@ export function createSplitResizeSnapSession(
   divider: HTMLElement,
   axis: SplitResizeAxis,
   target: SplitResizeGridTarget,
-  options: SplitResizeSnapSessionOptions = {},
 ): SplitResizeSnapSession {
-  const releasePx = options.releasePx ?? SPLIT_RESIZE_SNAP_RELEASE_PX;
   let guide: HTMLElement | null = null;
   let fastCrossingAnchor: number | null = null;
   let lastPointer: number | null = null;
@@ -177,15 +171,17 @@ export function createSplitResizeSnapSession(
           // 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 > releasePx ? pointer : null;
+          fastCrossingAnchor =
+            distance > SPLIT_RESIZE_SNAP_RELEASE_PX ? pointer : null;
           shouldSnap = true;
         } else if (snapped) {
-          if (distance <= releasePx) {
+          if (distance <= SPLIT_RESIZE_SNAP_RELEASE_PX) {
             fastCrossingAnchor = null;
             shouldSnap = true;
           } else if (
             fastCrossingAnchor !== null &&
-            Math.abs(pointer - fastCrossingAnchor) <= releasePx
+            Math.abs(pointer - fastCrossingAnchor) <=
+              SPLIT_RESIZE_SNAP_RELEASE_PX
           ) {
             shouldSnap = true;
           }
diff --git a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
index 095f9928de..30a169d5fb 100644
--- a/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
+++ b/apps/app/src/views/thread-detail/SplitWorkspaceSecondaryPanelHost.tsx
@@ -184,7 +184,10 @@ export function SplitWorkspaceSecondaryPanelHost({
     },
     [],
   );
-  const handleEmptyPanelResizePointerDownCapture = usePanelResizeSnap({
+  const {
+    finish: finishEmptyPanelResizeSnap,
+    onPointerDownCapture: handleEmptyPanelResizePointerDownCapture,
+  } = usePanelResizeSnap({
     axis: "x",
     onResize: handleEmptyPanelPointerResize,
     target: { boundaryIndex: 1, childCount: 2 },
@@ -193,7 +196,9 @@ export function SplitWorkspaceSecondaryPanelHost({
     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 = () => {

From a128a9917ffe49588cb2c84d573f01113834e5a6 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 27 Aug 2026 01:41:24 -0700
Subject: [PATCH 15/15] Preserve split snap resistance at speed

---
 apps/app/src/lib/split-resize-snap.test.ts | 45 +++++++++++++++++++++-
 apps/app/src/lib/split-resize-snap.ts      | 15 ++++++++
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/lib/split-resize-snap.test.ts b/apps/app/src/lib/split-resize-snap.test.ts
index 0cde35f5ad..ddbb998241 100644
--- a/apps/app/src/lib/split-resize-snap.test.ts
+++ b/apps/app/src/lib/split-resize-snap.test.ts
@@ -134,15 +134,22 @@ describe("split resize snapping", () => {
         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 + 1,
+      pointer: 500 + SNAP_RELEASE_PX + 2,
       start: 100,
     });
 
     expect(result.snapped).toBe(false);
     expect(result.fraction).toBeCloseTo(
-      (500 + SNAP_RELEASE_PX + 1 - 100) / 800,
+      (500 + SNAP_RELEASE_PX + 2 - 100) / 800,
       6,
     );
     expect(document.querySelector("[data-split-resize-snap-guide]")).toBeNull();
@@ -180,6 +187,40 @@ describe("split resize snapping", () => {
         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);
   });
 
diff --git a/apps/app/src/lib/split-resize-snap.ts b/apps/app/src/lib/split-resize-snap.ts
index 9f99fa55e2..ec892a72d8 100644
--- a/apps/app/src/lib/split-resize-snap.ts
+++ b/apps/app/src/lib/split-resize-snap.ts
@@ -100,6 +100,7 @@ export function createSplitResizeSnapSession(
   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;
@@ -114,6 +115,7 @@ export function createSplitResizeSnapSession(
     guide = null;
     fastCrossingAnchor = null;
     lastPointer = null;
+    releasePending = false;
     snapped = false;
   };
 
@@ -140,6 +142,7 @@ export function createSplitResizeSnapSession(
       lastPointer = pointer;
       const contentSpan = span - extent;
       if (gridCoordinate === null || contentSpan <= 0) {
+        releasePending = false;
         snapped = false;
         hideGuide();
         return {
@@ -166,6 +169,7 @@ export function createSplitResizeSnapSession(
       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
@@ -173,22 +177,33 @@ export function createSplitResizeSnapSession(
           // 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 {