fix(mobile): stabilize thread composer and interactions

apps/mobile/package.json

@@ -49,7 +49,7 @@
     "@expo-google-fonts/dm-sans": "^0.4.2",
     "@expo/metro-runtime": "~56.0.15",
     "@expo/ui": "~56.0.18",
-    "@legendapp/list": "3.3.3",
+    "@legendapp/list": "catalog:",
     "@noble/curves": "catalog:",
     "@noble/hashes": "catalog:",
     "@pierre/diffs": "catalog:",

apps/mobile/src/Stack.tsx

@@ -18,7 +18,6 @@ import { AppText as Text } from "./components/AppText";
 import { getCompactBrandHeaderOptions } from "./components/CompactBrandTitle";
 import { ArchivedThreadsRouteScreen } from "./features/archive/ArchivedThreadsRouteScreen";
 import { useAgentNotificationNavigation } from "./features/agent-awareness/notificationNavigation";
-import { ClerkSettingsSheetDetentProvider } from "./features/cloud/ClerkSettingsSheetDetent";
 import { ConnectOnboardingRouteScreen } from "./features/cloud/ConnectOnboardingRouteScreen";
 import { useConnectOnboardingNavigation } from "./features/cloud/connectOnboardingNavigation";
 import { ThreadFilesTreeScreen, ThreadFileScreen } from "./features/files/ThreadFilesRouteScreen";
@@ -134,7 +133,7 @@ const LEGAL_DOCUMENT_HEADER_OPTIONS: AppScreenOptions = {
   presentation: "fullScreenModal",
 };
 
