fix(webapp): drag filter opts out by marker, not tag, and lives in the shell

closest("button, a, input, [role=button]") rejected pans starting on
the header title, since the whole title (including the truncated
text) sits inside a Popover trigger <button>. Replace with an opt-out
marker (data-agent-no-drag) on the header's action-button group and
on the popover trigger's chevron only, so the title text stays
draggable while Radix's click-to-open behavior is untouched.

Move the filter and cursor/touch-action state out of
DashboardAgentPanel and into FloatingAgentWindow itself, so every
consumer (the real panel, the standalone story) gets identical
behavior instead of reimplementing it. New tests in
panel-layout.dom.test.ts drive the filter directly: a pan starting on
ordinary content drags, one starting on a data-agent-no-drag element
doesn't.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -346,7 +346,7 @@ export function DashboardAgent({
         <div className="relative h-full min-h-0">
           <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
           <FloatingAgentWindow fullscreen={fullscreen}>
-            {(dragHandleProps) => (
+            {({ dragHandleProps, dragHandleClassName }) => (
               <DashboardAgentPanel
                 onClose={() => setPanelOpen(false)}
                 requestedMessage={requestedMessage}
@@ -361,6 +361,7 @@ export function DashboardAgent({
                 isFullscreen={fullscreen}
                 onToggleFullscreen={toggleFullscreen}
                 dragHandleProps={dragHandleProps}
+                dragHandleClassName={dragHandleClassName}
               />
             )}
           </FloatingAgentWindow>

apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx

@@ -103,7 +103,7 @@ export function DashboardAgentHeader({
         onConfirm={onDeleteChat}
       />
 
-      <div className="flex shrink-0 items-center gap-0.5">
+      <div className="flex shrink-0 items-center gap-0.5" data-agent-no-drag>
         {showNewChat && (
           <Button
             variant="minimal/small"

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -53,7 +53,6 @@ import {
 import { AgentPanelColumn } from "./panel-layout";
 import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
 import { concurrencyPath } from "~/utils/pathBuilder";
-import { cn } from "~/utils/cn";
 
 function serializePageContext(pageContext: AgentPageContext): string | undefined {
   try {
@@ -88,12 +87,14 @@ export function DashboardAgentPanel({
   isFullscreen = false,
   onToggleFullscreen,
   dragHandleProps,
+  dragHandleClassName,
 }: {
   onClose: () => void;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
-  /** Spread onto the header, which is the floating window's drag handle. */
+  /** Spread onto the header, which is the floating window's drag handle; already filtered by `FloatingAgentWindow`. */
   dragHandleProps?: Partial<PanHandlerProps>;
+  dragHandleClassName?: string;
   // Every `seq` below distinguishes repeat requests with identical contents.
   requestedMessage?: { text: string; seq: number };
   openChatRequest?: { chatId: string; seq: number };
@@ -133,13 +134,6 @@ export function DashboardAgentPanel({
   const [loading, setLoading] = useState(
     () => readLastChat(storageKey)?.path === location.pathname
   );
-  // Cursor feedback only; the drag itself is handled by `dragHandleProps`.
-  const [draggingWindow, setDraggingWindow] = useState(false);
-  // Fullscreen passes no drag handlers at all (an empty object), so pan wiring is a no-op there.
-  const isDraggable = !!dragHandleProps?.onPan;
-  // Set when a gesture starts on a header button/link, so its onPan steps are dropped too.
-  const ignoringGesture = useRef(false);
-
   const currentPage = agentPageLabel(pageContext, location.pathname);
 
   const pagePaths = useMemo<Record<string, string>>(
@@ -616,48 +610,7 @@ export function DashboardAgentPanel({
         onClose();
       }}
     >
-      <motion.div
-        {...dragHandleProps}
-        onPanStart={
-          isDraggable
-            ? (event, info) => {
-                // Buttons/links inside the header (history, new chat, expand, close) sit
-                // above the drag handle; a click there must not move the window.
-                if (
-                  (event.target as HTMLElement | null)?.closest("button, a, input, [role=button]")
-                ) {
-                  ignoringGesture.current = true;
-                  return;
-                }
-                ignoringGesture.current = false;
-                setDraggingWindow(true);
-                dragHandleProps?.onPanStart?.(event, info);
-              }
-            : undefined
-        }
-        onPan={
-          isDraggable
-            ? (event, info) => {
-                if (ignoringGesture.current) return;
-                dragHandleProps?.onPan?.(event, info);
-              }
-            : undefined
-        }
-        onPanEnd={
-          isDraggable
-            ? (event, info) => {
-                ignoringGesture.current = false;
-                setDraggingWindow(false);
-                dragHandleProps?.onPanEnd?.(event, info);
-              }
-            : undefined
-        }
-        className={cn(
-          "select-none",
-          isDraggable && "touch-none",
-          isDraggable && (draggingWindow ? "cursor-grabbing" : "cursor-grab")
-        )}
-      >
+      <motion.div {...dragHandleProps} className={dragHandleClassName}>
         <DashboardAgentHeader
           title={headerTitle}
           chats={chats}

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

@@ -10,7 +10,9 @@ import {
   FLOATING_MARGIN,
   FLOATING_MIN_SIZE,
   FLOATING_WIDTH,
+  FloatingAgentWindow,
   initialFloatingRect,
+  type FloatingDragProps,
 } from "./panel-layout";
 
 let container: HTMLDivElement | undefined;
@@ -95,3 +97,65 @@ describe("the floating window's rect, wired with panel-layout's own constants",
     expect(hook.current.size.w).toBe(FLOATING_MIN_SIZE.w);
   });
 });
+
+// Mirrors the real header: a title-like element (draggable) beside a
+// `data-agent-no-drag` action (opted out), same as DashboardAgentHeader's button group.
+function renderFloatingAgentWindow() {
+  let latest!: FloatingDragProps;
+  function Harness() {
+    return createElement(FloatingAgentWindow, { fullscreen: false }, (drag: FloatingDragProps) => {
+      // oxlint-disable-next-line react/globals -- test harness capturing the render-prop's value.
+      latest = drag;
+      return createElement(
+        "div",
+        null,
+        createElement("span", { "data-testid": "title" }, "Chat title"),
+        createElement("button", { "data-agent-no-drag": "", "data-testid": "action" }, "Close")
+      );
+    });
+  }
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(createElement(Harness));
+  });
+  return {
+    get dragHandleProps() {
+      return latest.dragHandleProps;
+    },
+    outerLeft: () => (container!.firstElementChild as HTMLDivElement).style.left,
+    titleEl: () => container!.querySelector<HTMLElement>('[data-testid="title"]')!,
+    actionEl: () => container!.querySelector<HTMLElement>('[data-testid="action"]')!,
+  };
+}
+
+describe("FloatingAgentWindow's drag-vs-click filter", () => {
+  it("drags when a gesture starts on ordinary content, like the header title", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.titleEl() as unknown as PointerEvent["target"];
+      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+    });
+
+    expect(view.outerLeft()).not.toBe(startLeft);
+  });
+
+  it("does not drag when a gesture starts on a data-agent-no-drag element", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.actionEl() as unknown as PointerEvent["target"];
+      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

@@ -1,7 +1,7 @@
 // Both class helpers apply to always-rendered wrappers, so toggling fullscreen is a
 // class change only and the open chat's transport, session and transcript survive it.
-import { useMemo } from "react";
-import { motion } from "framer-motion";
+import { useMemo, useRef, useState } from "react";
+import { motion, type PanInfo } from "framer-motion";
 import {
   draggableResizeHandleClassName,
   useDraggableResizable,
@@ -10,6 +10,16 @@ import {
 } from "~/components/primitives/DraggableResizable";
 import { cn } from "~/utils/cn";
 
+// Mark an element (e.g. a header button, or just its icon) with `data-agent-no-drag` so a
+// pan starting on it never drags the window.
+const NO_DRAG_SELECTOR = "[data-agent-no-drag]";
+
+/** Spread onto the drag handle; `dragHandleClassName` already carries cursor/touch-action/select-none. */
+export type FloatingDragProps = {
+  dragHandleProps: Partial<PanHandlerProps>;
+  dragHandleClassName: string;
+};
+
 const AGENT_FULLSCREEN_STORAGE_KEY = "tdev:dashboard-agent:fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
@@ -59,25 +69,59 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
-/** Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller (`DashboardAgent`) supplies it. */
+/**
+ * Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller
+ * (`DashboardAgent`) supplies it. Owns the drag-vs-click filter so every consumer (the real
+ * panel, the standalone story) gets identical behavior: a pan starting on a
+ * `data-agent-no-drag` element (or a descendant of one) never moves the window.
+ */
 export function FloatingAgentWindow({
   fullscreen,
   children,
 }: {
   fullscreen: boolean;
-  children: (dragHandleProps: Partial<PanHandlerProps>) => React.ReactNode;
+  children: (drag: FloatingDragProps) => React.ReactNode;
 }) {
   const initial = useMemo(() => initialFloatingRect(), []);
   const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
     initial,
     minSize: FLOATING_MIN_SIZE,
     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.
+  const ignoringGesture = useRef(false);
 
   if (fullscreen) {
-    return <div className={agentTakeoverClassName(true)}>{children({})}</div>;
+    return (
+      <div className={agentTakeoverClassName(true)}>
+        {children({ dragHandleProps: {}, dragHandleClassName: "" })}
+      </div>
+    );
   }
 
+  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;
+      setDragging(true);
+      dragHandleProps.onPanStart?.(event, info);
+    },
+    onPan: (event: PointerEvent, info: PanInfo) => {
+      if (ignoringGesture.current) return;
+      dragHandleProps.onPan?.(event, info);
+    },
+    onPanEnd: (event: PointerEvent, info: PanInfo) => {
+      ignoringGesture.current = false;
+      setDragging(false);
+      dragHandleProps.onPanEnd?.(event, info);
+    },
+  };
+
   return (
     <div
       style={style}
@@ -86,7 +130,14 @@ export function FloatingAgentWindow({
       {/* Clips content to the rounded corners without clipping the resize handles below,
           which sit half outside this box's edges. */}
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg">
-        {children(dragHandleProps)}
+        {/* oxlint-disable-next-line react/refs -- filteredDragHandleProps' closures only touch the ref inside their own event handlers, not during this render. */}
+        {children({
+          dragHandleProps: filteredDragHandleProps,
+          dragHandleClassName: cn(
+            "select-none touch-none",
+            dragging ? "cursor-grabbing" : "cursor-grab"
+          ),
+        })}
       </div>
       {RESIZE_EDGES.map((edge) => (
         <motion.div

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

@@ -223,7 +223,12 @@ function PopoverArrowTrigger({
       >
         {children}
       </Paragraph>
-      <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
+      {/* Wrapper only: `data-agent-no-drag` is an opt-out marker some draggable-window hosts
+          check via `closest()`, so the icon (not the title text beside it) can decline a drag
+          without changing this primitive's layout (`contents` keeps the icon as the flex item). */}
+      <span data-agent-no-drag className="contents">
+        <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
+      </span>
     </PopoverTrigger>
   );
 }

apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx

@@ -63,9 +63,9 @@ export default function Story() {
       )}
       {mounted && open && (
         <FloatingAgentWindow fullscreen={fullscreen}>
-          {(dragHandleProps) => (
+          {({ dragHandleProps, dragHandleClassName }) => (
             <div className="flex h-full flex-col bg-background-bright">
-              <motion.div {...dragHandleProps}>
+              <motion.div {...dragHandleProps} className={dragHandleClassName}>
                 <DashboardAgentHeader
                   title="New chat"
                   chats={NO_CHATS}