refactor: migrate to VS Code titlebar drag region pattern

packages/app/src/components/desktop/titlebar-drag-region.tsx

@@ -0,0 +1,228 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+import { getIsElectronRuntime } from "@/constants/layout";
+import { getDesktopWindow, updateDesktopWindowControls } from "@/desktop/electron/window";
+
+const DEFAULT_OVERLAY_HEIGHT = 29;
+const MAX_EFFECTIVE_TITLEBAR_HEIGHT = 48;
+
+/**
+ * VS Code-style titlebar drag region for Electron on Windows/Linux.
+ *
+ * Architecture copied from VS Code at commit daa0a70:
+ *   - titlebarPart.ts:463-464  → dedicated absolute drag overlay element
+ *   - titlebarpart.css:57-64   → drag region styles
+ *   - titlebarpart.css:249-260 → top-edge resizer with no-drag, hidden in fullscreen
+ *   - electron-browser/titlebarPart.ts:205-206 → resizer appended to root container
+ *
+ * This component renders two elements:
+ * 1. A full-size absolute drag overlay with -webkit-app-region: drag
+ * 2. A 4px top-edge resizer with -webkit-app-region: no-drag (hidden in fullscreen)
+ *
+ * Both are positioned absolute within the parent container. Interactive children
+ * of the parent sit above the drag overlay via normal stacking order.
+ * The global no-drag reset in index.html remains only as a defensive backstop.
+ */
+
+function useIsFullscreen(): boolean {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== "web" || !getIsElectronRuntime()) return;
+
+    let disposed = false;
+    let cleanup: (() => void) | undefined;
+
+    async function setup() {
+      const win = getDesktopWindow();
+      if (!win) return;
+
+      const fs = typeof win.isFullscreen === "function" ? await win.isFullscreen() : false;
+      if (disposed) return;
+      setIsFullscreen(fs);
+
+      if (typeof win.onResized !== "function") return;
+
+      const unlisten = await win.onResized(async () => {
+        if (disposed) return;
+        const fullscreen = typeof win.isFullscreen === "function" ? await win.isFullscreen() : false;
+        if (disposed) return;
+        setIsFullscreen(fullscreen);
+      });
+
+      cleanup = unlisten;
+      if (disposed) cleanup?.();
+    }
+
+    void setup();
+    return () => {
+      disposed = true;
+      cleanup?.();
+    };
+  }, []);
+
+  return isFullscreen;
+}
+
+/**
+ * Renders the VS Code-style drag overlay and top-edge resizer.
+ * Only renders on Electron Windows/Linux (non-mac). Returns null otherwise.
+ *
+ * Usage: Place as a child of any positioned container that should be draggable.
+ * Interactive elements in the same container will sit above the drag overlay
+ * via normal DOM stacking order (later siblings paint over earlier ones).
+ * Place TitlebarDragRegion BEFORE interactive children in JSX.
+ */
+export function TitlebarDragRegion() {
+  if (Platform.OS !== "web" || !getIsElectronRuntime()) {
+    return null;
+  }
+
+  return <TitlebarDragRegionInner />;
+}
+
+/**
+ * Explicit no-drag content layer above the drag overlay.
+ * Matches VS Code's pattern of z-index: 2500 + -webkit-app-region: no-drag
+ * on interactive containers within the titlebar (titlebarpart.css:141-143,
+ * 231-233, 264-268, 288-298, 382-401).
+ *
+ * Wrap interactive children of any TitlebarDragRegion parent in this component
+ * so the no-drag layering is structural, not dependent on the global CSS backstop.
+ * On non-Electron or mac, renders children directly with no wrapper.
+ */
+interface TitlebarNoDragContentProps {
+  children: ReactNode;
+  /** Layout direction for the no-drag wrapper. Default: "row" for header-style surfaces. */
+  direction?: "row" | "column";
+}
+
+export function TitlebarNoDragContent({ children, direction = "row" }: TitlebarNoDragContentProps) {
+  if (Platform.OS !== "web" || !getIsElectronRuntime()) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 2500,
+        // @ts-expect-error — WebkitAppRegion is not in CSSProperties
+        WebkitAppRegion: "no-drag",
+        display: "flex",
+        flexDirection: direction,
+        alignItems: "center",
+        justifyContent: direction === "column" ? "center" : undefined,
+        flex: 1,
+        height: "100%",
+        minWidth: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TitlebarDragRegionInner() {
+  const isFullscreen = useIsFullscreen();
+  const dragRegionRef = useRef<HTMLDivElement | null>(null);
+  const lastReportedHeightRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const dragRegion = dragRegionRef.current;
+    const parent = dragRegion?.parentElement;
+    if (!dragRegion || !parent) {
+      return;
+    }
+
+    let disposed = false;
+    let frameId: number | null = null;
+
+    const reportHeight = () => {
+      if (disposed) {
+        return;
+      }
+
+      const nextHeight = Math.min(
+        MAX_EFFECTIVE_TITLEBAR_HEIGHT,
+        Math.max(DEFAULT_OVERLAY_HEIGHT, Math.round(parent.getBoundingClientRect().height)),
+      );
+
+      if (lastReportedHeightRef.current === nextHeight) {
+        return;
+      }
+
+      lastReportedHeightRef.current = nextHeight;
+      void updateDesktopWindowControls({ height: nextHeight }).catch((error) => {
+        console.warn("[DesktopWindow] Failed to update window controls height", error);
+      });
+    };
+
+    const scheduleReport = () => {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+      }
+      frameId = requestAnimationFrame(() => {
+        frameId = null;
+        reportHeight();
+      });
+    };
+
+    scheduleReport();
+
+    const resizeObserver =
+      typeof ResizeObserver === "function"
+        ? new ResizeObserver(() => {
+            scheduleReport();
+          })
+        : null;
+
+    resizeObserver?.observe(parent);
+    window.addEventListener("resize", scheduleReport);
+
+    return () => {
+      disposed = true;
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleReport);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Drag overlay — equivalent to VS Code .titlebar-drag-region */}
+      <div
+        ref={dragRegionRef}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          // @ts-expect-error — WebkitAppRegion is not in CSSProperties
+          WebkitAppRegion: "drag",
+          zIndex: 0,
+          pointerEvents: "auto",
+        }}
+      />
+      {/* Top-edge resizer — equivalent to VS Code .resizer */}
+      {!isFullscreen && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: 4,
+            // @ts-expect-error — WebkitAppRegion is not in CSSProperties
+            WebkitAppRegion: "no-drag",
+            zIndex: 1,
+          }}
+        />
+      )}
+    </>
+  );
+}

