fix: rewrite titlebar drag to match VS Code's static pattern

Replace the stateful TitlebarDragRegion (hooks, ResizeObserver, IPC,
fullscreen tracking) with a pure static component — matching VS Code's
titlebar-drag-region exactly: position absolute, full size, no z-index,
no pointer-events, no state, no event listeners.

Remove TitlebarNoDragContent entirely — VS Code doesn't wrap content in
no-drag; interactive elements get no-drag from the global CSS backstop
in index.html.

Add drag regions to all header surfaces:
- ScreenHeader (sessions, workspace header)
- Left sidebar (traffic light area + header)
- Split container pane tabs
- Explorer sidebar header (Changes/Files tabs)

Fix workspace header empty space not draggable by changing
headerTitleContainer from flex: 1 to flexShrink: 1.

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -51,7 +51,7 @@ import type {
 } from "@server/server/agent/agent-sdk-types";
 import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
-import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
+import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
@@ -1000,8 +1000,7 @@ function DraftAgentScreenContent({
   const mainContent = (
     <View style={styles.container}>
       <TitlebarDragRegion />
-      <TitlebarNoDragContent direction="column">
-        <View style={styles.outerContainer}>
+      <View style={styles.outerContainer}>
         <View style={styles.agentPanel}>
           <View
             style={[
@@ -1264,7 +1263,6 @@ function DraftAgentScreenContent({
           />
         ) : null}
       </View>
-      </TitlebarNoDragContent>
     </View>
   );
 

packages/app/src/screens/open-project-screen.tsx

@@ -9,7 +9,7 @@ import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSessionStore } from "@/stores/session-store";
 import { isCompactFormFactor } from "@/constants/layout";
-import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
+import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const openAgentList = usePanelStore((s) => s.openAgentList);
@@ -30,24 +30,22 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
       <MenuHeader borderless />
       <View style={styles.content}>
         <TitlebarDragRegion />
-        <TitlebarNoDragContent direction="column">
-          <View style={styles.logo}>
-            <PaseoLogo size={56} />
-          </View>
-          <View style={styles.headingGroup}>
-            <Text style={styles.heading}>What shall we build today?</Text>
-            {hasHydrated && !hasProjects ? (
-              <Text style={styles.subtitle}>
-                Add a project folder to start running agents on your codebase
-              </Text>
-            ) : null}
-          </View>
-          <View style={styles.cta}>
-            <Button variant="default" leftIcon={FolderOpen} onPress={() => void openProjectPicker()} testID="open-project-submit">
-              Add a project
-            </Button>
-          </View>
-        </TitlebarNoDragContent>
+        <View style={styles.logo}>
+          <PaseoLogo size={56} />
+        </View>
+        <View style={styles.headingGroup}>
+          <Text style={styles.heading}>What shall we build today?</Text>
+          {hasHydrated && !hasProjects ? (
+            <Text style={styles.subtitle}>
+              Add a project folder to start running agents on your codebase
+            </Text>
+          ) : null}
+        </View>
+        <View style={styles.cta}>
+          <Button variant="default" leftIcon={FolderOpen} onPress={() => void openProjectPicker()} testID="open-project-submit">
+            Add a project
+          </Button>
+        </View>
       </View>
     </View>
   );

packages/app/src/screens/startup-splash-screen.tsx

@@ -11,7 +11,7 @@ import {
   getDesktopDaemonLogs,
   type DesktopDaemonLogs,
 } from "@/desktop/daemon/desktop-daemon";
-import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
+import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 
 type StartupSplashScreenProps = {
   bootstrapState?: {
@@ -224,10 +224,8 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
     return (
       <View style={styles.container}>
         <TitlebarDragRegion />
-        <TitlebarNoDragContent direction="column">
-          <PaseoLogo size={96} />
-          <Text style={styles.subtitle}>Starting up…</Text>
-        </TitlebarNoDragContent>
+        <PaseoLogo size={96} />
+        <Text style={styles.subtitle}>Starting up…</Text>
       </View>
     );
   }
@@ -236,24 +234,22 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
     return (
       <View style={styles.container}>
         <TitlebarDragRegion />
-        <TitlebarNoDragContent direction="column">
-          <View style={styles.centeredContent}>
-            <PaseoLogo size={96} />
-            <Text style={styles.title}>Welcome to Paseo</Text>
-            <View style={styles.progressSteps}>
-              {progressSteps.map((step) => (
-                <View key={step.key} style={styles.progressStepRow}>
-                  {step.status === "complete" ? (
-                    <Check size={18} color={theme.colors.success} />
-                  ) : (
-                    <ActivityIndicator color={theme.colors.accent} />
-                  )}
-                  <Text style={styles.subtitleInline}>{step.label}</Text>
-                </View>
-              ))}
-            </View>
+        <View style={styles.centeredContent}>
+          <PaseoLogo size={96} />
+          <Text style={styles.title}>Welcome to Paseo</Text>
+          <View style={styles.progressSteps}>
+            {progressSteps.map((step) => (
+              <View key={step.key} style={styles.progressStepRow}>
+                {step.status === "complete" ? (
+                  <Check size={18} color={theme.colors.success} />
+                ) : (
+                  <ActivityIndicator color={theme.colors.accent} />
+                )}
+                <Text style={styles.subtitleInline}>{step.label}</Text>
+              </View>
+            ))}
           </View>
-        </TitlebarNoDragContent>
+        </View>
       </View>
     );
   }
@@ -261,8 +257,7 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
   return (
     <View style={[styles.container, styles.containerError]}>
       <TitlebarDragRegion />
-      <TitlebarNoDragContent direction="column">
-        <View style={styles.errorContent}>
+      <View style={styles.errorContent}>
         <View style={styles.errorHeader}>
           <PaseoLogo size={64} />
           <Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
@@ -321,7 +316,6 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
           </Button>
         </View>
       </View>
-      </TitlebarNoDragContent>
     </View>
   );
 }

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -2327,7 +2327,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 1,
   },
   headerTitleContainer: {
-    flex: 1,
+    flexShrink: 1,
     minWidth: 0,
     flexDirection: "row",
     alignItems: "center",