Add T3 Connect onboarding for mobile and web

apps/mobile/src/Stack.tsx

@@ -17,6 +17,8 @@ import { AppText as Text } from "./components/AppText";
 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";
 import { AdaptiveWorkspaceLayout } from "./features/layout/AdaptiveWorkspaceLayout";
 import { HardwareKeyboardCommandProvider } from "./features/keyboard/HardwareKeyboardCommandProvider";
@@ -220,6 +222,7 @@ const NewTaskSheetStack = createNativeStackNavigator({
 // influence the adaptive workspace layout: opening Settings over Home should
 // not flip the sidebar in or change the active thread.
 const WORKSPACE_OVERLAY_ROUTES = new Set([
+  "ConnectOnboarding",
   "Connections",
   "ConnectionsNew",
   "GitBranches",
@@ -251,6 +254,8 @@ function RootStackLayout(props: {
 }) {
   useAgentNotificationNavigation();
   useThreadOutboxDrain();
+  // Presents the T3 Connect onboarding sheet after an in-session sign-in.
+  useConnectOnboardingNavigation();
   // Full pathname (sheets included) for keyboard-command scoping; the
   // workspace layout only reacts to the underlying non-overlay route.
   const path = getPathFromState(props.state, navigationPathConfig);
@@ -412,6 +417,20 @@ export const RootStack = createNativeStackNavigator({
         sheetGrabberVisible: true,
       },
     }),
+    ConnectOnboarding: createNativeStackScreen({
+      screen: ConnectOnboardingRouteScreen,
+      linking: "connect-onboarding",
+      options: {
+        // Root screenOptions hide headers; formSheets that want the native
+        // title bar opt back in with the sheet header preset.
+        ...SHEET_SOLID_HEADER_OPTIONS,
+        title: "Set up T3 Connect",
+        gestureEnabled: true,
+        presentation: "formSheet",
+        sheetAllowedDetents: [0.6, 0.95],
+        sheetGrabberVisible: true,
+      },
+    }),
     Connections: createNativeStackScreen({
       screen: ConnectionsRouteScreen,
       linking: "connections",

apps/mobile/src/connection/platform.ts

@@ -92,7 +92,7 @@ const capabilitiesLayer = Layer.succeedContext(
         if (session === null) {
           return yield* new ConnectionBlockedError({
             reason: "authentication",
-            detail: "Sign in to T3 Cloud to connect this environment.",
+            detail: "Sign in to T3 Connect to connect this environment.",
           });
         }
         const token = yield* session.readClerkToken().pipe(
@@ -107,7 +107,7 @@ const capabilitiesLayer = Layer.succeedContext(
         if (token === null) {
           return yield* new ConnectionBlockedError({
             reason: "authentication",
-            detail: "The T3 Cloud session is unavailable.",
+            detail: "The T3 Connect session is unavailable.",
           });
         }
         return token;

apps/mobile/src/features/cloud/CloudAuthProvider.tsx

@@ -18,6 +18,7 @@ import {
   setAgentAwarenessRelayTokenProvider,
   unregisterAgentAwarenessDeviceForCurrentUser,
 } from "../agent-awareness/remoteRegistration";
+import { requestConnectOnboarding } from "./connectOnboarding";
 import { resolveCloudPublicConfig, resolveRelayClerkTokenOptions } from "./publicConfig";
 
 function resetManagedRelayTokenCache() {
@@ -67,6 +68,14 @@ function CloudAuthBridge(props: { readonly children: ReactNode }) {
     const nextAccount = isSignedIn && userId ? userId : null;
     observedAccountRef.current = nextAccount;
 
+    // Every sign-in that completes during this session (a cold start observes
+    // undefined → account and must not re-prompt) requests the T3 Connect
+    // onboarding sheet — sign-out clears the connected environments, so each
+    // new session starts with no devices to reach.
+    if (previousObservedAccount === null && nextAccount !== null) {
+      requestConnectOnboarding(nextAccount);
+    }
+
     const queueAccountCleanup = (
       previous: {
         readonly userId: string;

apps/mobile/src/features/cloud/CloudWaitlistEnrollment.tsx

@@ -39,7 +39,7 @@ export function CloudWaitlistEnrollment(props: { readonly onSignIn: () => void }
           You are on the waitlist
         </Text>
         <Text className="text-center font-sans text-base text-foreground-secondary">
-          We will email you when your T3 Cloud access is ready.
+          We will email you when your T3 Connect access is ready.
         </Text>
         <SignInAction onPress={props.onSignIn} />
       </View>

apps/mobile/src/features/cloud/ConnectOnboardingRouteScreen.tsx

@@ -0,0 +1,111 @@
+import { NativeHeaderToolbar } from "../../native/StackHeader";
+import { useAuth } from "@clerk/expo";
+import { useNavigation } from "@react-navigation/native";
+import { useCallback, useState } from "react";
+import { Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { reportAtomCommandResult, settlePromise } from "@t3tools/client-runtime/state/runtime";
+import { AppText as Text } from "../../components/AppText";
+import { useRemoteConnections } from "../../state/use-remote-environment-registry";
+import { CloudEnvironmentRows } from "../connection/CloudEnvironmentRows";
+import { splitEnvironmentSections } from "../connection/environmentSections";
+import { useConnectionController } from "../connection/useConnectionController";
+import { optOutOfConnectOnboarding } from "./connectOnboardingOptOut";
+import { hasCloudPublicConfig } from "./publicConfig";
+
+/**
+ * Post-sign-in onboarding sheet for T3 Connect. Mobile never publishes
+ * environments itself — it consumes ones published elsewhere — so this simply
+ * surfaces the account's T3 Connect environments right after sign-in so every
+ * device can be connected in one go. It shows on every sign-in: sign-out
+ * clears the connected environments, so each new session starts from zero.
+ */
+export function ConnectOnboardingRouteScreen() {
+  return hasCloudPublicConfig() ? <ConfiguredConnectOnboardingRouteScreen /> : null;
+}
+
+function ConfiguredConnectOnboardingRouteScreen() {
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+  const { isSignedIn, userId } = useAuth({ treatPendingAsSignedOut: false });
+  const { connectedEnvironments, onReconnectEnvironment } = useRemoteConnections();
+  const { refreshRelayEnvironments } = useConnectionController();
+  const { connectedCloudEnvironments } = splitEnvironmentSections({
+    connectedEnvironments,
+    cloudEnvironments: null,
+  });
+
+  // Pull-to-refresh tracks its own spinner instead of discovery's refreshing
+  // flag, so background refreshes (e.g. the sign-in one) don't yank the
+  // content down.
+  const [isPullRefreshing, setIsPullRefreshing] = useState(false);
+  const handlePullRefresh = useCallback(() => {
+    void (async () => {
+      setIsPullRefreshing(true);
+      await refreshRelayEnvironments();
+      setIsPullRefreshing(false);
+    })();
+  }, [refreshRelayEnvironments]);
+
+  const handleClose = useCallback(() => {
+    navigation.goBack();
+  }, [navigation]);
+
+  const handleDontShowAgain = useCallback(() => {
+    if (userId) {
+      void (async () => {
+        const result = await settlePromise(() => optOutOfConnectOnboarding(userId));
+        reportAtomCommandResult(result, { label: "connect onboarding opt-out" });
+      })();
+    }
+    navigation.goBack();
+  }, [navigation, userId]);
+
+  return (
+    <View collapsable={false} className="flex-1 bg-sheet">
+      <NativeHeaderToolbar placement="right">
+        <NativeHeaderToolbar.Button icon="xmark" onPress={handleClose} separateBackground />
+      </NativeHeaderToolbar>
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
+        contentContainerStyle={{
+          gap: 16,
+          paddingHorizontal: 20,
+          paddingTop: 16,
+        }}
+        refreshControl={
+          <RefreshControl refreshing={isPullRefreshing} onRefresh={handlePullRefresh} />
+        }
+      >
+        {isSignedIn ? (
+          <CloudEnvironmentRows
+            connectedCloudEnvironments={connectedCloudEnvironments}
+            onReconnectEnvironment={onReconnectEnvironment}
+            showHeader={false}
+          />
+        ) : (
+          <View collapsable={false} className="rounded-[24px] bg-card p-5">
+            <Text className="text-sm leading-normal text-foreground-muted">
+              Sign in to your T3 account to set up T3 Connect.
+            </Text>
+          </View>
+        )}
+
+        {userId ? (
+          <Pressable
+            accessibilityRole="button"
+            hitSlop={8}
+            onPress={handleDontShowAgain}
+            className="items-center py-1 active:opacity-70"
+          >
+            <Text className="text-xs text-foreground-muted">{"Don't show this again"}</Text>
+          </Pressable>
+        ) : null}
+      </ScrollView>
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Atom } from "effect/unstable/reactivity";
+
+import { appAtomRegistry } from "../../state/atom-registry";
+
+// Signals RootStackLayout (inside the navigation tree) that an in-session
+// sign-in just completed. Holds the account id so a sign-out between the
+// request and the navigation cannot present the sheet for the wrong account.
+export const connectOnboardingRequestAtom = Atom.make<string | null>(null).pipe(
+  Atom.keepAlive,
+  Atom.withLabel("mobile:connect-onboarding-request"),
+);
+
+/**
+ * Requests the onboarding sheet for the given account. Sign-out clears the
+ * connected environments, so onboarding runs on every in-session sign-in —
+ * each new session starts with no connected devices.
+ */
+export function requestConnectOnboarding(accountId: string): void {
+  appAtomRegistry.set(connectOnboardingRequestAtom, accountId);
+}
+
+export function clearConnectOnboardingRequest(): void {
+  appAtomRegistry.set(connectOnboardingRequestAtom, null);
+}

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

@@ -0,0 +1,45 @@
+import { useAtomValue } from "@effect/atom-react";
+import { useNavigation } from "@react-navigation/native";
+import { useEffect } from "react";
+
+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.
+const PRESENT_ONBOARDING_DELAY_MS = 600;
+
+/**
+ * Consumes the onboarding request inside the navigation tree (RootStackLayout)
+ * and presents the onboarding formSheet. Lives apart from connectOnboarding.ts
+ * so non-navigation consumers (CloudAuthProvider) do not pull
+ * @react-navigation into their module graph.
+ */
+export function useConnectOnboardingNavigation(): void {
+  const navigation = useNavigation();
+  const requestedAccountId = useAtomValue(connectOnboardingRequestAtom);
+
+  useEffect(() => {
+    if (requestedAccountId === null) {
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      void (async () => {
+        // A failed preference read prefers showing the sheet.
+        const optedOut = await isConnectOnboardingOptedOut(requestedAccountId).catch(() => false);
+        if (cancelled) {
+          return;
+        }
+        clearConnectOnboardingRequest();
+        if (!optedOut) {
+          navigation.navigate("ConnectOnboarding");
+        }
+      })();
+    }, PRESENT_ONBOARDING_DELAY_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [navigation, requestedAccountId]);
+}

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

@@ -0,0 +1,21 @@
+import { loadPreferences, savePreferencesPatch } from "../../lib/storage";
+
+// Lives apart from connectOnboarding.ts so CloudAuthProvider (which imports
+// the request signal) never pulls lib/storage — expo-secure-store — into its
+// module graph; that breaks CloudAuthProvider.test.ts suite loading.
+
+/** Whether the account chose "Don't show this again". */
+export async function isConnectOnboardingOptedOut(accountId: string): Promise<boolean> {
+  const preferences = await loadPreferences();
+  return preferences.connectOnboardingOptOutAccounts?.includes(accountId) ?? false;
+}
+
+/** Persists "Don't show this again" for the account. */
+export async function optOutOfConnectOnboarding(accountId: string): Promise<void> {
+  const preferences = await loadPreferences();
+  const optedOut = preferences.connectOnboardingOptOutAccounts ?? [];
+  if (optedOut.includes(accountId)) {
+    return;
+  }
+  await savePreferencesPatch({ connectOnboardingOptOutAccounts: [...optedOut, accountId] });
+}