feat(web): web support MVP — platform shims, Playwright e2e, OTP fix

.github/workflows/e2e-tests.yml

@@ -256,7 +256,7 @@ jobs:
           path: |
             ~/Library/Caches/CocoaPods
             ~/.cocoapods
-          key: cocoapods-${{ runner.os }}-${{ hashFiles('apps/expo/package.json', 'apps/expo/app.config.ts', 'bun.lock') }}
+          key: cocoapods-${{ runner.os }}-${{ hashFiles('apps/expo/package.json', 'apps/expo/app.config.ts') }}
           restore-keys: |
             cocoapods-${{ runner.os }}-
 

.maestro/flows/auth/logout-flow.yaml

@@ -43,5 +43,7 @@ appId: ${APP_ID}
 - waitForAnimationToEnd
 
 # Assert we are back on the auth screen
-- assertVisible:
-    text: "Sign In"
+- extendedWaitUntil:
+    visible:
+      text: "Sign In"
+    timeout: 15000

.maestro/flows/packs/create-pack-flow.yaml

@@ -20,12 +20,16 @@ appId: ${APP_ID}
 - waitForAnimationToEnd
 
 # Fill in Pack Name
+# iOS: tap the container Pressable (pack-name-container) which is the
+# accessibility leaf and focuses the inner TextInput on press.
+# Android: match by placeholder text (no container wrapper needed).
 - runFlow:
     when:
       platform: iOS
     commands:
       - tapOn:
-          text: "move, Pack Name"
+          id: "pack-name-container"
+      - waitForAnimationToEnd
       - inputText: ${PACK_NAME}
 - runFlow:
     when:
@@ -70,11 +74,12 @@ appId: ${APP_ID}
 # Also confirm we are on the packs list by checking for the create button
 - assertVisible:
     id: "create-pack-button"
+- waitForAnimationToEnd
 - scrollUntilVisible:
     element:
       id: "packs:list-item-${PACK_NAME}"
     direction: DOWN
-    timeout: 60000
-    speed: 99
+    timeout: 30000
+    speed: 40
 - assertVisible:
     id: "packs:list-item-${PACK_NAME}"

.maestro/flows/trips/create-trip-flow.yaml

@@ -49,7 +49,7 @@ appId: ${APP_ID}
 
 # --- Start Date ---
 - tapOn:
-    id: "trips:start-date-input"
+    id: "trips:start-date-btn"
 - waitForAnimationToEnd
 - runFlow:
     when:
@@ -80,7 +80,7 @@ appId: ${APP_ID}
 
 # --- End Date ---
 - tapOn:
-    id: "trips:end-date-input"
+    id: "trips:end-date-btn"
 - waitForAnimationToEnd
 - runFlow:
     when:

CLAUDE.md

@@ -259,3 +259,7 @@ Defined in root `tsconfig.json`:
 - **Next.js build failures**: `apps/guides` and `apps/landing` may fail without internet (fetches remote data)
 - **Type errors after NativeWindUI update**: Check for renamed refs — v2.0.0 renamed `AlertRef` → `AlertMethods`, `LargeTitleSearchBarRef` → `LargeTitleSearchBarMethods`
 - **Bun install hangs**: Normal — takes 120+ seconds. Never cancel mid-install.
+
+## Documented Solutions
+
+`docs/solutions/` — documented solutions to past problems (bugs, best practices, workflow patterns), organized by category with YAML frontmatter (`module`, `tags`, `problem_type`). Relevant when implementing or debugging in documented areas.

apps/expo/.gitignore

@@ -38,8 +38,10 @@ android
 .env.*
 !.env.example
 
-# Playwright E2E — cached auth tokens (written by globalSetup, contain real credentials)
+# Playwright E2E — cached auth state (written by globalSetup, contains real credentials)
+playwright/.auth/
 playwright/.auth-tokens.json
+playwright/.auth-state.json
 playwright/playwright-report/
 playwright/test-results/
 playwright-report/

apps/expo/app/(app)/_layout.tsx

@@ -17,7 +17,7 @@ import { getTripDetailOptions } from 'expo-app/features/trips/utils/getTripDetai
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import type { TranslationFunction } from 'expo-app/lib/i18n/types';
 import { testIds } from 'expo-app/lib/testIds';
-import 'expo-dev-client';
+import 'expo-app/lib/devClient';
 import { type Href, router, Stack, useRouter } from 'expo-router';
 import { useAtomValue } from 'jotai';
 import { useEffect, useRef } from 'react';

apps/expo/app/(app)/recent-packs.tsx

