internal: Update autocorrelation copy, add feature preview badge (#948)

Author: e-fisher

src/views/Generator/AutoCorrelation/IntroductionMessage.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@radix-ui/themes'
+import { Badge, Button, Flex, Text } from '@radix-ui/themes'
 import { CheckCircleIcon, KeyIcon, WandSparkles } from 'lucide-react'
 
 import grotIllustration from '@/assets/grot-magic.svg'
@@ -31,18 +31,28 @@ export function IntroductionMessage({ onStart }: IntroductionMessageProps) {
         css={{ maxWidth: 250 }}
       />
 
-      <Flex direction="column" align="center" gap="4" maxWidth="500px" mt="4">
-        <Text size="2" color="gray" align="center">
-          AI analyzes your recording and automatically creates correlation rules
-          to make your test repeatable.
+      <Flex
+        direction="column"
+        align="center"
+        gap="4"
+        maxWidth="600px"
+        css={{ textAlign: 'center' }}
+      >
+        <Badge color="orange" variant="soft">
+          Feature Preview
+        </Badge>
+        <Text size="3" weight="bold">
+          Automatically correlate dynamic values
+        </Text>
+        <Text size="2" color="gray" mb="2">
+          Use AI to automatically handle session IDs, tokens, and other dynamic
+          values that would otherwise cause your test scripts to fail.
         </Text>
 
-        <Flex direction="column" gap="2" align="start" width="100%" mb="6">
-          <ListItem>Validation runs automatically</ListItem>
-          <ListItem>AI analyzes your recording for dynamic values</ListItem>
-          <ListItem>
-            AI creates correlation rules to make your test repeatable
-          </ListItem>
+        <Flex direction="column" gap="2" align="start" width="100%" mb="4">
+          <ListItem>Runs validation to identify mismatches</ListItem>
+          <ListItem>Detects values that change between runs</ListItem>
+          <ListItem>Creates rules to extract and reuse these values</ListItem>
         </Flex>
 
         {isAiConfigured && (
@@ -53,7 +63,7 @@ export function IntroductionMessage({ onStart }: IntroductionMessageProps) {
         )}
         {!isAiConfigured && (
           <>
-            <Text size="2" color="gray" align="center">
+            <Text size="2" color="gray">
               To use autocorrelation, configure your OpenAI API key first.
             </Text>
 
@@ -63,6 +73,9 @@ export function IntroductionMessage({ onStart }: IntroductionMessageProps) {
             </Button>
           </>
         )}
+        <Text size="1" color="gray" mt="1">
+          This feature is in public preview and subject to change.
+        </Text>
       </Flex>
     </Flex>
   )