refactor: separate form for wayfern

src/components/camoufox-config-dialog.tsx

@@ -10,7 +10,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import type { BrowserProfile, CamoufoxConfig, CamoufoxOS } from "@/types";
+import { WayfernConfigForm } from "@/components/wayfern-config-form";
+import type {
+  BrowserProfile,
+  CamoufoxConfig,
+  CamoufoxOS,
+  WayfernConfig,
+} from "@/types";
 
 const getCurrentOS = (): CamoufoxOS => {
   if (typeof navigator === "undefined") return "linux";
@@ -43,7 +49,8 @@ export function CamoufoxConfigDialog({
   onSaveWayfern,
   isRunning = false,
 }: CamoufoxConfigDialogProps) {
-  const [config, setConfig] = useState<CamoufoxConfig>(() => ({
+  // Use union type to support both Camoufox and Wayfern configs
+  const [config, setConfig] = useState<CamoufoxConfig | WayfernConfig>(() => ({
     geoip: true,
     os: getCurrentOS(),
   }));
@@ -68,7 +75,10 @@ export function CamoufoxConfigDialog({
     }
   }, [profile, isAntiDetectBrowser]);
 
-  const updateConfig = (key: keyof CamoufoxConfig, value: unknown) => {
+  const updateConfig = (
+    key: keyof CamoufoxConfig | keyof WayfernConfig,
+    value: unknown,
+  ) => {
     setConfig((prev) => ({ ...prev, [key]: value }));
   };
 
@@ -92,9 +102,9 @@ export function CamoufoxConfigDialog({
     setIsSaving(true);
     try {
       if (profile.browser === "wayfern" && onSaveWayfern) {
-        await onSaveWayfern(profile, config);
+        await onSaveWayfern(profile, config as CamoufoxConfig);
       } else {
-        await onSave(profile, config);
+        await onSave(profile, config as CamoufoxConfig);
       }
       onClose();
     } catch (error) {
@@ -144,15 +154,22 @@ export function CamoufoxConfigDialog({
 
         <ScrollArea className="flex-1 h-[300px]">
           <div className="py-4">
-            <SharedCamoufoxConfigForm
-              config={config}
-              onConfigChange={updateConfig}
-              forceAdvanced={true}
-              readOnly={isRunning}
-              browserType={
-                profile.browser === "wayfern" ? "wayfern" : "camoufox"
-              }
-            />
+            {profile.browser === "wayfern" ? (
+              <WayfernConfigForm
+                config={config as WayfernConfig}
+                onConfigChange={updateConfig}
+                forceAdvanced={true}
+                readOnly={isRunning}
+              />
+            ) : (
+              <SharedCamoufoxConfigForm
+                config={config as CamoufoxConfig}
+                onConfigChange={updateConfig}
+                forceAdvanced={true}
+                readOnly={isRunning}
+                browserType="camoufox"
+              />
+            )}
           </div>
         </ScrollArea>
 

src/components/create-profile-dialog.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { WayfernConfigForm } from "@/components/wayfern-config-form";
 
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { useProxyEvents } from "@/hooks/use-proxy-events";
@@ -727,11 +728,10 @@ export function CreateProfileDialog({
                               </div>
                             )}
 
-                            <SharedCamoufoxConfigForm
+                            <WayfernConfigForm
                               config={wayfernConfig}
                               onConfigChange={updateWayfernConfig}
                               isCreating
-                              browserType="wayfern"
                             />
                           </div>
                         ) : selectedBrowser === "camoufox" ? (

src/components/shared-camoufox-config-form.tsx

@@ -855,12 +855,28 @@ export function SharedCamoufoxConfigForm({
         <div className="space-y-3">
           <Label>Fonts</Label>
           <MultipleSelector
-            value={
-              fingerprintConfig.fonts?.map((font) => ({
+            value={(() => {
+              // Handle fonts being either an array or a JSON string (Wayfern format)
+              let fontsArray: string[] = [];
+              if (fingerprintConfig.fonts) {
+                if (Array.isArray(fingerprintConfig.fonts)) {
+                  fontsArray = fingerprintConfig.fonts;
+                } else if (typeof fingerprintConfig.fonts === "string") {
+                  try {
+                    const parsed = JSON.parse(fingerprintConfig.fonts);
+                    if (Array.isArray(parsed)) {
+                      fontsArray = parsed;
+                    }
+                  } catch {
+                    // Invalid JSON, ignore
+                  }
+                }
+              }
+              return fontsArray.map((font) => ({
                 label: font,
                 value: font,
-              })) || []
-            }
+              }));
+            })()}
             onChange={(selected: Option[]) =>
               updateFingerprintConfig(
                 "fonts",

src/types.ts

@@ -290,7 +290,7 @@ export interface CamoufoxLaunchResult {
   url?: string;
 }
 
-export type WayfernOS = "windows" | "macos" | "linux";
+export type WayfernOS = "windows" | "macos" | "linux" | "android" | "ios";
 
 export interface WayfernConfig {
   proxy?: string;
@@ -308,6 +308,116 @@ export interface WayfernConfig {
   os?: WayfernOS; // Operating system for fingerprint generation
 }
 
+// Wayfern fingerprint config - matches the C++ FingerprintData structure
+export interface WayfernFingerprintConfig {
+  // User agent and platform
+  userAgent?: string;
+  platform?: string;
+  platformVersion?: string;
+  brand?: string;
+  brandVersion?: string;
+
+  // Hardware
+  hardwareConcurrency?: number;
+  maxTouchPoints?: number;
+  deviceMemory?: number;
+
+  // Screen
+  screenWidth?: number;
+  screenHeight?: number;
+  screenAvailWidth?: number;
+  screenAvailHeight?: number;
+  screenColorDepth?: number;
+  screenPixelDepth?: number;
+  devicePixelRatio?: number;
+
+  // Window
+  windowOuterWidth?: number;
+  windowOuterHeight?: number;
+  windowInnerWidth?: number;
+  windowInnerHeight?: number;
+  screenX?: number;
+  screenY?: number;
+
+  // Language
+  language?: string;
+  languages?: string[];
+
+  // Browser features
+  doNotTrack?: string;
+  cookieEnabled?: boolean;
+  webdriver?: boolean;
+  pdfViewerEnabled?: boolean;
+
+  // WebGL
+  webglVendor?: string;
+  webglRenderer?: string;
+  webglVersion?: string;
+  webglShadingLanguageVersion?: string;
+  webglParameters?: string; // JSON string
+  webgl2Parameters?: string; // JSON string
+  webglShaderPrecisionFormats?: string; // JSON string
+  webgl2ShaderPrecisionFormats?: string; // JSON string
+
+  // Timezone and geolocation
+  timezone?: string;
+  timezoneOffset?: number;
+  latitude?: number;
+  longitude?: number;
+  accuracy?: number;
+
+  // Media queries / preferences
+  prefersReducedMotion?: boolean;
+  prefersDarkMode?: boolean;
+  prefersContrast?: string;
+  prefersReducedData?: boolean;
+
+  // Color/HDR
+  colorGamutSrgb?: boolean;
+  colorGamutP3?: boolean;
+  colorGamutRec2020?: boolean;
+  hdrSupport?: boolean;
+
+  // Audio
+  audioSampleRate?: number;
+  audioMaxChannelCount?: number;
+
+  // Storage
+  localStorage?: boolean;
+  sessionStorage?: boolean;
+  indexedDb?: boolean;
+
+  // Canvas
+  canvasNoiseSeed?: string;
+
+  // Fonts, plugins, mime types (JSON strings)
+  fonts?: string; // JSON array string
+  plugins?: string; // JSON array string
+  mimeTypes?: string; // JSON array string
+
+  // Battery (optional)
+  batteryCharging?: boolean;
+  batteryChargingTime?: number;
+  batteryDischargingTime?: number;
+  batteryLevel?: number;
+
+  // Voices
+  voices?: string; // JSON array string
+
+  // Vendor info
+  vendor?: string;
+  vendorSub?: string;
+  productSub?: string;
+
+  // Network (optional)
+  connectionEffectiveType?: string;
+  connectionDownlink?: number;
+  connectionRtt?: number;
+
+  // Performance
+  performanceMemory?: number;
+}
+
 export interface WayfernLaunchResult {
   id: string;
   processId?: number;