feat(web): Playwright E2E suite + web support fixes for trips, profile, packs

.github/workflows/web-e2e-tests.yml

@@ -0,0 +1,135 @@
+name: Web E2E Tests (Playwright)
+
+on:
+  push:
+    branches: [main, development]
+    paths:
+      - "apps/expo/**"
+      - ".github/workflows/web-e2e-tests.yml"
+  # Note: Using `pull_request` (not `pull_request_target`) so forked PRs get
+  # CI feedback on their own code.  Secrets are unavailable for forks, so
+  # the job is skipped via the `if` condition on the job below.
+  pull_request:
+    branches: [main, development]
+    paths:
+      - "apps/expo/**"
+      - ".github/workflows/web-e2e-tests.yml"
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  web-e2e:
+    name: Web E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    # Skip on forked PRs — secrets are not available in forks
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
+
+    env:
+      # The E2E user is upserted into the dev DB by the seed step below,
+      # so both email and password are driven entirely by repo secrets.
+      TEST_EMAIL: ${{ secrets.E2E_TEST_EMAIL }}
+      TEST_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
+
+    steps:
+      - name: Verify E2E secrets are configured
+        run: |
+          missing=()
+          [ -z "${TEST_EMAIL:-}" ]            && missing+=("E2E_TEST_EMAIL")
+          [ -z "${TEST_PASSWORD:-}" ]         && missing+=("E2E_TEST_PASSWORD")
+          [ -z "${NEON_DATABASE_URL:-}" ]     && missing+=("NEON_DEV_DATABASE_URL")
+          [ -z "${EXPO_PUBLIC_API_URL:-}" ]   && missing+=("EXPO_PUBLIC_API_URL")
+          if [ ${#missing[@]} -gt 0 ]; then
+            echo "::error::Required E2E secrets missing: ${missing[*]}"
+            echo "::error::Set them via: gh secret set <NAME> --repo PackRat-AI/PackRat"
+            exit 1
+          fi
+        env:
+          NEON_DATABASE_URL: ${{ secrets.NEON_DEV_DATABASE_URL }}
+          EXPO_PUBLIC_API_URL: ${{ secrets.EXPO_PUBLIC_API_URL }}
+
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+          cache: true
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            node-modules-${{ runner.os }}-
+
+      - name: Install dependencies
+        env:
+          PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN: ${{ secrets.PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN }}
+        run: bun install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: bunx playwright install chromium --with-deps
+
+      - name: Build Expo web app
+        working-directory: apps/expo
+        env:
+          EXPO_PUBLIC_API_URL: ${{ secrets.EXPO_PUBLIC_API_URL }}
+          EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID: ${{ secrets.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID }}
+          EXPO_PUBLIC_R2_PUBLIC_URL: ${{ secrets.EXPO_PUBLIC_R2_PUBLIC_URL }}
+          EXPO_PUBLIC_SENTRY_DSN: ${{ secrets.EXPO_PUBLIC_SENTRY_DSN }}
+          EXPO_PUBLIC_GOOGLE_MAPS_API_KEY: ${{ secrets.EXPO_PUBLIC_GOOGLE_MAPS_API_KEY }}
+        run: bunx expo export -p web --output-dir dist
+
+      - name: Seed E2E test user in dev DB
+        run: bun run --filter @packrat/api db:seed:e2e-user
+        env:
+          NEON_DATABASE_URL: ${{ secrets.NEON_DEV_DATABASE_URL }}
+          E2E_TEST_EMAIL: ${{ env.TEST_EMAIL }}
+          E2E_TEST_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
+
+      - name: Serve web app (SPA mode, port 8081)
+        working-directory: apps/expo
+        # -s routes all 404s to index.html for client-side routing
+        run: npx serve -s dist -l 8081 &
+
+      - name: Wait for web server
+        run: |
+          for i in $(seq 1 30); do
+            curl -sf http://localhost:8081 && echo "Server ready" && break
+            echo "Waiting... ($i/30)"
+            sleep 2
+          done
+
+      - name: Run Playwright E2E tests
+        working-directory: apps/expo
+        env:
+          BASE_URL: http://localhost:8081
+          API_URL: ${{ secrets.EXPO_PUBLIC_API_URL }}
+          NEON_DATABASE_URL: ${{ secrets.NEON_DEV_DATABASE_URL }}
+          CI: "true"
+        run: bun test:web
+
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-report
+          path: apps/expo/playwright-report/
+          retention-days: 7
+
+      - name: Upload Playwright traces on failure
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-traces
+          path: apps/expo/test-results/
+          retention-days: 7

apps/expo/.gitignore

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

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

@@ -0,0 +1,33 @@
+import { featureFlags } from 'expo-app/config';
+import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
+import { Tabs } from 'expo-router';
+
+/**
+ * Web version of the tabs layout.
+ * Replaces NativeTabs (expo-router/unstable-native-tabs) with standard Expo Router Tabs.
+ * NativeTabs uses native UITabBarController and cannot run on web.
+ * Metro automatically picks this file over _layout.tsx for web builds.
+ */
+export default function TabLayout() {
+  const { t } = useTranslation();
+
+  return (
+    <Tabs screenOptions={{ headerShown: false }}>
+      <Tabs.Screen name="(home)" options={{ title: t('navigation.dashboard') }} />
+      <Tabs.Screen name="packs" options={{ title: t('navigation.packs') }} />
+      <Tabs.Screen
+        name="feed"
+        options={{ title: t('navigation.feed'), href: featureFlags.enableFeed ? undefined : null }}
+      />
+      <Tabs.Screen
+        name="trips"
+        options={{
+          title: t('navigation.trips'),
+          href: featureFlags.enableTrips ? undefined : null,
+        }}
+      />
+      <Tabs.Screen name="catalog" options={{ title: t('navigation.catalog') }} />
+      <Tabs.Screen name="profile" options={{ title: t('navigation.profile') }} />
+    </Tabs>
+  );
+}

apps/expo/app/(app)/(tabs)/profile/index.tsx

@@ -94,6 +94,7 @@ function Profile() {
     {
       id: 'name',
       title: t('common.name'),
+      testID: testIds.profile.nameEditBtn,
       onPress: () => router.push('/(app)/(tabs)/profile/name'),
       ...(Platform.OS === 'ios' ? { value: displayName } : { subTitle: displayName }),
     },
@@ -146,6 +147,7 @@ function Item({ info }: { info: ListRenderItemInfo<DataItem> }) {
   return (
     <ListItem
       titleClassName="text-lg"
+      testID={info.item.testID}
       onPress={info.item.onPress}
       rightView={
         <View className="flex-1 flex-row items-center gap-0.5 px-2">
@@ -331,4 +333,5 @@ type DataItem =
       value?: string;
       subTitle?: string;
       onPress?: () => void;
+      testID?: string;
     };

apps/expo/app/_layout.tsx

@@ -1,7 +1,7 @@
 import '../polyfills';
 
 import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
-import 'expo-dev-client';
+import 'expo-app/lib/devClient';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import '../global.css';

apps/expo/app/_layout.web.tsx

@@ -0,0 +1,55 @@
+import '../polyfills';
+
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import '../global.css';
+
+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';
+
+/**
+ * Web version of the root layout.
+ * Removes native-only imports:
+ *   - expo-dev-client (not needed on web)
+ *   - @sentry/react-native (use @sentry/nextjs / @sentry/browser for web instead)
+ * Metro automatically picks this file over _layout.tsx for web builds.
+ */
+
+export { ErrorBoundary } from 'expo-router';
+
+export let appAlert: RefObject<AlertMethods | null>;
+
+function RootLayout() {
+  useInitialAndroidBarSync();
+
+  appAlert = useRef<AlertMethods>(null);
+
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+
+  return (
+    <Providers>
+      <StatusBar
+        key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
+        style={isDarkColorScheme ? 'light' : 'dark'}
+      />
+      <NavThemeProvider value={NAV_THEME[colorScheme]}>
+        <Stack screenOptions={SCREEN_OPTIONS}>
+          <Stack.Screen name="(app)" />
+          <Stack.Screen name="auth" />
+        </Stack>
+        <Alert title="" buttons={[]} ref={appAlert} />
+      </NavThemeProvider>
+    </Providers>
+  );
+}
+
+export default RootLayout;
+
+const SCREEN_OPTIONS = {
+  headerShown: false,
+  animation: 'ios_from_right',
+} as const;

apps/expo/atoms/atomWithSecureStorage.web.ts

@@ -0,0 +1,36 @@
+import { isFunction } from '@packrat/guards';
+import { atom } from 'jotai';
+
+/**
+ * Web (localStorage) equivalent of atomWithSecureStorage.
+ * Note: localStorage is NOT cryptographically secure. This is a functional
+ * fallback for web; sensitive flows should use server-side sessions on web.
+ * Metro automatically picks this file over atomWithSecureStorage.ts for web builds.
+ */
+export const atomWithSecureStorage = <T>(key: string, initialValue: T) => {
+  const baseAtom = atom(initialValue);
+
+  baseAtom.onMount = (setValue) => {
+    try {
+      const item = localStorage.getItem(key);
+      setValue(item !== null ? JSON.parse(item) : initialValue);
+    } catch {
+      setValue(initialValue);
+    }
+  };
+
+  const derivedAtom = atom(
+    (get) => get(baseAtom),
+    (get, set, update: T | ((prev: T) => T)) => {
+      const nextValue = isFunction(update) ? (update as (prev: T) => T)(get(baseAtom)) : update;
+      set(baseAtom, nextValue);
+      try {
+        localStorage.setItem(key, JSON.stringify(nextValue));
+      } catch {
+        // Ignore storage errors
+      }
+    },
+  );
+
+  return derivedAtom;
+};

apps/expo/features/ai/lib/localModelManager.web.ts

@@ -0,0 +1,25 @@
+/**
+ * Web no-op stub for localModelManager.
+ * On-device AI models (llama.rn, @react-native-ai/apple) are native-only.
+ * Metro automatically picks this file over localModelManager.ts for web builds.
+ */
+
+export function isAppleIntelligenceAvailable(): boolean {
+  return false;
+}
+
+export function getLocalModel(): null {
+  return null;
+}
+
+export async function isLlamaModelDownloaded(): Promise<boolean> {
+  return false;
+}
+
+export async function initLocalModel(): Promise<void> {}
+
+export async function downloadLocalModel(): Promise<void> {}
+
+export async function cancelLocalModelDownload(): Promise<void> {}
+
+export async function deleteLocalModel(): Promise<void> {}

apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx

@@ -36,6 +36,7 @@ export function HorizontalCatalogItemCard({ item, ...restProps }: HorizontalCata
       onPress={isSelectable ? () => restProps.onSelect(item) : restProps.onPress}
     >
       <View
+        testID={`catalog-item-card-${item.id}`}
         className={`rounded-lg flex-row gap-3 border p-4 bg-red
            ${
              isSelectable && restProps.selected

apps/expo/features/packs/hooks/usePackOwnershipCheck.ts

@@ -1,8 +1,7 @@
+import { use$ } from '@legendapp/state/react';
 import { obs } from 'expo-app/lib/store';
 import { packsStore } from '../store';
 
 export function usePackOwnershipCheck(id: string) {
-  const pack = obs(packsStore, id).peek();
-
-  return !!pack;
+  return use$(() => !!obs(packsStore, id).get());
 }