code quality

apps/website/components/onboarding/AvatarStep.tsx

@@ -91,7 +91,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
   };
 
   return (
-    <Stack gap={8}>
+    <Stack gap={8} data-testid="avatar-creation-form">
       {/* Photo Upload */}
       <Stack>
         <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
@@ -100,6 +100,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
         <Stack direction="row" gap={6}>
           {/* Upload Area */}
           <Stack
+            data-testid="photo-upload-area"
             onClick={() => fileInputRef.current?.click()}
             flex={1}
             display="flex"
@@ -126,6 +127,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
               accept="image/*"
               onChange={handleFileSelect}
               display="none"
+              data-testid="photo-upload-input"
             />
             
             {avatarInfo.isValidating ? (
@@ -144,6 +146,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
                     objectFit="cover"
                     fullWidth
                     fullHeight
+                    data-testid="photo-preview"
                   />
                 </Stack>
                 <Text size="sm" color="text-performance-green" block>
@@ -199,11 +202,12 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
             Racing Suit Color
           </Stack>
         </Text>
-        <Stack flexDirection="row" flexWrap="wrap" gap={2}>
+        <Stack flexDirection="row" flexWrap="wrap" gap={2} data-testid="suit-color-options">
           {SUIT_COLORS.map((color) => (
             <Button
               key={color.value}
               type="button"
+              data-testid={`suit-color-${color.value}`}
               onClick={() => setAvatarInfo({ ...avatarInfo, suitColor: color.value })}
               rounded="lg"
               transition
@@ -235,6 +239,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
         <Stack>
           <Button
             type="button"
+            data-testid="generate-avatars-btn"
             variant="primary"
             onClick={onGenerateAvatars}
             disabled={avatarInfo.isGenerating || avatarInfo.isValidating}

apps/website/components/onboarding/OnboardingPrimaryActions.tsx

@@ -49,6 +49,7 @@ export function OnboardingPrimaryActions({
         onClick={onNext}
         disabled={isLoading || !canNext}
         w="40"
+        data-testid={isLastStep ? 'complete-onboarding-btn' : 'next-btn'}
       >
         <Stack direction="row" align="center" gap={2}>
           {isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}

apps/website/components/onboarding/OnboardingShell.tsx

@@ -17,7 +17,7 @@ interface OnboardingShellProps {
  */
 export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
   return (
-    <Box minHeight="100vh" bg="rgba(10,10,10,1)" color="white">
+    <Box minHeight="100vh" bg="rgba(10,10,10,1)" color="white" data-testid="onboarding-wizard">
       {header && (
         <Box borderBottom borderColor="rgba(255,255,255,0.1)" py={4} bg="rgba(20,22,25,1)">
           <Container size="md">

apps/website/components/onboarding/OnboardingStepPanel.tsx

@@ -15,8 +15,9 @@ interface OnboardingStepPanelProps {
  * Provides a consistent header and surface.
  */
 export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
+  const testId = title.toLowerCase().includes('personal') ? 'step-1-personal-info' : 'step-2-avatar';
   return (
-    <Stack gap={6}>
+    <Stack gap={6} data-testid={testId}>
       <Stack gap={1}>
         <Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
           {title}

apps/website/components/onboarding/PersonalInfoStep.tsx

@@ -49,6 +49,7 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
           </Text>
           <Input
             id="firstName"
+            data-testid="first-name-input"
             type="text"
             value={personalInfo.firstName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -67,6 +68,7 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
           </Text>
           <Input
             id="lastName"
+            data-testid="last-name-input"
             type="text"
             value={personalInfo.lastName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -86,6 +88,7 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
         </Text>
         <Input
           id="displayName"
+          data-testid="display-name-input"
           type="text"
           value={personalInfo.displayName}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -104,6 +107,7 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
             Country *
           </Text>
           <CountrySelect
+            data-testid="country-select"
             value={personalInfo.country}
             onChange={(value: string) =>
               setPersonalInfo({ ...personalInfo, country: value })