fix(webapp): restore floating rect on zoned drop; client coords for dock zones

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts

@@ -86,8 +86,10 @@ function fakePanInfo(dx: number, dy: number): PanInfo {
   };
 }
 
-function fakePanInfoAt(point: { x: number; y: number }): PanInfo {
-  return { delta: { x: 0, y: 0 }, offset: { x: 0, y: 0 }, point, velocity: { x: 0, y: 0 } };
+// Dock zones read the pointer event's client coordinates, not PanInfo.point (which is page
+// coordinates), so drag-to-dock tests build events carrying clientX/clientY.
+function fakePointerEventAt(target: PointerEvent["target"], x: number, y: number): PointerEvent {
+  return { target, clientX: x, clientY: y } as unknown as PointerEvent;
 }
 
 describe("the floating window's rect, wired with panel-layout's own constants", () => {
@@ -198,32 +200,34 @@ describe("FloatingAgentWindow's drag-to-dock zones", () => {
     const target = view.titleEl() as unknown as PointerEvent["target"];
 
     act(() => {
-      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfoAt({ x: 0, y: 0 }));
-      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfoAt({ x: 1190, y: 400 }));
+      view.dragHandleProps.onPanStart!(fakePointerEventAt(target, 0, 0), fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!(fakePointerEventAt(target, 1190, 400), fakePanInfo(-20, 0));
     });
 
     expect(document.body.textContent).toContain("Dock right");
   });
 
-  it("calls onRequestModeChange with rightPanel on release in the right zone, without a rect jump", () => {
+  it("restores the pre-drag rect and calls onRequestModeChange(rightPanel) on release in the right zone", () => {
     stubViewport(1200, 900);
     const onRequestModeChange = vi.fn();
     const view = renderFloatingAgentWindow(onRequestModeChange);
     const target = view.titleEl() as unknown as PointerEvent["target"];
+    const leftBeforeDrag = view.outerLeft();
 
     act(() => {
-      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfoAt({ x: 0, y: 0 }));
-      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfoAt({ x: 1190, y: 400 }));
+      view.dragHandleProps.onPanStart!(fakePointerEventAt(target, 0, 0), fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!(fakePointerEventAt(target, 1190, 400), fakePanInfo(-200, 0));
     });
-    const leftBeforeRelease = view.outerLeft();
+    // The drag really did move the rect, so the restore below undoes a real change.
+    expect(view.outerLeft()).not.toBe(leftBeforeDrag);
 
     act(() => {
-      view.dragHandleProps.onPanEnd!({ target } as PointerEvent, fakePanInfoAt({ x: 1190, y: 400 }));
+      view.dragHandleProps.onPanEnd!(fakePointerEventAt(target, 1190, 400), fakePanInfo(0, 0));
     });
 
     expect(onRequestModeChange).toHaveBeenCalledTimes(1);
     expect(onRequestModeChange).toHaveBeenCalledWith("rightPanel");
-    expect(view.outerLeft()).toBe(leftBeforeRelease);
+    expect(view.outerLeft()).toBe(leftBeforeDrag);
     expect(document.body.textContent).not.toContain("Dock right");
   });
 
@@ -234,13 +238,13 @@ describe("FloatingAgentWindow's drag-to-dock zones", () => {
     const target = view.titleEl() as unknown as PointerEvent["target"];
 
     act(() => {
-      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfoAt({ x: 0, y: 0 }));
-      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfoAt({ x: 500, y: 5 }));
+      view.dragHandleProps.onPanStart!(fakePointerEventAt(target, 0, 0), fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!(fakePointerEventAt(target, 500, 5), fakePanInfo(0, -20));
     });
     expect(document.body.textContent).toContain("Fullscreen");
 
     act(() => {
-      view.dragHandleProps.onPanEnd!({ target } as PointerEvent, fakePanInfoAt({ x: 500, y: 5 }));
+      view.dragHandleProps.onPanEnd!(fakePointerEventAt(target, 500, 5), fakePanInfo(0, 0));
     });
 
     expect(onRequestModeChange).toHaveBeenCalledTimes(1);
@@ -255,11 +259,11 @@ describe("FloatingAgentWindow's drag-to-dock zones", () => {
     const startLeft = view.outerLeft();
 
     act(() => {
-      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
-      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+      view.dragHandleProps.onPanStart!(fakePointerEventAt(target, 0, 0), fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!(fakePointerEventAt(target, 500, 400), fakePanInfo(-20, 0));
     });
     act(() => {
-      view.dragHandleProps.onPanEnd!({ target } as PointerEvent, fakePanInfoAt({ x: 500, y: 400 }));
+      view.dragHandleProps.onPanEnd!(fakePointerEventAt(target, 500, 400), fakePanInfo(0, 0));
     });
 
     expect(onRequestModeChange).not.toHaveBeenCalled();

apps/webapp/app/components/dashboard-agent/panel-layout.tsx

@@ -13,6 +13,7 @@ import {
   dockZoneForPoint,
   type DockZone,
   type Point,
+  type Rect,
 } from "~/components/primitives/draggableResizableMath";
 import { cn } from "~/utils/cn";
 
@@ -134,24 +135,30 @@ export function FloatingAgentWindow({
   const fullscreen = mode === "fullscreen";
   const docked = mode === "rightPanel";
   const initial = useMemo(() => initialFloatingRect(), []);
-  const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
-    initial,
-    minSize: FLOATING_MIN_SIZE,
-    viewportPadding: FLOATING_MARGIN,
-  });
+  const { style, dragHandleProps, resizeHandleProps, position, size, setRect } =
+    useDraggableResizable({
+      initial,
+      minSize: FLOATING_MIN_SIZE,
+      viewportPadding: FLOATING_MARGIN,
+    });
   const [dragging, setDragging] = useState(false);
   const [dockZone, setDockZone] = useState<DockZone | null>(null);
   // onPan can arrive before onPanStart, so the no-drag check runs once, on whichever fires first.
   const gestureClassified = useRef(false);
   const ignoringGesture = useRef(false);
+  // The rect as it stood before this gesture, so a zoned drop can restore it — dragHandleProps.onPan
+  // (called below) has already folded the drop point's delta into the hook's own state by then.
+  const preDragRect = useRef<Rect | null>(null);
 
   const classifyGesture = (event: PointerEvent) => {
     if (gestureClassified.current) return;
     gestureClassified.current = true;
     ignoringGesture.current = !!(event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR);
   };
 
-  const zoneForPoint = (point: Point) =>
+  // PanInfo.point is page coordinates; the dock zones compare against the viewport, so use the
+  // pointer event's client coordinates instead.
+  const zoneForClientPoint = (point: Point) =>
     dockZoneForPoint(point, { width: window.innerWidth, height: window.innerHeight });
 
   // Same shape as `dragHandleProps` below empty, so a mode with no drag doesn't change types.
@@ -162,13 +169,17 @@ export function FloatingAgentWindow({
           onPanStart: (event: PointerEvent, info: PanInfo) => {
             classifyGesture(event);
             if (ignoringGesture.current) return;
+            preDragRect.current = { ...position, ...size };
             setDragging(true);
             dragHandleProps.onPanStart?.(event, info);
           },
           onPan: (event: PointerEvent, info: PanInfo) => {
             classifyGesture(event);
             if (ignoringGesture.current) return;
-            setDockZone(zoneForPoint(info.point));
+            // onPan can arrive before onPanStart, so both capture the pre-drag rect and flip dragging.
+            if (!preDragRect.current) preDragRect.current = { ...position, ...size };
+            setDragging(true);
+            setDockZone(zoneForClientPoint({ x: event.clientX, y: event.clientY }));
             dragHandleProps.onPan?.(event, info);
           },
           onPanEnd: (event: PointerEvent, info: PanInfo) => {
@@ -177,8 +188,13 @@ export function FloatingAgentWindow({
             ignoringGesture.current = false;
             setDragging(false);
             setDockZone(null);
-            const droppedZone = wasIgnoring ? null : zoneForPoint(info.point);
+            const droppedZone = wasIgnoring
+              ? null
+              : zoneForClientPoint({ x: event.clientX, y: event.clientY });
+            const rectBeforeDrag = preDragRect.current;
+            preDragRect.current = null;
             if (droppedZone) {
+              if (rectBeforeDrag) setRect(rectBeforeDrag);
               onRequestModeChange?.(droppedZone);
               return;
             }

apps/webapp/app/components/primitives/DraggableResizable.tsx

@@ -38,6 +38,8 @@ export type UseDraggableResizableResult = {
   resizeHandleProps: (edge: ResizeEdge) => PanHandlerProps;
   position: Point;
   size: Size;
+  /** Escape hatch to force the rect, e.g. restoring it after a drag that ended somewhere else (a dock zone). */
+  setRect: (rect: Rect) => void;
 };
 
 function getViewport(): Viewport {
@@ -111,6 +113,7 @@ export function useDraggableResizable({
     resizeHandleProps,
     position: { x: rect.x, y: rect.y },
     size: { w: rect.w, h: rect.h },
+    setRect,
   };
 }