refactor: better profile creation flow

ci(deps): bump the github-actions group with 4 updates

.github/workflows/dependabot-automerge.yml

@@ -13,7 +13,7 @@ jobs:
   security-scan:
     name: Security Vulnerability Scan
     if: ${{ github.actor == 'dependabot[bot]' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r

.github/workflows/issue-validation.yml

@@ -49,7 +49,7 @@ jobs:
 
       - name: Validate issue with AI
         id: validate
-        uses: actions/ai-inference@f347eae8ebabecb85d17f52960f909b8a4a8dad5 # v2.0.0
+        uses: actions/ai-inference@a1c11829223a786afe3b5663db904a3aa1eac3a2 # v2.0.1
         with:
           prompt-file: issue_analysis.txt
           system-prompt: |

.github/workflows/osv.yml

@@ -50,7 +50,7 @@ jobs:
   scan-scheduled:
     name: Scheduled Security Scan
     if: ${{ github.event_name == 'push' || github.event_name == 'schedule' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r
@@ -63,7 +63,7 @@ jobs:
   scan-pr:
     name: PR Security Scan
     if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r

.github/workflows/pr-checks.yml

@@ -29,7 +29,7 @@ jobs:
   security-scan:
     name: Security Vulnerability Scan
     if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r

.github/workflows/release-notes-generator.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Generate release notes with AI
         id: generate-notes
-        uses: actions/ai-inference@f347eae8ebabecb85d17f52960f909b8a4a8dad5 # v2.0.0
+        uses: actions/ai-inference@a1c11829223a786afe3b5663db904a3aa1eac3a2 # v2.0.1
         with:
           prompt-file: commits.txt
           system-prompt: |

.github/workflows/release.yml

@@ -13,7 +13,7 @@ env:
 jobs:
   security-scan:
     name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r
@@ -162,7 +162,7 @@ jobs:
         run: pnpm build
 
       - name: Build Tauri app
-        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
+        uses: tauri-apps/tauri-action@e834788a94591d81e3ae0bd9ec06366f5afb8994 #v0.5.23
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GITHUB_REF_NAME: ${{ github.ref_name }}

.github/workflows/rolling-release.yml

@@ -12,7 +12,7 @@ env:
 jobs:
   security-scan:
     name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@456ceb78310755116e0a3738121351006286b797" # v2.2.1
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@90b209d0ea55cea1da9fc0c4e65782cc6acb6e2e" # v2.2.2
     with:
       scan-args: |-
         -r
@@ -170,7 +170,7 @@ jobs:
           echo "Generated timestamp: ${TIMESTAMP}-${COMMIT_HASH}"
 
       - name: Build Tauri app
-        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
+        uses: tauri-apps/tauri-action@e834788a94591d81e3ae0bd9ec06366f5afb8994 #v0.5.23
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BUILD_TAG: "nightly-${{ steps.timestamp.outputs.timestamp }}"

.github/workflows/spellcheck.yml

@@ -23,4 +23,4 @@ jobs:
       - name: Checkout Actions Repository
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 #v5.0.0
       - name: Spell Check Repo
-        uses: crate-ci/typos@a4c3e43aea0a9e9b9e6578d2731ebd9a27e8f6cd #v1.35.5
+        uses: crate-ci/typos@65f69f021b736bdbe548ce72200500752d42b40e #v1.35.7

package.json

@@ -47,9 +47,9 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "color": "^5.0.0",
-    "lucide-react": "^0.541.0",
+    "lucide-react": "^0.542.0",
     "motion": "^12.23.12",
-    "next": "^15.5.1",
+    "next": "^15.5.2",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.1.1",
@@ -60,14 +60,14 @@
     "tauri-plugin-macos-permissions-api": "^2.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.0",
+    "@biomejs/biome": "2.2.2",
     "@tailwindcss/postcss": "^4.1.12",
     "@tauri-apps/cli": "^2.8.3",
     "@types/color": "^4.2.0",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.8",
-    "@vitejs/plugin-react": "^5.0.1",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.2",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.5",
     "tailwindcss": "^4.1.12",

src-tauri/Cargo.lock

@@ -175,9 +175,9 @@ dependencies = [
 
 [[package]]
 name = "async-executor"
-version = "1.13.2"
+version = "1.13.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bb812ffb58524bdd10860d7d974e2f01cc0950c2438a74ee5ec2e2280c6c4ffa"
+checksum = "497c00e0fd83a72a79a39fcbd8e3e2f055d6f6c7e025f3b3d91f4f8e76527fb8"
 dependencies = [
  "async-task",
  "concurrent-queue",
@@ -573,9 +573,9 @@ dependencies = [
 
 [[package]]
 name = "camino"
-version = "1.1.11"
+version = "1.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d07aa9a93b00c76f71bc35d598bed923f6d4f3a9ca5c24b7737ae1a292841c0"
+checksum = "dd0b03af37dad7a14518b7691d81acb0f8222604ad3d1b02f6b4bed5188c0cd5"
 dependencies = [
  "serde",
 ]
@@ -1062,7 +1062,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.60.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -1304,7 +1304,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "778e2ac28f6c47af28e4907f13ffd1e1ddbd400980a9abd7c8df189bf578a5ad"
 dependencies = [
  "libc",
- "windows-sys 0.60.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -2088,7 +2088,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.61.2",
+ "windows-core 0.58.0",
 ]
 
 [[package]]
@@ -2484,14 +2484,14 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
  "cfg-if",
- "windows-targets 0.53.3",
+ "windows-targets 0.48.5",
 ]
 
 [[package]]
 name = "liblzma"
-version = "0.4.3"
+version = "0.4.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "272b875472a046e39ff7408374a5a050b112d2142211a0f54a295c0bd1c3c757"
+checksum = "10bf66f4598dc77ff96677c8e763655494f00ff9c1cf79e2eb5bb07bc31f807d"
 dependencies = [
  "liblzma-sys",
 ]
@@ -3553,9 +3553,9 @@ dependencies = [
 
 [[package]]
 name = "potential_utf"
-version = "0.1.2"
+version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e5a7c30837279ca13e7c867e9e40053bc68740f988cb07f7ca6df43cc734b585"
+checksum = "84df19adbe5b5a0782edcab45899906947ab039ccf4573713735ee7de1e6b08a"
 dependencies = [
  "zerovec",
 ]
@@ -3980,7 +3980,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.60.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -5080,7 +5080,7 @@ dependencies = [
  "getrandom 0.3.3",
  "once_cell",
  "rustix",
- "windows-sys 0.60.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -5935,7 +5935,7 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0978bf7171b3d90bac376700cb56d606feb40f251a475a5d6634613564460b22"
 dependencies = [
- "windows-sys 0.60.2",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
@@ -6507,9 +6507,9 @@ checksum = "ea2f10b9bb0928dfb1b42b65e1f9e36f7f54dbdf08457afefb38afcdec4fa2bb"
 
 [[package]]
 name = "wry"
-version = "0.53.2"
+version = "0.53.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3b6763512fe4b51c80b3ce9b50939d682acb4de335dfabbdb20d7a2642199b7"
+checksum = "31f0e9642a0d061f6236c54ccae64c2722a7879ad4ec7dff59bd376d446d8e90"
 dependencies = [
  "base64 0.22.1",
  "block2 0.6.1",

src/components/create-profile-dialog.tsx

@@ -6,7 +6,7 @@ import { GoPlus } from "react-icons/go";
 import { LoadingButton } from "@/components/loading-button";
 import { ProxyFormDialog } from "@/components/proxy-form-dialog";
 import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
-import { Combobox } from "@/components/ui/combobox";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserIcon } from "@/lib/browser-utils";
@@ -99,28 +100,43 @@ export function CreateProfileDialog({
   selectedGroupId,
 }: CreateProfileDialogProps) {
   const [profileName, setProfileName] = useState("");
+  const [currentStep, setCurrentStep] = useState<
+    "browser-selection" | "browser-config"
+  >("browser-selection");
   const [activeTab, setActiveTab] = useState("anti-detect");
 
-  // Regular browser states
+  // Browser selection states
   const [selectedBrowser, setSelectedBrowser] =
-    useState<BrowserTypeString | null>("camoufox");
+    useState<BrowserTypeString | null>(null);
   const [selectedProxyId, setSelectedProxyId] = useState<string>();
 
-  const handleTabChange = (value: string) => {
-    if (value === "regular") {
-      setSelectedBrowser("firefox");
-    } else if (value === "anti-detect") {
-      setSelectedBrowser("camoufox");
-    }
-
-    setActiveTab(value);
-  };
-
   // Camoufox anti-detect states
   const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>({
     geoip: true, // Default to automatic geoip
   });
 
+  // Handle browser selection from the initial screen
+  const handleBrowserSelect = (browser: BrowserTypeString) => {
+    setSelectedBrowser(browser);
+    setCurrentStep("browser-config");
+  };
+
+  // Handle back button
+  const handleBack = () => {
+    setCurrentStep("browser-selection");
+    setSelectedBrowser(null);
+    setProfileName("");
+    setSelectedProxyId(undefined);
+  };
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    setCurrentStep("browser-selection");
+    setSelectedBrowser(null);
+    setProfileName("");
+    setSelectedProxyId(undefined);
+  };
+
   const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
   const { storedProxies } = useProxyEvents();
   const [showProxyForm, setShowProxyForm] = useState(false);
@@ -227,15 +243,15 @@ export function CreateProfileDialog({
   // Load data when dialog opens
   useEffect(() => {
     if (isOpen) {
-      // Ensure we have a selected browser
-      if (!selectedBrowser) {
-        setSelectedBrowser("camoufox");
-      }
       void loadSupportedBrowsers();
-      // Load camoufox release types when dialog opens
-      void loadReleaseTypes(selectedBrowser || "camoufox");
+      // Load release types when a browser is selected
+      if (selectedBrowser) {
+        void loadReleaseTypes(selectedBrowser);
+      }
       // Check and download GeoIP database if needed for Camoufox
-      void checkAndDownloadGeoIPDatabase();
+      if (selectedBrowser === "camoufox") {
+        void checkAndDownloadGeoIPDatabase();
+      }
     }
   }, [
     isOpen,
@@ -297,7 +313,29 @@ export function CreateProfileDialog({
 
     setIsCreating(true);
     try {
-      if (activeTab === "regular") {
+      if (activeTab === "anti-detect") {
+        // Anti-detect browser - always use Camoufox with best available version
+        const bestCamoufoxVersion = getBestAvailableVersion("camoufox");
+        if (!bestCamoufoxVersion) {
+          console.error("No Camoufox version available");
+          return;
+        }
+
+        // The fingerprint will be generated at launch time by the Rust backend
+        // We don't need to generate it here during profile creation
+        const finalCamoufoxConfig = { ...camoufoxConfig };
+
+        await onCreateProfile({
+          name: profileName.trim(),
+          browserStr: "camoufox" as BrowserTypeString,
+          version: bestCamoufoxVersion.version,
+          releaseType: bestCamoufoxVersion.releaseType,
+          proxyId: selectedProxyId,
+          camoufoxConfig: finalCamoufoxConfig,
+          groupId: selectedGroupId !== "default" ? selectedGroupId : undefined,
+        });
+      } else {
+        // Regular browser
         if (!selectedBrowser) {
           console.error("Missing required browser selection");
           return;
@@ -318,27 +356,6 @@ export function CreateProfileDialog({
           proxyId: selectedProxyId,
           groupId: selectedGroupId !== "default" ? selectedGroupId : undefined,
         });
-      } else {
-        // Anti-detect tab - always use Camoufox with best available version
-        const bestCamoufoxVersion = getBestAvailableVersion("camoufox");
-        if (!bestCamoufoxVersion) {
-          console.error("No Camoufox version available");
-          return;
-        }
-
-        // The fingerprint will be generated at launch time by the Rust backend
-        // We don't need to generate it here during profile creation
-        const finalCamoufoxConfig = { ...camoufoxConfig };
-
-        await onCreateProfile({
-          name: profileName.trim(),
-          browserStr: "camoufox" as BrowserTypeString,
-          version: bestCamoufoxVersion.version,
-          releaseType: bestCamoufoxVersion.releaseType,
-          proxyId: selectedProxyId,
-          camoufoxConfig: finalCamoufoxConfig,
-          groupId: selectedGroupId !== "default" ? selectedGroupId : undefined,
-        });
       }
 
       handleClose();
@@ -355,13 +372,14 @@ export function CreateProfileDialog({
 
     // Reset all states
     setProfileName("");
-    setSelectedBrowser("camoufox"); // Set default browser instead of null
+    setCurrentStep("browser-selection");
+    setActiveTab("anti-detect");
+    setSelectedBrowser(null);
     setSelectedProxyId(undefined);
     setReleaseTypes({});
     setCamoufoxConfig({
       geoip: true, // Reset to automatic geoip
     });
-    setActiveTab("anti-detect");
     onClose();
   };
 
@@ -400,11 +418,23 @@ export function CreateProfileDialog({
     isBrowserVersionAvailable,
   ]);
 
+  // Filter supported browsers for regular browsers (excluding mullvad and tor)
+  const regularBrowsers = browserOptions.filter(
+    (browser) =>
+      supportedBrowsers.includes(browser.value) &&
+      browser.value !== "mullvad-browser" &&
+      browser.value !== "tor-browser",
+  );
+
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="w-full max-h-[90vh] flex flex-col">
         <DialogHeader className="flex-shrink-0">
-          <DialogTitle>Create New Profile</DialogTitle>
+          <DialogTitle>
+            {currentStep === "browser-selection"
+              ? "Create New Profile"
+              : "Configure Profile"}
+          </DialogTitle>
         </DialogHeader>
 
         <Tabs
@@ -420,213 +450,428 @@ export function CreateProfileDialog({
             <TabsTrigger value="regular">Regular</TabsTrigger>
           </TabsList>
 
-          <ScrollArea className="flex-1 h-[330px] overflow-y-hidden">
+          <ScrollArea className="overflow-y-auto flex-1">
             <div className="flex flex-col justify-center items-center w-full">
               <div className="py-4 space-y-6 w-full max-w-md">
-                {/* Profile Name - Common to both tabs */}
-                <div className="space-y-2">
-                  <Label htmlFor="profile-name">Profile Name</Label>
-                  <Input
-                    id="profile-name"
-                    value={profileName}
-                    onChange={(e) => setProfileName(e.target.value)}
-                    placeholder="Enter profile name"
-                  />
-                </div>
+                {currentStep === "browser-selection" ? (
+                  <>
+                    <TabsContent value="anti-detect" className="mt-0 space-y-6">
+                      {/* Anti-Detect Browser Selection */}
+                      <div className="space-y-6">
+                        <div className="text-center">
+                          <h3 className="text-lg font-medium">
+                            Anti-Detect Browser
+                          </h3>
+                          <p className="mt-2 text-sm text-muted-foreground">
+                            Choose Firefox for anti-detection capabilities
+                          </p>
+                        </div>
 
-                <TabsContent value="regular" className="mt-0 space-y-6">
-                  <div className="space-y-4">
-                    <div className="space-y-2">
-                      <Label>Browser</Label>
-                      <Combobox
-                        options={browserOptions
-                          .filter(
-                            (browser) =>
-                              supportedBrowsers.includes(browser.value) &&
-                              browser.value !== "mullvad-browser" &&
-                              browser.value !== "tor-browser",
-                          )
-                          .map((browser) => {
-                            const IconComponent = getBrowserIcon(browser.value);
-                            return {
-                              value: browser.value,
-                              label: browser.label,
-                              icon: IconComponent,
-                            };
-                          })}
-                        value={selectedBrowser || ""}
-                        onValueChange={(value) =>
-                          setSelectedBrowser(value as BrowserTypeString)
-                        }
-                        placeholder="Select a browser..."
-                        searchPlaceholder="Search browsers..."
-                      />
-                    </div>
-
-                    {selectedBrowser && (
-                      <div className="space-y-3">
-                        {!isBrowserCurrentlyDownloading(selectedBrowser) &&
-                          !isBrowserVersionAvailable(selectedBrowser) &&
-                          getBestAvailableVersion(selectedBrowser) && (
-                            <div className="flex gap-3 items-center">
-                              <p className="text-sm text-muted-foreground">
-                                {(() => {
-                                  const bestVersion =
-                                    getBestAvailableVersion(selectedBrowser);
-                                  return `Latest version (${bestVersion?.version}) needs to be downloaded`;
-                                })()}
-                              </p>
-                              <LoadingButton
-                                onClick={() => handleDownload(selectedBrowser)}
-                                isLoading={isBrowserCurrentlyDownloading(
-                                  selectedBrowser,
-                                )}
-                                className="ml-auto"
-                                size="sm"
-                                disabled={isBrowserCurrentlyDownloading(
-                                  selectedBrowser,
-                                )}
-                              >
-                                Download
-                              </LoadingButton>
-                            </div>
-                          )}
-                        {!isBrowserCurrentlyDownloading(selectedBrowser) &&
-                          isBrowserVersionAvailable(selectedBrowser) && (
-                            <div className="text-sm text-muted-foreground">
-                              {(() => {
-                                const bestVersion =
-                                  getBestAvailableVersion(selectedBrowser);
-                                return `✓ Latest version (${bestVersion?.version}) is available`;
-                              })()}
-                            </div>
-                          )}
-                        {isBrowserCurrentlyDownloading(selectedBrowser) && (
-                          <div className="text-sm text-muted-foreground">
+                        <Button
+                          onClick={() => handleBrowserSelect("camoufox")}
+                          className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
+                          variant="outline"
+                        >
+                          <div className="flex justify-center items-center w-8 h-8">
                             {(() => {
-                              const bestVersion =
-                                getBestAvailableVersion(selectedBrowser);
-                              return `Downloading version (${bestVersion?.version})...`;
+                              const IconComponent = getBrowserIcon("firefox");
+                              return IconComponent ? (
+                                <IconComponent className="w-6 h-6" />
+                              ) : null;
                             })()}
                           </div>
-                        )}
+                          <div className="text-left">
+                            <div className="font-medium">Firefox</div>
+                            <div className="text-sm text-muted-foreground">
+                              Anti-Detect Browser
+                            </div>
+                          </div>
+                        </Button>
                       </div>
-                    )}
-                  </div>
-                </TabsContent>
+                    </TabsContent>
 
-                <TabsContent value="anti-detect" className="mt-0 space-y-6">
-                  <div className="space-y-6">
-                    {/* Camoufox Download Status */}
-                    {!isBrowserCurrentlyDownloading("camoufox") &&
-                      !isBrowserVersionAvailable("camoufox") &&
-                      getBestAvailableVersion("camoufox") && (
-                        <div className="flex gap-3 items-center p-3 rounded-md border">
-                          <p className="text-sm text-muted-foreground">
-                            {(() => {
-                              const bestVersion =
-                                getBestAvailableVersion("camoufox");
-                              return `Camoufox version (${bestVersion?.version}) needs to be downloaded`;
-                            })()}
+                    <TabsContent value="regular" className="mt-0 space-y-6">
+                      {/* Regular Browser Selection */}
+                      <div className="space-y-6">
+                        <div className="text-center">
+                          <h3 className="text-lg font-medium">
+                            Regular Browsers
+                          </h3>
+                          <p className="mt-2 text-sm text-muted-foreground">
+                            Choose from supported regular browsers
                           </p>
-                          <LoadingButton
-                            onClick={() => handleDownload("camoufox")}
-                            isLoading={isBrowserCurrentlyDownloading(
-                              "camoufox",
-                            )}
-                            size="sm"
-                            disabled={isBrowserCurrentlyDownloading("camoufox")}
-                          >
-                            {isBrowserCurrentlyDownloading("camoufox")
-                              ? "Downloading..."
-                              : "Download"}
-                          </LoadingButton>
                         </div>
-                      )}
-                    {!isBrowserCurrentlyDownloading("camoufox") &&
-                      isBrowserVersionAvailable("camoufox") && (
-                        <div className="p-3 text-sm rounded-md border text-muted-foreground">
-                          {(() => {
-                            const bestVersion =
-                              getBestAvailableVersion("camoufox");
-                            return `✓ Camoufox version (${bestVersion?.version}) is available`;
-                          })()}
+
+                        <div className="space-y-3">
+                          {regularBrowsers.map((browser) => {
+                            if (browser.value === "camoufox") return null; // Skip camoufox as it's handled in anti-detect tab
+                            const IconComponent = getBrowserIcon(browser.value);
+                            return (
+                              <Button
+                                key={browser.value}
+                                onClick={() =>
+                                  handleBrowserSelect(browser.value)
+                                }
+                                className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
+                                variant="outline"
+                              >
+                                <div className="flex justify-center items-center w-8 h-8">
+                                  {IconComponent && (
+                                    <IconComponent className="w-6 h-6" />
+                                  )}
+                                </div>
+                                <div className="text-left">
+                                  <div className="font-medium">
+                                    {browser.label}
+                                  </div>
+                                  <div className="text-sm text-muted-foreground">
+                                    Regular Browser
+                                  </div>
+                                </div>
+                              </Button>
+                            );
+                          })}
                         </div>
-                      )}
-                    {isBrowserCurrentlyDownloading("camoufox") && (
-                      <div className="p-3 text-sm rounded-md border text-muted-foreground">
-                        {(() => {
-                          const bestVersion =
-                            getBestAvailableVersion("camoufox");
-                          return `Downloading Camoufox version (${bestVersion?.version})...`;
-                        })()}
                       </div>
-                    )}
+                    </TabsContent>
+                  </>
+                ) : (
+                  <>
+                    <TabsContent value="anti-detect" className="mt-0">
+                      {/* Anti-Detect Configuration */}
+                      <div className="space-y-6">
+                        {/* Profile Name */}
+                        <div className="space-y-2">
+                          <Label htmlFor="profile-name">Profile Name</Label>
+                          <Input
+                            id="profile-name"
+                            value={profileName}
+                            onChange={(e) => setProfileName(e.target.value)}
+                            placeholder="Enter profile name"
+                          />
+                        </div>
 
-                    <SharedCamoufoxConfigForm
-                      config={camoufoxConfig}
-                      onConfigChange={updateCamoufoxConfig}
-                      isCreating
-                    />
-                  </div>
-                </TabsContent>
+                        {selectedBrowser === "camoufox" ? (
+                          // Camoufox Configuration
+                          <div className="space-y-6">
+                            {/* Camoufox Download Status */}
+                            {!isBrowserCurrentlyDownloading("camoufox") &&
+                              !isBrowserVersionAvailable("camoufox") &&
+                              getBestAvailableVersion("camoufox") && (
+                                <div className="flex gap-3 items-center p-3 rounded-md border">
+                                  <p className="text-sm text-muted-foreground">
+                                    {(() => {
+                                      const bestVersion =
+                                        getBestAvailableVersion("camoufox");
+                                      return `Camoufox version (${bestVersion?.version}) needs to be downloaded`;
+                                    })()}
+                                  </p>
+                                  <LoadingButton
+                                    onClick={() => handleDownload("camoufox")}
+                                    isLoading={isBrowserCurrentlyDownloading(
+                                      "camoufox",
+                                    )}
+                                    size="sm"
+                                    disabled={isBrowserCurrentlyDownloading(
+                                      "camoufox",
+                                    )}
+                                  >
+                                    {isBrowserCurrentlyDownloading("camoufox")
+                                      ? "Downloading..."
+                                      : "Download"}
+                                  </LoadingButton>
+                                </div>
+                              )}
+                            {!isBrowserCurrentlyDownloading("camoufox") &&
+                              isBrowserVersionAvailable("camoufox") && (
+                                <div className="p-3 text-sm rounded-md border text-muted-foreground">
+                                  {(() => {
+                                    const bestVersion =
+                                      getBestAvailableVersion("camoufox");
+                                    return `✓ Camoufox version (${bestVersion?.version}) is available`;
+                                  })()}
+                                </div>
+                              )}
+                            {isBrowserCurrentlyDownloading("camoufox") && (
+                              <div className="p-3 text-sm rounded-md border text-muted-foreground">
+                                {(() => {
+                                  const bestVersion =
+                                    getBestAvailableVersion("camoufox");
+                                  return `Downloading Camoufox version (${bestVersion?.version})...`;
+                                })()}
+                              </div>
+                            )}
 
-                {/* Proxy Selection - Common to both tabs - Always visible */}
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <Label>Proxy</Label>
-                    <RippleButton
-                      size="sm"
-                      variant="outline"
-                      onClick={() => setShowProxyForm(true)}
-                      className="px-2 h-7 text-xs"
-                    >
-                      <GoPlus className="mr-1 w-3 h-3" /> Add Proxy
-                    </RippleButton>
-                  </div>
-                  {storedProxies.length > 0 ? (
-                    <Select
-                      value={selectedProxyId || "none"}
-                      onValueChange={(value) =>
-                        setSelectedProxyId(value === "none" ? undefined : value)
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="No proxy" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="none">No proxy</SelectItem>
-                        {storedProxies.map((proxy) => (
-                          <SelectItem key={proxy.id} value={proxy.id}>
-                            {proxy.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  ) : (
-                    <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
-                      No proxies available. Add one to route this profile's
-                      traffic.
-                    </div>
-                  )}
-                </div>
+                            <SharedCamoufoxConfigForm
+                              config={camoufoxConfig}
+                              onConfigChange={updateCamoufoxConfig}
+                              isCreating
+                            />
+                          </div>
+                        ) : (
+                          // Regular Browser Configuration
+                          <div className="space-y-4">
+                            {selectedBrowser && (
+                              <div className="space-y-3">
+                                {!isBrowserCurrentlyDownloading(
+                                  selectedBrowser,
+                                ) &&
+                                  !isBrowserVersionAvailable(selectedBrowser) &&
+                                  getBestAvailableVersion(selectedBrowser) && (
+                                    <div className="flex gap-3 items-center">
+                                      <p className="text-sm text-muted-foreground">
+                                        {(() => {
+                                          const bestVersion =
+                                            getBestAvailableVersion(
+                                              selectedBrowser,
+                                            );
+                                          return `Latest version (${bestVersion?.version}) needs to be downloaded`;
+                                        })()}
+                                      </p>
+                                      <LoadingButton
+                                        onClick={() =>
+                                          handleDownload(selectedBrowser)
+                                        }
+                                        isLoading={isBrowserCurrentlyDownloading(
+                                          selectedBrowser,
+                                        )}
+                                        className="ml-auto"
+                                        size="sm"
+                                        disabled={isBrowserCurrentlyDownloading(
+                                          selectedBrowser,
+                                        )}
+                                      >
+                                        Download
+                                      </LoadingButton>
+                                    </div>
+                                  )}
+                                {!isBrowserCurrentlyDownloading(
+                                  selectedBrowser,
+                                ) &&
+                                  isBrowserVersionAvailable(
+                                    selectedBrowser,
+                                  ) && (
+                                    <div className="text-sm text-muted-foreground">
+                                      {(() => {
+                                        const bestVersion =
+                                          getBestAvailableVersion(
+                                            selectedBrowser,
+                                          );
+                                        return `✓ Latest version (${bestVersion?.version}) is available`;
+                                      })()}
+                                    </div>
+                                  )}
+                                {isBrowserCurrentlyDownloading(
+                                  selectedBrowser,
+                                ) && (
+                                  <div className="text-sm text-muted-foreground">
+                                    {(() => {
+                                      const bestVersion =
+                                        getBestAvailableVersion(
+                                          selectedBrowser,
+                                        );
+                                      return `Downloading version (${bestVersion?.version})...`;
+                                    })()}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        {/* Proxy Selection - Always visible */}
+                        <div className="space-y-3">
+                          <div className="flex justify-between items-center">
+                            <Label>Proxy</Label>
+                            <RippleButton
+                              size="sm"
+                              variant="outline"
+                              onClick={() => setShowProxyForm(true)}
+                              className="px-2 h-7 text-xs"
+                            >
+                              <GoPlus className="mr-1 w-3 h-3" /> Add Proxy
+                            </RippleButton>
+                          </div>
+                          {storedProxies.length > 0 ? (
+                            <Select
+                              value={selectedProxyId || "none"}
+                              onValueChange={(value) =>
+                                setSelectedProxyId(
+                                  value === "none" ? undefined : value,
+                                )
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue placeholder="No proxy" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="none">No proxy</SelectItem>
+                                {storedProxies.map((proxy) => (
+                                  <SelectItem key={proxy.id} value={proxy.id}>
+                                    {proxy.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
+                              No proxies available. Add one to route this
+                              profile's traffic.
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </TabsContent>
+
+                    <TabsContent value="regular" className="mt-0">
+                      {/* Regular Browser Configuration */}
+                      <div className="space-y-6">
+                        {/* Profile Name */}
+                        <div className="space-y-2">
+                          <Label htmlFor="profile-name">Profile Name</Label>
+                          <Input
+                            id="profile-name"
+                            value={profileName}
+                            onChange={(e) => setProfileName(e.target.value)}
+                            placeholder="Enter profile name"
+                          />
+                        </div>
+
+                        {/* Regular Browser Configuration */}
+                        <div className="space-y-4">
+                          {selectedBrowser && (
+                            <div className="space-y-3">
+                              {!isBrowserCurrentlyDownloading(
+                                selectedBrowser,
+                              ) &&
+                                !isBrowserVersionAvailable(selectedBrowser) &&
+                                getBestAvailableVersion(selectedBrowser) && (
+                                  <div className="flex gap-3 items-center">
+                                    <p className="text-sm text-muted-foreground">
+                                      {(() => {
+                                        const bestVersion =
+                                          getBestAvailableVersion(
+                                            selectedBrowser,
+                                          );
+                                        return `Latest version (${bestVersion?.version}) needs to be downloaded`;
+                                      })()}
+                                    </p>
+                                    <LoadingButton
+                                      onClick={() =>
+                                        handleDownload(selectedBrowser)
+                                      }
+                                      isLoading={isBrowserCurrentlyDownloading(
+                                        selectedBrowser,
+                                      )}
+                                      className="ml-auto"
+                                      size="sm"
+                                      disabled={isBrowserCurrentlyDownloading(
+                                        selectedBrowser,
+                                      )}
+                                    >
+                                      Download
+                                    </LoadingButton>
+                                  </div>
+                                )}
+                              {!isBrowserCurrentlyDownloading(
+                                selectedBrowser,
+                              ) &&
+                                isBrowserVersionAvailable(selectedBrowser) && (
+                                  <div className="text-sm text-muted-foreground">
+                                    {(() => {
+                                      const bestVersion =
+                                        getBestAvailableVersion(
+                                          selectedBrowser,
+                                        );
+                                      return `✓ Latest version (${bestVersion?.version}) is available`;
+                                    })()}
+                                  </div>
+                                )}
+                              {isBrowserCurrentlyDownloading(
+                                selectedBrowser,
+                              ) && (
+                                <div className="text-sm text-muted-foreground">
+                                  {(() => {
+                                    const bestVersion =
+                                      getBestAvailableVersion(selectedBrowser);
+                                    return `Downloading version (${bestVersion?.version})...`;
+                                  })()}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+
+                        {/* Proxy Selection - Always visible */}
+                        <div className="space-y-3">
+                          <div className="flex justify-between items-center">
+                            <Label>Proxy</Label>
+                            <RippleButton
+                              size="sm"
+                              variant="outline"
+                              onClick={() => setShowProxyForm(true)}
+                              className="px-2 h-7 text-xs"
+                            >
+                              <GoPlus className="mr-1 w-3 h-3" /> Add Proxy
+                            </RippleButton>
+                          </div>
+                          {storedProxies.length > 0 ? (
+                            <Select
+                              value={selectedProxyId || "none"}
+                              onValueChange={(value) =>
+                                setSelectedProxyId(
+                                  value === "none" ? undefined : value,
+                                )
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue placeholder="No proxy" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="none">No proxy</SelectItem>
+                                {storedProxies.map((proxy) => (
+                                  <SelectItem key={proxy.id} value={proxy.id}>
+                                    {proxy.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
+                              No proxies available. Add one to route this
+                              profile's traffic.
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </TabsContent>
+                  </>
+                )}
               </div>
             </div>
           </ScrollArea>
+        </Tabs>
 
-          <DialogFooter className="flex-shrink-0 pt-4 border-t">
+        <DialogFooter className="flex-shrink-0 pt-4 border-t">
+          {currentStep === "browser-config" ? (
+            <>
+              <RippleButton variant="outline" onClick={handleBack}>
+                Back
+              </RippleButton>
+              <LoadingButton
+                onClick={handleCreate}
+                isLoading={isCreating}
+                disabled={isCreateDisabled}
+              >
+                Create
+              </LoadingButton>
+            </>
+          ) : (
             <RippleButton variant="outline" onClick={handleClose}>
               Cancel
             </RippleButton>
-            <LoadingButton
-              onClick={handleCreate}
-              isLoading={isCreating}
-              disabled={isCreateDisabled}
-            >
-              Create
-            </LoadingButton>
-          </DialogFooter>
-        </Tabs>
+          )}
+        </DialogFooter>
       </DialogContent>
       <ProxyFormDialog
         isOpen={showProxyForm}