@@ -5,7 +5,7 @@ import { useRecentPacks } from 'expo-app/features/packs/hooks/useRecentPacks';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { getRelativeTime } from 'expo-app/lib/utils/getRelativeTime';
-import { Image, ScrollView, View } from 'react-native';
+import { Image, Platform, ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 function RecentPackCard({ pack }: { pack: Pack }) {
@@ -15,7 +15,12 @@ function RecentPackCard({ pack }: { pack: Pack }) {
   return (
     <View className="mx-4 mb-3 overflow-hidden rounded-xl bg-card shadow-sm">
       {pack.image && (
-        <Image source={{ uri: pack.image }} className="h-40 w-full bg-red-950" resizeMode="cover" />
+        <Image
+          source={{ uri: pack.image }}
+          className="h-40 w-full bg-red-950"
+          resizeMode="cover"
+          style={Platform.select({ web: { width: '100%', height: 160 } })}
+        />
       )}
       <View className="p-4">
         <View className="flex-row items-start justify-between">

apps/expo/app/_layout.web.tsx

@@ -9,7 +9,7 @@ import { Alert, type AlertMethods } from '@packrat-ai/nativewindui';
 import { useColorScheme, useInitialAndroidBarSync } from 'expo-app/lib/hooks/useColorScheme';
 import { Providers } from 'expo-app/providers';
 import { NAV_THEME } from 'expo-app/theme';
-import { type RefObject, useRef } from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
 
 /**
  * Web version of the root layout.
@@ -30,6 +30,13 @@ function RootLayout() {
 
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
+  // Sync NativeWind dark mode class to <html> on web (darkMode: 'class' requires it)
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.toggle('dark', isDarkColorScheme);
+    }
+  }, [isDarkColorScheme]);
+
   return (
     <Providers>
       <StatusBar

apps/expo/app/auth/(login)/index.tsx

@@ -96,6 +96,7 @@ export default function LoginScreen() {
               source={LOGO_SOURCE}
               className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
+              style={Platform.select({ web: { width: 32, height: 32 } })}
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">
               {Platform.select({
@@ -113,7 +114,7 @@ export default function LoginScreen() {
             <Form className="gap-2">
               <FormSection className="ios:bg-background">
                 <FormItem>
-                  <View testID={testIds.auth.emailInput}>
+                  <View testID={Platform.OS === 'web' ? undefined : testIds.auth.emailInput}>
                     <form.Field name="email">
                       {(field) => (
                         <TextField
@@ -233,7 +234,7 @@ export default function LoginScreen() {
                     accessible={true}
                     disabled={!canSubmit || loading}
                     onPress={() => {
-                      if (focusedTextField === 'email') {
+                      if (Platform.OS !== 'web' && focusedTextField === 'email') {
                         KeyboardController.setFocusTo('next');
                         return;
                       }

apps/expo/app/auth/index.tsx

@@ -2,7 +2,11 @@ import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { ActivityIndicator, AlertAnchor, Button, Text } from '@packrat/ui/nativewindui';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { featureFlags } from 'expo-app/config';
-import { needsReauthAtom, redirectToAtom } from 'expo-app/features/auth/atoms/authAtoms';
+import {
+  isLoadingAtom,
+  needsReauthAtom,
+  redirectToAtom,
+} from 'expo-app/features/auth/atoms/authAtoms';
 import { useAuth } from 'expo-app/features/auth/hooks/useAuth';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { testIds } from 'expo-app/lib/testIds';
@@ -41,11 +45,20 @@ export default function AuthIndexScreen() {
   };
 
   const setRedirectTo = useSetAtom(redirectToAtom);
+  const setIsLoadingGlobal = useSetAtom(isLoadingAtom);
 
   React.useEffect(() => {
     setRedirectTo(redirectTo as string);
   }, [redirectTo, setRedirectTo]);
 
+  // After a sign-out via "Sign-in again", isLoadingAtom is left true by the
+  // profile screen so AppLayout can detect the unauthenticated state and
+  // navigate here. Once this screen mounts, loading is done — clear the atom
+  // so the Sign In button renders instead of the spinner.
+  React.useEffect(() => {
+    setIsLoadingGlobal(false);
+  }, [setIsLoadingGlobal]);
+
   if (isLoading) {
     return (
       <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -62,6 +75,7 @@ export default function AuthIndexScreen() {
             <Image
               source={LOGO_SOURCE}
               className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
+              style={Platform.select({ web: { width: 32, height: 32 } })}
               resizeMode="contain"
             />
           </View>

apps/expo/app/auth/one-time-password.tsx

@@ -158,7 +158,12 @@ export default function OneTimePasswordScreen() {
       >
         <View className="flex-1 justify-center gap-3">
           <View className="items-center pb-1">
-            <Image source={LOGO_SOURCE} className="h-10 w-10 rounded-md" resizeMode="contain" />
+            <Image
+              source={LOGO_SOURCE}
+              className="h-10 w-10 rounded-md"
+              resizeMode="contain"
+              style={Platform.select({ web: { width: 40, height: 40 } })}
+            />
           </View>
           <View className="gap-1">
             <Text variant="title1" className="text-center font-semibold">

apps/expo/atoms/atomWithSecureStorage.ts

@@ -1,5 +1,5 @@
 import { isFunction } from '@packrat/guards';
-import * as SecureStore from 'expo-secure-store';
+import * as SecureStore from 'expo-app/lib/secureStore';
 import { atom } from 'jotai';
 
 export const atomWithSecureStorage = <T>({

apps/expo/components/initial/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import type { MockUser } from 'expo-app/data/mockData';
-import { Image, Text, View } from 'react-native';
+import { Image, Platform, Text, View } from 'react-native';
 
 type UserAvatarProps = {
   user: Pick<MockUser, 'name' | 'avatarUrl'>;
@@ -26,7 +26,12 @@ export function UserAvatar({ user, size = 'md', showName = false }: UserAvatarPr
     <View className="flex-row items-center">
       <View className={`${sizeClass} overflow-hidden rounded-full bg-gray-200`}>
         {avatarUri ? (
-          <Image source={{ uri: avatarUri }} className="h-full w-full" resizeMode="cover" />
+          <Image
+            source={{ uri: avatarUri }}
+            className="h-full w-full"
+            resizeMode="cover"
+            style={Platform.select({ web: { width: '100%', height: '100%' } })}
+          />
         ) : (
           <View className="h-full w-full items-center justify-center bg-blue-500">
             <Text className="font-bold text-white">{user.name.substring(0, 2).toUpperCase()}</Text>

apps/expo/features/auth/hooks/useAuthActions.ts

@@ -9,14 +9,14 @@ import * as Sentry from '@sentry/react-native';
 import { AuthClientError, toAuthError } from 'expo-app/features/auth/lib/authErrors';
 import { userStore } from 'expo-app/features/auth/store';
 import type { User } from 'expo-app/features/profile/types';
+import * as AppleAuthentication from 'expo-app/lib/appleAuthentication';
 import { authClient } from 'expo-app/lib/auth-client';
 import { t } from 'expo-app/lib/i18n';
+import * as Updates from 'expo-app/lib/updates';
 import ImageCacheManager from 'expo-app/lib/utils/ImageCacheManager';
 import { queryClient } from 'expo-app/providers/TanstackProvider';
-import * as AppleAuthentication from 'expo-apple-authentication';
 import { type Href, router } from 'expo-router';
 import Storage from 'expo-sqlite/kv-store';
-import * as Updates from 'expo-updates';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
   isLoadingAtom,

apps/expo/features/auth/hooks/useAuthInit.ts

@@ -67,6 +67,16 @@ export function useAuthInit() {
   }, []);
 
   useEffect(() => {
+    const navigate = (target: Parameters<typeof router.replace>[0]) => {
+      // On web, expo-router's navigationRef may not be ready yet during
+      // Strict Mode double-mount — defer by one event loop tick.
+      if (Platform.OS === 'web') {
+        setTimeout(() => router.replace(target), 0);
+      } else {
+        router.replace(target);
+      }
+    };
+
     const initializeAuth = async () => {
       await runVersionGateMigration();
 
@@ -140,14 +150,14 @@ export function useAuthInit() {
           return;
         }
 
-        router.replace({
+        navigate({
           pathname: '/auth',
           params: { showSkipLoginBtn: 'true', redirectTo: '/' },
         });
       } catch (error) {
         Sentry.captureException(error, { tags: { auth_action: 'init' } });
         console.error('Failed to initialize auth:', error);
-        router.replace('/auth');
+        navigate('/auth');
       } finally {
         setIsLoading(false);
       }

apps/expo/features/catalog/components/ItemReviews.tsx

@@ -5,7 +5,7 @@ import { Icon } from 'expo-app/components/Icon';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { useState } from 'react';
-import { Image, TouchableOpacity, View } from 'react-native';
+import { Image, Platform, TouchableOpacity, View } from 'react-native';
 import type { CatalogItem } from '../types';
 
 type ItemReviewsProps = {
@@ -54,7 +54,11 @@ export function ItemReviews({ reviews }: ItemReviewsProps) {
             <View className="flex-row items-center justify-between">
               <View className="flex-row items-center">
                 {review.user_avatar ? (
-                  <Image source={{ uri: review.user_avatar }} className="h-8 w-8 rounded-full" />
+                  <Image
+                    source={{ uri: review.user_avatar }}
+                    className="h-8 w-8 rounded-full"
+                    style={Platform.select({ web: { width: 32, height: 32 } })}
+                  />
                 ) : (
                   <View className="h-8 w-8 items-center justify-center rounded-full bg-muted">
                     <Icon name="person-outline" size={16} color="text-muted-foreground" />