fix(webapp): classify a drag gesture on whichever pan event lands first

onPan can arrive before onPanStart, so a gesture starting on a
data-agent-no-drag element could leak its first delta(s) before
ignoringGesture was set. Both handlers now classify the gesture once
(gestureClassified) using whichever event's target shows up first.
New test drives onPan before onPanStart from a no-drag target and
asserts zero movement.

Also drop a gratuitous useMemo over a 25-item array in
storybook.ai-agent's DotGridEditor (CodeRabbit nitpick).

Author: kathiekiwi

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

@@ -158,4 +158,20 @@ describe("FloatingAgentWindow's drag-vs-click filter", () => {
 
     expect(view.outerLeft()).toBe(startLeft);
   });
+
+  it("does not leak a delta when onPan for a no-drag target lands before its onPanStart", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.actionEl() as unknown as PointerEvent["target"];
+      // Framer-motion's real ordering: onPan can arrive first.
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+    });
+
+    expect(view.outerLeft()).toBe(startLeft);
+  });
 });

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

@@ -89,8 +89,10 @@ export function FloatingAgentWindow({
     viewportPadding: FLOATING_MARGIN,
   });
   const [dragging, setDragging] = useState(false);
-  // Set for the rest of a gesture that started on a no-drag element, since framer-motion
-  // can deliver onPan before onPanStart and the target is only known at start.
+  // Framer-motion can deliver onPan before onPanStart, so the no-drag check runs on
+  // whichever event lands first; `gestureClassified` makes sure it only runs once per
+  // gesture (a late onPanStart must not re-decide after onPan already classified it).
+  const gestureClassified = useRef(false);
   const ignoringGesture = useRef(false);
 
   if (fullscreen) {
@@ -101,21 +103,26 @@ export function FloatingAgentWindow({
     );
   }
 
+  const classifyGesture = (event: PointerEvent) => {
+    if (gestureClassified.current) return;
+    gestureClassified.current = true;
+    ignoringGesture.current = !!(event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR);
+  };
+
   const filteredDragHandleProps: Partial<PanHandlerProps> = {
     onPanStart: (event: PointerEvent, info: PanInfo) => {
-      if ((event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR)) {
-        ignoringGesture.current = true;
-        return;
-      }
-      ignoringGesture.current = false;
+      classifyGesture(event);
+      if (ignoringGesture.current) return;
       setDragging(true);
       dragHandleProps.onPanStart?.(event, info);
     },
     onPan: (event: PointerEvent, info: PanInfo) => {
+      classifyGesture(event);
       if (ignoringGesture.current) return;
       dragHandleProps.onPan?.(event, info);
     },
     onPanEnd: (event: PointerEvent, info: PanInfo) => {
+      gestureClassified.current = false;
       ignoringGesture.current = false;
       setDragging(false);
       dragHandleProps.onPanEnd?.(event, info);

apps/webapp/app/routes/storybook.ai-agent/route.tsx

@@ -255,12 +255,8 @@ function DotGridEditor() {
     setLit((current) => current.map((value, i) => (i === index ? !value : value)));
   };
 
-  const rows = useMemo(
-    () =>
-      Array.from({ length: MATRIX }, (_, r) =>
-        Array.from({ length: MATRIX }, (_, c) => (lit[r * MATRIX + c] ? "#" : ".")).join("")
-      ),
-    [lit]
+  const rows = Array.from({ length: MATRIX }, (_, r) =>
+    Array.from({ length: MATRIX }, (_, c) => (lit[r * MATRIX + c] ? "#" : ".")).join("")
   );
 
   return (