Add E2E testing infrastructure with WebdriverIO + Appium

Set up E2E test framework for Android using WebdriverIO, Appium, and
UiAutomator2. Add testID props to key components (AuthButton, BaseButton,
ChatBubble, CustomTextInput, ProposedEventCard) and apply testIDs to
login screen, chat screen, tab bar, and settings. Include initial tests
for app launch detection and login flow validation. Update CLAUDE.md
with E2E docs.

apps/client/src/components/AuthButton.tsx

@@ -5,12 +5,14 @@ interface AuthButtonProps {
   title: string;
   onPress: () => void;
   isLoading?: boolean;
+  testID?: string;
 }
 
-const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
+const AuthButton = ({ title, onPress, isLoading = false, testID }: AuthButtonProps) => {
   const { theme } = useThemeStore();
   return (
     <Pressable
+      testID={testID}
       onPress={onPress}
       disabled={isLoading}
       className="w-full rounded-lg p-4 mb-4 border-4"

apps/client/src/components/BaseButton.tsx

@@ -7,6 +7,7 @@ export type BaseButtonProps = {
   className?: string;
   onPress: () => void;
   solid?: boolean;
+  testID?: string;
 };
 
 const BaseButton = ({
@@ -14,10 +15,12 @@ const BaseButton = ({
   children,
   onPress,
   solid = false,
+  testID,
 }: BaseButtonProps) => {
   const { theme } = useThemeStore();
   return (
     <Pressable
+      testID={testID}
       className={`rounded-lg p-4 mb-4 border-4 ${className}`}
       onPress={onPress}
       style={{

apps/client/src/components/ChatBubble.tsx

@@ -8,6 +8,7 @@ type ChatBubbleProps = {
   children: React.ReactNode;
   className?: string;
   style?: ViewStyle;
+  testID?: string;
 };
 
 export function ChatBubble({
@@ -15,6 +16,7 @@ export function ChatBubble({
   children,
   className = "",
   style,
+  testID,
 }: ChatBubbleProps) {
   const { theme } = useThemeStore();
   const borderColor = side === "left" ? theme.chatBot : theme.primeFg;
@@ -25,6 +27,7 @@ export function ChatBubble({
 
   return (
     <View
+      testID={testID}
       className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
       style={[
         { borderColor, elevation: 8, backgroundColor: theme.secondaryBg },

apps/client/src/components/CustomTextInput.tsx

@@ -13,6 +13,7 @@ export type CustomTextInputProps = {
   secureTextEntry?: boolean;
   autoCapitalize?: TextInputProps["autoCapitalize"];
   keyboardType?: TextInputProps["keyboardType"];
+  testID?: string;
 };
 
 const CustomTextInput = (props: CustomTextInputProps) => {
@@ -21,6 +22,7 @@ const CustomTextInput = (props: CustomTextInputProps) => {
 
   return (
     <TextInput
+      testID={props.testID}
       className={`border border-solid rounded-2xl ${props.className}`}
       onChangeText={props.onValueChange}
       value={props.text}

apps/client/src/components/ProposedEventCard.tsx

@@ -31,6 +31,7 @@ const ActionButtons = ({
   return (
     <View className="flex-row mt-3 gap-2">
       <Pressable
+        testID="event-accept-button"
         onPress={onConfirm}
         disabled={isDisabled}
         className="flex-1 py-2 rounded-lg items-center"
@@ -47,6 +48,7 @@ const ActionButtons = ({
         </Text>
       </Pressable>
       <Pressable
+        testID="event-reject-button"
         onPress={onReject}
         disabled={isDisabled}
         className="flex-1 py-2 rounded-lg items-center"