-const SettingsSheetStack = createNativeStackNavigator({
+const SettingsContentStack = createNativeStackNavigator({
   initialRouteName: "Settings",
   screenOptions: {
     ...GLASS_HEADER_OPTIONS,
@@ -198,20 +197,30 @@ const SettingsSheetStack = createNativeStackNavigator({
         title: "Usage",
       },
     }),
+  },
+});
+
+// The outer stack never owns visible chrome. Settings routes render inside a
+// nested stack whose native header remains mounted, while Clerk owns auth chrome.
+// Keeping bar visibility invariant avoids iOS 26's headerless-to-headered jump.
+const SettingsSheetStack = createNativeStackNavigator({
+  initialRouteName: "SettingsContent",
+  screenOptions: {
+    headerShown: false,
+  },
+  screens: {
+    SettingsContent: createNativeStackScreen({
+      screen: SettingsContentStack,
+      linking: "",
+    }),
     SettingsAuth: createNativeStackScreen({
       screen: SettingsAuthRouteScreen,
       linking: "auth",
-      options: {
-        title: "Sign in",
-      },
     }),
     SettingsWaitlist: createNativeStackScreen({
       // Keep the old deep link working after the Connect GA launch.
       screen: SettingsAuthRouteScreen,
       linking: "waitlist",
-      options: {
-        title: "Sign in",
-      },
     }),
   },
 });
@@ -347,11 +356,9 @@ function RootStackLayout(props: {
     <HardwareKeyboardCommandProvider pathname={pathname}>
       <ThreadOutboxDrainWorker />
       <ShowcaseCaptureCoordinator pathname={pathname} />
-      <ClerkSettingsSheetDetentProvider initiallyExpanded={false}>
-        <AdaptiveWorkspaceLayout pathname={workspacePathname}>
-          {props.children}
-        </AdaptiveWorkspaceLayout>
-      </ClerkSettingsSheetDetentProvider>
+      <AdaptiveWorkspaceLayout pathname={workspacePathname}>
+        {props.children}
+      </AdaptiveWorkspaceLayout>
     </HardwareKeyboardCommandProvider>
   );
 }

apps/mobile/src/components/ControlPill.tsx

@@ -6,6 +6,7 @@ import {
   type ComponentProps,
   type ReactElement,
   type ReactNode,
+  useRef,
 } from "react";
 import { Platform, Pressable, useColorScheme, View } from "react-native";
 import { useThemeColor } from "../lib/useThemeColor";
@@ -21,10 +22,31 @@ export function ControlPill(props: {
   readonly label?: string;
   readonly accessibilityLabel?: string;
   readonly onPress?: () => void;
+  readonly activateOnPressIn?: boolean;
   readonly variant?: "circle" | "pill" | "primary" | "danger";
   readonly disabled?: boolean;
+  readonly className?: string;
 }) {
   const variant = props.variant ?? "circle";
+  const activatedOnPressInRef = useRef(false);
+
+  const handlePressIn = () => {
+    activatedOnPressInRef.current = true;
+    props.onPress?.();
+  };
+  const handlePressOut = () => {
+    // Pressability invokes onPressOut immediately before onPress on release.
+    // Defer the reset so onPress can identify the same physical gesture.
+    setTimeout(() => {
+      activatedOnPressInRef.current = false;
+    }, 0);
+  };
+  const handlePress = () => {
+    if (activatedOnPressInRef.current) {
+      return;
+    }
+    props.onPress?.();
+  };
 
   const iconColor = useThemeColor("--color-icon");
   const iconSubtle = useThemeColor("--color-icon-subtle");
@@ -54,6 +76,7 @@ export function ControlPill(props: {
       : variant === "danger"
         ? "bg-danger"
         : "bg-subtle",
+    props.className,
   );
   const labelClassName = cn(
     "text-center text-xs font-t3-bold",
@@ -68,7 +91,9 @@ export function ControlPill(props: {
     <Pressable
       accessibilityLabel={props.accessibilityLabel ?? props.label}
       accessibilityRole="button"
-      onPress={props.onPress}
+      onPress={props.activateOnPressIn ? handlePress : props.onPress}
+      onPressIn={props.activateOnPressIn ? handlePressIn : undefined}
+      onPressOut={props.activateOnPressIn ? handlePressOut : undefined}
       disabled={props.disabled}
       className={containerClassName}
     >

apps/mobile/src/features/archive/ArchivedThreadsRouteScreen.tsx

@@ -5,7 +5,6 @@ import { useFocusEffect } from "@react-navigation/native";
 import { useCallback, useMemo, useState } from "react";
 
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
-import { useClerkSettingsSheetDetent } from "../cloud/ClerkSettingsSheetDetent";
 import { useArchivedThreadListActions } from "../home/useThreadListActions";
 import {
   ArchivedThreadsScreen,
@@ -18,7 +17,6 @@ import {
 } from "./useArchivedThreadSnapshots";
 
 export function ArchivedThreadsRouteScreen() {
-  const { expand } = useClerkSettingsSheetDetent();
   const { savedConnectionsById } = useSavedRemoteConnections();
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<EnvironmentId | null>(null);
@@ -70,9 +68,8 @@ export function ArchivedThreadsRouteScreen() {
 
   useFocusEffect(
     useCallback(() => {
-      expand();
       refresh();
-    }, [expand, refresh]),
+    }, [refresh]),
   );
 
   return (

apps/mobile/src/features/cloud/connectOnboardingNavigation.ts

@@ -6,8 +6,8 @@ import { appAtomRegistry } from "../../state/atom-registry";
 import { clearConnectOnboardingRequest, connectOnboardingRequestAtom } from "./connectOnboarding";
 import { isConnectOnboardingOptedOut } from "./connectOnboardingOptOut";
 
-// Sign-in happens inside the Settings sheet; give its detent/session-state
-// transitions a beat to settle before presenting another formSheet on top.
+// Sign-in happens inside the Settings sheet; give its session-state transition
+// a beat to settle before presenting another formSheet on top.
 const PRESENT_ONBOARDING_DELAY_MS = 600;
 
 /**

apps/mobile/src/features/home/HomeRouteScreen.tsx

@@ -134,7 +134,10 @@ export function HomeRouteScreen() {
         <NativeStackScreenOptions
           options={getConnectionAwareBrandHeaderOptions({
             onOpenEnvironments: () =>
-              navigation.navigate("SettingsSheet", { screen: "SettingsEnvironments" }),
+              navigation.navigate("SettingsSheet", {
+                screen: "SettingsContent",
+                params: { screen: "SettingsEnvironments" },
+              }),
           })}
         />
         <HomeHeader
@@ -148,9 +151,17 @@ export function HomeRouteScreen() {
           onEnvironmentChange={setSelectedEnvironmentId}
           onProjectChange={setSelectedProjectKey}
           onOpenEnvironments={() =>
-            navigation.navigate("SettingsSheet", { screen: "SettingsEnvironments" })
+            navigation.navigate("SettingsSheet", {
+              screen: "SettingsContent",
+              params: { screen: "SettingsEnvironments" },
+            })
+          }
+          onOpenSettings={() =>
+            navigation.navigate("SettingsSheet", {
+              screen: "SettingsContent",
+              params: { screen: "Settings" },
+            })
           }
-          onOpenSettings={() => navigation.navigate("SettingsSheet", { screen: "Settings" })}
           onProjectSortOrderChange={setProjectSortOrder}
           onSearchQueryChange={setSearchQuery}
           onStartNewTask={() => navigation.navigate("NewTaskSheet", { screen: "NewTask" })}
@@ -161,7 +172,10 @@ export function HomeRouteScreen() {
           catalogState={catalogState}
           environments={environments}
           onAddConnection={() =>
-            navigation.navigate("SettingsSheet", { screen: "SettingsEnvironmentNew" })
+            navigation.navigate("SettingsSheet", {
+              screen: "SettingsContent",
+              params: { screen: "SettingsEnvironmentNew" },
+            })
           }
           onArchiveThread={archiveThread}
           onDeleteThread={confirmDeleteThread}
@@ -174,7 +188,12 @@ export function HomeRouteScreen() {
           onMovePinnedThread={movePinnedThread}
           onEnvironmentChange={setSelectedEnvironmentId}
           onProjectChange={setSelectedProjectKey}
-          onOpenSettings={() => navigation.navigate("SettingsSheet", { screen: "Settings" })}
+          onOpenSettings={() =>
+            navigation.navigate("SettingsSheet", {
+              screen: "SettingsContent",
+              params: { screen: "Settings" },
+            })
+          }
           onProjectSortOrderChange={setProjectSortOrder}
           onSearchQueryChange={setSearchQuery}
           onSelectThread={(thread) => {

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx

@@ -429,13 +429,19 @@ function AdaptiveWorkspaceLayoutContent(
   );
 
   const handleOpenSettings = useCallback(() => {
-    navigation.navigate("SettingsSheet", { screen: "Settings" });
+    navigation.navigate("SettingsSheet", {
+      screen: "SettingsContent",
+      params: { screen: "Settings" },
+    });
   }, [navigation]);
 
   // Minted here (root stack navigation) so the sidebar pane stays free of
   // navigation hooks — on iOS it renders inside an independent nav tree.
   const handleOpenEnvironmentSettings = useCallback(() => {
-    navigation.navigate("SettingsSheet", { screen: "SettingsEnvironments" });
+    navigation.navigate("SettingsSheet", {
+      screen: "SettingsContent",
+      params: { screen: "SettingsEnvironments" },
+    });
   }, [navigation]);
 
   const handleNewThreadInProject = useCallback(

apps/mobile/src/features/settings/SettingsAuthRouteScreen.tsx

@@ -1,18 +1,17 @@
 import { useAuth } from "@clerk/expo";
 import { AuthView, UserProfileView } from "@clerk/expo/native";
 import { StackActions, useNavigation } from "@react-navigation/native";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
-import { useCallback, useEffect } from "react";
+import { useCallback, useLayoutEffect } from "react";
 import { View } from "react-native";
 
 import { hasCloudPublicConfig } from "../cloud/publicConfig";
 
 export function SettingsAuthRouteScreen() {
   const navigation = useNavigation();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!hasCloudPublicConfig()) {
-      navigation.dispatch(StackActions.replace("Settings"));
+      navigation.dispatch(StackActions.replace("SettingsContent"));
     }
   }, [navigation]);
 
@@ -22,20 +21,20 @@ export function SettingsAuthRouteScreen() {
 function ConfiguredSettingsAuthRouteScreen() {
   const { isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });
   const navigation = useNavigation();
-  const handleHostBack = useCallback(() => navigation.goBack(), [navigation]);
+  const handleHostBack = useCallback(
+    () => navigation.dispatch(StackActions.popTo("SettingsContent")),
+    [navigation],
+  );
 
   return (
-    <>
-      <NativeStackScreenOptions options={{ headerShown: false }} />
-      <View collapsable={false} className="flex-1 overflow-hidden bg-sheet">
-        {isLoaded ? (
-          isSignedIn ? (
-            <UserProfileView isDismissible={false} onHostBack={handleHostBack} />
-          ) : (
-            <AuthView isDismissible={false} onHostBack={handleHostBack} />
-          )
-        ) : null}
-      </View>
-    </>
+    <View collapsable={false} className="flex-1 overflow-hidden bg-sheet">
+      {isLoaded ? (
+        isSignedIn ? (
+          <UserProfileView isDismissible={false} onHostBack={handleHostBack} />
+        ) : (
+          <AuthView isDismissible={false} onHostBack={handleHostBack} />
+        )
+      ) : null}
+    </View>
   );
 }

apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx

@@ -98,7 +98,10 @@ export function SettingsEnvironmentsRouteScreen() {
                 accessibilityLabel: "Add environment",
                 icon: "plus",
                 onPress: () =>
-                  navigation.navigate("SettingsSheet", { screen: "SettingsEnvironmentNew" }),
+                  navigation.navigate("SettingsSheet", {
+                    screen: "SettingsContent",
+                    params: { screen: "SettingsEnvironmentNew" },
+                  }),
               },
             ]}
           />
@@ -108,7 +111,10 @@ export function SettingsEnvironmentsRouteScreen() {
           <NativeHeaderToolbar.Button
             icon="plus"
             onPress={() =>
-              navigation.navigate("SettingsSheet", { screen: "SettingsEnvironmentNew" })
+              navigation.navigate("SettingsSheet", {
+                screen: "SettingsContent",
+                params: { screen: "SettingsEnvironmentNew" },
+              })
             }
             separateBackground
             tintColor={headerIconColor}