packages/app/src/components/headers/screen-header.tsx

@@ -8,7 +8,8 @@ import {
   HEADER_TOP_PADDING_MOBILE,
   isCompactFormFactor,
 } from "@/constants/layout";
-import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
+import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
 
 interface ScreenHeaderProps {
   left?: ReactNode;
@@ -31,8 +32,6 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
   const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
   const baseHorizontalPadding = theme.spacing[2];
 
-  const dragHandlers = useDesktopDragHandlers();
-
   return (
     <View style={styles.header}>
       <View style={[styles.inner, { paddingTop: insets.top + topPadding }]}>
@@ -45,10 +44,12 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
             },
             borderless && styles.borderless,
           ]}
-          {...dragHandlers}
         >
-          <View style={[styles.left, leftStyle]}>{left}</View>
-          <View style={[styles.right, rightStyle]}>{right}</View>
+          <TitlebarDragRegion />
+          <TitlebarNoDragContent>
+            <View style={[styles.left, leftStyle]}>{left}</View>
+            <View style={[styles.right, rightStyle]}>{right}</View>
+          </TitlebarNoDragContent>
         </View>
       </View>
     </View>
@@ -61,6 +62,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   inner: {},
   row: {
+    position: "relative",
     height: {
       xs: HEADER_INNER_HEIGHT_MOBILE,
       md: HEADER_INNER_HEIGHT,

packages/app/src/components/left-sidebar.tsx

@@ -35,7 +35,8 @@ import {
   type SidebarProjectEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
+import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
 import { Combobox } from "@/components/ui/combobox";
 import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
 import { formatConnectionStatus } from "@/utils/daemons";
@@ -638,7 +639,6 @@ function DesktopSidebar({
   handleViewMore,
 }: DesktopSidebarProps) {
   const newAgentKeys = useShortcutKeys("new-agent");
-  const dragHandlers = useDesktopDragHandlers();
   const padding = useWindowControlsPadding("sidebar");
   const sidebarWidth = usePanelStore((state) => state.sidebarWidth);
   const setSidebarWidth = usePanelStore((state) => state.setSidebarWidth);
@@ -689,11 +689,14 @@ function DesktopSidebar({
 
   return (
     <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
-      {padding.top > 0 ? <View style={{ height: padding.top }} {...dragHandlers} /> : null}
-      <View style={styles.sidebarHeader} {...dragHandlers}>
-        <View style={styles.sidebarHeaderRow}>
-          <SessionsButton onPress={handleViewMore} />
-        </View>
+      {padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
+      <View style={styles.sidebarHeader}>
+        <TitlebarDragRegion />
+        <TitlebarNoDragContent>
+          <View style={styles.sidebarHeaderRow}>
+            <SessionsButton onPress={handleViewMore} />
+          </View>
+        </TitlebarNoDragContent>
       </View>
 
       {isInitialLoad ? (
@@ -832,6 +835,7 @@ const styles = StyleSheet.create((theme) => ({
     zIndex: 10,
   },
   sidebarHeader: {
+    position: "relative",
     height: {
       xs: HEADER_INNER_HEIGHT_MOBILE,
       md: HEADER_INNER_HEIGHT,