fix: use ls for dev variant handling

Author: wackerow

src/components/AB/ClientABTestWrapper.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { IS_PREVIEW_DEPLOY, IS_PROD } from "@/lib/utils/env"
+
+import { useIsClient } from "@/hooks/useIsClient"
+import { useLocalStorage } from "@/hooks/useLocalStorage"
+import { ABTestVariants } from "@/lib/ab-testing/types"
+
+type ClientABTestWrapperProps = {
+  testKey: string
+  variants: ABTestVariants
+  serverVariantIndex: number
+}
+
+export function ClientABTestWrapper({
+  testKey,
+  variants,
+  serverVariantIndex,
+}: ClientABTestWrapperProps) {
+  const [localOverride] = useLocalStorage<number | null>(
+    `ab-test-${testKey}`,
+    null
+  )
+  const isClient = useIsClient()
+
+  // Dev mode or preview deploy: use localStorage override or default to original (index 0)
+  if (!IS_PROD || IS_PREVIEW_DEPLOY) {
+    if (isClient && localOverride !== null && localOverride < variants.length) {
+      return <>{variants[localOverride]}</>
+    }
+    return <>{variants[0]}</> // Always default to original in dev/preview
+  }
+
+  // Production: use server-determined variant
+  return <>{variants[serverVariantIndex] || variants[0]}</>
+}

src/components/AB/TestDebugPanel.tsx

@@ -1,13 +1,13 @@
 "use client"
 
-import { useEffect, useState, useTransition } from "react"
-import { useRouter } from "next/navigation"
+import { useRef, useState } from "react"
 
 import { cn } from "@/lib/utils/cn"
 
 import { Button } from "../ui/buttons/Button"
 
-import { forceABTestVariant } from "@/lib/ab-testing/actions"
+import { useLocalStorage } from "@/hooks/useLocalStorage"
+import { useOnClickOutside } from "@/hooks/useOnClickOutside"
 import { ABTestAssignment } from "@/lib/ab-testing/types"
 
 type ABTestDebugPanelProps = {
@@ -18,34 +18,26 @@ type ABTestDebugPanelProps = {
 
 export function ABTestDebugPanel({
   testKey,
-  currentAssignment,
   availableVariants,
 }: ABTestDebugPanelProps) {
   const [isOpen, setIsOpen] = useState(false)
-  const [isPending, startTransition] = useTransition()
-  const [localAssignment, setLocalAssignment] = useState(currentAssignment)
-  const router = useRouter()
-
-  // Sync local state when server state changes
-  useEffect(() => {
-    setLocalAssignment(currentAssignment)
-  }, [currentAssignment])
+  const [selectedVariant, setSelectedVariant] = useLocalStorage<number | null>(
+    `ab-test-${testKey}`,
+    null
+  )
+  const panelRef = useRef<HTMLDivElement>(null)
 
-  const forceVariant = async (variantName: string) => {
-    try {
-      const newAssignment = await forceABTestVariant(testKey, variantName)
-      setLocalAssignment(newAssignment)
+  useOnClickOutside(panelRef, () => setIsOpen(false))
 
-      startTransition(() => {
-        router.refresh()
-      })
-    } catch (error) {
-      console.error("Failed to force variant:", error)
-    }
+  const forceVariant = (variantIndex: number) => {
+    setSelectedVariant(variantIndex)
   }
 
   return (
-    <div className="fixed bottom-5 right-5 z-modal rounded-lg border-2 bg-background-low p-2.5 font-mono text-xs">
+    <div
+      ref={panelRef}
+      className="fixed bottom-5 right-5 z-modal rounded-lg border-2 bg-background-low p-2.5 font-mono text-xs"
+    >
       <Button
         onClick={() => setIsOpen(!isOpen)}
         className="w-full cursor-pointer rounded border-none bg-accent-a px-2.5 py-1 font-semibold text-white hover:bg-accent-a-hover"
@@ -59,35 +51,23 @@ export function ABTestDebugPanel({
             <strong>Test:</strong> {testKey}
           </div>
           <div>
-            <strong>Current:</strong> {localAssignment?.variant || "None"}
-            {isPending && (
-              <span className="ml-2 text-xs text-gray-500">Loading...</span>
-            )}
-          </div>
-          <div className="mt-2.5">
-            <div>
-              <strong>Force variant:</strong>
-            </div>
-            {availableVariants.map((variant) => (
-              <Button
-                key={variant}
-                variant={
-                  localAssignment?.variant === variant ? "solid" : "outline"
-                }
-                isSecondary
-                onClick={() => forceVariant(variant)}
-                disabled={isPending}
-                className={cn(
-                  "my-0.5 block w-full rounded border border-gray-300 px-2 py-1 transition-opacity",
-                  localAssignment?.variant === variant &&
-                    "bg-success text-white hover:bg-success-dark",
-                  isPending ? "cursor-not-allowed opacity-60" : "cursor-pointer"
-                )}
-              >
-                {variant}
-              </Button>
-            ))}
+            <strong>Select variant:</strong>
           </div>
+          {availableVariants.map((variant, index) => (
+            <Button
+              key={variant}
+              variant={selectedVariant === index ? "solid" : "outline"}
+              isSecondary
+              onClick={() => forceVariant(index)}
+              className={cn(
+                "my-0.5 block w-full rounded border border-gray-300 px-2 py-1",
+                selectedVariant === index &&
+                  "bg-success text-white hover:bg-success-dark"
+              )}
+            >
+              {variant}
+            </Button>
+          ))}
         </div>
       )}
     </div>

src/components/AB/TestWrapper.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react"
 
 import { IS_PREVIEW_DEPLOY, IS_PROD } from "@/lib/utils/env"
 
+import { ClientABTestWrapper } from "./ClientABTestWrapper"
 import { ABTestDebugPanel } from "./TestDebugPanel"
 import { ABTestTracker } from "./TestTracker"
 
@@ -31,7 +32,6 @@ const ABTestWrapper = async ({
 
     // Find the variant index based on the assignment
     const variantIndex = getVariantIndex(assignment.variant, testKey)
-    const selectedVariant = variants[variantIndex] || variants[0]
 
     // Get available variants for debug panel
     const configs = await getABTestConfigs()
@@ -54,8 +54,12 @@ const ABTestWrapper = async ({
           />
         )}
 
-        {/* Render selected variant */}
-        {selectedVariant}
+        {/* Render variant with client-side override support */}
+        <ClientABTestWrapper
+          testKey={testKey}
+          variants={variants}
+          serverVariantIndex={variantIndex}
+        />
       </>
     )
   } catch (error) {