feat(mobile): gate the app behind a paid plan and flatten settings

apps/mobile/app/(authenticated)/(home)/index.tsx

@@ -1,3 +1,11 @@
+import { useSession } from "@/lib/auth/client";
 import { HomeScreen } from "@/screens/(authenticated)/(home)/home";
+import { HomePaywallScreen } from "@/screens/(authenticated)/(home)/home-paywall";
 
-export default HomeScreen;
+export default function HomeIndex() {
+	const { data: session } = useSession();
+	if (session && !session.session.plan) {
+		return <HomePaywallScreen />;
+	}
+	return <HomeScreen />;
+}

apps/mobile/app/(authenticated)/_layout.tsx

@@ -1,7 +1,8 @@
 import { isLiquidGlassAvailable } from "expo-glass-effect";
-import { Stack } from "expo-router";
+import { Redirect, Stack, usePathname } from "expo-router";
 import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
 import { usePrimeRelayUrl } from "@/hooks/usePrimeRelayUrl";
+import { useSession } from "@/lib/auth/client";
 
 const settingsScreenOptions = (title: string) => ({
 	headerShown: true,
@@ -25,6 +26,17 @@ const glassHeaderOptions = {
 export default function AuthenticatedLayout() {
 	usePrimeRelayUrl();
 
+	const { data: session } = useSession();
+	const pathname = usePathname();
+
+	// Unpaid sessions may only see home (which renders the paywall) and
+	// settings — App Review requires sign-out, org switching, and account
+	// deletion to stay reachable behind a gate.
+	const unpaid = !!session && !session.session.plan;
+	if (unpaid && pathname !== "/" && !pathname.startsWith("/settings")) {
+		return <Redirect href="/(authenticated)/(home)" />;
+	}
+
 	return (
 		<PromptInputProvider>
 			<Stack screenOptions={{ headerShown: false }}>
@@ -36,10 +48,6 @@ export default function AuthenticatedLayout() {
 					name="settings/index"
 					options={settingsScreenOptions("Settings")}
 				/>
-				<Stack.Screen
-					name="settings/account"
-					options={settingsScreenOptions("Account")}
-				/>
 				<Stack.Screen
 					name="settings/organization"
 					options={settingsScreenOptions("Organization")}
@@ -48,14 +56,14 @@ export default function AuthenticatedLayout() {
 					name="settings/hosts"
 					options={settingsScreenOptions("Hosts")}
 				/>
-				<Stack.Screen
-					name="settings/billing"
-					options={settingsScreenOptions("Billing")}
-				/>
 				<Stack.Screen
 					name="settings/presets"
 					options={settingsScreenOptions("Agent presets")}
 				/>
+				<Stack.Screen
+					name="workspace/[id]/chat/[sessionId]"
+					options={{ ...glassHeaderOptions, title: "Chat" }}
+				/>
 				<Stack.Screen
 					name="workspace/[id]/index"
 					options={{

apps/mobile/lib/trpc/client.ts

@@ -1,9 +1,12 @@
 import type { AppRouter } from "@superset/trpc";
 import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
+import * as Application from "expo-application";
 import superjson from "superjson";
 import { authClient, getJwt } from "../auth/client";
 import { env } from "../env";
 
+const clientVersionHeader = `mobile/${Application.nativeApplicationVersion ?? "0.0.0"}`;
+
 export const apiClient = createTRPCProxyClient<AppRouter>({
 	links: [
 		httpBatchLink({
@@ -12,6 +15,7 @@ export const apiClient = createTRPCProxyClient<AppRouter>({
 				const cookies = authClient.getCookie();
 				const jwt = getJwt();
 				return {
+					"x-superset-client": clientVersionHeader,
 					...(cookies ? { Cookie: cookies } : {}),
 					...(jwt ? { Authorization: `Bearer ${jwt}` } : {}),
 				};

apps/mobile/screens/(auth)/sign-in/SignInScreen.tsx

@@ -8,6 +8,7 @@ import { signIn } from "@/lib/auth/client";
 import { env } from "@/lib/env";
 
 import { DevSignInOptions } from "./components/DevSignInOptions";
+import { EmailSignInLink } from "./components/EmailSignInLink";
 import type { SocialProvider } from "./components/SocialButton";
 import { SocialButton } from "./components/SocialButton";
 
@@ -116,6 +117,7 @@ export function SignInScreen() {
 					className="w-4/5"
 				/>
 				{(__DEV__ || env.EXPO_PUBLIC_E2E === "1") && <DevSignInOptions />}
+				<EmailSignInLink onError={setError} />
 			</View>
 
 			{error && (

apps/mobile/screens/(auth)/sign-in/components/EmailSignInLink/EmailSignInLink.tsx

@@ -0,0 +1,52 @@
+import { prompt } from "@superset/alert-prompt";
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { signIn } from "@/lib/auth/client";
+
+/** Quiet credential sign-in for accounts with a password set (App Store
+ * review demo account; sign-up stays disabled in production). */
+export function EmailSignInLink({
+	onError,
+}: {
+	onError: (message: string) => void;
+}) {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handlePress = async () => {
+		const email = (
+			await prompt({
+				title: "Sign in with email",
+				message: "Email",
+				confirmText: "Next",
+			})
+		)?.trim();
+		if (!email) return;
+
+		const password = await prompt({
+			title: "Sign in with email",
+			message: `Password for ${email}`,
+			confirmText: "Sign in",
+		});
+		if (!password) return;
+
+		setIsLoading(true);
+		try {
+			const res = await signIn.email({ email, password });
+			if (res.error) throw new Error(res.error.message);
+		} catch (err) {
+			console.error("[sign-in] Email error:", err);
+			onError(err instanceof Error ? err.message : "Something went wrong");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Text
+			className="text-sm text-muted-foreground underline"
+			onPress={isLoading ? undefined : () => void handlePress()}
+		>
+			Sign in with email
+		</Text>
+	);
+}

apps/mobile/screens/(auth)/sign-in/components/EmailSignInLink/index.ts

@@ -0,0 +1 @@
+export { EmailSignInLink } from "./EmailSignInLink";

apps/mobile/screens/(auth)/sign-in/components/SocialButton/SocialButton.tsx

@@ -1,4 +1,4 @@
-import { useColorScheme } from "react-native";
+import { useColorScheme, View } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import type { ButtonProps } from "@/components/ui/button";
 import { Button } from "@/components/ui/button";
@@ -12,10 +12,11 @@ export interface SocialButtonProps extends Omit<ButtonProps, "children"> {
 }
 
 function AppleIcon({ color }: { color: string }) {
+	// simple-icons "apple": normalized to fill the 24-grid like the GitHub mark.
 	return (
 		<Svg width={20} height={20} viewBox="0 0 24 24">
 			<Path
-				d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+				d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
 				fill={color}
 			/>
 		</Svg>
@@ -74,17 +75,19 @@ export function SocialButton({
 		<Button
 			variant="outline"
 			size="lg"
-			className={cn("flex flex-row gap-x-3", className)}
+			className={cn("flex flex-row gap-x-2", className)}
 			{...props}
 		>
-			{provider === "apple" ? (
-				<AppleIcon color={iconColor} />
-			) : provider === "github" ? (
-				<GithubIcon color={iconColor} />
-			) : (
-				<GoogleIcon />
-			)}
-			<Text>{`Continue with ${PROVIDER_NAME[provider]}`}</Text>
+			<View className="w-5 items-center">
+				{provider === "apple" ? (
+					<AppleIcon color={iconColor} />
+				) : provider === "github" ? (
+					<GithubIcon color={iconColor} />
+				) : (
+					<GoogleIcon />
+				)}
+			</View>
+			<Text className="flex-1 max-w-36 text-center">{`Continue with ${PROVIDER_NAME[provider]}`}</Text>
 		</Button>
 	);
 }

apps/mobile/screens/(authenticated)/(home)/home-paywall/HomePaywallScreen.tsx

@@ -0,0 +1,77 @@
+import Ionicons from "@expo/vector-icons/Ionicons";
+import * as Haptics from "expo-haptics";
+import { useState } from "react";
+import { useWindowDimensions, View } from "react-native";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import { useTheme } from "@/hooks/useTheme";
+import { useSession } from "@/lib/auth/client";
+import { useOrganizations } from "@/screens/(authenticated)/hooks/useOrganizations";
+import { OrganizationHeaderButton } from "../home/components/OrganizationHeaderButton";
+import { OrganizationSwitcherSheet } from "../home/components/OrganizationSwitcherSheet";
+
+/** Home content for accounts whose active org has no paid plan. The shell
+ * stays fully navigable — the org switcher sheet also carries the Settings
+ * entry, so plan changes, org switches, and account deletion all use the
+ * normal surfaces. The trpc middleware is the actual wall. */
+export function HomePaywallScreen() {
+	const theme = useTheme();
+	const { width } = useWindowDimensions();
+	const { refetch } = useSession();
+	const {
+		organizations,
+		activeOrganization,
+		activeOrganizationId,
+		switchOrganization,
+	} = useOrganizations();
+	const [sheetOpen, setSheetOpen] = useState(false);
+
+	const handleSwitchOrganization = (organizationId: string) => {
+		setSheetOpen(false);
+		void switchOrganization(organizationId).then(() => refetch());
+	};
+
+	return (
+		<>
+			<OrganizationHeaderButton
+				name={activeOrganization?.name}
+				logo={activeOrganization?.logo}
+				onPress={() => {
+					void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+					setSheetOpen(true);
+				}}
+			/>
+			<View className="flex-1 items-center justify-center gap-6 bg-background p-6">
+				<View
+					className="size-16 items-center justify-center rounded-full"
+					style={{ backgroundColor: theme.muted }}
+				>
+					<Ionicons name="lock-closed" size={32} color={theme.foreground} />
+				</View>
+
+				<View className="items-center gap-2">
+					<Text className="text-2xl font-semibold text-foreground">
+						Superset Mobile is part of Pro
+					</Text>
+					<Text className="text-center text-base text-muted-foreground">
+						{activeOrganization
+							? `${activeOrganization.name} is on the Free plan. Superset Mobile is available for organizations on Pro.`
+							: "This organization is on the Free plan. Superset Mobile is available for organizations on Pro."}
+					</Text>
+				</View>
+
+				<Button size="lg" className="w-4/5" onPress={() => void refetch()}>
+					<Text>Refresh</Text>
+				</Button>
+			</View>
+			<OrganizationSwitcherSheet
+				isPresented={sheetOpen}
+				onIsPresentedChange={setSheetOpen}
+				organizations={organizations}
+				activeOrganizationId={activeOrganizationId}
+				onSwitchOrganization={handleSwitchOrganization}
+				width={width}
+			/>
+		</>
+	);
+}

apps/mobile/screens/(authenticated)/(home)/home-paywall/index.ts

@@ -0,0 +1 @@
+export { HomePaywallScreen } from "./HomePaywallScreen";

apps/mobile/screens/(authenticated)/(home)/home/HomeScreen.tsx

@@ -339,10 +339,14 @@ export function HomeScreen() {
 					setSheetOpen(true);
 				}}
 			/>
+			{/* placement="integratedButton" + allowToolbarIntegration={false}
+			    evicts the custom left toolbar view (org switcher) a few seconds
+			    after mount on iOS 26 — "stacked" is the only placement that
+			    coexists with it. */}
 			<Stack.SearchBar
-				placeholder="Search workspaces & sessions"
-				placement="integratedButton"
-				allowToolbarIntegration={false}
+				placeholder="Search workspaces"
+				placement="stacked"
+				hideWhenScrolling={false}
 				hideNavigationBar={false}
 				textColor={THEME.dark.foreground}
 				hintTextColor={THEME.dark.mutedForeground}