chore: version bump

docs(contributor): contributors readme action update

.cursor/rules/no-useless-comments.mdc

@@ -3,4 +3,4 @@ description:
 globs: 
 alwaysApply: true
 ---
-Don't leave comments that don't add value
+Don't leave comments that don't add value.

.cursor/rules/no-useless-duplication.mdc

@@ -3,4 +3,4 @@ description:
 globs: 
 alwaysApply: true
 ---
-Do not duplicate code unless you have a very good reason to do so. It is important that the same logic is not duplicated multiple times
+Do not duplicate code unless you have a very good reason to do so. It is important that the same logic is not duplicated multiple times.

.cursor/rules/nodecar-modifications.mdc

@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Anytime you change nodecar's code and try to test, recompile it with "cd nodecar && pnpm build".

.cursor/rules/use-singletons

@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+If there is a global singleton of a struct, only use it inside a method while properly initializing it, unless I have explicitly specified in the request otherwise.

.github/dependabot.yml

@@ -1,4 +1,5 @@
 version: 2
+
 updates:
   # Frontend dependencies (root package.json)
   - package-ecosystem: "npm"
@@ -13,9 +14,6 @@ updates:
       frontend-dependencies:
         patterns:
           - "*"
-    ignore:
-      - dependency-name: "eslint"
-        versions: ">= 9"
     commit-message:
       prefix: "deps"
       include: "scope"

.github/workflows/codeql.yml

@@ -27,35 +27,72 @@ jobs:
             build-mode: none
           - language: javascript-typescript
             build-mode: none
+          # - language: rust
+          #   build-mode: none
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
         with:
           node-version-file: .node-version
           cache: "pnpm"
 
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
+        with:
+          toolchain: stable
+          targets: x86_64-unknown-linux-gnu
+
+      - name: Install system dependencies (Rust only)
+        if: matrix.language == 'rust'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
+        with:
+          workdir: ./src-tauri
+
+      - name: Install banderole
+        run: cargo install banderole
+
       - name: Install dependencies from lockfile
         run: pnpm install --frozen-lockfile
+        
+      - name: Install rust dependencies
+        if: matrix.language == 'rust'
+        working-directory: ./src-tauri
+        run: |
+          cargo build
+        
+      - name: Build nodecar sidecar
+        if: matrix.language == 'rust'
+        shell: bash
+        working-directory: ./nodecar
+        run: |
+          pnpm run build:linux-x64
+
+      - name: Copy nodecar binary to Tauri binaries
+        if: matrix.language == 'rust'
+        shell: bash
+        run: |
+          mkdir -p src-tauri/binaries
+          cp nodecar/nodecar-bin src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@b1e4dc3db58c9601794e22a9f6d28d45461b9dbf #v3.29.0
         with:
           queries: security-extended
           languages: ${{ matrix.language }}
           build-mode: ${{ matrix.build-mode }}
 
-      - if: matrix.build-mode == 'manual'
-        shell: bash
-        run: |
-          pnpm run build
-
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@b1e4dc3db58c9601794e22a9f6d28d45461b9dbf #v3.29.0
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/contributors.yml

@@ -0,0 +1,21 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  contrib-readme-job:
+    runs-on: ubuntu-latest
+    name: Automatically update the contributors list in the README
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Contribute List
+        uses: akhilmhdh/contributors-readme-action@83ea0b4f1ac928fbfe88b9e8460a932a528eb79f #v2.3.11
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dependabot-automerge.yml

@@ -0,0 +1,82 @@
+name: Dependabot Automerge
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  pull-requests: write
+  contents: write
+  checks: read
+
+jobs:
+  security-scan:
+    name: Security Vulnerability Scan
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    with:
+      scan-args: |-
+        -r
+        --skip-git
+        --lockfile=pnpm-lock.yaml
+        --lockfile=src-tauri/Cargo.lock
+        --lockfile=nodecar/pnpm-lock.yaml
+        ./
+    permissions:
+      security-events: write
+      contents: read
+      actions: read
+
+  lint-js:
+    name: Lint JavaScript/TypeScript
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    uses: ./.github/workflows/lint-js.yml
+    secrets: inherit
+    permissions:
+      contents: read
+
+  lint-rust:
+    name: Lint Rust
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    uses: ./.github/workflows/lint-rs.yml
+    secrets: inherit
+    permissions:
+      contents: read
+
+  codeql:
+    name: CodeQL
+    uses: ./.github/workflows/codeql.yml
+    secrets: inherit
+    permissions:
+      security-events: write
+      contents: read
+      packages: read
+      actions: read
+
+  spellcheck:
+    name: Spell Check
+    uses: ./.github/workflows/spellcheck.yml
+    secrets: inherit
+    permissions:
+      contents: read
+
+  dependabot-automerge:
+    name: Dependabot Automerge
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    needs: [security-scan, lint-js, lint-rust, codeql, spellcheck]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@08eff52bf64351f401fb50d4972fa95b9f2c2d1b #v2.4.0
+        with:
+          compat-lookup: true
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Auto-merge minor and patch updates
+        uses: ridedott/merge-me-action@d288b479e76cb993344ca8b5e0fcaa7d6e667eed #v2.10.123
+        with:
+          GITHUB_TOKEN: ${{ secrets.SECRET_DEPENDABOT_GITHUB_TOKEN }}
+          MERGE_METHOD: SQUASH
+          PRESET: DEPENDABOT_MINOR
+          MAXIMUM_RETRIES: 5
+    timeout-minutes: 10

.github/workflows/greetings.yml

@@ -0,0 +1,16 @@
+name: Greetings
+
+on: [pull_request_target, issues]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/first-interaction@2d4393e6bc0e2efb2e48fba7e06819c3bf61ffc9 #v2.0.0
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: "Thank you for your first issue ❤️ If it's a feature request, please make sure it's clear what you want, why you want it, and how important it is to you. If you posted a bug report, please make sure it includes as much detail as possible."
+          pr-message: "Welcome to the community and thank you for your first contribution ❤️ A human will review your PR shortly. Make sure that the pipelines are green, so that the PR is considered ready for a review and could be merged."

.github/workflows/issue-validation.yml

@@ -0,0 +1,173 @@
+name: Issue Validation
+
+on:
+  issues:
+    types: [opened]
+
+permissions:
+  issues: write
+  models: read
+
+jobs:
+  validate-issue:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+
+      - name: Get issue templates
+        id: get-templates
+        run: |
+          # Read the issue templates
+          if [ -f ".github/ISSUE_TEMPLATE/01-bug-report.md" ]; then
+            echo "bug-template-exists=true" >> $GITHUB_OUTPUT
+          fi
+
+          if [ -f ".github/ISSUE_TEMPLATE/02-feature-request.md" ]; then
+            echo "feature-template-exists=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create issue analysis prompt
+        id: create-prompt
+        env:
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+          ISSUE_BODY: ${{ github.event.issue.body }}
+          ISSUE_LABELS: ${{ join(github.event.issue.labels.*.name, ', ') }}
+        run: |
+          cat > issue_analysis.txt << EOF
+          ## Issue Content to Analyze:
+
+          **Title:** $ISSUE_TITLE
+
+          **Body:**
+          $ISSUE_BODY
+
+          **Labels:** $ISSUE_LABELS
+          EOF
+
+      - name: Validate issue with AI
+        id: validate
+        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
+        with:
+          prompt-file: issue_analysis.txt
+          system-prompt: |
+            You are an issue validation assistant for Donut Browser, an anti-detect browser. 
+
+            Analyze the provided issue content and determine if it contains sufficient information based on these requirements:
+
+            **For Bug Reports, the issue should include:**
+            1. Clear description of the problem
+            2. Steps to reproduce the issue (numbered list preferred)
+            3. Expected vs actual behavior
+            4. Environment information (OS, browser version, etc.)
+            5. Error messages, stack traces, or screenshots if applicable
+
+            **For Feature Requests, the issue should include:**
+            1. Clear description of the requested feature
+            2. Use case or problem it solves
+            3. Proposed solution or how it should work
+            4. Priority level or importance
+
+            **General Requirements for all issues:**
+            1. Descriptive title
+            2. Sufficient detail to understand and act upon
+            3. Professional tone and clear communication
+
+            Respond in JSON format with the following structure:
+            ```json
+            {
+              "is_valid": true|false,
+              "issue_type": "bug_report"|"feature_request"|"other",
+              "missing_info": [
+                "List of missing required information"
+              ],
+              "suggestions": [
+                "Specific suggestions for improvement"
+              ],
+              "overall_assessment": "Brief assessment of the issue quality"
+            }
+            ```
+
+            Be constructive and helpful in your feedback. If the issue is incomplete, provide specific guidance on what's needed.
+          model: gpt-4o
+
+      - name: Parse validation result and take action
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Get the AI response
+          VALIDATION_RESULT='${{ steps.validate.outputs.response }}'
+
+          # Extract JSON from the response (handle potential markdown formatting)
+          JSON_RESULT=$(echo "$VALIDATION_RESULT" | sed -n '/```json/,/```/p' | sed '1d;$d' || echo "$VALIDATION_RESULT")
+
+          # Parse JSON fields
+          IS_VALID=$(echo "$JSON_RESULT" | jq -r '.is_valid // false')
+          ISSUE_TYPE=$(echo "$JSON_RESULT" | jq -r '.issue_type // "other"')
+          MISSING_INFO=$(echo "$JSON_RESULT" | jq -r '.missing_info[]? // empty' | sed 's/^/- /')
+          SUGGESTIONS=$(echo "$JSON_RESULT" | jq -r '.suggestions[]? // empty' | sed 's/^/- /')
+          ASSESSMENT=$(echo "$JSON_RESULT" | jq -r '.overall_assessment // "No assessment provided"')
+
+          echo "Issue validation result: $IS_VALID"
+          echo "Issue type: $ISSUE_TYPE"
+
+          if [ "$IS_VALID" = "false" ]; then
+            # Create a comment asking for more information
+            cat > comment.md << EOF
+          ## 🤖 Issue Validation
+
+          Thank you for submitting this issue! However, it appears that some required information might be missing to help us better understand and address your concern.
+
+          **Issue Type Detected:** \`$ISSUE_TYPE\`
+
+          **Assessment:** $ASSESSMENT
+
+          ### 📋 Missing Information:
+          $MISSING_INFO
+
+          ### 💡 Suggestions for Improvement:
+          $SUGGESTIONS
+
+          ### 📝 How to Provide Additional Information:
+
+          Please edit your original issue description to include the missing information. Here are our issue templates for reference:
+
+          - **Bug Report Template:** [View Template](.github/ISSUE_TEMPLATE/01-bug-report.md)
+          - **Feature Request Template:** [View Template](.github/ISSUE_TEMPLATE/02-feature-request.md)
+
+          ### 🔧 Quick Tips:
+          - For **bug reports**: Include step-by-step reproduction instructions, your environment details, and any error messages
+          - For **feature requests**: Describe the use case, expected behavior, and why this feature would be valuable
+          - Add **screenshots** or **logs** when applicable
+
+          Once you've updated the issue with the missing information, feel free to remove this comment or reply to let us know you've made the updates.
+
+          ---
+          *This validation was performed automatically to ensure we have all the information needed to help you effectively.*
+          EOF
+
+            # Post the comment
+            gh issue comment ${{ github.event.issue.number }} --body-file comment.md
+            
+            # Add a label to indicate validation needed
+            gh issue edit ${{ github.event.issue.number }} --add-label "needs-info"
+            
+            echo "✅ Validation comment posted and 'needs-info' label added"
+          else
+            echo "✅ Issue contains sufficient information"
+            
+            # Add appropriate labels based on issue type
+            case "$ISSUE_TYPE" in
+              "bug_report")
+                gh issue edit ${{ github.event.issue.number }} --add-label "bug"
+                ;;
+              "feature_request")
+                gh issue edit ${{ github.event.issue.number }} --add-label "enhancement"
+                ;;
+            esac
+          fi
+
+      - name: Cleanup
+        run: |
+          rm -f issue_analysis.txt comment.md

.github/workflows/lint-js.yml

@@ -16,6 +16,9 @@ on:
       - ".github/workflows/lint-rs.yml"
       - ".github/workflows/osv.yml"
 
+permissions:
+  contents: read
+
 jobs:
   build:
     strategy:
@@ -31,13 +34,13 @@ jobs:
         run: git config --global core.autocrlf false
 
       - name: Checkout repository code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
         with:
           node-version-file: .node-version
           cache: "pnpm"
@@ -45,10 +48,5 @@ jobs:
       - name: Install dependencies from lockfile
         run: pnpm install --frozen-lockfile
 
-      - name: Install nodecar dependencies
-        working-directory: ./nodecar
-        run: |
-          pnpm install --frozen-lockfile
-
       - name: Run lint step
         run: pnpm run lint:js

.github/workflows/lint-rs.yml

@@ -24,6 +24,9 @@ on:
       - "tsconfig.json"
       - "biome.json"
 
+permissions:
+  contents: read
+
 jobs:
   build:
     strategy:
@@ -39,25 +42,29 @@ jobs:
         run: git config --global core.autocrlf false
 
       - name: Checkout repository code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
         with:
           node-version-file: .node-version
           cache: "pnpm"
 
       - name: Install Rust toolchain
-        uses: dtolnay/rust-toolchain@stable
+        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
         with:
+          toolchain: stable
           components: rustfmt, clippy
 
       - name: Install cargo-audit
         run: cargo install cargo-audit
 
+      - name: Install banderole
+        run: cargo install banderole
+
       - name: Install dependencies (Ubuntu only)
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -67,11 +74,6 @@ jobs:
       - name: Install frontend dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Install nodecar dependencies
-        working-directory: ./nodecar
-        run: |
-          pnpm install --frozen-lockfile
-
       - name: Build nodecar binary
         shell: bash
         working-directory: ./nodecar
@@ -84,16 +86,21 @@ jobs:
             pnpm run build:win-x64
           fi
 
+      # TODO: replace with an integration test that fetches everything from rust
+      - name: Download Camoufox for testing
+        run: npx camoufox-js fetch
+        continue-on-error: true
+
       - name: Copy nodecar binary to Tauri binaries
         shell: bash
         run: |
           mkdir -p src-tauri/binaries
           if [[ "${{ matrix.os }}" == "ubuntu-latest" ]]; then
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
           elif [[ "${{ matrix.os }}" == "macos-latest" ]]; then
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-aarch64-apple-darwin
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-aarch64-apple-darwin
           elif [[ "${{ matrix.os }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-x86_64-pc-windows-msvc.exe
+            cp nodecar/nodecar-bin.exe src-tauri/binaries/nodecar-x86_64-pc-windows-msvc.exe
           fi
 
       - name: Create empty 'dist' directory
@@ -107,7 +114,7 @@ jobs:
         run: cargo clippy --all-targets --all-features -- -D warnings -D clippy::all
         working-directory: src-tauri
 
-      - name: Run Rust unit tests
+      - name: Run Rust tests
         run: cargo test
         working-directory: src-tauri
 

.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@e69cc6c86b31f1e7e23935bbe7031b50e51082de" # v2.0.2
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
     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@e69cc6c86b31f1e7e23935bbe7031b50e51082de" # v2.0.2
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
     with:
       scan-args: |-
         -r

.github/workflows/pr-checks.yml

@@ -16,16 +16,20 @@ jobs:
     name: Lint JavaScript/TypeScript
     uses: ./.github/workflows/lint-js.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   lint-rust:
     name: Lint Rust
     uses: ./.github/workflows/lint-rs.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   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@e69cc6c86b31f1e7e23935bbe7031b50e51082de" # v2.0.2
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
     with:
       scan-args: |-
         -r

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

@@ -0,0 +1,118 @@
+name: Generate Release Notes
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: write
+  models: read
+
+jobs:
+  generate-release-notes:
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v') && !github.event.release.prerelease
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        with:
+          fetch-depth: 0 # Fetch full history to compare with previous release
+
+      - name: Get previous release tag
+        id: get-previous-tag
+        run: |
+          # Get the previous release tag (excluding the current one)
+          CURRENT_TAG="${{ github.ref_name }}"
+          PREVIOUS_TAG=$(git tag --sort=-version:refname | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+$' | grep -v "$CURRENT_TAG" | head -n 1)
+
+          if [ -z "$PREVIOUS_TAG" ]; then
+            echo "No previous release found, using initial commit"
+            PREVIOUS_TAG=$(git rev-list --max-parents=0 HEAD)
+          fi
+
+          echo "current-tag=$CURRENT_TAG" >> $GITHUB_OUTPUT
+          echo "previous-tag=$PREVIOUS_TAG" >> $GITHUB_OUTPUT
+          echo "Previous release: $PREVIOUS_TAG"
+          echo "Current release: $CURRENT_TAG"
+
+      - name: Get commit messages between releases
+        id: get-commits
+        run: |
+          # Get commit messages between previous and current release
+          PREVIOUS_TAG="${{ steps.get-previous-tag.outputs.previous-tag }}"
+          CURRENT_TAG="${{ steps.get-previous-tag.outputs.current-tag }}"
+
+          # Get commit log with detailed format
+          COMMIT_LOG=$(git log --pretty=format:"- %s (%h by %an)" $PREVIOUS_TAG..$CURRENT_TAG --no-merges)
+
+          # Get changed files summary
+          CHANGED_FILES=$(git diff --name-status $PREVIOUS_TAG..$CURRENT_TAG | head -20)
+
+          # Save to files for AI processing
+          echo "$COMMIT_LOG" > commits.txt
+          echo "$CHANGED_FILES" > changes.txt
+
+          echo "commits-file=commits.txt" >> $GITHUB_OUTPUT
+          echo "changes-file=changes.txt" >> $GITHUB_OUTPUT
+
+      - name: Generate release notes with AI
+        id: generate-notes
+        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
+        with:
+          prompt-file: commits.txt
+          system-prompt: |
+            You are an expert technical writer tasked with generating comprehensive release notes for Donut Browser, a powerful anti-detect browser.
+
+            Analyze the provided commit messages and generate well-structured release notes following this format:
+
+            ## What's New in ${{ steps.get-previous-tag.outputs.current-tag }}
+
+            [Brief 1-2 sentence overview of the release]
+
+            ### ✨ New Features
+            [List new features with brief descriptions]
+
+            ### 🐛 Bug Fixes  
+            [List bug fixes]
+
+            ### 🔧 Improvements
+            [List improvements and enhancements]
+
+            ### 📚 Documentation
+            [List documentation updates if any]
+
+            ### 🔄 Dependencies
+            [List dependency updates if any]
+
+            ### 🛠️ Developer Experience
+            [List development-related changes if any]
+
+            Guidelines:
+            - Use clear, user-friendly language
+            - Group related commits logically
+            - Omit minor commits like formatting, typos unless significant
+            - Focus on user-facing changes
+            - Use emojis sparingly and consistently
+            - Keep descriptions concise but informative
+            - If commits are unclear, infer the purpose from the context
+
+            The application is a desktop app built with Tauri + Next.js that helps users manage multiple browser profiles with proxy support.
+          model: gpt-4o
+
+      - name: Update release with generated notes
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Get the generated release notes
+          RELEASE_NOTES="${{ steps.generate-notes.outputs.response }}"
+
+          # Update the release with the generated notes
+          gh api --method PATCH /repos/${{ github.repository }}/releases/${{ github.event.release.id }} \
+            --field body="$RELEASE_NOTES"
+
+          echo "✅ Release notes updated successfully!"
+
+      - name: Cleanup
+        run: |
+          rm -f commits.txt changes.txt

.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@e69cc6c86b31f1e7e23935bbe7031b50e51082de" # v2.0.2
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
     with:
       scan-args: |-
         -r
@@ -31,11 +31,15 @@ jobs:
     name: Lint JavaScript/TypeScript
     uses: ./.github/workflows/lint-js.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   lint-rust:
     name: Lint Rust
     uses: ./.github/workflows/lint-rs.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   codeql:
     name: CodeQL
@@ -51,6 +55,8 @@ jobs:
     name: Spell Check
     uses: ./.github/workflows/spellcheck.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   release:
     needs: [security-scan, lint-js, lint-rust, codeql, spellcheck]
@@ -99,19 +105,20 @@ jobs:
 
     runs-on: ${{ matrix.platform }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
         with:
           node-version-file: .node-version
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
 
       - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
+        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
         with:
+          toolchain: stable
           targets: ${{ matrix.target }}
 
       - name: Install dependencies (Ubuntu only)
@@ -121,18 +128,16 @@ jobs:
           sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils
 
       - name: Rust cache
-        uses: swatinem/rust-cache@v2
+        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
         with:
           workdir: ./src-tauri
 
+      - name: Install banderole
+        run: cargo install banderole
+
       - name: Install frontend dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Install nodecar dependencies
-        working-directory: ./nodecar
-        run: |
-          pnpm install --frozen-lockfile
-
       - name: Build nodecar sidecar
         shell: bash
         working-directory: ./nodecar
@@ -144,16 +149,20 @@ jobs:
         run: |
           mkdir -p src-tauri/binaries
           if [[ "${{ matrix.platform }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}.exe
           else
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-${{ matrix.target }}
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
           fi
 
+      - name: Download Camoufox for testing
+        run: npx camoufox-js fetch
+        continue-on-error: true
+
       - name: Build frontend
         run: pnpm build
 
       - name: Build Tauri app
-        uses: tauri-apps/tauri-action@v0
+        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GITHUB_REF_NAME: ${{ github.ref_name }}
@@ -166,7 +175,7 @@ jobs:
           args: ${{ matrix.args }}
 
       - name: Commit CHANGELOG.md
-        uses: stefanzweifel/git-auto-commit-action@v6
+        uses: stefanzweifel/git-auto-commit-action@778341af668090896ca464160c2def5d1d1a3eb0 #v6.0.1
         with:
           branch: main
           commit_message: "docs: update CHANGELOG.md for ${{ github.ref_name }} [skip ci]"

.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@e69cc6c86b31f1e7e23935bbe7031b50e51082de" # v2.0.2
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
     with:
       scan-args: |-
         -r
@@ -30,11 +30,15 @@ jobs:
     name: Lint JavaScript/TypeScript
     uses: ./.github/workflows/lint-js.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   lint-rust:
     name: Lint Rust
     uses: ./.github/workflows/lint-rs.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   codeql:
     name: CodeQL
@@ -50,6 +54,8 @@ jobs:
     name: Spell Check
     uses: ./.github/workflows/spellcheck.yml
     secrets: inherit
+    permissions:
+      contents: read
 
   rolling-release:
     needs: [security-scan, lint-js, lint-rust, codeql, spellcheck]
@@ -89,28 +95,29 @@ jobs:
             target: "x86_64-pc-windows-msvc"
             pkg_target: "latest-win-x64"
             nodecar_script: "build:win-x64"
-          - platform: "windows-11-arm"
-            args: "--target aarch64-pc-windows-msvc"
-            arch: "aarch64"
-            target: "aarch64-pc-windows-msvc"
-            pkg_target: "latest-win-arm64"
-            nodecar_script: "build:win-arm64"
+          # - platform: "windows-11-arm"
+          #   args: "--target aarch64-pc-windows-msvc"
+          #   arch: "aarch64"
+          #   target: "aarch64-pc-windows-msvc"
+          #   pkg_target: "latest-win-arm64"
+          #   nodecar_script: "build:win-arm64"
 
     runs-on: ${{ matrix.platform }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
         with:
           node-version-file: .node-version
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
 
       - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
+        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
         with:
+          toolchain: stable
           targets: ${{ matrix.target }}
 
       - name: Install dependencies (Ubuntu only)
@@ -120,18 +127,16 @@ jobs:
           sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils
 
       - name: Rust cache
-        uses: swatinem/rust-cache@v2
+        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
         with:
           workdir: ./src-tauri
 
+      - name: Install banderole
+        run: cargo install banderole
+
       - name: Install frontend dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Install nodecar dependencies
-        working-directory: ./nodecar
-        run: |
-          pnpm install --frozen-lockfile
-
       - name: Build nodecar sidecar
         shell: bash
         working-directory: ./nodecar
@@ -143,11 +148,15 @@ jobs:
         run: |
           mkdir -p src-tauri/binaries
           if [[ "${{ matrix.platform }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}.exe
           else
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-${{ matrix.target }}
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
           fi
 
+      - name: Download Camoufox for testing
+        run: npx camoufox-js fetch
+        continue-on-error: true
+
       - name: Build frontend
         run: pnpm build
 
@@ -161,7 +170,7 @@ jobs:
           echo "Generated timestamp: ${TIMESTAMP}-${COMMIT_HASH}"
 
       - name: Build Tauri app
-        uses: tauri-apps/tauri-action@v0
+        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BUILD_TAG: "nightly-${{ steps.timestamp.outputs.timestamp }}"

.github/workflows/spellcheck.yml

@@ -21,6 +21,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Actions Repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
       - name: Spell Check Repo
-        uses: crate-ci/typos@v1.33.1
+        uses: crate-ci/typos@392b78fe18a52790c53f42456e46124f77346842 #v1.34.0

.github/workflows/stale.yml

@@ -0,0 +1,21 @@
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+    - cron: "35 23 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9.1.0
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: "This issue has been inactive for 60 days. Please respond to keep it open."
+          stale-pr-message: "This pull request has been inactive for 60 days. Please respond to keep it open."
+          stale-issue-label: "stale"
+          stale-pr-label: "stale"

.gitignore

@@ -46,7 +46,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 
-# eslint
-.eslintcache
+!**/.gitkeep
 
-!**/.gitkeep
+# nodecar
+nodecar/nodecar-bin

.vscode/settings.json

@@ -1,35 +1,72 @@
 {
   "cSpell.words": [
+    "adwaita",
     "ahooks",
+    "akhilmhdh",
     "appimage",
     "appindicator",
     "applescript",
+    "asyncio",
     "autoconfig",
     "autologin",
     "biomejs",
+    "breezedark",
+    "browserforge",
+    "busctl",
+    "CAMOU",
+    "camoufox",
     "cdylib",
+    "certifi",
     "CFURL",
     "checkin",
+    "chrono",
     "CLICOLOR",
     "clippy",
     "cmdk",
     "codegen",
+    "codesign",
+    "CTYPE",
+    "dataclasses",
+    "datareporting",
+    "datas",
+    "dconf",
     "devedition",
+    "distro",
+    "doctest",
     "doesn",
+    "domcontentloaded",
     "donutbrowser",
     "dpkg",
     "dtolnay",
     "dyld",
     "elif",
+    "errorlevel",
+    "esac",
     "esbuild",
-    "eslintcache",
+    "etree",
     "frontmost",
+    "geoip",
+    "getcwd",
+    "gettimezone",
     "gifs",
     "gsettings",
+    "healthreport",
+    "hiddenimports",
+    "hkcu",
+    "hooksconfig",
+    "hookspath",
     "icns",
+    "idlelib",
     "idletime",
+    "idna",
+    "Inno",
+    "kdeglobals",
+    "keras",
     "KHTML",
+    "Kolkata",
+    "kreadconfig",
     "launchservices",
+    "letterboxing",
     "libatk",
     "libayatana",
     "libcairo",
@@ -38,48 +75,106 @@
     "libpango",
     "librsvg",
     "libwebkit",
+    "libxdo",
+    "localtime",
+    "lxml",
+    "mmdb",
     "mountpoint",
+    "msiexec",
     "msvc",
     "msys",
     "Mullvad",
     "mullvadbrowser",
+    "mypy",
+    "noarchive",
+    "nobrowse",
+    "noconfirm",
     "nodecar",
+    "nodemon",
+    "norestart",
+    "NSIS",
     "ntlm",
+    "numpy",
     "objc",
     "orhun",
+    "orjson",
     "osascript",
+    "oscpu",
+    "outpath",
+    "pathex",
+    "pathlib",
+    "peerconnection",
     "pixbuf",
     "plasmohq",
+    "platformdirs",
+    "prefs",
     "propertylist",
+    "psutil",
+    "pycache",
+    "pydantic",
+    "pyee",
+    "pyinstaller",
+    "pyoxidizer",
+    "pytest",
+    "pyyaml",
     "reqwest",
     "ridedott",
     "rlib",
     "rustc",
     "SARIF",
+    "scipy",
+    "screeninfo",
     "serde",
+    "setuptools",
     "shadcn",
+    "showcursor",
+    "shutil",
     "signon",
+    "signum",
+    "sklearn",
     "sonner",
+    "splitn",
     "sspi",
     "staticlib",
     "stefanzweifel",
     "subdirs",
+    "subkey",
+    "SUPPRESSMSGBOXES",
     "swatinem",
     "sysinfo",
     "systempreferences",
+    "systemsetup",
     "taskkill",
+    "tasklist",
     "tauri",
+    "TERX",
+    "testpass",
+    "testuser",
+    "timedatectl",
     "titlebar",
+    "tkinter",
     "Torbrowser",
+    "tqdm",
+    "trackingprotection",
     "turbopack",
+    "turtledemo",
+    "udeps",
     "unlisten",
     "unminimize",
     "unrs",
     "urlencoding",
+    "urllib",
+    "venv",
     "vercel",
+    "VERYSILENT",
+    "webgl",
+    "webrtc",
     "winreg",
     "wiremock",
     "xattr",
-    "zhom"
+    "xfconf",
+    "xsettings",
+    "zhom",
+    "zoneinfo"
   ]
 }

AGENTS.md

@@ -1,6 +1,8 @@
 # Instructions for AI Agents
 
 - After your changes, instead of running specific tests or linting specific files, run "pnpm format && pnpm lint && pnpm test". It means that you first format the code, then lint it, then test it, so that no part is broken after your changes.
-- Don't leave comments that don't add value
-- Do not duplicate code unless you have a very good reason to do so. It is important that the same logic is not duplicated multiple times
+- Don't leave comments that don't add value.
+- Do not duplicate code unless you have a very good reason to do so. It is important that the same logic is not duplicated multiple times.
 - Before finishing the task and showing summary, always run "pnpm format && pnpm lint && pnpm test" at the root of the project to ensure that you don't finish with broken application.
+- Anytime you change nodecar's code and try to test, recompile it with "cd nodecar && pnpm build".
+- If there is a global singleton of a struct, only use it inside a method while properly initializing it, unless I have explicitly specified in the request otherwise.

CONTRIBUTING.md

@@ -26,6 +26,7 @@ Ensure you have the following dependencies installed:
 - Node.js (see `.node-version` for exact version)
 - pnpm package manager
 - Latest Rust and Cargo toolchain
+- [Banderole](https://github.com/zhom/banderole)
 - [Tauri prerequisites guide](https://v2.tauri.app/start/prerequisites/).
 
 ## Run Locally
@@ -46,12 +47,13 @@ After having the above dependencies installed, proceed through the following ste
    pnpm install
    ```
 
-4. **Install nodecar dependencies**
+4. **Build nodecar**
+
+   Building nodecar requires you to have `banderole` installed.
 
    ```bash
    cd nodecar
-   pnpm install --frozen-lockfile
-   cd ..
+   pnpm build
    ```
 
 5. **Start the development server**
@@ -105,7 +107,6 @@ Make sure the build completes successfully without errors.
 ## Testing
 
 - Always test your changes on the target platform
-- Test both development and production builds
 - Verify that existing functionality still works
 - Add tests for new features when possible
 
@@ -149,50 +150,13 @@ Refs #00000
 
 - Ensure that "Allow edits from maintainers" option is checked
 
-## Types of Contributions
-
-### Bug Reports
-
-When filing bug reports, please include:
-
-- Clear description of the issue
-- Steps to reproduce
-- Expected vs actual behavior
-- Environment details (OS, version, etc.)
-- Screenshots or error logs if applicable
-
-### Feature Requests
-
-When suggesting new features:
-
-- Explain the use case and why it's valuable
-- Describe the desired behavior
-- Consider alternatives you've thought of
-- Check if it aligns with our roadmap
-
-### Code Contributions
-
-- Bug fixes
-- New features
-- Performance improvements
-- Documentation updates
-- Test coverage improvements
-
-### Documentation
-
-- README improvements
-- Code comments
-- API documentation
-- Tutorial content
-- Translation work
-
 ## Architecture Overview
 
 Donut Browser is built with:
 
 - **Frontend**: Next.js React application
 - **Backend**: Tauri (Rust) for native functionality
-- **Node.js Sidecar**: `nodecar` binary for proxy support
+- **Node.js Sidecar**: `nodecar` binary for access to JavaScript ecosystem
 - **Build System**: GitHub Actions for CI/CD
 
 Understanding this architecture will help you contribute more effectively.

README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <img src="assets/logo.png" alt="Donut Browser Logo" width="150">
   <h1>Donut Browser</h1>
-  <strong>A powerful browser orchestrator that puts you in control of your browsing experience. 🍩</strong>
+  <strong>A powerful anti-detect browser that puts you in control of your browsing experience. 🍩</strong>
 </div>
 <br>
 
@@ -25,10 +25,6 @@
   </a>
 </p>
 
-## Donut Browser
-
-> A free and open source browser orchestrator built with [Tauri](https://v2.tauri.app/).
-
 <picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/preview-dark.png" />
  <source media="(prefers-color-scheme: light)" srcset="assets/preview.png" />
@@ -38,6 +34,7 @@
 ## Features
 
 - Create unlimited number of local browser profiles completely isolated from each other
+- Safely use multiple accounts on one device by using anti-detect browser profiles, powered by [Camoufox](https://camoufox.com)
 - Proxy support with basic auth for all browsers except for TOR Browser
 - Import profiles from your existing browsers
 - Automatic updates both for browsers and for the app itself
@@ -83,6 +80,24 @@ Have questions or want to contribute? We'd love to hear from you!
  </picture>
 </a>
 
+## Contributors
+
+<!-- readme: collaborators,contributors -start -->
+<table>
+ <tbody>
+  <tr>
+            <td align="center">
+                <a href="https://github.com/zhom">
+                    <img src="https://avatars.githubusercontent.com/u/2717306?v=4" width="100;" alt="zhom"/>
+                    <br />
+                    <sub><b>zhom</b></sub>
+                </a>
+            </td>
+  </tr>
+ <tbody>
+</table>
+<!-- readme: collaborators,contributors -end -->
+
 ## Contact
 
 Have an urgent question or want to report a security vulnerability? Send an email to contact at donutbrowser dot com and we'll get back to you as fast as possible.

biome.json

@@ -1,22 +1,18 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",
     "useIgnoreFile": false
   },
   "files": {
-    "ignoreUnknown": false,
-    "ignore": []
+    "ignoreUnknown": false
   },
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
     "indentWidth": 2
   },
-  "organizeImports": {
-    "enabled": true
-  },
   "linter": {
     "enabled": true,
     "rules": {
@@ -25,17 +21,7 @@
         "useHookAtTopLevel": "error"
       },
       "nursery": {
-        "useGoogleFontDisplay": "error",
-        "noDocumentImportInPage": "error",
-        "noHeadElement": "error",
-        "noHeadImportInDocument": "error",
-        "noImgElement": "off",
-        "useComponentExportOnlyModules": {
-          "level": "error",
-          "options": {
-            "allowExportNames": ["metadata", "badgeVariants", "buttonVariants"]
-          }
-        }
+        "useUniqueElementIds": "off"
       },
       "a11y": {
         "useSemanticElements": "off"

eslint.config.mjs

@@ -1,92 +0,0 @@
-import { FlatCompat } from "@eslint/eslintrc";
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname,
-});
-
-const eslintConfig = tseslint.config(
-  eslint.configs.recommended,
-  tseslint.configs.strictTypeChecked,
-  tseslint.configs.stylisticTypeChecked,
-  ...compat.extends("next/core-web-vitals"),
-  {
-    // Disabled rules taken from https://biomejs.dev/linter/rules-sources for ones that
-    // are already handled by Prettier and TypeScript or are not needed
-    rules: {
-      // eslint-plugin-jsx-a11y rules - some disabled for performance/specific project needs
-      "jsx-a11y/alt-text": "off",
-      "jsx-a11y/anchor-has-content": "off",
-      "jsx-a11y/anchor-is-valid": "off",
-      "jsx-a11y/aria-activedescendant-has-tabindex": "off",
-      "jsx-a11y/aria-props": "off",
-      "jsx-a11y/aria-proptypes": "off",
-      "jsx-a11y/aria-role": "off",
-      "jsx-a11y/aria-unsupported-elements": "off",
-      "jsx-a11y/autocomplete-valid": "off",
-      "jsx-a11y/click-events-have-key-events": "off",
-      "jsx-a11y/heading-has-content": "off",
-      "jsx-a11y/html-has-lang": "off",
-      "jsx-a11y/iframe-has-title": "off",
-      "jsx-a11y/img-redundant-alt": "off",
-      "jsx-a11y/interactive-supports-focus": "off",
-      "jsx-a11y/label-has-associated-control": "off",
-      "jsx-a11y/lang": "off",
-      "jsx-a11y/media-has-caption": "off",
-      "jsx-a11y/mouse-events-have-key-events": "off",
-      "jsx-a11y/no-access-key": "off",
-      "jsx-a11y/no-aria-hidden-on-focusable": "off",
-      "jsx-a11y/no-autofocus": "off",
-      "jsx-a11y/no-distracting-elements": "off",
-      "jsx-a11y/no-interactive-element-to-noninteractive-role": "off",
-      "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-      "jsx-a11y/no-noninteractive-tabindex": "off",
-      "jsx-a11y/no-redundant-roles": "off",
-      "jsx-a11y/no-static-element-interactions": "off",
-      "jsx-a11y/prefer-tag-over-role": "off",
-      "jsx-a11y/role-has-required-aria-props": "off",
-      "jsx-a11y/role-supports-aria-props": "off",
-      "jsx-a11y/scope": "off",
-      "jsx-a11y/tabindex-no-positive": "off",
-      // eslint-plugin-react rules - some disabled for performance/specific project needs
-      "react/button-has-type": "off",
-      "react/jsx-boolean-value": "off",
-      "react/jsx-curly-brace-presence": "off",
-      "react/jsx-fragments": "off",
-      "react/jsx-key": "off",
-      "react/jsx-no-comment-textnodes": "off",
-      "react/jsx-no-duplicate-props": "off",
-      "react/jsx-no-target-blank": "off",
-      "react/jsx-no-useless-fragment": "off",
-      "react/no-array-index-key": "off",
-      "react/no-children-prop": "off",
-      "react/no-danger": "off",
-      "react/no-danger-with-children": "off",
-      "react/void-dom-elements-no-children": "off",
-      // eslint-plugin-react-hooks rules - disabled for specific project needs
-      "react-hooks/exhaustive-deps": "off",
-      "react-hooks/rules-of-hooks": "off",
-      // typescript-eslint rules - some handled by TypeScript compiler or disabled for project needs
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/require-await": "off",
-      // Custom rules
-      "@typescript-eslint/restrict-template-expressions": [
-        "error",
-        {
-          allowNumber: true,
-          allowBoolean: true,
-          allowNever: true,
-        },
-      ],
-    },
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  }
-);
-
-export default eslintConfig;

nodecar/copy-binary.sh

@@ -22,7 +22,7 @@ if [ -z "$TARGET_TRIPLE" ]; then
 fi
 
 # Copy the file with target triple suffix
-cp "dist/nodecar${EXT}" "../src-tauri/binaries/nodecar-${TARGET_TRIPLE}${EXT}"
+cp "nodecar-bin" "../src-tauri/binaries/nodecar-${TARGET_TRIPLE}${EXT}"
 
 # Also copy a generic version for Tauri to find
-cp "dist/nodecar${EXT}" "../src-tauri/binaries/nodecar${EXT}"
+cp "nodecar-bin" "../src-tauri/binaries/nodecar${EXT}"

nodecar/eslint.config.mjs

@@ -1,90 +0,0 @@
-import { FlatCompat } from "@eslint/eslintrc";
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname,
-});
-
-const eslintConfig = tseslint.config(
-  eslint.configs.recommended,
-  ...compat.extends("next/core-web-vitals"),
-  {
-    // Disabled rules taken from https://biomejs.dev/linter/rules-sources for ones that
-    // are already handled by Prettier and TypeScript or are not needed
-    rules: {
-      // eslint-plugin-jsx-a11y rules - some disabled for performance/specific project needs
-      "jsx-a11y/alt-text": "off",
-      "jsx-a11y/anchor-has-content": "off",
-      "jsx-a11y/anchor-is-valid": "off",
-      "jsx-a11y/aria-activedescendant-has-tabindex": "off",
-      "jsx-a11y/aria-props": "off",
-      "jsx-a11y/aria-proptypes": "off",
-      "jsx-a11y/aria-role": "off",
-      "jsx-a11y/aria-unsupported-elements": "off",
-      "jsx-a11y/autocomplete-valid": "off",
-      "jsx-a11y/click-events-have-key-events": "off",
-      "jsx-a11y/heading-has-content": "off",
-      "jsx-a11y/html-has-lang": "off",
-      "jsx-a11y/iframe-has-title": "off",
-      "jsx-a11y/img-redundant-alt": "off",
-      "jsx-a11y/interactive-supports-focus": "off",
-      "jsx-a11y/label-has-associated-control": "off",
-      "jsx-a11y/lang": "off",
-      "jsx-a11y/media-has-caption": "off",
-      "jsx-a11y/mouse-events-have-key-events": "off",
-      "jsx-a11y/no-access-key": "off",
-      "jsx-a11y/no-aria-hidden-on-focusable": "off",
-      "jsx-a11y/no-autofocus": "off",
-      "jsx-a11y/no-distracting-elements": "off",
-      "jsx-a11y/no-interactive-element-to-noninteractive-role": "off",
-      "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-      "jsx-a11y/no-noninteractive-tabindex": "off",
-      "jsx-a11y/no-redundant-roles": "off",
-      "jsx-a11y/no-static-element-interactions": "off",
-      "jsx-a11y/prefer-tag-over-role": "off",
-      "jsx-a11y/role-has-required-aria-props": "off",
-      "jsx-a11y/role-supports-aria-props": "off",
-      "jsx-a11y/scope": "off",
-      "jsx-a11y/tabindex-no-positive": "off",
-      // eslint-plugin-react rules - some disabled for performance/specific project needs
-      "react/button-has-type": "off",
-      "react/jsx-boolean-value": "off",
-      "react/jsx-curly-brace-presence": "off",
-      "react/jsx-fragments": "off",
-      "react/jsx-key": "off",
-      "react/jsx-no-comment-textnodes": "off",
-      "react/jsx-no-duplicate-props": "off",
-      "react/jsx-no-target-blank": "off",
-      "react/jsx-no-useless-fragment": "off",
-      "react/no-array-index-key": "off",
-      "react/no-children-prop": "off",
-      "react/no-danger": "off",
-      "react/no-danger-with-children": "off",
-      "react/void-dom-elements-no-children": "off",
-      // eslint-plugin-react-hooks rules - disabled for specific project needs
-      "react-hooks/exhaustive-deps": "off",
-      "react-hooks/rules-of-hooks": "off",
-      // typescript-eslint rules - some handled by TypeScript compiler or disabled for project needs
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/require-await": "off",
-      // Custom rules
-      "@typescript-eslint/restrict-template-expressions": [
-        "error",
-        {
-          allowNumber: true,
-          allowBoolean: true,
-          allowNever: true,
-        },
-      ],
-    },
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  }
-);
-
-export default eslintConfig;

nodecar/package.json

@@ -3,33 +3,38 @@
   "version": "1.0.0",
   "description": "",
   "main": "dist/index.js",
+  "bin": "dist/index.js",
   "scripts": {
     "watch": "nodemon --exec ts-node --esm ./src/index.ts --watch src",
     "dev": "node --loader ts-node/esm ./src/index.ts",
     "start": "tsc && node ./dist/index.js",
-    "test": "tsc && node ./dist/test-proxy.js",
     "rename-binary": "sh ./copy-binary.sh",
-    "build": "tsc && pkg ./dist/index.js --targets latest-macos-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:mac-aarch64": "tsc && pkg ./dist/index.js --targets latest-macos-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:mac-x86_64": "tsc && pkg ./dist/index.js --targets latest-macos-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:linux-x64": "tsc && pkg ./dist/index.js --targets latest-linux-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:linux-arm64": "tsc && pkg ./dist/index.js --targets latest-linux-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:win-x64": "tsc && pkg ./dist/index.js --targets latest-win-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:win-arm64": "tsc && pkg ./dist/index.js --targets latest-win-arm64 --output dist/nodecar && pnpm rename-binary"
+    "build": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:mac-aarch64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:mac-x86_64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:linux-x64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:linux-arm64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:win-x64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:win-arm64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary"
   },
   "keywords": [],
   "author": "",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@types/node": "^24.0.1",
-    "@yao-pkg/pkg": "^6.5.1",
+    "@types/node": "^24.2.0",
     "commander": "^14.0.0",
-    "dotenv": "^16.5.0",
+    "donutbrowser-camoufox-js": "^0.6.4",
+    "dotenv": "^17.2.1",
+    "fingerprint-generator": "^2.1.69",
     "get-port": "^7.1.0",
     "nodemon": "^3.1.10",
+    "playwright-core": "^1.54.2",
     "proxy-chain": "^2.5.9",
+    "tmp": "^0.2.4",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.0"
+    "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@types/tmp": "^0.2.6"
   }
 }

nodecar/src/camoufox-launcher.ts

@@ -0,0 +1,447 @@
+import { spawn } from "node:child_process";
+import path from "node:path";
+import { launchOptions } from "donutbrowser-camoufox-js";
+import type { LaunchOptions } from "donutbrowser-camoufox-js/dist/utils.js";
+import {
+  type CamoufoxConfig,
+  deleteCamoufoxConfig,
+  generateCamoufoxId,
+  getCamoufoxConfig,
+  listCamoufoxConfigs,
+  saveCamoufoxConfig,
+} from "./camoufox-storage.js";
+
+/**
+ * Convert camoufox fingerprint format to fingerprint-generator format
+ * @param camoufoxFingerprint The camoufox fingerprint object
+ * @returns fingerprint-generator object
+ */
+function convertCamoufoxToFingerprintGenerator(
+  camoufoxFingerprint: Record<string, any>,
+): any {
+  const fingerprintObj: Record<string, any> = {
+    navigator: {},
+    screen: {},
+    videoCard: {},
+    headers: {},
+    battery: {},
+  };
+
+  // Mapping from camoufox keys to fingerprint-generator structure based on the YAML
+  const mappings: Record<string, string> = {
+    // Navigator properties
+    "navigator.userAgent": "navigator.userAgent",
+    "navigator.platform": "navigator.platform",
+    "navigator.hardwareConcurrency": "navigator.hardwareConcurrency",
+    "navigator.maxTouchPoints": "navigator.maxTouchPoints",
+    "navigator.doNotTrack": "navigator.doNotTrack",
+    "navigator.appCodeName": "navigator.appCodeName",
+    "navigator.appName": "navigator.appName",
+    "navigator.appVersion": "navigator.appVersion",
+    "navigator.oscpu": "navigator.oscpu",
+    "navigator.product": "navigator.product",
+    "navigator.language": "navigator.language",
+    "navigator.languages": "navigator.languages",
+    "navigator.globalPrivacyControl": "navigator.globalPrivacyControl",
+
+    // Screen properties
+    "screen.width": "screen.width",
+    "screen.height": "screen.height",
+    "screen.availWidth": "screen.availWidth",
+    "screen.availHeight": "screen.availHeight",
+    "screen.availTop": "screen.availTop",
+    "screen.availLeft": "screen.availLeft",
+    "screen.colorDepth": "screen.colorDepth",
+    "screen.pixelDepth": "screen.pixelDepth",
+    "window.outerWidth": "screen.outerWidth",
+    "window.outerHeight": "screen.outerHeight",
+    "window.innerWidth": "screen.innerWidth",
+    "window.innerHeight": "screen.innerHeight",
+    "window.screenX": "screen.screenX",
+    "window.screenY": "screen.screenY",
+    "screen.pageXOffset": "screen.pageXOffset",
+    "screen.pageYOffset": "screen.pageYOffset",
+    "window.devicePixelRatio": "screen.devicePixelRatio",
+    "document.body.clientWidth": "screen.clientWidth",
+    "document.body.clientHeight": "screen.clientHeight",
+
+    // WebGL properties
+    "webGl:vendor": "videoCard.vendor",
+    "webGl:renderer": "videoCard.renderer",
+
+    // Headers
+    "headers.Accept-Encoding": "headers.Accept-Encoding",
+
+    // Battery
+    "battery:charging": "battery.charging",
+    "battery:chargingTime": "battery.chargingTime",
+    "battery:dischargingTime": "battery.dischargingTime",
+  };
+
+  // Apply mappings
+  for (const [camoufoxKey, fingerprintPath] of Object.entries(mappings)) {
+    if (camoufoxFingerprint[camoufoxKey] !== undefined) {
+      const pathParts = fingerprintPath.split(".");
+      let current = fingerprintObj;
+
+      // Navigate to the nested property, creating objects as needed
+      for (let i = 0; i < pathParts.length - 1; i++) {
+        const part = pathParts[i];
+        if (!current[part]) {
+          current[part] = {};
+        }
+        current = current[part];
+      }
+
+      // Set the final value
+      const finalKey = pathParts[pathParts.length - 1];
+      current[finalKey] = camoufoxFingerprint[camoufoxKey];
+    }
+  }
+
+  // Handle fonts separately
+  if (camoufoxFingerprint.fonts && Array.isArray(camoufoxFingerprint.fonts)) {
+    fingerprintObj.fonts = camoufoxFingerprint.fonts;
+  }
+
+  return { ...camoufoxFingerprint, ...fingerprintObj };
+}
+
+/**
+ * Start a Camoufox instance in a separate process
+ * @param options Camoufox launch options
+ * @param profilePath Profile directory path
+ * @param url Optional URL to open
+ * @returns Promise resolving to the Camoufox configuration
+ */
+export async function startCamoufoxProcess(
+  options: LaunchOptions = {},
+  profilePath?: string,
+  url?: string,
+  customConfig?: string,
+): Promise<CamoufoxConfig> {
+  // Generate a unique ID for this instance
+  const id = generateCamoufoxId();
+
+  // Ensure profile path is absolute if provided
+  const absoluteProfilePath = profilePath
+    ? path.resolve(profilePath)
+    : undefined;
+
+  // Create the Camoufox configuration
+  const config: CamoufoxConfig = {
+    id,
+    options: JSON.parse(JSON.stringify(options)), // Deep clone to avoid reference sharing
+    profilePath: absoluteProfilePath,
+    url,
+    customConfig,
+  };
+
+  // Save the configuration before starting the process
+  saveCamoufoxConfig(config);
+
+  // Build the command arguments
+  const args = [
+    path.join(__dirname, "index.js"),
+    "camoufox-worker",
+    "start",
+    "--id",
+    id,
+  ];
+
+  // Spawn the process with proper detachment - similar to proxy implementation
+  const child = spawn(process.execPath, args, {
+    detached: true,
+    stdio: ["ignore", "pipe", "pipe"], // Capture stdout and stderr for startup feedback
+    cwd: process.cwd(),
+    env: {
+      ...process.env,
+      NODE_ENV: "production",
+      // Ensure Camoufox can find its dependencies
+      NODE_PATH: process.env.NODE_PATH || "",
+    },
+  });
+
+  // Wait for the worker to start successfully or fail - with shorter timeout for quick response
+  return new Promise<CamoufoxConfig>((resolve, reject) => {
+    let resolved = false;
+    let stdoutBuffer = "";
+    let stderrBuffer = "";
+
+    // Shorter timeout for quick startup feedback
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        child.kill("SIGKILL");
+        reject(
+          new Error(`Camoufox worker ${id} startup timeout after 5 seconds`),
+        );
+      }
+    }, 5000);
+
+    // Handle stdout - look for success JSON
+    if (child.stdout) {
+      child.stdout.on("data", (data) => {
+        const output = data.toString();
+        stdoutBuffer += output;
+
+        // Look for success JSON message
+        const lines = stdoutBuffer.split("\n");
+        for (const line of lines) {
+          if (line.trim()) {
+            try {
+              const parsed = JSON.parse(line.trim());
+              if (parsed.success && parsed.id === id && parsed.processId) {
+                if (!resolved) {
+                  resolved = true;
+                  clearTimeout(timeout);
+                  config.processId = parsed.processId;
+                  saveCamoufoxConfig(config);
+
+                  // Unref immediately after success to detach properly
+                  child.unref();
+                  resolve(config);
+                  return;
+                }
+              }
+            } catch {
+              // Not JSON, continue
+            }
+          }
+        }
+      });
+    }
+
+    // Handle stderr - look for error JSON
+    if (child.stderr) {
+      child.stderr.on("data", (data) => {
+        const output = data.toString();
+        stderrBuffer += output;
+
+        // Look for error JSON message
+        const lines = stderrBuffer.split("\n");
+        for (const line of lines) {
+          if (line.trim()) {
+            try {
+              const parsed = JSON.parse(line.trim());
+              if (parsed.error && parsed.id === id) {
+                if (!resolved) {
+                  resolved = true;
+                  clearTimeout(timeout);
+                  reject(
+                    new Error(
+                      `Camoufox worker failed: ${parsed.message || parsed.error}`,
+                    ),
+                  );
+                  return;
+                }
+              }
+            } catch {
+              // Not JSON, continue
+            }
+          }
+        }
+      });
+    }
+
+    child.on("exit", (code, signal) => {
+      if (!resolved) {
+        resolved = true;
+        clearTimeout(timeout);
+        if (code !== 0) {
+          reject(
+            new Error(
+              `Camoufox worker ${id} exited with code ${code} and signal ${signal}. Stderr: ${stderrBuffer}`,
+            ),
+          );
+        } else {
+          // Process exited successfully but we didn't get success message
+          reject(
+            new Error(
+              `Camoufox worker ${id} exited without success confirmation`,
+            ),
+          );
+        }
+      }
+    });
+  });
+}
+
+/**
+ * Stop a Camoufox process
+ * @param id The Camoufox ID to stop
+ * @returns Promise resolving to true if stopped, false if not found
+ */
+export async function stopCamoufoxProcess(id: string): Promise<boolean> {
+  const config = getCamoufoxConfig(id);
+
+  if (!config) {
+    return false;
+  }
+
+  try {
+    // Method 1: If we have a process ID, kill by PID with proper signal sequence
+    if (config.processId) {
+      try {
+        // First try SIGTERM for graceful shutdown
+        process.kill(config.processId, "SIGTERM");
+        // Give it more time to terminate gracefully (increased from 2s to 5s)
+        await new Promise((resolve) => setTimeout(resolve, 5000));
+
+        // Check if process is still running
+        try {
+          process.kill(config.processId, 0); // Signal 0 checks if process exists
+          process.kill(config.processId, "SIGKILL");
+        } catch {}
+      } catch {}
+    }
+
+    // Method 2: Pattern-based kill as fallback
+    const killByPattern = spawn(
+      "pkill",
+      ["-TERM", "-f", `camoufox-worker.*${id}`],
+      {
+        stdio: "ignore",
+      },
+    );
+
+    // Wait for pattern-based kill command to complete
+    await new Promise<void>((resolve) => {
+      killByPattern.on("exit", () => resolve());
+      // Timeout after 3 seconds
+      setTimeout(() => resolve(), 3000);
+    });
+
+    // Final cleanup with SIGKILL if needed
+    setTimeout(() => {
+      spawn("pkill", ["-KILL", "-f", `camoufox-worker.*${id}`], {
+        stdio: "ignore",
+      });
+    }, 1000);
+
+    // Delete the configuration
+    deleteCamoufoxConfig(id);
+    return true;
+  } catch {
+    // Delete the configuration even if stopping failed
+    deleteCamoufoxConfig(id);
+    return false;
+  }
+}
+
+/**
+ * Stop all Camoufox processes
+ * @returns Promise resolving when all instances are stopped
+ */
+export async function stopAllCamoufoxProcesses(): Promise<void> {
+  const configs = listCamoufoxConfigs();
+
+  const stopPromises = configs.map((config) => stopCamoufoxProcess(config.id));
+  await Promise.all(stopPromises);
+}
+
+interface GenerateConfigOptions {
+  proxy?: string;
+  maxWidth?: number;
+  maxHeight?: number;
+  geoip?: string | boolean;
+  blockImages?: boolean;
+  blockWebrtc?: boolean;
+  blockWebgl?: boolean;
+  executablePath?: string;
+  fingerprint?: string;
+}
+
+/**
+ * Generate Camoufox configuration using launchOptions
+ * @param options Configuration options
+ * @returns Promise resolving to the generated config JSON string
+ */
+export async function generateCamoufoxConfig(
+  options: GenerateConfigOptions,
+): Promise<string> {
+  try {
+    const launchOpts: any = {
+      headless: false,
+      i_know_what_im_doing: true,
+      config: {
+        disableTheming: true,
+        showcursor: false,
+      },
+    };
+
+    if (options.geoip) {
+      launchOpts.geoip = true;
+    }
+
+    if (options.blockImages) {
+      launchOpts.block_images = true;
+    }
+    if (options.blockWebrtc) {
+      launchOpts.block_webrtc = true;
+    }
+    if (options.blockWebgl) {
+      launchOpts.block_webgl = true;
+    }
+
+    if (options.executablePath) {
+      launchOpts.executable_path = options.executablePath;
+    }
+
+    if (options.proxy) {
+      launchOpts.proxy = options.proxy;
+    }
+
+    // If fingerprint is provided, use it and ignore other options except executable_path and block_*
+    if (options.fingerprint) {
+      try {
+        const camoufoxFingerprint = JSON.parse(options.fingerprint);
+
+        if (camoufoxFingerprint.timezone) {
+          launchOpts.config.timezone = camoufoxFingerprint.timezone;
+        }
+
+        // Convert camoufox fingerprint format to fingerprint-generator format
+        const fingerprintObj =
+          convertCamoufoxToFingerprintGenerator(camoufoxFingerprint);
+        launchOpts.fingerprint = fingerprintObj;
+      } catch (error) {
+        throw new Error(`Invalid fingerprint JSON: ${error}`);
+      }
+    } else {
+      // Use individual options to build configuration
+
+      if (options.maxWidth && options.maxHeight) {
+        launchOpts.screen = {
+          maxWidth: options.maxWidth,
+          maxHeight: options.maxHeight,
+        };
+      }
+    }
+
+    // Generate the configuration using launchOptions
+    const generatedOptions = await launchOptions(launchOpts);
+
+    // Extract the environment variables that contain the config
+    const envVars = generatedOptions.env || {};
+
+    // Reconstruct the config from environment variables using getEnvVars utility
+    let configStr = "";
+    let chunkIndex = 1;
+
+    while (envVars[`CAMOU_CONFIG_${chunkIndex}`]) {
+      configStr += envVars[`CAMOU_CONFIG_${chunkIndex}`];
+      chunkIndex++;
+    }
+
+    if (!configStr) {
+      throw new Error("No configuration generated");
+    }
+
+    // Parse and return the config as JSON string
+    const config = JSON.parse(configStr);
+    return JSON.stringify(config);
+  } catch (error) {
+    throw new Error(`Failed to generate Camoufox config: ${error}`);
+  }
+}

nodecar/src/camoufox-storage.ts

@@ -0,0 +1,153 @@
+import fs from "node:fs";
+import path from "node:path";
+import type { LaunchOptions } from "donutbrowser-camoufox-js/dist/utils.js";
+import tmp from "tmp";
+
+export interface CamoufoxConfig {
+  id: string;
+  options: LaunchOptions;
+  profilePath?: string;
+  url?: string;
+  processId?: number;
+  customConfig?: string; // JSON string of the fingerprint config
+}
+
+const STORAGE_DIR = path.join(tmp.tmpdir, "donutbrowser", "camoufox");
+
+if (!fs.existsSync(STORAGE_DIR)) {
+  fs.mkdirSync(STORAGE_DIR, { recursive: true });
+}
+
+/**
+ * Save a Camoufox configuration to disk
+ * @param config The Camoufox configuration to save
+ */
+export function saveCamoufoxConfig(config: CamoufoxConfig): void {
+  const filePath = path.join(STORAGE_DIR, `${config.id}.json`);
+  fs.writeFileSync(filePath, JSON.stringify(config, null, 2));
+}
+
+/**
+ * Get a Camoufox configuration by ID
+ * @param id The Camoufox ID
+ * @returns The Camoufox configuration or null if not found
+ */
+export function getCamoufoxConfig(id: string): CamoufoxConfig | null {
+  const filePath = path.join(STORAGE_DIR, `${id}.json`);
+
+  if (!fs.existsSync(filePath)) {
+    return null;
+  }
+
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(content) as CamoufoxConfig;
+  } catch (error) {
+    console.error({
+      message: `Error reading Camoufox config ${id}`,
+      error: (error as Error).message,
+    });
+    return null;
+  }
+}
+
+/**
+ * Delete a Camoufox configuration
+ * @param id The Camoufox ID to delete
+ * @returns True if deleted, false if not found
+ */
+export function deleteCamoufoxConfig(id: string): boolean {
+  const filePath = path.join(STORAGE_DIR, `${id}.json`);
+
+  if (!fs.existsSync(filePath)) {
+    return false;
+  }
+
+  try {
+    fs.unlinkSync(filePath);
+    return true;
+  } catch (error) {
+    console.error({
+      message: `Error deleting Camoufox config ${id}`,
+      error: (error as Error).message,
+    });
+    return false;
+  }
+}
+
+/**
+ * List all saved Camoufox configurations
+ * @returns Array of Camoufox configurations
+ */
+export function listCamoufoxConfigs(): CamoufoxConfig[] {
+  if (!fs.existsSync(STORAGE_DIR)) {
+    return [];
+  }
+
+  try {
+    return fs
+      .readdirSync(STORAGE_DIR)
+      .filter((file) => file.endsWith(".json"))
+      .map((file) => {
+        try {
+          const content = fs.readFileSync(
+            path.join(STORAGE_DIR, file),
+            "utf-8",
+          );
+          return JSON.parse(content) as CamoufoxConfig;
+        } catch (error) {
+          console.error({
+            message: `Error reading Camoufox config ${file}`,
+            error,
+          });
+          return null;
+        }
+      })
+      .filter((config): config is CamoufoxConfig => config !== null)
+      .map((config) => {
+        config.options = "Removed for logging" as any;
+        config.customConfig = "Removed for logging" as any;
+        return config;
+      });
+  } catch (error) {
+    console.error({ message: "Error listing Camoufox configs:", error });
+    return [];
+  }
+}
+
+/**
+ * Update a Camoufox configuration
+ * @param config The Camoufox configuration to update
+ * @returns True if updated, false if not found
+ */
+export function updateCamoufoxConfig(config: CamoufoxConfig): boolean {
+  const filePath = path.join(STORAGE_DIR, `${config.id}.json`);
+
+  try {
+    fs.readFileSync(filePath, "utf-8");
+    fs.writeFileSync(filePath, JSON.stringify(config, null, 2));
+    return true;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+      console.error({
+        message: `Config ${config.id} was deleted while the app was running`,
+      });
+      return false;
+    }
+
+    console.error({
+      message: `Error updating Camoufox config ${config.id}`,
+      error,
+    });
+    return false;
+  }
+}
+
+/**
+ * Generate a unique ID for a Camoufox instance
+ * @returns A unique ID string
+ */
+export function generateCamoufoxId(): string {
+  // Include process ID to ensure uniqueness across multiple processes
+  return `camoufox_${Date.now()}_${process.pid}_${Math.floor(Math.random() * 10000)}`;
+}

nodecar/src/camoufox-worker.ts

@@ -0,0 +1,298 @@
+import { launchOptions } from "donutbrowser-camoufox-js";
+import type { LaunchOptions } from "donutbrowser-camoufox-js/dist/utils.js";
+import { type Browser, type BrowserContext, firefox } from "playwright-core";
+import { getCamoufoxConfig, saveCamoufoxConfig } from "./camoufox-storage.js";
+import { getEnvVars, parseProxyString } from "./utils.js";
+
+/**
+ * Run a Camoufox browser server as a worker process
+ * @param id The Camoufox configuration ID
+ */
+export async function runCamoufoxWorker(id: string): Promise<void> {
+  // Get the Camoufox configuration
+  const config = getCamoufoxConfig(id);
+
+  if (!config) {
+    console.error(
+      JSON.stringify({
+        error: "Configuration not found",
+        id: id,
+      }),
+    );
+    process.exit(1);
+  }
+
+  config.processId = process.pid;
+  saveCamoufoxConfig(config);
+
+  console.log(
+    JSON.stringify({
+      success: true,
+      id: id,
+      processId: process.pid,
+      profilePath: config.profilePath,
+      message: "Camoufox worker started successfully",
+    }),
+  );
+
+  // Launch browser in background - this can take time and may fail
+  setImmediate(async () => {
+    let browser: Browser | null = null;
+    let context: BrowserContext | null = null;
+    let windowCheckInterval: NodeJS.Timeout | null = null;
+
+    // Graceful shutdown handler with access to browser and server
+    const gracefulShutdown = async () => {
+      try {
+        // Clear any intervals first
+        if (windowCheckInterval) {
+          clearInterval(windowCheckInterval);
+        }
+
+        // Close browser context and server if they exist
+        if (context && !context.pages) {
+          // Context is already closed
+        } else if (context) {
+          await context.close();
+        }
+
+        if (browser?.isConnected()) {
+          await browser.close();
+        }
+      } catch {
+        // Ignore cleanup errors during shutdown
+      }
+      process.exit(0);
+    };
+
+    // Handle various quit signals for proper macOS Command+Q support
+    process.on("SIGTERM", () => void gracefulShutdown());
+    process.on("SIGINT", () => void gracefulShutdown());
+    process.on("SIGHUP", () => void gracefulShutdown());
+    process.on("SIGQUIT", () => void gracefulShutdown());
+
+    // Handle uncaught exceptions and unhandled rejections
+    process.on("uncaughtException", () => void gracefulShutdown());
+    process.on("unhandledRejection", () => void gracefulShutdown());
+
+    try {
+      // Deep clone to avoid reference sharing and ensure fresh configuration for each instance
+      const camoufoxOptions: LaunchOptions = JSON.parse(
+        JSON.stringify(config.options || {}),
+      );
+
+      // Add profile path if provided
+      if (config.profilePath) {
+        camoufoxOptions.user_data_dir = config.profilePath;
+      }
+
+      // Ensure block options are properly set
+      if (camoufoxOptions.block_images) {
+        camoufoxOptions.block_images = true;
+      }
+
+      if (camoufoxOptions.block_webgl) {
+        camoufoxOptions.block_webgl = true;
+      }
+
+      if (camoufoxOptions.block_webrtc) {
+        camoufoxOptions.block_webrtc = true;
+      }
+
+      // Check for headless mode from config (no environment variable check)
+      if (camoufoxOptions.headless) {
+        camoufoxOptions.headless = true;
+      }
+
+      // Always set these defaults - ensure they are applied for each instance
+      camoufoxOptions.i_know_what_im_doing = true;
+      camoufoxOptions.config = {
+        disableTheming: true,
+        showcursor: false,
+        ...(camoufoxOptions.config || {}),
+      };
+
+      // Generate fresh options for this specific instance
+      const generatedOptions = await launchOptions(camoufoxOptions);
+
+      // Start with process environment to ensure proper inheritance
+      let finalEnv = { ...process.env };
+
+      // Add generated options environment variables
+      if (generatedOptions.env) {
+        finalEnv = { ...finalEnv, ...generatedOptions.env };
+      }
+
+      // If we have a custom config from Rust, use it directly as environment variables
+      if (config.customConfig) {
+        try {
+          // Parse the custom config JSON string
+          const customConfigObj = JSON.parse(config.customConfig);
+
+          // Ensure default config values are preserved even with custom config
+          const mergedConfig = {
+            ...customConfigObj,
+            disableTheming: true,
+            showcursor: false,
+          };
+
+          // Convert merged config to environment variables using getEnvVars
+          const customEnvVars = getEnvVars(mergedConfig);
+
+          // Merge custom config with generated config (custom takes precedence)
+          finalEnv = { ...finalEnv, ...customEnvVars };
+        } catch (error) {
+          console.error(
+            `Camoufox worker ${id}: Failed to parse custom config, using generated config:`,
+            error,
+          );
+          return;
+        }
+      }
+      // Prepare profile path for persistent context
+      const profilePath = config.profilePath || "";
+
+      // Launch persistent context with the final configuration
+      const finalOptions: any = {
+        ...generatedOptions,
+        env: finalEnv,
+      };
+
+      // Only add proxy if it exists and is valid
+      if (camoufoxOptions.proxy) {
+        try {
+          finalOptions.proxy = parseProxyString(camoufoxOptions.proxy);
+        } catch (error) {
+          console.error({
+            message: "Failed to parse proxy, launching without proxy",
+            error,
+          });
+          return;
+        }
+      }
+
+      // Use launchPersistentContext instead of launchServer
+      context = await firefox.launchPersistentContext(
+        profilePath,
+        finalOptions,
+      );
+
+      // Get the browser instance from context
+      browser = context.browser();
+
+      // Handle browser disconnection for proper cleanup
+      if (browser) {
+        browser.on("disconnected", () => void gracefulShutdown());
+      }
+
+      // Handle context close for proper cleanup
+      context.on("close", () => void gracefulShutdown());
+
+      saveCamoufoxConfig(config);
+
+      // Monitor for window closure
+      const startWindowMonitoring = () => {
+        windowCheckInterval = setInterval(async () => {
+          try {
+            // Check if context is still active
+            if (!context?.pages || context.pages().length === 0) {
+              if (windowCheckInterval) {
+                clearInterval(windowCheckInterval);
+              }
+              await gracefulShutdown();
+              return;
+            }
+
+            // Check if browser is still connected (if available)
+            if (browser && !browser.isConnected()) {
+              if (windowCheckInterval) {
+                clearInterval(windowCheckInterval);
+              }
+              await gracefulShutdown();
+              return;
+            }
+
+            // Check pages in the persistent context
+            const pages = context.pages();
+            if (pages.length === 0) {
+              if (windowCheckInterval) {
+                clearInterval(windowCheckInterval);
+              }
+              await gracefulShutdown();
+            }
+          } catch {
+            // If we can't check windows, assume browser is closing
+            if (windowCheckInterval) {
+              clearInterval(windowCheckInterval);
+            }
+            await gracefulShutdown();
+          }
+        }, 1000); // Check every second
+      };
+
+      // Handle URL opening if provided
+      if (config.url) {
+        try {
+          const pages = await context.pages();
+          if (pages.length) {
+            const page = pages[0];
+            await page.goto(config.url, {
+              waitUntil: "domcontentloaded",
+              timeout: 30000,
+            });
+
+            // Start monitoring after page is created
+            startWindowMonitoring();
+          }
+        } catch (urlError) {
+          console.error({
+            message: "Failed to open URL",
+            error: urlError,
+          });
+          // URL opening failure doesn't affect startup success
+          // Still start monitoring
+          startWindowMonitoring();
+        }
+      } else {
+        // Start monitoring after page is created
+        startWindowMonitoring();
+      }
+
+      // Monitor browser/context connection
+      const keepAlive = setInterval(async () => {
+        try {
+          // Check if context is still active
+          if (!context?.pages) {
+            clearInterval(keepAlive);
+            await gracefulShutdown();
+            return;
+          }
+
+          // Check browser connection if available
+          if (browser && !browser.isConnected()) {
+            clearInterval(keepAlive);
+            await gracefulShutdown();
+            return;
+          }
+        } catch (error) {
+          console.error({
+            message: "Error in keepAlive check",
+            error,
+          });
+          clearInterval(keepAlive);
+          await gracefulShutdown();
+        }
+      }, 2000);
+    } catch (error) {
+      console.error({
+        message: "Failed to launch Camoufox",
+        error,
+      });
+      // Browser launch failed, attempt cleanup
+      await gracefulShutdown();
+    }
+  });
+
+  // Keep process alive
+  process.stdin.resume();
+}

nodecar/src/index.ts

@@ -1,4 +1,13 @@
 import { program } from "commander";
+import type { LaunchOptions } from "donutbrowser-camoufox-js/dist/utils.js";
+import {
+  generateCamoufoxConfig,
+  startCamoufoxProcess,
+  stopAllCamoufoxProcesses,
+  stopCamoufoxProcess,
+} from "./camoufox-launcher.js";
+import { listCamoufoxConfigs } from "./camoufox-storage.js";
+import { runCamoufoxWorker } from "./camoufox-worker.js";
 import {
   startProxyProcess,
   stopAllProxyProcesses,
@@ -44,7 +53,7 @@ program
       },
     ) => {
       if (action === "start") {
-        let upstreamUrl: string;
+        let upstreamUrl: string | undefined;
 
         // Build upstream URL from individual components if provided
         if (options.host && options.proxyPort && options.type) {
@@ -61,16 +70,8 @@ program
           upstreamUrl = `${protocol}://${auth}${options.host}:${options.proxyPort}`;
         } else if (options.upstream) {
           upstreamUrl = options.upstream;
-        } else {
-          console.error(
-            "Error: Either --upstream URL or --host, --proxy-port, and --type are required",
-          );
-          console.log(
-            "Example: proxy start --host datacenter.proxyempire.io --proxy-port 9000 --type http --username user --password pass",
-          );
-          process.exit(1);
-          return;
         }
+        // If no upstream is provided, create a direct proxy
 
         try {
           const config = await startProxyProcess(upstreamUrl, {
@@ -149,4 +150,298 @@ program
     }
   });
 
+// Command for Camoufox management
+program
+  .command("camoufox")
+  .argument(
+    "<action>",
+    "start, stop, list, or generate-config Camoufox instances",
+  )
+  .option("--id <id>", "Camoufox ID for stop command")
+  .option("--profile-path <path>", "profile directory path")
+  .option("--url <url>", "URL to open")
+
+  // Config generation options
+  .option("--proxy <proxy>", "proxy URL for config generation")
+  .option("--max-width <width>", "maximum screen width", parseInt)
+  .option("--max-height <height>", "maximum screen height", parseInt)
+  .option("--geoip", "enable geoip")
+  .option("--block-images", "block images")
+  .option("--block-webrtc", "block WebRTC")
+  .option("--block-webgl", "block WebGL")
+  .option("--executable-path <path>", "executable path")
+  .option("--fingerprint <json>", "fingerprint JSON string")
+  .option("--headless", "run in headless mode")
+  .option("--custom-config <json>", "custom config JSON string")
+
+  .description("manage Camoufox browser instances")
+  .action(
+    async (
+      action: string,
+      options: Record<string, string | number | boolean | undefined>,
+    ) => {
+      if (action === "start") {
+        try {
+          // Build Camoufox options in the format expected by camoufox-js
+          const camoufoxOptions: LaunchOptions = {};
+
+          // OS fingerprinting
+          if (options.os && typeof options.os === "string") {
+            camoufoxOptions.os = options.os.includes(",")
+              ? (options.os.split(",") as ("windows" | "macos" | "linux")[])
+              : (options.os as "windows" | "macos" | "linux");
+          }
+
+          // Blocking options
+          if (options.blockImages) camoufoxOptions.block_images = true;
+          if (options.blockWebrtc) camoufoxOptions.block_webrtc = true;
+          if (options.blockWebgl) camoufoxOptions.block_webgl = true;
+
+          // Security options
+          if (options.disableCoop) camoufoxOptions.disable_coop = true;
+
+          if (options.geoip) {
+            camoufoxOptions.geoip = true;
+          }
+
+          if (options.latitude && options.longitude) {
+            camoufoxOptions.geolocation = {
+              latitude: options.latitude as number,
+              longitude: options.longitude as number,
+              accuracy: 100,
+            };
+          }
+          if (options.country)
+            camoufoxOptions.country = options.country as string;
+          if (options.timezone)
+            camoufoxOptions.timezone = options.timezone as string;
+
+          if (options.humanize)
+            camoufoxOptions.humanize = options.humanize as boolean;
+          if (options.headless) camoufoxOptions.headless = true;
+
+          // Localization
+          if (options.locale && typeof options.locale === "string") {
+            camoufoxOptions.locale = options.locale.includes(",")
+              ? options.locale.split(",")
+              : options.locale;
+          }
+
+          // Extensions and fonts
+          if (options.addons && typeof options.addons === "string")
+            camoufoxOptions.addons = options.addons.split(",");
+          if (options.fonts && typeof options.fonts === "string")
+            camoufoxOptions.fonts = options.fonts.split(",");
+          if (options.customFontsOnly) camoufoxOptions.custom_fonts_only = true;
+          if (
+            options.excludeAddons &&
+            typeof options.excludeAddons === "string"
+          )
+            camoufoxOptions.exclude_addons = options.excludeAddons.split(
+              ",",
+            ) as "UBO"[];
+
+          // Screen and window
+          const screen: {
+            minWidth?: number;
+            maxWidth?: number;
+            minHeight?: number;
+            maxHeight?: number;
+          } = {};
+          if (options.screenMinWidth)
+            screen.minWidth = options.screenMinWidth as number;
+          if (options.screenMaxWidth)
+            screen.maxWidth = options.screenMaxWidth as number;
+          if (options.screenMinHeight)
+            screen.minHeight = options.screenMinHeight as number;
+          if (options.screenMaxHeight)
+            screen.maxHeight = options.screenMaxHeight as number;
+          if (Object.keys(screen).length > 0) camoufoxOptions.screen = screen;
+
+          if (options.windowWidth && options.windowHeight) {
+            camoufoxOptions.window = [
+              options.windowWidth as number,
+              options.windowHeight as number,
+            ];
+          }
+
+          // Advanced options
+          if (options.ffVersion)
+            camoufoxOptions.ff_version = options.ffVersion as number;
+          if (options.mainWorldEval) camoufoxOptions.main_world_eval = true;
+          if (options.webglVendor && options.webglRenderer) {
+            camoufoxOptions.webgl_config = [
+              options.webglVendor as string,
+              options.webglRenderer as string,
+            ];
+          }
+
+          // Proxy
+          if (options.proxy) camoufoxOptions.proxy = options.proxy as string;
+
+          // Cache and performance - default to enabled
+          camoufoxOptions.enable_cache = !options.disableCache;
+
+          // Environment and debugging
+          if (options.virtualDisplay)
+            camoufoxOptions.virtual_display = options.virtualDisplay as string;
+          if (options.debug) camoufoxOptions.debug = true;
+
+          // Handle headless mode via flag instead of environment variable
+          if (options.headless) {
+            camoufoxOptions.headless = true;
+          }
+          if (options.args && typeof options.args === "string")
+            camoufoxOptions.args = options.args.split(",");
+          if (options.env && typeof options.env === "string") {
+            try {
+              camoufoxOptions.env = JSON.parse(options.env);
+            } catch (e) {
+              console.error(
+                JSON.stringify({
+                  error: "Invalid JSON for --env option",
+                  message: String(e),
+                }),
+              );
+              process.exit(1);
+              return;
+            }
+          }
+
+          // Firefox preferences
+          if (
+            options.firefoxPrefs &&
+            typeof options.firefoxPrefs === "string"
+          ) {
+            try {
+              camoufoxOptions.firefox_user_prefs = JSON.parse(
+                options.firefoxPrefs,
+              );
+            } catch (e) {
+              console.error(
+                JSON.stringify({
+                  error: "Invalid JSON for --firefox-prefs option",
+                  message: String(e),
+                }),
+              );
+              process.exit(1);
+            }
+          }
+
+          const config = await startCamoufoxProcess(
+            camoufoxOptions,
+            typeof options.profilePath === "string"
+              ? options.profilePath
+              : undefined,
+            typeof options.url === "string" ? options.url : undefined,
+            typeof options.customConfig === "string"
+              ? options.customConfig
+              : undefined,
+          );
+
+          console.log(
+            JSON.stringify({
+              id: config.id,
+              processId: config.processId,
+              profilePath: config.profilePath,
+              url: config.url,
+            }),
+          );
+
+          process.exit(0);
+        } catch (error: unknown) {
+          console.error(
+            JSON.stringify({
+              error: "Failed to start Camoufox",
+              message: error instanceof Error ? error.message : String(error),
+            }),
+          );
+          process.exit(1);
+        }
+      } else if (action === "stop") {
+        if (options.id && typeof options.id === "string") {
+          const stopped = await stopCamoufoxProcess(options.id);
+          console.log(JSON.stringify({ success: stopped }));
+        } else {
+          await stopAllCamoufoxProcesses();
+          console.log(JSON.stringify({ success: true }));
+        }
+        process.exit(0);
+      } else if (action === "list") {
+        const configs = listCamoufoxConfigs();
+        console.log(JSON.stringify(configs));
+        process.exit(0);
+      } else if (action === "generate-config") {
+        try {
+          const config = await generateCamoufoxConfig({
+            proxy:
+              typeof options.proxy === "string" ? options.proxy : undefined,
+            maxWidth:
+              typeof options.maxWidth === "number"
+                ? options.maxWidth
+                : undefined,
+            maxHeight:
+              typeof options.maxHeight === "number"
+                ? options.maxHeight
+                : undefined,
+            geoip: Boolean(options.geoip),
+            blockImages:
+              typeof options.blockImages === "boolean"
+                ? options.blockImages
+                : undefined,
+            blockWebrtc:
+              typeof options.blockWebrtc === "boolean"
+                ? options.blockWebrtc
+                : undefined,
+            blockWebgl:
+              typeof options.blockWebgl === "boolean"
+                ? options.blockWebgl
+                : undefined,
+            executablePath:
+              typeof options.executablePath === "string"
+                ? options.executablePath
+                : undefined,
+            fingerprint:
+              typeof options.fingerprint === "string"
+                ? options.fingerprint
+                : undefined,
+          });
+          console.log(config);
+          process.exit(0);
+        } catch (error: unknown) {
+          console.error({
+            error: "Failed to generate config",
+            message:
+              error instanceof Error ? error.message : JSON.stringify(error),
+          });
+          process.exit(1);
+        }
+      } else {
+        console.error({
+          error: "Invalid action",
+          message: "Use 'start', 'stop', 'list', or 'generate-config'",
+        });
+        process.exit(1);
+      }
+    },
+  );
+
+// Command for Camoufox worker (internal use)
+program
+  .command("camoufox-worker")
+  .argument("<action>", "start a Camoufox worker")
+  .requiredOption("--id <id>", "Camoufox configuration ID")
+  .description("run a Camoufox worker process")
+  .action(async (action: string, options: { id: string }) => {
+    if (action === "start") {
+      await runCamoufoxWorker(options.id);
+    } else {
+      console.error({
+        error: "Invalid action for camoufox-worker",
+        message: "Use 'start'",
+      });
+      process.exit(1);
+    }
+  });
+
 program.parse();

nodecar/src/proxy-runner.ts

@@ -2,23 +2,23 @@ import { spawn } from "node:child_process";
 import path from "node:path";
 import getPort from "get-port";
 import {
-  type ProxyConfig,
   deleteProxyConfig,
   generateProxyId,
   getProxyConfig,
   isProcessRunning,
   listProxyConfigs,
+  type ProxyConfig,
   saveProxyConfig,
 } from "./proxy-storage";
 
 /**
  * Start a proxy in a separate process
- * @param upstreamUrl The upstream proxy URL
+ * @param upstreamUrl The upstream proxy URL (optional for direct proxy)
  * @param options Optional configuration
  * @returns Promise resolving to the proxy configuration
  */
 export async function startProxyProcess(
-  upstreamUrl: string,
+  upstreamUrl?: string,
   options: { port?: number; ignoreProxyCertificate?: boolean } = {},
 ): Promise<ProxyConfig> {
   // Generate a unique ID for this proxy
@@ -30,7 +30,7 @@ export async function startProxyProcess(
   // Create the proxy configuration
   const config: ProxyConfig = {
     id,
-    upstreamUrl,
+    upstreamUrl: upstreamUrl || "DIRECT",
     localPort: port,
     ignoreProxyCertificate: options.ignoreProxyCertificate ?? false,
   };

nodecar/src/proxy-storage.ts

@@ -1,21 +1,18 @@
 import fs from "node:fs";
 import path from "node:path";
-import os from "node:os";
+import tmp from "tmp";
 
-// Define the proxy configuration type
 export interface ProxyConfig {
   id: string;
-  upstreamUrl: string;
+  upstreamUrl: string; // Can be "DIRECT" for direct proxy
   localPort?: number;
   ignoreProxyCertificate?: boolean;
   localUrl?: string;
   pid?: number;
 }
 
-// Path to store proxy configurations
-const STORAGE_DIR = path.join(os.tmpdir(), "donutbrowser", "proxies");
+const STORAGE_DIR = path.join(tmp.tmpdir, "donutbrowser", "proxies");
 
-// Ensure storage directory exists
 if (!fs.existsSync(STORAGE_DIR)) {
   fs.mkdirSync(STORAGE_DIR, { recursive: true });
 }
@@ -88,7 +85,7 @@ export function listProxyConfigs(): ProxyConfig[] {
         try {
           const content = fs.readFileSync(
             path.join(STORAGE_DIR, file),
-            "utf-8"
+            "utf-8",
           );
           return JSON.parse(content) as ProxyConfig;
         } catch (error) {
@@ -111,14 +108,18 @@ export function listProxyConfigs(): ProxyConfig[] {
 export function updateProxyConfig(config: ProxyConfig): boolean {
   const filePath = path.join(STORAGE_DIR, `${config.id}.json`);
 
-  if (!fs.existsSync(filePath)) {
-    return false;
-  }
-
   try {
+    fs.readFileSync(filePath, "utf-8");
     fs.writeFileSync(filePath, JSON.stringify(config, null, 2));
     return true;
   } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+      console.error(
+        `Config ${config.id} was deleted while the app was running`,
+      );
+      return false;
+    }
+
     console.error(`Error updating proxy config ${config.id}:`, error);
     return false;
   }
@@ -135,7 +136,7 @@ export function isProcessRunning(pid: number): boolean {
     // but checks if it exists
     process.kill(pid, 0);
     return true;
-  } catch (error) {
+  } catch {
     return false;
   }
 }

nodecar/src/proxy-worker.ts

@@ -19,6 +19,10 @@ export async function runProxyWorker(id: string): Promise<void> {
     port: config.localPort,
     host: "127.0.0.1",
     prepareRequestFunction: () => {
+      // If upstreamUrl is "DIRECT", don't use upstream proxy
+      if (config.upstreamUrl === "DIRECT") {
+        return {};
+      }
       return {
         upstreamProxyUrl: config.upstreamUrl,
         ignoreUpstreamProxyCertificate: config.ignoreProxyCertificate ?? false,
@@ -27,28 +31,22 @@ export async function runProxyWorker(id: string): Promise<void> {
   });
 
   // Handle process termination gracefully
-  const gracefulShutdown = async (signal: string) => {
-    console.log(`Proxy worker ${id} received ${signal}, shutting down...`);
+  const gracefulShutdown = async () => {
     try {
       await server.close(true);
-      console.log(`Proxy worker ${id} shut down successfully`);
-    } catch (error) {
-      console.error(`Error during shutdown for proxy ${id}:`, error);
-    }
+    } catch {}
     process.exit(0);
   };
 
-  process.on("SIGTERM", () => void gracefulShutdown("SIGTERM"));
-  process.on("SIGINT", () => void gracefulShutdown("SIGINT"));
+  process.on("SIGTERM", () => void gracefulShutdown());
+  process.on("SIGINT", () => void gracefulShutdown());
 
   // Handle uncaught exceptions
-  process.on("uncaughtException", (error) => {
-    console.error(`Uncaught exception in proxy worker ${id}:`, error);
+  process.on("uncaughtException", () => {
     process.exit(1);
   });
 
-  process.on("unhandledRejection", (reason) => {
-    console.error(`Unhandled rejection in proxy worker ${id}:`, reason);
+  process.on("unhandledRejection", () => {
     process.exit(1);
   });
 
@@ -61,9 +59,6 @@ export async function runProxyWorker(id: string): Promise<void> {
     config.localUrl = `http://127.0.0.1:${server.port}`;
     updateProxyConfig(config);
 
-    console.log(`Proxy worker ${id} started on port ${server.port}`);
-    console.log(`Forwarding to upstream proxy: ${config.upstreamUrl}`);
-
     // Keep the process alive
     setInterval(() => {
       // Do nothing, just keep the process alive

nodecar/src/utils.ts

@@ -0,0 +1,119 @@
+import type { LaunchOptions } from "playwright-core";
+
+const OS_MAP: { [key: string]: "mac" | "win" | "lin" } = {
+  darwin: "mac",
+  linux: "lin",
+  win32: "win",
+};
+
+const OS_NAME: "mac" | "win" | "lin" = OS_MAP[process.platform];
+
+export function getEnvVars(configMap: Record<string, string>) {
+  const envVars: {
+    [key: string]: string | undefined;
+  } = {};
+  let updatedConfigData: Uint8Array;
+
+  try {
+    // Ensure we're working with a fresh copy of the config
+    const configCopy = JSON.parse(JSON.stringify(configMap));
+    updatedConfigData = new TextEncoder().encode(JSON.stringify(configCopy));
+  } catch (e) {
+    console.error(`Error updating config: ${e}`);
+    process.exit(1);
+  }
+
+  const chunkSize = OS_NAME === "win" ? 2047 : 32767;
+  const configStr = new TextDecoder().decode(updatedConfigData);
+
+  for (let i = 0; i < configStr.length; i += chunkSize) {
+    const chunk = configStr.slice(i, i + chunkSize);
+    const envName = `CAMOU_CONFIG_${Math.floor(i / chunkSize) + 1}`;
+    try {
+      envVars[envName] = chunk;
+    } catch (e) {
+      console.error(`Error setting ${envName}: ${e}`);
+      process.exit(1);
+    }
+  }
+
+  return envVars;
+}
+
+export function parseProxyString(proxyString: LaunchOptions["proxy"] | string) {
+  if (typeof proxyString === "object") {
+    return proxyString;
+  }
+
+  if (!proxyString || typeof proxyString !== "string") {
+    throw new Error("Invalid proxy string provided");
+  }
+
+  // Remove any leading/trailing whitespace
+  const trimmed = proxyString.trim();
+
+  // Handle different proxy string formats:
+  // 1. http://username:password@host:port
+  // 2. host:port
+  // 3. protocol://host:port
+  // 4. username:password@host:port
+
+  let server = "";
+  let username: string | undefined;
+  let password: string | undefined;
+
+  try {
+    // Try parsing as URL first (handles protocol://username:password@host:port)
+    if (trimmed.includes("://")) {
+      const url = new URL(trimmed);
+      server = `${url.hostname}:${url.port}`;
+
+      if (url.username) {
+        username = decodeURIComponent(url.username);
+      }
+      if (url.password) {
+        password = decodeURIComponent(url.password);
+      }
+    } else {
+      // Handle formats without protocol
+      let workingString = trimmed;
+
+      // Check for username:password@ prefix
+      const authMatch = workingString.match(/^([^:@]+):([^@]+)@(.+)$/);
+      if (authMatch) {
+        username = authMatch[1];
+        password = authMatch[2];
+        workingString = authMatch[3];
+      }
+
+      // The remaining part should be host:port
+      server = workingString;
+    }
+
+    // Validate that we have a server
+    if (!server) {
+      throw new Error("Could not extract server information");
+    }
+
+    // Basic validation for host:port format
+    if (!server.includes(":") || server.split(":").length !== 2) {
+      throw new Error("Server must be in host:port format");
+    }
+
+    const result: LaunchOptions["proxy"] = { server };
+
+    if (username !== undefined) {
+      result.username = username;
+    }
+
+    if (password !== undefined) {
+      result.password = password;
+    }
+
+    return result;
+  } catch (error) {
+    throw new Error(
+      `Failed to parse proxy string: ${error instanceof Error ? error.message : "Unknown error"}`,
+    );
+  }
+}

package.json

@@ -2,7 +2,7 @@
   "name": "donutbrowser",
   "private": true,
   "license": "AGPL-3.0",
-  "version": "0.5.2",
+  "version": "0.8.2",
   "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
@@ -11,13 +11,13 @@
     "test": "pnpm test:rust",
     "test:rust": "cd src-tauri && cargo test",
     "lint": "pnpm lint:js && pnpm lint:rust",
-    "lint:js": "biome check src/ && tsc --noEmit && next lint",
+    "lint:js": "biome check src/ && tsc --noEmit",
     "lint:rust": "cd src-tauri && cargo clippy --all-targets --all-features -- -D warnings -D clippy::all && cargo fmt --all",
     "tauri": "tauri",
     "shadcn:add": "pnpm dlx shadcn@latest add",
     "prepare": "husky && husky install",
     "format:rust": "cd src-tauri && cargo clippy --fix --allow-dirty --all-targets --all-features -- -D warnings -D clippy::all && cargo fmt --all",
-    "format:js": "biome check src/ --fix",
+    "format:js": "biome check src/ --write --unsafe",
     "format": "pnpm format:js && pnpm format:rust",
     "cargo": "cd src-tauri && cargo",
     "unused-exports:js": "ts-unused-exports tsconfig.json",
@@ -30,58 +30,50 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-table": "^8.21.3",
-    "@tauri-apps/api": "^2.5.0",
-    "@tauri-apps/plugin-deep-link": "^2.3.0",
-    "@tauri-apps/plugin-dialog": "^2.2.2",
-    "@tauri-apps/plugin-fs": "~2.3.0",
-    "@tauri-apps/plugin-opener": "^2.2.7",
-    "ahooks": "^3.8.5",
+    "@tauri-apps/api": "^2.7.0",
+    "@tauri-apps/plugin-deep-link": "^2.4.1",
+    "@tauri-apps/plugin-dialog": "^2.3.2",
+    "@tauri-apps/plugin-fs": "~2.4.1",
+    "@tauri-apps/plugin-opener": "^2.4.0",
+    "ahooks": "^3.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "next": "^15.3.3",
+    "next": "^15.4.6",
     "next-themes": "^0.4.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
-    "sonner": "^2.0.5",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tauri-plugin-macos-permissions-api": "^2.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.29.0",
-    "@next/eslint-plugin-next": "^15.3.3",
-    "@tailwindcss/postcss": "^4.1.10",
-    "@tauri-apps/cli": "^2.5.0",
-    "@types/node": "^24.0.1",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "@typescript-eslint/parser": "^8.34.0",
-    "@vitejs/plugin-react": "^4.5.2",
-    "eslint": "^9.29.0",
-    "eslint-config-next": "^15.3.3",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "@biomejs/biome": "2.1.3",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tauri-apps/cli": "^2.7.1",
+    "@types/node": "^24.2.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.1",
-    "tailwindcss": "^4.1.10",
+    "lint-staged": "^16.1.4",
+    "tailwindcss": "^4.1.11",
     "ts-unused-exports": "^11.0.1",
-    "tw-animate-css": "^1.3.4",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.0"
+    "tw-animate-css": "^1.3.6",
+    "typescript": "~5.9.2"
   },
-  "packageManager": "pnpm@10.11.1",
+  "packageManager": "pnpm@10.13.1",
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json,css,md}": [
-      "biome check --fix",
-      "eslint --cache --fix"
+      "biome check --fix"
     ],
     "src-tauri/**/*.rs": [
       "cd src-tauri && cargo fmt --all",

pnpm-workspace.yaml

@@ -1,9 +1,9 @@
 packages:
-  - "nodecar"
-
+  - nodecar
 onlyBuiltDependencies:
-  - "@biomejs/biome"
-  - "@tailwindcss/oxide"
+  - '@biomejs/biome'
+  - '@tailwindcss/oxide'
   - esbuild
   - sharp
+  - sqlite3
   - unrs-resolver

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "donutbrowser"
-version = "0.5.2"
-description = "Simple Yet Powerful Browser Orchestrator"
+version = "0.8.2"
+description = "Simple Yet Powerful Anti-Detect Browser"
 authors = ["zhom@github"]
 edition = "2021"
 default-run = "donutbrowser"
@@ -30,20 +30,25 @@ tauri-plugin-dialog = "2"
 tauri-plugin-macos-permissions = "2"
 directories = "6"
 reqwest = { version = "0.12", features = ["json", "stream"] }
-tokio = { version = "1", features = ["full"] }
-sysinfo = "0.35"
+tokio = { version = "1", features = ["full", "sync"] }
+sysinfo = "0.36"
 lazy_static = "1.4"
 base64 = "0.22"
-zip = "4"
 async-trait = "0.1"
 futures-util = "0.3"
-urlencoding = "2.1"
+
+uuid = { version = "1.0", features = ["v4", "serde"] }
+url = "2.5"
+chrono = { version = "0.4", features = ["serde"] }
 
 [target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }
 
+[target.'cfg(windows)'.dependencies]
+zip = "4"
+
 [target.'cfg(target_os = "macos")'.dependencies]
-core-foundation="0.10"
+core-foundation = "0.10"
 objc2 = "0.6.1"
 objc2-app-kit = { version = "0.3.1", features = ["NSWindow"] }
 
@@ -63,18 +68,23 @@ windows = { version = "0.61", features = [
 
 [dev-dependencies]
 tempfile = "3.13.0"
-tokio-test = "0.4.4"
 wiremock = "0.6"
 hyper = { version = "1.0", features = ["full"] }
 hyper-util = { version = "0.1", features = ["full"] }
 http-body-util = "0.1"
 tower = "0.5"
 tower-http = { version = "0.6", features = ["fs", "trace"] }
+futures-util = "0.3"
+
+# Integration test configuration
+[[test]]
+name = "nodecar_integration"
+path = "tests/nodecar_integration.rs"
 
 [features]
 # by default Tauri runs in production mode
 # when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` points to the filesystem
-default = [ "custom-protocol" ]
+default = ["custom-protocol"]
 # this feature is used used for production builds where `devPath` points to the filesystem
 # DO NOT remove this
-custom-protocol = [ "tauri/custom-protocol" ]
+custom-protocol = ["tauri/custom-protocol"]

src-tauri/donutbrowser.desktop

@@ -2,7 +2,7 @@
 Version=1.0
 Type=Application
 Name=Donut Browser
-Comment=Simple Yet Powerful Browser Orchestrator
+Comment=Simple Yet Powerful Anti-Detect Browser
 Exec=donutbrowser %u
 Icon=donutbrowser
 StartupNotify=true

src-tauri/src/api_client.rs

@@ -9,21 +9,21 @@ use std::time::{SystemTime, UNIX_EPOCH};
 use crate::browser::GithubRelease;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
-struct VersionComponent {
-  major: u32,
-  minor: u32,
-  patch: u32,
-  pre_release: Option<PreRelease>,
+pub struct VersionComponent {
+  pub major: u32,
+  pub minor: u32,
+  pub patch: u32,
+  pub pre_release: Option<PreRelease>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
-struct PreRelease {
-  kind: PreReleaseKind,
-  number: Option<u32>,
+pub struct PreRelease {
+  pub kind: PreReleaseKind,
+  pub number: Option<u32>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord)]
-enum PreReleaseKind {
+pub enum PreReleaseKind {
   Alpha,
   Beta,
   RC,
@@ -32,7 +32,7 @@ enum PreReleaseKind {
 }
 
 impl VersionComponent {
-  fn parse(version: &str) -> Self {
+  pub fn parse(version: &str) -> Self {
     let version = version.trim();
 
     // Handle special case for Zen Browser twilight releases
@@ -259,6 +259,10 @@ pub fn is_browser_version_nightly(
       // Chromium builds are generally stable snapshots
       false
     }
+    "camoufox" => {
+      // For Camoufox, beta versions are actually the stable releases
+      false
+    }
     _ => {
       // Default fallback
       is_nightly_version(version)
@@ -311,7 +315,7 @@ pub struct ApiClient {
 }
 
 impl ApiClient {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
       client: Client::new(),
       firefox_api_base: "https://product-details.mozilla.org/1.0".to_string(),
@@ -323,6 +327,10 @@ impl ApiClient {
     }
   }
 
+  pub fn instance() -> &'static ApiClient {
+    &API_CLIENT
+  }
+
   #[cfg(test)]
   pub fn new_with_base_urls(
     firefox_api_base: String,
@@ -637,15 +645,39 @@ impl ApiClient {
       "{}/repos/mullvad/mullvad-browser/releases?per_page=100",
       self.github_api_base
     );
-    let releases = self
+
+    let response = self
       .client
       .get(url)
       .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
       .send()
-      .await?
-      .json::<Vec<GithubRelease>>()
       .await?;
 
+    if !response.status().is_success() {
+      return Err(format!("GitHub API returned status: {}", response.status()).into());
+    }
+
+    // Get the response text first for better error reporting
+    let response_text = response.text().await?;
+
+    // Try to parse the JSON with better error handling
+    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
+      Ok(releases) => releases,
+      Err(e) => {
+        eprintln!("Failed to parse GitHub API response for Mullvad releases:");
+        eprintln!("Error: {e}");
+        eprintln!(
+          "Response text (first 500 chars): {}",
+          if response_text.len() > 500 {
+            &response_text[..500]
+          } else {
+            &response_text
+          }
+        );
+        return Err(format!("Failed to parse GitHub API response: {e}").into());
+      }
+    };
+
     let mut releases: Vec<GithubRelease> = releases
       .into_iter()
       .map(|mut release| {
@@ -683,15 +715,39 @@ impl ApiClient {
       "{}/repos/zen-browser/desktop/releases?per_page=100",
       self.github_api_base
     );
-    let mut releases = self
+
+    let response = self
       .client
       .get(url)
       .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
       .send()
-      .await?
-      .json::<Vec<GithubRelease>>()
       .await?;
 
+    if !response.status().is_success() {
+      return Err(format!("GitHub API returned status: {}", response.status()).into());
+    }
+
+    // Get the response text first for better error reporting
+    let response_text = response.text().await?;
+
+    // Try to parse the JSON with better error handling
+    let mut releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
+      Ok(releases) => releases,
+      Err(e) => {
+        eprintln!("Failed to parse GitHub API response for Zen releases:");
+        eprintln!("Error: {e}");
+        eprintln!(
+          "Response text (first 500 chars): {}",
+          if response_text.len() > 500 {
+            &response_text[..500]
+          } else {
+            &response_text
+          }
+        );
+        return Err(format!("Failed to parse GitHub API response: {e}").into());
+      }
+    };
+
     // Check for twilight updates and mark alpha releases
     for release in &mut releases {
       // Use browser-specific alpha detection for Zen Browser - only "twilight" is nightly
@@ -740,15 +796,39 @@ impl ApiClient {
       "{}/repos/brave/brave-browser/releases?per_page=100",
       self.github_api_base
     );
-    let releases = self
+
+    let response = self
       .client
       .get(url)
       .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
       .send()
-      .await?
-      .json::<Vec<GithubRelease>>()
       .await?;
 
+    if !response.status().is_success() {
+      return Err(format!("GitHub API returned status: {}", response.status()).into());
+    }
+
+    // Get the response text first for better error reporting
+    let response_text = response.text().await?;
+
+    // Try to parse the JSON with better error handling
+    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
+      Ok(releases) => releases,
+      Err(e) => {
+        eprintln!("Failed to parse GitHub API response for Brave releases:");
+        eprintln!("Error: {e}");
+        eprintln!(
+          "Response text (first 500 chars): {}",
+          if response_text.len() > 500 {
+            &response_text[..500]
+          } else {
+            &response_text
+          }
+        );
+        return Err(format!("Failed to parse GitHub API response: {e}").into());
+      }
+    };
+
     // Get platform info to filter appropriate releases
     let (os, arch) = Self::get_platform_info();
 
@@ -784,6 +864,31 @@ impl ApiClient {
   }
 
   /// Check if a Brave release has compatible assets for the given platform and architecture
+  fn has_compatible_camoufox_asset(
+    &self,
+    assets: &[crate::browser::GithubAsset],
+    os: &str,
+    arch: &str,
+  ) -> bool {
+    let (os_name, arch_name) = match (os, arch) {
+      ("windows", "x64") => ("win", "x86_64"),
+      ("windows", "arm64") => ("win", "arm64"),
+      ("linux", "x64") => ("lin", "x86_64"),
+      ("linux", "arm64") => ("lin", "arm64"),
+      ("macos", "x64") => ("mac", "x86_64"),
+      ("macos", "arm64") => ("mac", "arm64"),
+      _ => return false,
+    };
+
+    // Look for assets matching the pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+    assets.iter().any(|asset| {
+      let name = asset.name.to_lowercase();
+      name.starts_with("camoufox-")
+        && name.contains(&format!("-{os_name}.{arch_name}.zip"))
+        && name.ends_with(".zip")
+    })
+  }
+
   fn has_compatible_brave_asset(
     assets: &[crate::browser::GithubAsset],
     os: &str,
@@ -924,6 +1029,128 @@ impl ApiClient {
     )
   }
 
+  pub async fn fetch_camoufox_releases_with_caching(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    // Check cache first (unless bypassing)
+    if !no_caching {
+      if let Some(cached_releases) = self.load_cached_github_releases("camoufox") {
+        println!(
+          "Using cached Camoufox releases, count: {}",
+          cached_releases.len()
+        );
+        return Ok(cached_releases);
+      }
+    }
+
+    println!("Fetching Camoufox releases from GitHub API...");
+    let url = format!(
+      "{}/repos/daijro/camoufox/releases?per_page=100",
+      self.github_api_base
+    );
+
+    let response = self
+      .client
+      .get(url)
+      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
+      .send()
+      .await?;
+
+    if !response.status().is_success() {
+      return Err(format!("GitHub API returned status: {}", response.status()).into());
+    }
+
+    // Get the response text first for better error reporting
+    let response_text = response.text().await?;
+
+    // Try to parse the JSON with better error handling
+    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
+      Ok(releases) => releases,
+      Err(e) => {
+        eprintln!("Failed to parse GitHub API response for Camoufox releases:");
+        eprintln!("Error: {e}");
+        eprintln!(
+          "Response text (first 500 chars): {}",
+          if response_text.len() > 500 {
+            &response_text[..500]
+          } else {
+            &response_text
+          }
+        );
+        return Err(format!("Failed to parse GitHub API response: {e}").into());
+      }
+    };
+
+    println!(
+      "Fetched {} total Camoufox releases from GitHub",
+      releases.len()
+    );
+
+    // Get platform info to filter appropriate releases
+    let (os, arch) = Self::get_platform_info();
+    println!("Filtering for platform: {os}/{arch}");
+
+    // Filter releases that have assets compatible with the current platform
+    let mut compatible_releases: Vec<GithubRelease> = releases
+      .into_iter()
+      .enumerate()
+      .filter_map(|(i, release)| {
+        let has_compatible = self.has_compatible_camoufox_asset(&release.assets, &os, &arch);
+        if !has_compatible {
+          println!(
+            "Release {} ({}) has no compatible assets for {}/{}",
+            i, release.tag_name, os, arch
+          );
+          println!(
+            "  Available assets: {:?}",
+            release.assets.iter().map(|a| &a.name).collect::<Vec<_>>()
+          );
+        }
+        if has_compatible {
+          Some(release)
+        } else {
+          None
+        }
+      })
+      .collect();
+
+    println!(
+      "After platform filtering: {} compatible releases",
+      compatible_releases.len()
+    );
+
+    // Sort by version (latest first) with debugging
+    println!(
+      "Before sorting: {:?}",
+      compatible_releases
+        .iter()
+        .map(|r| &r.tag_name)
+        .take(10)
+        .collect::<Vec<_>>()
+    );
+    sort_github_releases(&mut compatible_releases);
+    println!(
+      "After sorting: {:?}",
+      compatible_releases
+        .iter()
+        .map(|r| &r.tag_name)
+        .take(10)
+        .collect::<Vec<_>>()
+    );
+
+    // Cache the results (unless bypassing cache)
+    if !no_caching {
+      if let Err(e) = self.save_cached_github_releases("camoufox", &compatible_releases) {
+        eprintln!("Failed to cache Camoufox releases: {e}");
+      } else {
+        println!("Cached {} Camoufox releases", compatible_releases.len());
+      }
+    }
+
+    Ok(compatible_releases)
+  }
+
   pub async fn fetch_tor_releases_with_caching(
     &self,
     no_caching: bool,
@@ -1113,6 +1340,11 @@ impl ApiClient {
   }
 }
 
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref API_CLIENT: ApiClient = ApiClient::new();
+}
+
 #[cfg(test)]
 mod tests {
   use super::*;
@@ -1726,4 +1958,115 @@ mod tests {
     let result = client.fetch_zen_releases_with_caching(true).await;
     assert!(result.is_err());
   }
+
+  #[test]
+  fn test_camoufox_beta_version_parsing() {
+    // Test specific Camoufox beta versions that are causing issues
+    let v22 = VersionComponent::parse("135.0.5beta22");
+    let v24 = VersionComponent::parse("135.0.5beta24");
+
+    println!("v22: {v22:?}");
+    println!("v24: {v24:?}");
+
+    // v24 should be greater than v22
+    assert!(
+      v24 > v22,
+      "135.0.5beta24 should be greater than 135.0.5beta22"
+    );
+
+    // Test other beta version combinations
+    let v1 = VersionComponent::parse("135.0.5beta1");
+    let v2 = VersionComponent::parse("135.0.5beta2");
+    assert!(v2 > v1, "135.0.5beta2 should be greater than 135.0.5beta1");
+
+    // Test sorting of multiple versions
+    let mut versions = vec![
+      "135.0.5beta22".to_string(),
+      "135.0.5beta24".to_string(),
+      "135.0.5beta23".to_string(),
+      "135.0.5beta21".to_string(),
+    ];
+
+    sort_versions(&mut versions);
+
+    println!("Sorted versions: {versions:?}");
+
+    // Should be sorted from newest to oldest
+    assert_eq!(versions[0], "135.0.5beta24");
+    assert_eq!(versions[1], "135.0.5beta23");
+    assert_eq!(versions[2], "135.0.5beta22");
+    assert_eq!(versions[3], "135.0.5beta21");
+  }
+
+  #[test]
+  fn test_camoufox_user_reported_versions() {
+    // Test the exact versions reported by the user: 135.0.1beta24 vs 135.0beta22
+    let v22 = VersionComponent::parse("135.0beta22");
+    let v24 = VersionComponent::parse("135.0.1beta24");
+
+    println!("User reported v22: {v22:?}");
+    println!("User reported v24: {v24:?}");
+
+    // 135.0.1beta24 should be greater than 135.0beta22 (newer patch version)
+    assert!(
+      v24 > v22,
+      "135.0.1beta24 should be greater than 135.0beta22, but got: v24={v24:?} vs v22={v22:?}"
+    );
+
+    // Test sorting of the exact user-reported versions
+    let mut versions = vec!["135.0beta22".to_string(), "135.0.1beta24".to_string()];
+
+    sort_versions(&mut versions);
+
+    println!("User reported sorted versions: {versions:?}");
+
+    // Should be sorted from newest to oldest
+    assert_eq!(
+      versions[0], "135.0.1beta24",
+      "135.0.1beta24 should be first (newest)"
+    );
+    assert_eq!(
+      versions[1], "135.0beta22",
+      "135.0beta22 should be second (older)"
+    );
+  }
+
+  #[test]
+  fn test_camoufox_version_classification() {
+    // Test that Camoufox beta versions are now correctly classified as stable (not nightly)
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0beta22", None),
+      "135.0beta22 should be classified as stable for Camoufox"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0.1beta24", None),
+      "135.0.1beta24 should be classified as stable for Camoufox"
+    );
+
+    // Test with release names too - beta releases should be stable
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0beta22", Some("Release Beta 22")),
+      "Release with 'Beta' in name should be classified as stable for Camoufox"
+    );
+
+    // Test that stable versions are not classified as nightly
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0", None),
+      "135.0 should be classified as stable"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0.1", None),
+      "135.0.1 should be classified as stable"
+    );
+
+    // Test alpha and RC versions are still considered nightly
+    assert!(
+      !is_browser_version_nightly("camoufox", "136.0alpha1", None),
+      "136.0alpha1 should not be classified as nightly/prerelease"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "136.0rc1", None),
+      "136.0rc1 should not be classified as nightly/prerelease"
+    );
+  }
 }

src-tauri/src/app_auto_updater.rs

@@ -6,8 +6,6 @@ use std::path::{Path, PathBuf};
 use std::process::Command;
 use tauri::Emitter;
 
-use crate::extraction::Extractor;
-
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct AppReleaseAsset {
   pub name: String,
@@ -35,17 +33,30 @@ pub struct AppUpdateInfo {
   pub published_at: String,
 }
 
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct AppUpdateProgress {
+  pub stage: String, // "downloading", "extracting", "installing", "completed"
+  pub percentage: Option<f64>,
+  pub speed: Option<String>, // MB/s
+  pub eta: Option<String>,   // estimated time remaining
+  pub message: String,
+}
+
 pub struct AppAutoUpdater {
   client: Client,
 }
 
 impl AppAutoUpdater {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
       client: Client::new(),
     }
   }
 
+  pub fn instance() -> &'static AppAutoUpdater {
+    &APP_AUTO_UPDATER
+  }
+
   /// Check if running a nightly build based on environment variable
   pub fn is_nightly_build() -> bool {
     // If STABLE_RELEASE env var is set at compile time, it's a stable build
@@ -98,9 +109,7 @@ impl AppAutoUpdater {
       // For stable builds, look for stable releases (semver format)
       let stable_releases: Vec<&AppRelease> = releases
         .iter()
-        .filter(|release| {
-          release.tag_name.starts_with('v') && !release.tag_name.starts_with("nightly-")
-        })
+        .filter(|release| release.tag_name.starts_with('v'))
         .collect();
       println!("Found {} stable releases", stable_releases.len());
       stable_releases
@@ -311,21 +320,48 @@ impl AppAutoUpdater {
       .to_string();
 
     // Emit download start event
-    let _ = app_handle.emit("app-update-progress", "Downloading update...");
+    let _ = app_handle.emit(
+      "app-update-progress",
+      AppUpdateProgress {
+        stage: "downloading".to_string(),
+        percentage: Some(0.0),
+        speed: None,
+        eta: None,
+        message: "Starting download...".to_string(),
+      },
+    );
 
-    // Download the update
+    // Download the update with progress tracking
     let download_path = self
-      .download_update(&update_info.download_url, &temp_dir, &filename)
+      .download_update_with_progress(&update_info.download_url, &temp_dir, &filename, app_handle)
       .await?;
 
     // Emit extraction start event
-    let _ = app_handle.emit("app-update-progress", "Preparing update...");
+    let _ = app_handle.emit(
+      "app-update-progress",
+      AppUpdateProgress {
+        stage: "extracting".to_string(),
+        percentage: None,
+        speed: None,
+        eta: None,
+        message: "Preparing update...".to_string(),
+      },
+    );
 
     // Extract the update
     let extracted_app_path = self.extract_update(&download_path, &temp_dir).await?;
 
     // Emit installation start event
-    let _ = app_handle.emit("app-update-progress", "Installing update...");
+    let _ = app_handle.emit(
+      "app-update-progress",
+      AppUpdateProgress {
+        stage: "installing".to_string(),
+        percentage: None,
+        speed: None,
+        eta: None,
+        message: "Installing update...".to_string(),
+      },
+    );
 
     // Install the update (overwrite current app)
     self.install_update(&extracted_app_path).await?;
@@ -334,7 +370,16 @@ impl AppAutoUpdater {
     let _ = fs::remove_dir_all(&temp_dir);
 
     // Emit completion event
-    let _ = app_handle.emit("app-update-progress", "Update completed. Restarting...");
+    let _ = app_handle.emit(
+      "app-update-progress",
+      AppUpdateProgress {
+        stage: "completed".to_string(),
+        percentage: Some(100.0),
+        speed: None,
+        eta: None,
+        message: "Update completed. Restarting...".to_string(),
+      },
+    );
 
     // Restart the application
     self.restart_application().await?;
@@ -342,12 +387,13 @@ impl AppAutoUpdater {
     Ok(())
   }
 
-  /// Download the update file
-  async fn download_update(
+  /// Download the update file with progress tracking
+  async fn download_update_with_progress(
     &self,
     download_url: &str,
     dest_dir: &Path,
     filename: &str,
+    app_handle: &tauri::AppHandle,
   ) -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
     let file_path = dest_dir.join(filename);
 
@@ -362,15 +408,75 @@ impl AppAutoUpdater {
       return Err(format!("Download failed with status: {}", response.status()).into());
     }
 
+    let total_size = response.content_length().unwrap_or(0);
     let mut file = fs::File::create(&file_path)?;
     let mut stream = response.bytes_stream();
+    let mut downloaded = 0u64;
+    let start_time = std::time::Instant::now();
+    let mut last_update = std::time::Instant::now();
 
     use futures_util::StreamExt;
     while let Some(chunk) = stream.next().await {
       let chunk = chunk?;
       file.write_all(&chunk)?;
+      downloaded += chunk.len() as u64;
+
+      // Update progress every 100ms to avoid overwhelming the UI
+      if last_update.elapsed().as_millis() > 100 {
+        let elapsed = start_time.elapsed().as_secs_f64();
+        let percentage = if total_size > 0 {
+          (downloaded as f64 / total_size as f64) * 100.0
+        } else {
+          0.0
+        };
+
+        let speed = if elapsed > 0.0 {
+          downloaded as f64 / elapsed / 1024.0 / 1024.0 // MB/s
+        } else {
+          0.0
+        };
+
+        let eta = if total_size > 0 && speed > 0.0 {
+          let remaining_bytes = total_size - downloaded;
+          let remaining_seconds = (remaining_bytes as f64 / 1024.0 / 1024.0) / speed;
+          if remaining_seconds < 60.0 {
+            format!("{}s", remaining_seconds as u32)
+          } else {
+            let minutes = remaining_seconds as u32 / 60;
+            let seconds = remaining_seconds as u32 % 60;
+            format!("{minutes}m {seconds}s")
+          }
+        } else {
+          "Unknown".to_string()
+        };
+
+        let _ = app_handle.emit(
+          "app-update-progress",
+          AppUpdateProgress {
+            stage: "downloading".to_string(),
+            percentage: Some(percentage),
+            speed: Some(format!("{speed:.1}")),
+            eta: Some(eta),
+            message: "Downloading update...".to_string(),
+          },
+        );
+
+        last_update = std::time::Instant::now();
+      }
     }
 
+    // Emit final download completion
+    let _ = app_handle.emit(
+      "app-update-progress",
+      AppUpdateProgress {
+        stage: "downloading".to_string(),
+        percentage: Some(100.0),
+        speed: None,
+        eta: None,
+        message: "Download completed".to_string(),
+      },
+    );
+
     Ok(file_path)
   }
 
@@ -380,7 +486,7 @@ impl AppAutoUpdater {
     archive_path: &Path,
     dest_dir: &Path,
   ) -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
-    let extractor = Extractor::new();
+    let extractor = crate::extraction::Extractor::instance();
 
     let extension = archive_path
       .extension()
@@ -591,7 +697,7 @@ impl AppAutoUpdater {
           fs::create_dir_all(&temp_extract_dir)?;
 
           // Extract ZIP file
-          let extractor = crate::extraction::Extractor::new();
+          let extractor = crate::extraction::Extractor::instance();
           let extracted_path = extractor
             .extract_zip(installer_path, &temp_extract_dir)
             .await?;
@@ -867,7 +973,7 @@ rm "{}"
 
 #[tauri::command]
 pub async fn check_for_app_updates() -> Result<Option<AppUpdateInfo>, String> {
-  let updater = AppAutoUpdater::new();
+  let updater = AppAutoUpdater::instance();
   updater
     .check_for_updates()
     .await
@@ -879,7 +985,7 @@ pub async fn download_and_install_app_update(
   app_handle: tauri::AppHandle,
   update_info: AppUpdateInfo,
 ) -> Result<(), String> {
-  let updater = AppAutoUpdater::new();
+  let updater = AppAutoUpdater::instance();
   updater
     .download_and_install_update(&app_handle, &update_info)
     .await
@@ -889,7 +995,7 @@ pub async fn download_and_install_app_update(
 #[tauri::command]
 pub async fn check_for_app_updates_manual() -> Result<Option<AppUpdateInfo>, String> {
   println!("Manual app update check triggered");
-  let updater = AppAutoUpdater::new();
+  let updater = AppAutoUpdater::instance();
   updater
     .check_for_updates()
     .await
@@ -913,7 +1019,7 @@ mod tests {
 
   #[test]
   fn test_version_comparison() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     // Test semantic version comparison
     assert!(updater.is_version_newer("v1.1.0", "v1.0.0"));
@@ -925,7 +1031,7 @@ mod tests {
 
   #[test]
   fn test_parse_semver() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     assert_eq!(updater.parse_semver("v1.2.3"), (1, 2, 3));
     assert_eq!(updater.parse_semver("1.2.3"), (1, 2, 3));
@@ -935,7 +1041,7 @@ mod tests {
 
   #[test]
   fn test_should_update_stable() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     // Stable version updates
     assert!(updater.should_update("v1.0.0", "v1.1.0", false));
@@ -946,7 +1052,7 @@ mod tests {
 
   #[test]
   fn test_should_update_nightly() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     // Nightly version updates
     assert!(updater.should_update("nightly-abc123", "nightly-def456", true));
@@ -963,7 +1069,7 @@ mod tests {
 
   #[test]
   fn test_should_update_edge_cases() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     // Test with different nightly formats
     assert!(updater.should_update("nightly-abc123", "nightly-def456", true));
@@ -981,7 +1087,7 @@ mod tests {
 
   #[test]
   fn test_get_download_url_for_platform() {
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     let assets = vec![
       AppReleaseAsset {
@@ -1036,7 +1142,7 @@ mod tests {
     // This test verifies that the extract_update method properly uses the Extractor
     // We can't run the actual extraction in unit tests without real DMG files,
     // but we can verify the method signature and basic logic
-    let updater = AppAutoUpdater::new();
+    let updater = AppAutoUpdater::instance();
 
     // Test that unsupported formats would be rejected
     let temp_dir = std::env::temp_dir();
@@ -1055,3 +1161,8 @@ mod tests {
     assert!(error_msg.contains("Unsupported archive format: rar"));
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref APP_AUTO_UPDATER: AppAutoUpdater = AppAutoUpdater::new();
+}

src-tauri/src/auto_updater.rs

@@ -1,6 +1,6 @@
 use crate::api_client::is_browser_version_nightly;
-use crate::browser_runner::{BrowserProfile, BrowserRunner};
 use crate::browser_version_service::{BrowserVersionInfo, BrowserVersionService};
+use crate::profile::BrowserProfile;
 use crate::settings_manager::SettingsManager;
 use serde::{Deserialize, Serialize};
 use std::collections::{HashMap, HashSet};
@@ -29,20 +29,22 @@ pub struct AutoUpdateState {
 }
 
 pub struct AutoUpdater {
-  version_service: BrowserVersionService,
-  browser_runner: BrowserRunner,
-  settings_manager: SettingsManager,
+  version_service: &'static BrowserVersionService,
+  settings_manager: &'static SettingsManager,
 }
 
 impl AutoUpdater {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
-      version_service: BrowserVersionService::new(),
-      browser_runner: BrowserRunner::new(),
-      settings_manager: SettingsManager::new(),
+      version_service: BrowserVersionService::instance(),
+      settings_manager: SettingsManager::instance(),
     }
   }
 
+  pub fn instance() -> &'static AutoUpdater {
+    &AUTO_UPDATER
+  }
+
   /// Check for updates for all profiles
   pub async fn check_for_updates(
     &self,
@@ -51,8 +53,8 @@ impl AutoUpdater {
     let mut browser_versions: HashMap<String, Vec<BrowserVersionInfo>> = HashMap::new();
 
     // Group profiles by browser
-    let profiles = self
-      .browser_runner
+    let profile_manager = crate::profile::ProfileManager::instance();
+    let profiles = profile_manager
       .list_profiles()
       .map_err(|e| format!("Failed to list profiles: {e}"))?;
     let mut browser_profiles: HashMap<String, Vec<BrowserProfile>> = HashMap::new();
@@ -101,7 +103,7 @@ impl AutoUpdater {
         if let Some(update) = self.check_profile_update(&profile, &versions)? {
           // Apply chromium threshold logic
           if browser == "chromium" {
-            // For chromium, only show notifications if there are 50+ new versions
+            // For chromium, only show notifications if there are 400+ new versions
             let current_version = &profile.version.parse::<u32>().unwrap();
             let new_version = &update.new_version.parse::<u32>().unwrap();
 
@@ -109,11 +111,11 @@ impl AutoUpdater {
             println!(
               "Current version: {current_version}, New version: {new_version}, Result: {result}"
             );
-            if result > 50 {
+            if result > 400 {
               notifications.push(update);
             } else {
               println!(
-                "Skipping chromium update notification: only {result} new versions (need 50+)"
+                "Skipping chromium update notification: only {result} new versions (need 400+)"
               );
             }
           } else {
@@ -294,8 +296,8 @@ impl AutoUpdater {
     browser: &str,
     new_version: &str,
   ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let profiles = self
-      .browser_runner
+    let profile_manager = crate::profile::ProfileManager::instance();
+    let profiles = profile_manager
       .list_profiles()
       .map_err(|e| format!("Failed to list profiles: {e}"))?;
 
@@ -312,10 +314,7 @@ impl AutoUpdater {
         // Check if this is an update (newer version)
         if self.is_version_newer(new_version, &profile.version) {
           // Update the profile version
-          match self
-            .browser_runner
-            .update_profile_version(&profile.name, new_version)
-          {
+          match profile_manager.update_profile_version(&profile.name, new_version) {
             Ok(_) => {
               updated_profiles.push(profile.name);
             }
@@ -348,16 +347,9 @@ impl AutoUpdater {
     state.auto_update_downloads.remove(&download_key);
     self.save_auto_update_state(&state)?;
 
-    // Check if auto-delete of unused binaries is enabled and perform cleanup
-    let settings = self
-      .settings_manager
-      .load_settings()
-      .map_err(|e| format!("Failed to load settings: {e}"))?;
-    if settings.auto_delete_unused_binaries {
-      // Perform cleanup in the background - don't fail the update if cleanup fails
-      if let Err(e) = self.cleanup_unused_binaries_internal() {
-        eprintln!("Warning: Failed to cleanup unused binaries after auto-update: {e}");
-      }
+    // Always perform cleanup after auto-update - don't fail the update if cleanup fails
+    if let Err(e) = self.cleanup_unused_binaries_internal() {
+      eprintln!("Warning: Failed to cleanup unused binaries after auto-update: {e}");
     }
 
     Ok(updated_profiles)
@@ -368,21 +360,23 @@ impl AutoUpdater {
     &self,
   ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
     // Load current profiles
-    let profiles = self
-      .browser_runner
+    let profile_manager = crate::profile::ProfileManager::instance();
+    let profiles = profile_manager
       .list_profiles()
       .map_err(|e| format!("Failed to load profiles: {e}"))?;
 
-    // Load registry
-    let mut registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::load()
-      .map_err(|e| format!("Failed to load browser registry: {e}"))?;
+    // Get registry instance
+    let registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::instance();
 
-    // Get active browser versions
+    // Get active browser versions (all profiles)
     let active_versions = registry.get_active_browser_versions(&profiles);
 
-    // Cleanup unused binaries
+    // Get running browser versions (only running profiles)
+    let running_versions = registry.get_running_browser_versions(&profiles);
+
+    // Cleanup unused binaries (but keep running ones)
     let cleaned_up = registry
-      .cleanup_unused_binaries(&active_versions)
+      .cleanup_unused_binaries(&active_versions, &running_versions)
       .map_err(|e| format!("Failed to cleanup unused binaries: {e}"))?;
 
     // Save updated registry
@@ -414,22 +408,17 @@ impl AutoUpdater {
   }
 
   fn is_version_newer(&self, version1: &str, version2: &str) -> bool {
-    self.compare_versions(version1, version2) == std::cmp::Ordering::Greater
+    // Use the proper VersionComponent comparison from api_client.rs
+    let version_a = crate::api_client::VersionComponent::parse(version1);
+    let version_b = crate::api_client::VersionComponent::parse(version2);
+    version_a > version_b
   }
 
   fn compare_versions(&self, version1: &str, version2: &str) -> std::cmp::Ordering {
-    // Basic semantic version comparison
-    let v1_parts = self.parse_version(version1);
-    let v2_parts = self.parse_version(version2);
-
-    v1_parts.cmp(&v2_parts)
-  }
-
-  fn parse_version(&self, version: &str) -> Vec<u32> {
-    version
-      .split(&['.', 'a', 'b', '-', '_'][..])
-      .filter_map(|part| part.parse::<u32>().ok())
-      .collect()
+    // Use the proper VersionComponent comparison from api_client.rs
+    let version_a = crate::api_client::VersionComponent::parse(version1);
+    let version_b = crate::api_client::VersionComponent::parse(version2);
+    version_a.cmp(&version_b)
   }
 
   fn get_auto_update_state_file(&self) -> PathBuf {
@@ -439,7 +428,7 @@ impl AutoUpdater {
       .join("auto_update_state.json")
   }
 
-  fn load_auto_update_state(
+  pub fn load_auto_update_state(
     &self,
   ) -> Result<AutoUpdateState, Box<dyn std::error::Error + Send + Sync>> {
     let state_file = self.get_auto_update_state_file();
@@ -453,7 +442,7 @@ impl AutoUpdater {
     Ok(state)
   }
 
-  fn save_auto_update_state(
+  pub fn save_auto_update_state(
     &self,
     state: &AutoUpdateState,
   ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
@@ -472,7 +461,7 @@ impl AutoUpdater {
 
 #[tauri::command]
 pub async fn check_for_browser_updates() -> Result<Vec<UpdateNotification>, String> {
-  let updater = AutoUpdater::new();
+  let updater = AutoUpdater::instance();
   let notifications = updater
     .check_for_updates()
     .await
@@ -483,7 +472,7 @@ pub async fn check_for_browser_updates() -> Result<Vec<UpdateNotification>, Stri
 
 #[tauri::command]
 pub async fn is_browser_disabled_for_update(browser: String) -> Result<bool, String> {
-  let updater = AutoUpdater::new();
+  let updater = AutoUpdater::instance();
   updater
     .is_browser_disabled(&browser)
     .map_err(|e| format!("Failed to check browser status: {e}"))
@@ -491,7 +480,7 @@ pub async fn is_browser_disabled_for_update(browser: String) -> Result<bool, Str
 
 #[tauri::command]
 pub async fn dismiss_update_notification(notification_id: String) -> Result<(), String> {
-  let updater = AutoUpdater::new();
+  let updater = AutoUpdater::instance();
   updater
     .dismiss_update_notification(&notification_id)
     .map_err(|e| format!("Failed to dismiss notification: {e}"))
@@ -502,7 +491,7 @@ pub async fn complete_browser_update_with_auto_update(
   browser: String,
   new_version: String,
 ) -> Result<Vec<String>, String> {
-  let updater = AutoUpdater::new();
+  let updater = AutoUpdater::instance();
   updater
     .complete_browser_update_with_auto_update(&browser, &new_version)
     .await
@@ -511,7 +500,7 @@ pub async fn complete_browser_update_with_auto_update(
 
 #[tauri::command]
 pub async fn check_for_updates_with_progress(app_handle: tauri::AppHandle) {
-  let updater = AutoUpdater::new();
+  let updater = AutoUpdater::instance();
   updater.check_for_updates_with_progress(&app_handle).await;
 }
 
@@ -521,14 +510,16 @@ mod tests {
 
   fn create_test_profile(name: &str, browser: &str, version: &str) -> BrowserProfile {
     BrowserProfile {
+      id: uuid::Uuid::new_v4(),
       name: name.to_string(),
       browser: browser.to_string(),
       version: version.to_string(),
-      profile_path: format!("/tmp/{name}"),
       process_id: None,
-      proxy: None,
+      proxy_id: None,
       last_launch: None,
       release_type: "stable".to_string(),
+      camoufox_config: None,
+      group_id: None,
     }
   }
 
@@ -542,7 +533,7 @@ mod tests {
 
   #[test]
   fn test_compare_versions() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
 
     assert_eq!(
       updater.compare_versions("1.0.0", "1.0.0"),
@@ -568,7 +559,7 @@ mod tests {
 
   #[test]
   fn test_is_version_newer() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
 
     assert!(updater.is_version_newer("1.0.1", "1.0.0"));
     assert!(updater.is_version_newer("2.0.0", "1.9.9"));
@@ -576,9 +567,71 @@ mod tests {
     assert!(!updater.is_version_newer("1.0.0", "1.0.0"));
   }
 
+  #[test]
+  fn test_camoufox_beta_version_comparison() {
+    let updater = AutoUpdater::instance();
+
+    // Test the exact user-reported scenario: 135.0.1beta24 vs 135.0beta22
+    assert!(
+      updater.is_version_newer("135.0.1beta24", "135.0beta22"),
+      "135.0.1beta24 should be newer than 135.0beta22"
+    );
+
+    assert_eq!(
+      updater.compare_versions("135.0.1beta24", "135.0beta22"),
+      std::cmp::Ordering::Greater,
+      "135.0.1beta24 should compare as greater than 135.0beta22"
+    );
+
+    // Test other camoufox beta version combinations
+    assert!(
+      updater.is_version_newer("135.0.5beta24", "135.0.5beta22"),
+      "135.0.5beta24 should be newer than 135.0.5beta22"
+    );
+
+    assert!(
+      updater.is_version_newer("135.0.1beta1", "135.0beta1"),
+      "135.0.1beta1 should be newer than 135.0beta1 due to patch version"
+    );
+
+    // Test that older versions are not considered newer
+    assert!(
+      !updater.is_version_newer("135.0beta22", "135.0.1beta24"),
+      "135.0beta22 should NOT be newer than 135.0.1beta24"
+    );
+  }
+
+  #[test]
+  fn test_beta_version_ordering_comprehensive() {
+    let updater = AutoUpdater::instance();
+
+    // Test various beta version patterns that could appear in camoufox
+    let test_cases = vec![
+      ("135.0.1beta24", "135.0beta22", true),   // User reported case
+      ("135.0.5beta24", "135.0.5beta22", true), // Same patch, different beta
+      ("135.1beta1", "135.0beta99", true),      // Higher minor beats beta number
+      ("136.0beta1", "135.9.9beta99", true),    // Higher major beats everything
+      ("135.0.1beta1", "135.0beta1", true),     // Patch version matters
+      ("135.0beta22", "135.0.1beta24", false),  // Reverse of user case
+    ];
+
+    for (newer, older, should_be_newer) in test_cases {
+      let result = updater.is_version_newer(newer, older);
+      assert_eq!(
+        result,
+        should_be_newer,
+        "Expected {} {} {} but got {}",
+        newer,
+        if should_be_newer { ">" } else { "<=" },
+        older,
+        if result { "true" } else { "false" }
+      );
+    }
+  }
+
   #[test]
   fn test_check_profile_update_stable_to_stable() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
     let profile = create_test_profile("test", "firefox", "1.0.0");
     let versions = vec![
       create_test_version_info("1.0.1", false), // stable, newer
@@ -596,7 +649,7 @@ mod tests {
 
   #[test]
   fn test_check_profile_update_alpha_to_alpha() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
     let profile = create_test_profile("test", "firefox", "1.0.0-alpha");
     let versions = vec![
       create_test_version_info("1.0.1", false), // stable, should be included
@@ -615,7 +668,7 @@ mod tests {
 
   #[test]
   fn test_check_profile_update_no_update_available() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
     let profile = create_test_profile("test", "firefox", "1.0.0");
     let versions = vec![
       create_test_version_info("0.9.0", false), // older
@@ -628,7 +681,7 @@ mod tests {
 
   #[test]
   fn test_group_update_notifications() {
-    let updater = AutoUpdater::new();
+    let updater = AutoUpdater::instance();
     let notifications = vec![
       UpdateNotification {
         id: "firefox_1.0.0_to_1.1.0_profile1".to_string(),
@@ -860,15 +913,9 @@ mod tests {
     let loaded_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
     assert_eq!(loaded_state.pending_updates.len(), 0);
   }
-
-  #[test]
-  fn test_parse_version() {
-    let updater = AutoUpdater::new();
-
-    assert_eq!(updater.parse_version("1.2.3"), vec![1, 2, 3]);
-    assert_eq!(updater.parse_version("1.2.3-alpha"), vec![1, 2, 3]);
-    assert_eq!(updater.parse_version("1.2.3a1"), vec![1, 2, 3, 1]);
-    assert_eq!(updater.parse_version("1.2.3b2"), vec![1, 2, 3, 2]);
-    assert_eq!(updater.parse_version("10.0.0"), vec![10, 0, 0]);
-  }
+}
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref AUTO_UPDATER: AutoUpdater = AutoUpdater::new();
 }

src-tauri/src/browser.rs

@@ -1,9 +1,8 @@
 use serde::{Deserialize, Serialize};
 use std::path::{Path, PathBuf};
 
-#[derive(Debug, Serialize, Deserialize, Clone)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ProxySettings {
-  pub enabled: bool,
   pub proxy_type: String, // "http", "https", "socks4", or "socks5"
   pub host: String,
   pub port: u16,
@@ -20,6 +19,7 @@ pub enum BrowserType {
   Brave,
   Zen,
   TorBrowser,
+  Camoufox,
 }
 
 impl BrowserType {
@@ -32,6 +32,7 @@ impl BrowserType {
       BrowserType::Brave => "brave",
       BrowserType::Zen => "zen",
       BrowserType::TorBrowser => "tor-browser",
+      BrowserType::Camoufox => "camoufox",
     }
   }
 
@@ -44,6 +45,7 @@ impl BrowserType {
       "brave" => Ok(BrowserType::Brave),
       "zen" => Ok(BrowserType::Zen),
       "tor-browser" => Ok(BrowserType::TorBrowser),
+      "camoufox" => Ok(BrowserType::Camoufox),
       _ => Err(format!("Unknown browser type: {s}")),
     }
   }
@@ -90,6 +92,7 @@ mod macos {
           || name.starts_with("mullvad")
           || name.starts_with("zen")
           || name.starts_with("tor")
+          || name.starts_with("camoufox")
           || name.contains("Browser")
       })
       .map(|entry| entry.path())
@@ -193,6 +196,12 @@ mod linux {
           browser_subdir.join("firefox-bin"),
         ]
       }
+      BrowserType::Camoufox => {
+        vec![
+          browser_subdir.join("camoufox-bin"),
+          browser_subdir.join("camoufox"),
+        ]
+      }
       _ => vec![],
     };
 
@@ -275,6 +284,12 @@ mod linux {
           browser_subdir.join("firefox"),
         ]
       }
+      BrowserType::Camoufox => {
+        vec![
+          browser_subdir.join("camoufox-bin"),
+          browser_subdir.join("camoufox"),
+        ]
+      }
       _ => vec![],
     };
 
@@ -359,6 +374,7 @@ mod windows {
             || name.starts_with("mullvad")
             || name.starts_with("zen")
             || name.starts_with("tor")
+            || name.starts_with("camoufox")
             || name.contains("browser")
           {
             return Ok(path);
@@ -437,6 +453,7 @@ mod windows {
             || name.starts_with("mullvad")
             || name.starts_with("zen")
             || name.starts_with("tor")
+            || name.starts_with("camoufox")
             || name.contains("browser")
           {
             return true;
@@ -533,7 +550,10 @@ impl Browser for FirefoxBrowser {
       BrowserType::MullvadBrowser | BrowserType::TorBrowser => {
         args.push("-no-remote".to_string());
       }
-      BrowserType::Firefox | BrowserType::FirefoxDeveloper | BrowserType::Zen => {
+      BrowserType::Firefox
+      | BrowserType::FirefoxDeveloper
+      | BrowserType::Zen
+      | BrowserType::Camoufox => {
         // Don't use -no-remote so we can communicate with existing instances
       }
       _ => {}
@@ -636,12 +656,11 @@ impl Browser for ChromiumBrowser {
 
     // Add proxy configuration if provided
     if let Some(proxy) = proxy_settings {
-      if proxy.enabled {
-        args.push(format!(
-          "--proxy-server=http://{}:{}",
-          proxy.host, proxy.port
-        ));
-      }
+      // Apply proxy settings
+      args.push(format!(
+        "--proxy-server=http://{}:{}",
+        proxy.host, proxy.port
+      ));
     }
 
     if let Some(url) = url {
@@ -695,18 +714,110 @@ impl Browser for ChromiumBrowser {
   }
 }
 
-// Factory function to create browser instances
-pub fn create_browser(browser_type: BrowserType) -> Box<dyn Browser> {
-  match browser_type {
-    BrowserType::MullvadBrowser
-    | BrowserType::Firefox
-    | BrowserType::FirefoxDeveloper
-    | BrowserType::Zen
-    | BrowserType::TorBrowser => Box::new(FirefoxBrowser::new(browser_type)),
-    BrowserType::Chromium | BrowserType::Brave => Box::new(ChromiumBrowser::new(browser_type)),
+pub struct CamoufoxBrowser;
+
+impl CamoufoxBrowser {
+  pub fn new() -> Self {
+    Self
   }
 }
 
+impl Browser for CamoufoxBrowser {
+  fn get_executable_path(&self, install_dir: &Path) -> Result<PathBuf, Box<dyn std::error::Error>> {
+    #[cfg(target_os = "macos")]
+    return macos::get_firefox_executable_path(install_dir);
+
+    #[cfg(target_os = "linux")]
+    return linux::get_firefox_executable_path(install_dir, &BrowserType::Camoufox);
+
+    #[cfg(target_os = "windows")]
+    return windows::get_firefox_executable_path(install_dir);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    Err("Unsupported platform".into())
+  }
+
+  fn create_launch_args(
+    &self,
+    profile_path: &str,
+    _proxy_settings: Option<&ProxySettings>,
+    url: Option<String>,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    // For Camoufox, we handle launching through the camoufox launcher
+    // This method won't be used directly, but we provide basic Firefox args as fallback
+    let mut args = vec![
+      "-profile".to_string(),
+      profile_path.to_string(),
+      "-no-remote".to_string(),
+    ];
+
+    if let Some(url) = url {
+      args.push(url);
+    }
+
+    Ok(args)
+  }
+
+  fn is_version_downloaded(&self, version: &str, binaries_dir: &Path) -> bool {
+    let install_dir = binaries_dir.join("camoufox").join(version);
+
+    #[cfg(target_os = "macos")]
+    return macos::is_firefox_version_downloaded(&install_dir);
+
+    #[cfg(target_os = "linux")]
+    return linux::is_firefox_version_downloaded(&install_dir, &BrowserType::Camoufox);
+
+    #[cfg(target_os = "windows")]
+    return windows::is_firefox_version_downloaded(&install_dir);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    false
+  }
+
+  fn prepare_executable(&self, executable_path: &Path) -> Result<(), Box<dyn std::error::Error>> {
+    #[cfg(target_os = "macos")]
+    return macos::prepare_executable(executable_path);
+
+    #[cfg(target_os = "linux")]
+    return linux::prepare_executable(executable_path);
+
+    #[cfg(target_os = "windows")]
+    return windows::prepare_executable(executable_path);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    Err("Unsupported platform".into())
+  }
+}
+
+pub struct BrowserFactory;
+
+impl BrowserFactory {
+  fn new() -> Self {
+    Self
+  }
+
+  pub fn instance() -> &'static BrowserFactory {
+    &BROWSER_FACTORY
+  }
+
+  pub fn create_browser(&self, browser_type: BrowserType) -> Box<dyn Browser> {
+    match browser_type {
+      BrowserType::MullvadBrowser
+      | BrowserType::Firefox
+      | BrowserType::FirefoxDeveloper
+      | BrowserType::Zen
+      | BrowserType::TorBrowser => Box::new(FirefoxBrowser::new(browser_type)),
+      BrowserType::Chromium | BrowserType::Brave => Box::new(ChromiumBrowser::new(browser_type)),
+      BrowserType::Camoufox => Box::new(CamoufoxBrowser::new()),
+    }
+  }
+}
+
+// Factory function to create browser instances (kept for backward compatibility)
+pub fn create_browser(browser_type: BrowserType) -> Box<dyn Browser> {
+  BrowserFactory::instance().create_browser(browser_type)
+}
+
 // Add GithubRelease and GithubAsset structs to browser.rs if they don't already exist
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct GithubRelease {
@@ -720,6 +831,24 @@ pub struct GithubRelease {
   pub is_nightly: bool,
   #[serde(default)]
   pub prerelease: bool,
+  #[serde(default)]
+  pub draft: bool,
+  #[serde(default)]
+  pub body: Option<String>,
+  #[serde(default)]
+  pub html_url: Option<String>,
+  #[serde(default)]
+  pub id: Option<u64>,
+  #[serde(default)]
+  pub node_id: Option<String>,
+  #[serde(default)]
+  pub target_commitish: Option<String>,
+  #[serde(default)]
+  pub created_at: Option<String>,
+  #[serde(default)]
+  pub tarball_url: Option<String>,
+  #[serde(default)]
+  pub zipball_url: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
@@ -728,6 +857,22 @@ pub struct GithubAsset {
   pub browser_download_url: String,
   #[serde(default)]
   pub size: u64,
+  #[serde(default)]
+  pub download_count: Option<u64>,
+  #[serde(default)]
+  pub id: Option<u64>,
+  #[serde(default)]
+  pub node_id: Option<String>,
+  #[serde(default)]
+  pub label: Option<String>,
+  #[serde(default)]
+  pub content_type: Option<String>,
+  #[serde(default)]
+  pub state: Option<String>,
+  #[serde(default)]
+  pub created_at: Option<String>,
+  #[serde(default)]
+  pub updated_at: Option<String>,
 }
 
 #[cfg(test)]
@@ -746,6 +891,7 @@ mod tests {
     assert_eq!(BrowserType::Brave.as_str(), "brave");
     assert_eq!(BrowserType::Zen.as_str(), "zen");
     assert_eq!(BrowserType::TorBrowser.as_str(), "tor-browser");
+    assert_eq!(BrowserType::Camoufox.as_str(), "camoufox");
 
     // Test from_str
     assert_eq!(
@@ -770,6 +916,10 @@ mod tests {
       BrowserType::from_str("tor-browser").unwrap(),
       BrowserType::TorBrowser
     );
+    assert_eq!(
+      BrowserType::from_str("camoufox").unwrap(),
+      BrowserType::Camoufox
+    );
 
     // Test invalid browser type
     assert!(BrowserType::from_str("invalid").is_err());
@@ -853,7 +1003,6 @@ mod tests {
   #[test]
   fn test_proxy_settings_creation() {
     let proxy = ProxySettings {
-      enabled: true,
       proxy_type: "http".to_string(),
       host: "127.0.0.1".to_string(),
       port: 8080,
@@ -861,14 +1010,12 @@ mod tests {
       password: None,
     };
 
-    assert!(proxy.enabled);
     assert_eq!(proxy.proxy_type, "http");
     assert_eq!(proxy.host, "127.0.0.1");
     assert_eq!(proxy.port, 8080);
 
     // Test different proxy types
     let socks_proxy = ProxySettings {
-      enabled: true,
       proxy_type: "socks5".to_string(),
       host: "proxy.example.com".to_string(),
       port: 1080,
@@ -946,7 +1093,6 @@ mod tests {
   #[test]
   fn test_proxy_settings_serialization() {
     let proxy = ProxySettings {
-      enabled: true,
       proxy_type: "http".to_string(),
       host: "127.0.0.1".to_string(),
       port: 8080,
@@ -962,9 +1108,13 @@ mod tests {
 
     // Test that it can be deserialized (implements Deserialize)
     let deserialized: ProxySettings = serde_json::from_str(&json).unwrap();
-    assert_eq!(deserialized.enabled, proxy.enabled);
     assert_eq!(deserialized.proxy_type, proxy.proxy_type);
     assert_eq!(deserialized.host, proxy.host);
     assert_eq!(deserialized.port, proxy.port);
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref BROWSER_FACTORY: BrowserFactory = BrowserFactory::new();
+}

src-tauri/src/browser_version_service.rs

@@ -31,19 +31,18 @@ pub struct DownloadInfo {
 }
 
 pub struct BrowserVersionService {
-  api_client: ApiClient,
+  api_client: &'static ApiClient,
 }
 
 impl BrowserVersionService {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
-      api_client: ApiClient::new(),
+      api_client: ApiClient::instance(),
     }
   }
 
-  #[cfg(test)]
-  pub fn new_with_api_client(api_client: ApiClient) -> Self {
-    Self { api_client }
+  pub fn instance() -> &'static BrowserVersionService {
+    &BROWSER_VERSION_SERVICE
   }
 
   /// Check if a browser is supported on the current platform and architecture
@@ -87,6 +86,10 @@ impl BrowserVersionService {
           Ok(true)
         }
       }
+      "camoufox" => {
+        // Camoufox supports all platforms and architectures according to the JS code
+        Ok(true)
+      }
       _ => Err(format!("Unknown browser: {browser}").into()),
     }
   }
@@ -101,6 +104,7 @@ impl BrowserVersionService {
       "brave",
       "chromium",
       "tor-browser",
+      "camoufox",
     ];
 
     all_browsers
@@ -237,6 +241,7 @@ impl BrowserVersionService {
       "brave" => self.fetch_brave_versions(true).await?,
       "chromium" => self.fetch_chromium_versions(true).await?,
       "tor-browser" => self.fetch_tor_versions(true).await?,
+      "camoufox" => self.fetch_camoufox_versions(true).await?,
       _ => return Err(format!("Unsupported browser: {browser}").into()),
     };
 
@@ -454,6 +459,27 @@ impl BrowserVersionService {
           })
           .collect()
       }
+      "camoufox" => {
+        let releases = self.fetch_camoufox_releases_detailed(true).await?;
+        merged_versions
+          .into_iter()
+          .map(|version| {
+            if let Some(release) = releases.iter().find(|r| r.tag_name == version) {
+              BrowserVersionInfo {
+                version: release.tag_name.clone(),
+                is_prerelease: release.is_nightly,
+                date: release.published_at.clone(),
+              }
+            } else {
+              BrowserVersionInfo {
+                version: version.clone(),
+                is_prerelease: false, // Camoufox usually stable releases
+                date: "".to_string(),
+              }
+            }
+          })
+          .collect()
+      }
       _ => {
         return Err(format!("Unsupported browser: {browser}").into());
       }
@@ -727,6 +753,32 @@ impl BrowserVersionService {
           is_archive,
         })
       }
+      "camoufox" => {
+        // Camoufox downloads from GitHub releases with pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+        let (os_name, arch_name) = match (&os[..], &arch[..]) {
+          ("windows", "x64") => ("win", "x86_64"),
+          ("windows", "arm64") => ("win", "arm64"),
+          ("linux", "x64") => ("lin", "x86_64"),
+          ("linux", "arm64") => ("lin", "arm64"),
+          ("macos", "x64") => ("mac", "x86_64"),
+          ("macos", "arm64") => ("mac", "arm64"),
+          _ => {
+            return Err(
+              format!("Unsupported platform/architecture for Camoufox: {os}/{arch}").into(),
+            )
+          }
+        };
+
+        // Note: We provide a placeholder URL here since Camoufox requires dynamic resolution
+        // The actual URL will be resolved in download.rs resolve_download_url
+        Ok(DownloadInfo {
+          url: format!(
+            "https://github.com/daijro/camoufox/releases/download/{version}/camoufox-{{version}}-{{release}}-{os_name}.{arch_name}.zip"
+          ),
+          filename: format!("camoufox-{version}-{os_name}.{arch_name}.zip"),
+          is_archive: true,
+        })
+      }
       _ => Err(format!("Unsupported browser: {browser}").into()),
     }
   }
@@ -889,13 +941,31 @@ impl BrowserVersionService {
       .fetch_tor_releases_with_caching(no_caching)
       .await
   }
+
+  async fn fetch_camoufox_versions(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let releases = self.fetch_camoufox_releases_detailed(no_caching).await?;
+    Ok(releases.into_iter().map(|r| r.tag_name).collect())
+  }
+
+  async fn fetch_camoufox_releases_detailed(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    self
+      .api_client
+      .fetch_camoufox_releases_with_caching(no_caching)
+      .await
+  }
 }
 
 #[cfg(test)]
 mod tests {
   use super::*;
-  use wiremock::matchers::{method, path, query_param};
-  use wiremock::{Mock, MockServer, ResponseTemplate};
+
+  use wiremock::MockServer;
 
   async fn setup_mock_server() -> MockServer {
     MockServer::start().await
@@ -912,437 +982,16 @@ mod tests {
     )
   }
 
-  fn create_test_service(api_client: ApiClient) -> BrowserVersionService {
-    BrowserVersionService::new_with_api_client(api_client)
-  }
-
-  async fn setup_firefox_mocks(server: &MockServer) {
-    let mock_response = r#"{
-      "releases": {
-        "firefox-139.0": {
-          "build_number": 1,
-          "category": "major",
-          "date": "2024-01-15",
-          "description": "Firefox 139.0 Release",
-          "is_security_driven": false,
-          "product": "firefox",
-          "version": "139.0"
-        },
-        "firefox-138.0": {
-          "build_number": 1,
-          "category": "major",
-          "date": "2024-01-01",
-          "description": "Firefox 138.0 Release",
-          "is_security_driven": false,
-          "product": "firefox",
-          "version": "138.0"
-        },
-        "firefox-137.0": {
-          "build_number": 1,
-          "category": "major",
-          "date": "2023-12-15",
-          "description": "Firefox 137.0 Release",
-          "is_security_driven": false,
-          "product": "firefox",
-          "version": "137.0"
-        }
-      }
-    }"#;
-
-    Mock::given(method("GET"))
-      .and(path("/firefox.json"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_firefox_dev_mocks(server: &MockServer) {
-    let mock_response = r#"{
-      "releases": {
-        "devedition-140.0b1": {
-          "build_number": 1,
-          "category": "major",
-          "date": "2024-01-20",
-          "description": "Firefox Developer Edition 140.0b1",
-          "is_security_driven": false,
-          "product": "devedition",
-          "version": "140.0b1"
-        },
-        "devedition-139.0b5": {
-          "build_number": 1,
-          "category": "major",
-          "date": "2024-01-10",
-          "description": "Firefox Developer Edition 139.0b5",
-          "is_security_driven": false,
-          "product": "devedition",
-          "version": "139.0b5"
-        }
-      }
-    }"#;
-
-    Mock::given(method("GET"))
-      .and(path("/devedition.json"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_mullvad_mocks(server: &MockServer) {
-    let mock_response = r#"[
-      {
-        "tag_name": "14.5a6",
-        "name": "Mullvad Browser 14.5a6",
-        "prerelease": true,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "mullvad-browser-macos-14.5a6.dmg",
-            "browser_download_url": "https://example.com/mullvad-14.5a6.dmg",
-            "size": 100000000
-          }
-        ]
-      },
-      {
-        "tag_name": "14.5a5",
-        "name": "Mullvad Browser 14.5a5",
-        "prerelease": true,
-        "published_at": "2024-01-10T10:00:00Z",
-        "assets": [
-          {
-            "name": "mullvad-browser-macos-14.5a5.dmg",
-            "browser_download_url": "https://example.com/mullvad-14.5a5.dmg",
-            "size": 99000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/mullvad/mullvad-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_zen_mocks(server: &MockServer) {
-    let mock_response = r#"[
-      {
-        "tag_name": "twilight",
-        "name": "Zen Browser Twilight",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "zen.macos-universal.dmg",
-            "browser_download_url": "https://example.com/zen-twilight.dmg",
-            "size": 120000000
-          }
-        ]
-      },
-      {
-        "tag_name": "1.11b",
-        "name": "Zen Browser 1.11b",
-        "prerelease": false,
-        "published_at": "2024-01-10T10:00:00Z",
-        "assets": [
-          {
-            "name": "zen.macos-universal.dmg",
-            "browser_download_url": "https://example.com/zen-1.11b.dmg",
-            "size": 115000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/zen-browser/desktop/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_brave_mocks(server: &MockServer) {
-    let mock_response = r#"[
-      {
-        "tag_name": "v1.79.119",
-        "name": "Release v1.79.119 (Chromium 137.0.7151.68)",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "brave-v1.79.119-universal.dmg",
-            "browser_download_url": "https://example.com/brave-1.79.119-universal.dmg",
-            "size": 200000000
-          },
-          {
-            "name": "brave-browser-1.79.119-linux-amd64.zip",
-            "browser_download_url": "https://example.com/brave-browser-1.79.119-linux-amd64.zip",
-            "size": 150000000
-          },
-          {
-            "name": "brave-browser-1.79.119-linux-arm64.zip",
-            "browser_download_url": "https://example.com/brave-browser-1.79.119-linux-arm64.zip",
-            "size": 145000000
-          }
-        ]
-      },
-      {
-        "tag_name": "v1.81.8",
-        "name": "Nightly v1.81.8",
-        "prerelease": false,
-        "published_at": "2024-01-10T10:00:00Z",
-        "assets": [
-          {
-            "name": "brave-v1.81.8-universal.dmg",
-            "browser_download_url": "https://example.com/brave-1.81.8-universal.dmg",
-            "size": 199000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/brave/brave-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_chromium_mocks(server: &MockServer) {
-    let arch = if cfg!(target_arch = "aarch64") {
-      "Mac_Arm"
-    } else {
-      "Mac"
-    };
-
-    Mock::given(method("GET"))
-      .and(path(format!("/{arch}/LAST_CHANGE")))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string("1465660")
-          .insert_header("content-type", "text/plain"),
-      )
-      .mount(server)
-      .await;
-  }
-
-  async fn setup_tor_mocks(server: &MockServer) {
-    let mock_html = r#"
-    <html>
-    <body>
-    <a href="../">../</a>
-    <a href="14.0.4/">14.0.4/</a>
-    <a href="14.0.3/">14.0.3/</a>
-    <a href="14.0.2/">14.0.2/</a>
-    </body>
-    </html>
-    "#;
-
-    let version_html_144 = r#"
-    <html>
-    <body>
-    <a href="tor-browser-macos-14.0.4.dmg">tor-browser-macos-14.0.4.dmg</a>
-    </body>
-    </html>
-    "#;
-
-    let version_html_143 = r#"
-    <html>
-    <body>
-    <a href="tor-browser-macos-14.0.3.dmg">tor-browser-macos-14.0.3.dmg</a>
-    </body>
-    </html>
-    "#;
-
-    let version_html_142 = r#"
-    <html>
-    <body>
-    <a href="tor-browser-macos-14.0.2.dmg">tor-browser-macos-14.0.2.dmg</a>
-    </body>
-    </html>
-    "#;
-
-    Mock::given(method("GET"))
-      .and(path("/"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_html)
-          .insert_header("content-type", "text/html"),
-      )
-      .mount(server)
-      .await;
-
-    Mock::given(method("GET"))
-      .and(path("/14.0.4/"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(version_html_144)
-          .insert_header("content-type", "text/html"),
-      )
-      .mount(server)
-      .await;
-
-    Mock::given(method("GET"))
-      .and(path("/14.0.3/"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(version_html_143)
-          .insert_header("content-type", "text/html"),
-      )
-      .mount(server)
-      .await;
-
-    Mock::given(method("GET"))
-      .and(path("/14.0.2/"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(version_html_142)
-          .insert_header("content-type", "text/html"),
-      )
-      .mount(server)
-      .await;
+  fn create_test_service(_api_client: ApiClient) -> &'static BrowserVersionService {
+    BrowserVersionService::instance()
   }
 
   #[tokio::test]
   async fn test_browser_version_service_creation() {
-    let _ = BrowserVersionService::new();
+    let _ = BrowserVersionService::instance();
     // Test passes if we can create the service without panicking
   }
 
-  #[tokio::test]
-  async fn test_fetch_firefox_versions() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    // Test with caching
-    let result_cached = service.fetch_browser_versions("firefox", false).await;
-    assert!(
-      result_cached.is_ok(),
-      "Should fetch Firefox versions with caching"
-    );
-
-    if let Ok(versions) = result_cached {
-      assert!(!versions.is_empty(), "Should have Firefox versions");
-      assert_eq!(versions[0], "139.0", "Should have latest version first");
-      println!(
-        "Firefox cached test passed. Found {versions_count} versions",
-        versions_count = versions.len()
-      );
-    }
-
-    // Test without caching
-    let result_no_cache = service.fetch_browser_versions("firefox", true).await;
-    assert!(
-      result_no_cache.is_ok(),
-      "Should fetch Firefox versions without caching"
-    );
-
-    if let Ok(versions) = result_no_cache {
-      assert!(
-        !versions.is_empty(),
-        "Should have Firefox versions without caching"
-      );
-      assert_eq!(versions[0], "139.0", "Should have latest version first");
-      println!(
-        "Firefox no-cache test passed. Found {versions_count} versions",
-        versions_count = versions.len()
-      );
-    }
-  }
-
-  #[tokio::test]
-  async fn test_fetch_browser_versions_with_count() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    let result = service
-      .fetch_browser_versions_with_count("firefox", false)
-      .await;
-    assert!(result.is_ok(), "Should fetch Firefox versions with count");
-
-    if let Ok(result) = result {
-      assert!(!result.versions.is_empty(), "Should have versions");
-      assert_eq!(
-        result.total_versions_count,
-        result.versions.len(),
-        "Total count should match versions length"
-      );
-      assert_eq!(
-        result.versions[0], "139.0",
-        "Should have latest version first"
-      );
-      println!(
-        "Firefox count test passed. Found {} versions, new: {}",
-        result.total_versions_count,
-        result.new_versions_count.unwrap_or(0)
-      );
-    }
-  }
-
-  #[tokio::test]
-  async fn test_fetch_detailed_versions() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    let result = service
-      .fetch_browser_versions_detailed("firefox", false)
-      .await;
-    assert!(result.is_ok(), "Should fetch detailed Firefox versions");
-
-    if let Ok(versions) = result {
-      assert!(!versions.is_empty(), "Should have detailed versions");
-
-      // Check that the first version has all required fields
-      let first_version = &versions[0];
-      assert!(
-        !first_version.version.is_empty(),
-        "Version should not be empty"
-      );
-      assert_eq!(
-        first_version.version, "139.0",
-        "Should have latest version first"
-      );
-      assert_eq!(first_version.date, "2024-01-15", "Should have correct date");
-      assert!(!first_version.is_prerelease, "Should be stable release");
-      println!(
-        "Firefox detailed test passed. Found {versions_count} detailed versions",
-        versions_count = versions.len()
-      );
-    }
-  }
-
   #[tokio::test]
   async fn test_unsupported_browser() {
     let server = setup_mock_server().await;
@@ -1363,190 +1012,9 @@ mod tests {
     }
   }
 
-  #[tokio::test]
-  async fn test_incremental_update() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    // This test might fail if there are no cached versions yet, which is fine
-    let result = service
-      .update_browser_versions_incrementally("firefox")
-      .await;
-
-    // The test should complete without panicking
-    match result {
-      Ok(count) => {
-        println!("Incremental update test passed. Found {count} new versions");
-      }
-      Err(e) => {
-        println!("Incremental update test failed (expected for first run): {e}");
-      }
-    }
-  }
-
-  #[tokio::test]
-  async fn test_all_supported_browsers() {
-    let server = setup_mock_server().await;
-
-    // Setup all browser mocks
-    setup_firefox_mocks(&server).await;
-    setup_firefox_dev_mocks(&server).await;
-    setup_mullvad_mocks(&server).await;
-    setup_zen_mocks(&server).await;
-    setup_brave_mocks(&server).await;
-    setup_chromium_mocks(&server).await;
-    setup_tor_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    let browsers = vec![
-      "firefox",
-      "firefox-developer",
-      "mullvad-browser",
-      "zen",
-      "brave",
-      "chromium",
-      "tor-browser",
-    ];
-
-    for browser in browsers {
-      let result = service.fetch_browser_versions(browser, false).await;
-
-      match result {
-        Ok(versions) => {
-          assert!(!versions.is_empty(), "Should have versions for {browser}");
-          println!(
-            "{browser} test passed. Found {versions_count} versions",
-            versions_count = versions.len()
-          );
-        }
-        Err(e) => {
-          panic!("{browser} test failed: {e}");
-        }
-      }
-    }
-  }
-
-  #[tokio::test]
-  async fn test_no_caching_parameter() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    // Test with caching enabled (default)
-    let result_cached = service.fetch_browser_versions("firefox", false).await;
-    assert!(
-      result_cached.is_ok(),
-      "Should fetch Firefox versions with caching"
-    );
-
-    // Test with caching disabled (no_caching = true)
-    let result_no_cache = service.fetch_browser_versions("firefox", true).await;
-    assert!(
-      result_no_cache.is_ok(),
-      "Should fetch Firefox versions without caching"
-    );
-
-    // Both should return versions
-    if let (Ok(cached_versions), Ok(no_cache_versions)) = (result_cached, result_no_cache) {
-      assert!(
-        !cached_versions.is_empty(),
-        "Cached versions should not be empty"
-      );
-      assert!(
-        !no_cache_versions.is_empty(),
-        "No-cache versions should not be empty"
-      );
-      assert_eq!(
-        cached_versions, no_cache_versions,
-        "Both should return same versions"
-      );
-      println!(
-        "No-caching test passed. Cached: {} versions, No-cache: {} versions",
-        cached_versions.len(),
-        no_cache_versions.len()
-      );
-    }
-  }
-
-  #[tokio::test]
-  async fn test_detailed_versions_with_no_caching() {
-    let server = setup_mock_server().await;
-    setup_firefox_mocks(&server).await;
-
-    let api_client = create_test_api_client(&server);
-    let service = create_test_service(api_client);
-
-    // Test detailed versions with caching
-    let result_cached = service
-      .fetch_browser_versions_detailed("firefox", false)
-      .await;
-    assert!(
-      result_cached.is_ok(),
-      "Should fetch detailed Firefox versions with caching"
-    );
-
-    // Test detailed versions without caching
-    let result_no_cache = service
-      .fetch_browser_versions_detailed("firefox", true)
-      .await;
-    assert!(
-      result_no_cache.is_ok(),
-      "Should fetch detailed Firefox versions without caching"
-    );
-
-    // Both should return detailed version info
-    if let (Ok(cached_versions), Ok(no_cache_versions)) = (result_cached, result_no_cache) {
-      assert!(
-        !cached_versions.is_empty(),
-        "Cached detailed versions should not be empty"
-      );
-      assert!(
-        !no_cache_versions.is_empty(),
-        "No-cache detailed versions should not be empty"
-      );
-
-      // Check that detailed versions have all required fields
-      let first_cached = &cached_versions[0];
-      let first_no_cache = &no_cache_versions[0];
-
-      assert!(
-        !first_cached.version.is_empty(),
-        "Cached version should not be empty"
-      );
-      assert!(
-        !first_no_cache.version.is_empty(),
-        "No-cache version should not be empty"
-      );
-
-      assert_eq!(first_cached.version, "139.0", "Should have correct version");
-      assert_eq!(
-        first_no_cache.version, "139.0",
-        "Should have correct version"
-      );
-      assert_eq!(first_cached.date, "2024-01-15", "Should have correct date");
-      assert_eq!(
-        first_no_cache.date, "2024-01-15",
-        "Should have correct date"
-      );
-
-      println!(
-        "Detailed no-caching test passed. Cached: {} versions, No-cache: {} versions",
-        cached_versions.len(),
-        no_cache_versions.len()
-      );
-    }
-  }
-
   #[test]
   fn test_get_download_info() {
-    let service = BrowserVersionService::new();
+    let service = BrowserVersionService::instance();
 
     // Test Firefox
     let firefox_info = service.get_download_info("firefox", "139.0").unwrap();
@@ -1609,3 +1077,8 @@ mod tests {
     println!("Download info test passed for all browsers");
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref BROWSER_VERSION_SERVICE: BrowserVersionService = BrowserVersionService::new();
+}

src-tauri/src/camoufox.rs

@@ -0,0 +1,497 @@
+use crate::profile::BrowserProfile;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::sync::Arc;
+
+use tauri::AppHandle;
+use tauri_plugin_shell::ShellExt;
+use tokio::sync::Mutex as AsyncMutex;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CamoufoxConfig {
+  pub proxy: Option<String>,
+  pub screen_max_width: Option<u32>,
+  pub screen_max_height: Option<u32>,
+  pub geoip: Option<serde_json::Value>, // Can be String or bool
+  pub block_images: Option<bool>,
+  pub block_webrtc: Option<bool>,
+  pub block_webgl: Option<bool>,
+  pub executable_path: Option<String>,
+  pub fingerprint: Option<String>, // JSON string of the complete fingerprint config
+}
+
+impl Default for CamoufoxConfig {
+  fn default() -> Self {
+    Self {
+      proxy: None,
+      screen_max_width: None,
+      screen_max_height: None,
+      geoip: Some(serde_json::Value::Bool(true)),
+      block_images: None,
+      block_webrtc: None,
+      block_webgl: None,
+      executable_path: None,
+      fingerprint: None,
+    }
+  }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[allow(non_snake_case)]
+pub struct CamoufoxLaunchResult {
+  pub id: String,
+  #[serde(alias = "process_id")]
+  pub processId: Option<u32>,
+  #[serde(alias = "profile_path")]
+  pub profilePath: Option<String>,
+  pub url: Option<String>,
+}
+
+#[derive(Debug)]
+struct CamoufoxInstance {
+  #[allow(dead_code)]
+  id: String,
+  process_id: Option<u32>,
+  profile_path: Option<String>,
+  url: Option<String>,
+}
+
+struct CamoufoxNodecarLauncherInner {
+  instances: HashMap<String, CamoufoxInstance>,
+}
+
+pub struct CamoufoxNodecarLauncher {
+  inner: Arc<AsyncMutex<CamoufoxNodecarLauncherInner>>,
+}
+
+impl CamoufoxNodecarLauncher {
+  fn new() -> Self {
+    Self {
+      inner: Arc::new(AsyncMutex::new(CamoufoxNodecarLauncherInner {
+        instances: HashMap::new(),
+      })),
+    }
+  }
+
+  pub fn instance() -> &'static CamoufoxNodecarLauncher {
+    &CAMOUFOX_NODECAR_LAUNCHER
+  }
+
+  /// Create a test configuration
+  #[allow(dead_code)]
+  pub fn create_test_config() -> CamoufoxConfig {
+    CamoufoxConfig {
+      screen_max_width: Some(1440),
+      screen_max_height: Some(900),
+      geoip: Some(serde_json::Value::Bool(true)),
+      ..Default::default()
+    }
+  }
+
+  /// Generate Camoufox fingerprint configuration during profile creation
+  pub async fn generate_fingerprint_config(
+    &self,
+    app_handle: &AppHandle,
+    profile: &crate::profile::BrowserProfile,
+    config: &CamoufoxConfig,
+  ) -> Result<String, Box<dyn std::error::Error + Send + Sync>> {
+    let mut config_args = vec!["camoufox".to_string(), "generate-config".to_string()];
+
+    // Always ensure executable_path is set to the user's binary location
+    let executable_path = if let Some(path) = &config.executable_path {
+      path.clone()
+    } else {
+      // Use the browser runner helper with the real profile
+      let browser_runner = crate::browser_runner::BrowserRunner::instance();
+      browser_runner
+        .get_browser_executable_path(profile)
+        .map_err(|e| format!("Failed to get Camoufox executable path: {e}"))?
+        .to_string_lossy()
+        .to_string()
+    };
+    config_args.extend(["--executable-path".to_string(), executable_path]);
+
+    // Pass existing fingerprint if provided (for advanced form partial fingerprints)
+    if let Some(fingerprint) = &config.fingerprint {
+      config_args.extend(["--fingerprint".to_string(), fingerprint.clone()]);
+    }
+
+    if let Some(serde_json::Value::Bool(true)) = &config.geoip {
+      config_args.push("--geoip".to_string());
+    }
+
+    // Add proxy if provided (can be passed directly during fingerprint generation)
+    if let Some(proxy) = &config.proxy {
+      config_args.extend(["--proxy".to_string(), proxy.clone()]);
+    }
+
+    // Add screen dimensions if provided
+    if let Some(max_width) = config.screen_max_width {
+      config_args.extend(["--max-width".to_string(), max_width.to_string()]);
+    }
+
+    if let Some(max_height) = config.screen_max_height {
+      config_args.extend(["--max-height".to_string(), max_height.to_string()]);
+    }
+
+    // Add block_* options
+    if let Some(block_images) = config.block_images {
+      if block_images {
+        config_args.push("--block-images".to_string());
+      }
+    }
+
+    if let Some(block_webrtc) = config.block_webrtc {
+      if block_webrtc {
+        config_args.push("--block-webrtc".to_string());
+      }
+    }
+
+    if let Some(block_webgl) = config.block_webgl {
+      if block_webgl {
+        config_args.push("--block-webgl".to_string());
+      }
+    }
+
+    // Execute config generation command
+    let mut config_sidecar = self.get_nodecar_sidecar(app_handle)?;
+    for arg in &config_args {
+      config_sidecar = config_sidecar.arg(arg);
+    }
+
+    let config_output = config_sidecar.output().await?;
+    if !config_output.status.success() {
+      let stderr = String::from_utf8_lossy(&config_output.stderr);
+      return Err(format!("Failed to generate camoufox fingerprint config: {stderr}").into());
+    }
+
+    Ok(String::from_utf8_lossy(&config_output.stdout).to_string())
+  }
+
+  /// Get the nodecar sidecar command
+  fn get_nodecar_sidecar(
+    &self,
+    app_handle: &AppHandle,
+  ) -> Result<tauri_plugin_shell::process::Command, Box<dyn std::error::Error + Send + Sync>> {
+    let shell = app_handle.shell();
+    let sidecar_command = shell
+      .sidecar("nodecar")
+      .map_err(|e| format!("Failed to create nodecar sidecar: {e}"))?;
+    Ok(sidecar_command)
+  }
+
+  /// Launch Camoufox browser using nodecar sidecar
+  pub async fn launch_camoufox(
+    &self,
+    app_handle: &AppHandle,
+    profile: &crate::profile::BrowserProfile,
+    profile_path: &str,
+    config: &CamoufoxConfig,
+    url: Option<&str>,
+  ) -> Result<CamoufoxLaunchResult, Box<dyn std::error::Error + Send + Sync>> {
+    let custom_config = if let Some(existing_fingerprint) = &config.fingerprint {
+      println!("Using existing fingerprint from profile metadata");
+      existing_fingerprint.clone()
+    } else {
+      return Err("No fingerprint provided".into());
+    };
+
+    // Always ensure executable_path is set to the user's binary location
+    let executable_path = if let Some(path) = &config.executable_path {
+      path.clone()
+    } else {
+      // Use the browser runner helper with the real profile
+      let browser_runner = crate::browser_runner::BrowserRunner::instance();
+      browser_runner
+        .get_browser_executable_path(profile)
+        .map_err(|e| format!("Failed to get Camoufox executable path: {e}"))?
+        .to_string_lossy()
+        .to_string()
+    };
+
+    // Build nodecar command arguments
+    let mut args = vec!["camoufox".to_string(), "start".to_string()];
+
+    // Add profile path - ensure it's an absolute path
+    let absolute_profile_path = std::path::Path::new(profile_path)
+      .canonicalize()
+      .unwrap_or_else(|_| std::path::Path::new(profile_path).to_path_buf())
+      .to_string_lossy()
+      .to_string();
+    args.extend(["--profile-path".to_string(), absolute_profile_path]);
+
+    // Add URL if provided
+    if let Some(url) = url {
+      args.extend(["--url".to_string(), url.to_string()]);
+    }
+
+    // Always add the executable path
+    args.extend(["--executable-path".to_string(), executable_path]);
+
+    // Always add the generated custom config
+    args.extend(["--custom-config".to_string(), custom_config]);
+
+    // Add proxy if provided
+    if let Some(proxy) = &config.proxy {
+      args.extend(["--proxy".to_string(), proxy.clone()]);
+    }
+
+    // Add headless flag for tests
+    if std::env::var("CAMOUFOX_HEADLESS").is_ok() {
+      args.push("--headless".to_string());
+    }
+
+    // Get the nodecar sidecar command
+    let mut sidecar_command = self.get_nodecar_sidecar(app_handle)?;
+
+    // Add all arguments to the sidecar command
+    for arg in &args {
+      sidecar_command = sidecar_command.arg(arg);
+    }
+
+    // Execute nodecar sidecar command
+    println!("Executing nodecar command with args: {args:?}");
+    let output = sidecar_command.output().await?;
+
+    if !output.status.success() {
+      let stderr = String::from_utf8_lossy(&output.stderr);
+      let stdout = String::from_utf8_lossy(&output.stdout);
+      println!("nodecar camoufox failed - stdout: {stdout}, stderr: {stderr}");
+      return Err(format!("nodecar camoufox failed: {stderr}").into());
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    println!("nodecar camoufox output: {stdout}");
+
+    // Parse the JSON output
+    let launch_result: CamoufoxLaunchResult = serde_json::from_str(&stdout)
+      .map_err(|e| format!("Failed to parse nodecar output as JSON: {e}\nOutput was: {stdout}"))?;
+
+    // Store the instance
+    let instance = CamoufoxInstance {
+      id: launch_result.id.clone(),
+      process_id: launch_result.processId,
+      profile_path: launch_result.profilePath.clone(),
+      url: launch_result.url.clone(),
+    };
+
+    {
+      let mut inner = self.inner.lock().await;
+      inner.instances.insert(launch_result.id.clone(), instance);
+    }
+
+    Ok(launch_result)
+  }
+
+  /// Stop a Camoufox process by ID
+  pub async fn stop_camoufox(
+    &self,
+    app_handle: &AppHandle,
+    id: &str,
+  ) -> Result<bool, Box<dyn std::error::Error + Send + Sync>> {
+    // Get the nodecar sidecar command
+    let sidecar_command = self
+      .get_nodecar_sidecar(app_handle)?
+      .arg("camoufox")
+      .arg("stop")
+      .arg("--id")
+      .arg(id);
+
+    // Execute nodecar stop command
+    let output = sidecar_command.output().await?;
+
+    if !output.status.success() {
+      let _stderr = String::from_utf8_lossy(&output.stderr);
+      return Ok(false);
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let result: serde_json::Value = serde_json::from_str(&stdout)
+      .map_err(|e| format!("Failed to parse nodecar stop output: {e}"))?;
+
+    let success = result
+      .get("success")
+      .and_then(|v| v.as_bool())
+      .unwrap_or(false);
+
+    if success {
+      // Remove from our tracking
+      let mut inner = self.inner.lock().await;
+      inner.instances.remove(id);
+    }
+
+    Ok(success)
+  }
+
+  /// Find Camoufox server by profile path (for integration with browser_runner)
+  pub async fn find_camoufox_by_profile(
+    &self,
+    profile_path: &str,
+  ) -> Result<Option<CamoufoxLaunchResult>, Box<dyn std::error::Error + Send + Sync>> {
+    // First clean up any dead instances
+    self.cleanup_dead_instances().await?;
+
+    let inner = self.inner.lock().await;
+
+    // Convert paths to canonical form for comparison
+    let target_path = std::path::Path::new(profile_path)
+      .canonicalize()
+      .unwrap_or_else(|_| std::path::Path::new(profile_path).to_path_buf());
+
+    for (id, instance) in inner.instances.iter() {
+      if let Some(instance_profile_path) = &instance.profile_path {
+        let instance_path = std::path::Path::new(instance_profile_path)
+          .canonicalize()
+          .unwrap_or_else(|_| std::path::Path::new(instance_profile_path).to_path_buf());
+
+        if instance_path == target_path {
+          // Verify the server is actually running by checking the process
+          if let Some(process_id) = instance.process_id {
+            if self.is_server_running(process_id).await {
+              // Found running Camoufox instance
+              return Ok(Some(CamoufoxLaunchResult {
+                id: id.clone(),
+                processId: instance.process_id,
+                profilePath: instance.profile_path.clone(),
+                url: instance.url.clone(),
+              }));
+            } else {
+              // Camoufox instance found but process is not running
+            }
+          }
+        }
+      }
+    }
+
+    Ok(None)
+  }
+
+  /// Check if servers are still alive and clean up dead instances
+  pub async fn cleanup_dead_instances(
+    &self,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut dead_instances = Vec::new();
+    let mut instances_to_remove = Vec::new();
+
+    {
+      let inner = self.inner.lock().await;
+
+      for (id, instance) in inner.instances.iter() {
+        if let Some(process_id) = instance.process_id {
+          // Check if the process is still alive
+          if !self.is_server_running(process_id).await {
+            // Process is dead
+            // Camoufox instance is no longer running
+            dead_instances.push(id.clone());
+            instances_to_remove.push(id.clone());
+          }
+        } else {
+          // No process_id means it's likely a dead instance
+          // Camoufox instance has no PID, marking as dead
+          dead_instances.push(id.clone());
+          instances_to_remove.push(id.clone());
+        }
+      }
+    }
+
+    // Remove dead instances
+    if !instances_to_remove.is_empty() {
+      let mut inner = self.inner.lock().await;
+      for id in &instances_to_remove {
+        inner.instances.remove(id);
+        // Removed dead Camoufox instance
+      }
+    }
+
+    Ok(dead_instances)
+  }
+
+  /// Check if a Camoufox server is running with the given process ID
+  async fn is_server_running(&self, process_id: u32) -> bool {
+    // Check if the process is still running
+    use sysinfo::{Pid, System};
+
+    let system = System::new_all();
+    if let Some(process) = system.process(Pid::from(process_id as usize)) {
+      // Check if this is actually a Camoufox process by looking at the command line
+      let cmd = process.cmd();
+      let is_camoufox = cmd.iter().any(|arg| {
+        let arg_str = arg.to_str().unwrap_or("");
+        arg_str.contains("camoufox-worker") || arg_str.contains("camoufox")
+      });
+
+      if is_camoufox {
+        // Found running Camoufox process
+        return true;
+      }
+    }
+
+    false
+  }
+}
+
+impl CamoufoxNodecarLauncher {
+  pub async fn launch_camoufox_profile_nodecar(
+    &self,
+    app_handle: AppHandle,
+    profile: BrowserProfile,
+    config: CamoufoxConfig,
+    url: Option<String>,
+  ) -> Result<CamoufoxLaunchResult, String> {
+    // Get profile path
+    let browser_runner = crate::browser_runner::BrowserRunner::instance();
+    let profiles_dir = browser_runner.get_profiles_dir();
+    let profile_path = profile.get_profile_data_path(&profiles_dir);
+    let profile_path_str = profile_path.to_string_lossy();
+
+    // Check if there's already a running instance for this profile
+    if let Ok(Some(existing)) = self.find_camoufox_by_profile(&profile_path_str).await {
+      // If there's an existing instance, stop it first to avoid conflicts
+      let _ = self.stop_camoufox(&app_handle, &existing.id).await;
+    }
+
+    // Clean up any dead instances before launching
+    let _ = self.cleanup_dead_instances().await;
+
+    self
+      .launch_camoufox(
+        &app_handle,
+        &profile,
+        &profile_path_str,
+        &config,
+        url.as_deref(),
+      )
+      .await
+      .map_err(|e| format!("Failed to launch Camoufox via nodecar: {e}"))
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+
+  #[test]
+  fn test_camoufox_config_creation() {
+    let test_config = CamoufoxNodecarLauncher::create_test_config();
+
+    // Verify test config has expected values
+    assert_eq!(test_config.screen_max_width, Some(1440));
+    assert_eq!(test_config.screen_max_height, Some(900));
+    assert_eq!(test_config.geoip, Some(serde_json::Value::Bool(true)));
+  }
+
+  #[test]
+  fn test_default_config() {
+    let default_config = CamoufoxConfig::default();
+
+    // Verify defaults
+    assert_eq!(default_config.geoip, Some(serde_json::Value::Bool(true)));
+    assert_eq!(default_config.proxy, None);
+    assert_eq!(default_config.fingerprint, None);
+  }
+}
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref CAMOUFOX_NODECAR_LAUNCHER: CamoufoxNodecarLauncher = CamoufoxNodecarLauncher::new();
+}

src-tauri/src/default_browser.rs

@@ -1,5 +1,77 @@
 use tauri::command;
 
+pub struct DefaultBrowser;
+
+impl DefaultBrowser {
+  fn new() -> Self {
+    Self
+  }
+
+  pub fn instance() -> &'static DefaultBrowser {
+    &DEFAULT_BROWSER
+  }
+
+  pub async fn is_default_browser(&self) -> Result<bool, String> {
+    #[cfg(target_os = "macos")]
+    return macos::is_default_browser();
+
+    #[cfg(target_os = "windows")]
+    return windows::is_default_browser();
+
+    #[cfg(target_os = "linux")]
+    return linux::is_default_browser();
+
+    #[cfg(not(any(target_os = "macos", target_os = "windows", target_os = "linux")))]
+    Err("Unsupported platform".to_string())
+  }
+
+  pub async fn set_as_default_browser(&self) -> Result<(), String> {
+    #[cfg(target_os = "macos")]
+    return macos::set_as_default_browser();
+
+    #[cfg(target_os = "windows")]
+    return windows::set_as_default_browser();
+
+    #[cfg(target_os = "linux")]
+    return linux::set_as_default_browser();
+
+    #[cfg(not(any(target_os = "macos", target_os = "windows", target_os = "linux")))]
+    Err("Unsupported platform".to_string())
+  }
+
+  pub async fn open_url_with_profile(
+    &self,
+    app_handle: tauri::AppHandle,
+    profile_name: String,
+    url: String,
+  ) -> Result<(), String> {
+    let runner = crate::browser_runner::BrowserRunner::instance();
+
+    // Get the profile by name
+    let profiles = runner
+      .list_profiles()
+      .map_err(|e| format!("Failed to list profiles: {e}"))?;
+    let profile = profiles
+      .into_iter()
+      .find(|p| p.name == profile_name)
+      .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
+
+    println!("Opening URL '{url}' with profile '{profile_name}'");
+
+    // Use launch_or_open_url which handles both launching new instances and opening in existing ones
+    runner
+      .launch_or_open_url(app_handle, &profile, Some(url.clone()), None)
+      .await
+      .map_err(|e| {
+        println!("Failed to open URL with profile '{profile_name}': {e}");
+        format!("Failed to open URL with profile: {e}")
+      })?;
+
+    println!("Successfully opened URL '{url}' with profile '{profile_name}'");
+    Ok(())
+  }
+}
+
 #[cfg(target_os = "macos")]
 mod macos {
   use core_foundation::base::OSStatus;
@@ -158,7 +230,7 @@ mod windows {
     app_key
       .set_value(
         "ApplicationDescription",
-        &"Donut Browser - Simple Yet Powerful Browser Orchestrator",
+        &"Donut Browser - Simple Yet Powerful Anti-Detect Browser",
       )
       .map_err(|e| format!("Failed to set ApplicationDescription: {}", e))?;
 
@@ -174,7 +246,7 @@ mod windows {
     capabilities
       .set_value(
         "ApplicationDescription",
-        &"Donut Browser - Simple Yet Powerful Browser Orchestrator",
+        &"Donut Browser - Simple Yet Powerful Anti-Detect Browser",
       )
       .map_err(|e| format!("Failed to set Capabilities description: {}", e))?;
 
@@ -482,34 +554,21 @@ mod linux {
   }
 }
 
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref DEFAULT_BROWSER: DefaultBrowser = DefaultBrowser::new();
+}
+
 #[command]
 pub async fn is_default_browser() -> Result<bool, String> {
-  #[cfg(target_os = "macos")]
-  return macos::is_default_browser();
-
-  #[cfg(target_os = "windows")]
-  return windows::is_default_browser();
-
-  #[cfg(target_os = "linux")]
-  return linux::is_default_browser();
-
-  #[cfg(not(any(target_os = "macos", target_os = "windows", target_os = "linux")))]
-  Err("Unsupported platform".to_string())
+  let default_browser = DefaultBrowser::instance();
+  default_browser.is_default_browser().await
 }
 
 #[command]
 pub async fn set_as_default_browser() -> Result<(), String> {
-  #[cfg(target_os = "macos")]
-  return macos::set_as_default_browser();
-
-  #[cfg(target_os = "windows")]
-  return windows::set_as_default_browser();
-
-  #[cfg(target_os = "linux")]
-  return linux::set_as_default_browser();
-
-  #[cfg(not(any(target_os = "macos", target_os = "windows", target_os = "linux")))]
-  Err("Unsupported platform".to_string())
+  let default_browser = DefaultBrowser::instance();
+  default_browser.set_as_default_browser().await
 }
 
 #[tauri::command]
@@ -518,123 +577,8 @@ pub async fn open_url_with_profile(
   profile_name: String,
   url: String,
 ) -> Result<(), String> {
-  use crate::browser_runner::BrowserRunner;
-
-  let runner = BrowserRunner::new();
-
-  // Get the profile by name
-  let profiles = runner
-    .list_profiles()
-    .map_err(|e| format!("Failed to list profiles: {e}"))?;
-  let profile = profiles
-    .into_iter()
-    .find(|p| p.name == profile_name)
-    .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
-
-  println!("Opening URL '{url}' with profile '{profile_name}'");
-
-  // Use launch_or_open_url which handles both launching new instances and opening in existing ones
-  runner
-    .launch_or_open_url(app_handle, &profile, Some(url.clone()), None)
+  let default_browser = DefaultBrowser::instance();
+  default_browser
+    .open_url_with_profile(app_handle, profile_name, url)
     .await
-    .map_err(|e| {
-      println!("Failed to open URL with profile '{profile_name}': {e}");
-      format!("Failed to open URL with profile: {e}")
-    })?;
-
-  println!("Successfully opened URL '{url}' with profile '{profile_name}'");
-  Ok(())
-}
-
-#[tauri::command]
-pub async fn smart_open_url(
-  app_handle: tauri::AppHandle,
-  url: String,
-  _is_startup: Option<bool>,
-) -> Result<String, String> {
-  use crate::browser_runner::BrowserRunner;
-
-  let runner = BrowserRunner::new();
-
-  // Get all profiles
-  let profiles = runner
-    .list_profiles()
-    .map_err(|e| format!("Failed to list profiles: {e}"))?;
-
-  if profiles.is_empty() {
-    return Err("no_profiles".to_string());
-  }
-
-  println!(
-    "URL opening - Total profiles: {}, checking for running profiles",
-    profiles.len()
-  );
-
-  // Check for running profiles and find the first one that can handle URLs
-  for profile in &profiles {
-    // Check if this profile is running
-    let is_running = runner
-      .check_browser_status(app_handle.clone(), profile)
-      .await
-      .unwrap_or(false);
-
-    if is_running {
-      println!(
-        "Found running profile '{}', attempting to open URL",
-        profile.name
-      );
-
-      // For TOR browser: Check if any other TOR browser is running
-      if profile.browser == "tor-browser" {
-        let mut other_tor_running = false;
-        for p in &profiles {
-          if p.browser == "tor-browser"
-            && p.name != profile.name
-            && runner
-              .check_browser_status(app_handle.clone(), p)
-              .await
-              .unwrap_or(false)
-          {
-            other_tor_running = true;
-            break;
-          }
-        }
-
-        if other_tor_running {
-          continue; // Skip this one, can't have multiple TOR instances
-        }
-      }
-
-      // For Mullvad browser: skip if running (can't open URLs in running Mullvad)
-      if profile.browser == "mullvad-browser" {
-        continue;
-      }
-
-      // Try to open the URL with this running profile
-      match runner
-        .launch_or_open_url(app_handle.clone(), profile, Some(url.clone()), None)
-        .await
-      {
-        Ok(_) => {
-          println!(
-            "Successfully opened URL '{}' with running profile '{}'",
-            url, profile.name
-          );
-          return Ok(format!("opened_with_profile:{}", profile.name));
-        }
-        Err(e) => {
-          println!(
-            "Failed to open URL with running profile '{}': {}",
-            profile.name, e
-          );
-          // Continue to try other profiles or show selector
-        }
-      }
-    }
-  }
-
-  println!("No suitable running profiles found, showing profile selector");
-
-  // No suitable running profile found, show the profile selector
-  Err("show_selector".to_string())
 }

src-tauri/src/download.rs

@@ -23,22 +23,26 @@ pub struct DownloadProgress {
 
 pub struct Downloader {
   client: Client,
-  api_client: ApiClient,
+  api_client: &'static ApiClient,
 }
 
 impl Downloader {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
       client: Client::new(),
-      api_client: ApiClient::new(),
+      api_client: ApiClient::instance(),
     }
   }
 
+  pub fn instance() -> &'static Downloader {
+    &DOWNLOADER
+  }
+
   #[cfg(test)]
-  pub fn new_with_api_client(api_client: ApiClient) -> Self {
+  pub fn new_with_api_client(_api_client: ApiClient) -> Self {
     Self {
       client: Client::new(),
-      api_client,
+      api_client: ApiClient::instance(),
     }
   }
 
@@ -79,15 +83,29 @@ impl Downloader {
       }
       BrowserType::Zen => {
         // For Zen, verify the asset exists and handle different naming patterns
-        let releases = self
-          .api_client
-          .fetch_zen_releases_with_caching(true)
-          .await?;
+        let releases = match self.api_client.fetch_zen_releases_with_caching(true).await {
+          Ok(releases) => releases,
+          Err(e) => {
+            eprintln!("Failed to fetch Zen releases: {e}");
+            return Err(format!("Failed to fetch Zen releases from GitHub API: {e}. This might be due to GitHub API rate limiting or network issues. Please try again later.").into());
+          }
+        };
 
         let release = releases
           .iter()
           .find(|r| r.tag_name == version)
-          .ok_or(format!("Zen version {version} not found"))?;
+          .ok_or_else(|| {
+            format!(
+              "Zen version {} not found. Available versions: {}",
+              version,
+              releases
+                .iter()
+                .take(5)
+                .map(|r| r.tag_name.as_str())
+                .collect::<Vec<_>>()
+                .join(", ")
+            )
+          })?;
 
         // Get platform and architecture info
         let (os, arch) = Self::get_platform_info();
@@ -95,9 +113,17 @@ impl Downloader {
         // Find the appropriate asset
         let asset_url = self
           .find_zen_asset(&release.assets, &os, &arch)
-          .ok_or(format!(
-            "No compatible asset found for Zen version {version} on {os}/{arch}"
-          ))?;
+          .ok_or_else(|| {
+            let available_assets: Vec<&str> =
+              release.assets.iter().map(|a| a.name.as_str()).collect();
+            format!(
+              "No compatible asset found for Zen version {} on {}/{}. Available assets: {}",
+              version,
+              os,
+              arch,
+              available_assets.join(", ")
+            )
+          })?;
 
         Ok(asset_url)
       }
@@ -125,6 +151,30 @@ impl Downloader {
 
         Ok(asset_url)
       }
+      BrowserType::Camoufox => {
+        // For Camoufox, verify the asset exists and find the correct download URL
+        let releases = self
+          .api_client
+          .fetch_camoufox_releases_with_caching(true)
+          .await?;
+
+        let release = releases
+          .iter()
+          .find(|r| r.tag_name == version)
+          .ok_or(format!("Camoufox version {version} not found"))?;
+
+        // Get platform and architecture info
+        let (os, arch) = Self::get_platform_info();
+
+        // Find the appropriate asset
+        let asset_url = self
+          .find_camoufox_asset(&release.assets, &os, &arch)
+          .ok_or(format!(
+            "No compatible asset found for Camoufox version {version} on {os}/{arch}"
+          ))?;
+
+        Ok(asset_url)
+      }
       _ => {
         // For other browsers, use the provided URL
         Ok(download_info.url.clone())
@@ -299,6 +349,35 @@ impl Downloader {
     asset.map(|a| a.browser_download_url.clone())
   }
 
+  /// Find the appropriate Camoufox asset for the current platform and architecture
+  fn find_camoufox_asset(
+    &self,
+    assets: &[crate::browser::GithubAsset],
+    os: &str,
+    arch: &str,
+  ) -> Option<String> {
+    // Camoufox asset naming pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+    let (os_name, arch_name) = match (os, arch) {
+      ("windows", "x64") => ("win", "x86_64"),
+      ("windows", "arm64") => ("win", "arm64"),
+      ("linux", "x64") => ("lin", "x86_64"),
+      ("linux", "arm64") => ("lin", "arm64"),
+      ("macos", "x64") => ("mac", "x86_64"),
+      ("macos", "arm64") => ("mac", "arm64"),
+      _ => return None,
+    };
+
+    // Look for assets matching the pattern
+    let asset = assets.iter().find(|asset| {
+      let name = asset.name.to_lowercase();
+      name.starts_with("camoufox-")
+        && name.contains(&format!("-{os_name}.{arch_name}.zip"))
+        && name.ends_with(".zip")
+    });
+
+    asset.map(|a| a.browser_download_url.clone())
+  }
+
   pub async fn download_browser<R: tauri::Runtime>(
     &self,
     app_handle: &tauri::AppHandle<R>,
@@ -417,7 +496,7 @@ mod tests {
   use crate::browser_version_service::DownloadInfo;
 
   use tempfile::TempDir;
-  use wiremock::matchers::{method, path, query_param};
+  use wiremock::matchers::{method, path};
   use wiremock::{Mock, MockServer, ResponseTemplate};
 
   async fn setup_mock_server() -> MockServer {
@@ -435,153 +514,10 @@ mod tests {
     )
   }
 
-  #[tokio::test]
-  async fn test_resolve_brave_download_url() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "v1.81.9",
-        "name": "Brave Release 1.81.9",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "brave-v1.81.9-universal.dmg",
-            "browser_download_url": "https://example.com/brave-1.81.9-universal.dmg",
-            "size": 200000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/brave/brave-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "brave-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::Brave, "v1.81.9", &download_info)
-      .await;
-
-    assert!(result.is_ok());
-    let url = result.unwrap();
-    assert_eq!(url, "https://example.com/brave-1.81.9-universal.dmg");
-  }
-
-  #[tokio::test]
-  async fn test_resolve_zen_download_url() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "1.11b",
-        "name": "Zen Browser 1.11b",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "zen.macos-universal.dmg",
-            "browser_download_url": "https://example.com/zen-1.11b-universal.dmg",
-            "size": 120000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/zen-browser/desktop/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "zen-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::Zen, "1.11b", &download_info)
-      .await;
-
-    assert!(result.is_ok());
-    let url = result.unwrap();
-    assert_eq!(url, "https://example.com/zen-1.11b-universal.dmg");
-  }
-
-  #[tokio::test]
-  async fn test_resolve_mullvad_download_url() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "14.5a6",
-        "name": "Mullvad Browser 14.5a6",
-        "prerelease": true,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "mullvad-browser-macos-14.5a6.dmg",
-            "browser_download_url": "https://example.com/mullvad-14.5a6.dmg",
-            "size": 100000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/mullvad/mullvad-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "mullvad-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::MullvadBrowser, "14.5a6", &download_info)
-      .await;
-
-    assert!(result.is_ok());
-    let url = result.unwrap();
-    assert_eq!(url, "https://example.com/mullvad-14.5a6.dmg");
-  }
-
   #[tokio::test]
   async fn test_resolve_firefox_download_url() {
     let server = setup_mock_server().await;
+
     let api_client = create_test_api_client(&server);
     let downloader = Downloader::new_with_api_client(api_client);
 
@@ -642,106 +578,6 @@ mod tests {
     assert_eq!(url, download_info.url);
   }
 
-  #[tokio::test]
-  async fn test_resolve_brave_version_not_found() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "v1.81.8",
-        "name": "Brave Release 1.81.8",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "brave-v1.81.8-universal.dmg",
-            "browser_download_url": "https://example.com/brave-1.81.8-universal.dmg",
-            "size": 200000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/brave/brave-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "brave-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::Brave, "v1.81.9", &download_info)
-      .await;
-
-    assert!(result.is_err());
-    assert!(result
-      .unwrap_err()
-      .to_string()
-      .contains("Brave version v1.81.9 not found"));
-  }
-
-  #[tokio::test]
-  async fn test_resolve_zen_asset_not_found() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "1.11b",
-        "name": "Zen Browser 1.11b",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "zen.linux-universal.tar.bz2",
-            "browser_download_url": "https://example.com/zen-1.11b-linux.tar.bz2",
-            "size": 150000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/zen-browser/desktop/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "zen-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::Zen, "1.11b", &download_info)
-      .await;
-
-    assert!(result.is_err());
-    assert!(result
-      .unwrap_err()
-      .to_string()
-      .contains("No compatible asset found"));
-  }
-
   #[tokio::test]
   async fn test_download_browser_with_progress() {
     let server = setup_mock_server().await;
@@ -834,105 +670,6 @@ mod tests {
     assert!(result.is_err());
   }
 
-  #[tokio::test]
-  async fn test_resolve_mullvad_asset_not_found() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "14.5a6",
-        "name": "Mullvad Browser 14.5a6",
-        "prerelease": true,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "mullvad-browser-linux-14.5a6.tar.xz",
-            "browser_download_url": "https://example.com/mullvad-14.5a6.tar.xz",
-            "size": 80000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/mullvad/mullvad-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "mullvad-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    let result = downloader
-      .resolve_download_url(BrowserType::MullvadBrowser, "14.5a6", &download_info)
-      .await;
-
-    assert!(result.is_err());
-    assert!(result
-      .unwrap_err()
-      .to_string()
-      .contains("No compatible asset found"));
-  }
-
-  #[tokio::test]
-  async fn test_brave_version_with_v_prefix() {
-    let server = setup_mock_server().await;
-    let api_client = create_test_api_client(&server);
-    let downloader = Downloader::new_with_api_client(api_client);
-
-    let mock_response = r#"[
-      {
-        "tag_name": "v1.81.9",
-        "name": "Brave Release 1.81.9",
-        "prerelease": false,
-        "published_at": "2024-01-15T10:00:00Z",
-        "assets": [
-          {
-            "name": "brave-v1.81.9-universal.dmg",
-            "browser_download_url": "https://example.com/brave-1.81.9-universal.dmg",
-            "size": 200000000
-          }
-        ]
-      }
-    ]"#;
-
-    Mock::given(method("GET"))
-      .and(path("/repos/brave/brave-browser/releases"))
-      .and(query_param("per_page", "100"))
-      .respond_with(
-        ResponseTemplate::new(200)
-          .set_body_string(mock_response)
-          .insert_header("content-type", "application/json"),
-      )
-      .mount(&server)
-      .await;
-
-    let download_info = DownloadInfo {
-      url: "placeholder".to_string(),
-      filename: "brave-test.dmg".to_string(),
-      is_archive: true,
-    };
-
-    // Test with version without v prefix
-    let result = downloader
-      .resolve_download_url(BrowserType::Brave, "1.81.9", &download_info)
-      .await;
-
-    assert!(result.is_ok());
-    let url = result.unwrap();
-    assert_eq!(url, "https://example.com/brave-1.81.9-universal.dmg");
-  }
-
   #[tokio::test]
   async fn test_download_browser_chunked_response() {
     let server = setup_mock_server().await;
@@ -983,3 +720,8 @@ mod tests {
     assert_eq!(downloaded_content.len(), test_content.len());
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref DOWNLOADER: Downloader = Downloader::new();
+}

src-tauri/src/downloaded_browsers.rs

@@ -3,40 +3,48 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
+use std::sync::Mutex;
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct DownloadedBrowserInfo {
   pub browser: String,
   pub version: String,
-  pub download_date: u64,
   pub file_path: PathBuf,
-  pub verified: bool,
-  pub actual_version: Option<String>, // For browsers like Chromium where we track the actual version
-  pub file_size: Option<u64>, // For tracking file size changes (useful for rolling releases)
-  #[serde(default)] // Add default value (false) for backwards compatibility
-  pub is_rolling_release: bool, // True for Zen's twilight releases and other rolling releases
 }
 
 #[derive(Debug, Serialize, Deserialize, Default)]
-pub struct DownloadedBrowsersRegistry {
+struct RegistryData {
   pub browsers: HashMap<String, HashMap<String, DownloadedBrowserInfo>>, // browser -> version -> info
 }
 
+pub struct DownloadedBrowsersRegistry {
+  data: Mutex<RegistryData>,
+}
+
 impl DownloadedBrowsersRegistry {
-  pub fn new() -> Self {
-    Self::default()
+  fn new() -> Self {
+    Self {
+      data: Mutex::new(RegistryData::default()),
+    }
   }
 
-  pub fn load() -> Result<Self, Box<dyn std::error::Error + Send + Sync>> {
+  pub fn instance() -> &'static DownloadedBrowsersRegistry {
+    &DOWNLOADED_BROWSERS_REGISTRY
+  }
+
+  pub fn load(&self) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
     let registry_path = Self::get_registry_path()?;
 
     if !registry_path.exists() {
-      return Ok(Self::new());
+      return Ok(());
     }
 
     let content = fs::read_to_string(&registry_path)?;
-    let registry: DownloadedBrowsersRegistry = serde_json::from_str(&content)?;
-    Ok(registry)
+    let registry_data: RegistryData = serde_json::from_str(&content)?;
+
+    let mut data = self.data.lock().unwrap();
+    *data = registry_data;
+    Ok(())
   }
 
   pub fn save(&self) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
@@ -47,7 +55,8 @@ impl DownloadedBrowsersRegistry {
       fs::create_dir_all(parent)?;
     }
 
-    let content = serde_json::to_string_pretty(self)?;
+    let data = self.data.lock().unwrap();
+    let content = serde_json::to_string_pretty(&*data)?;
     fs::write(&registry_path, content)?;
     Ok(())
   }
@@ -65,85 +74,63 @@ impl DownloadedBrowsersRegistry {
     Ok(path)
   }
 
-  pub fn add_browser(&mut self, info: DownloadedBrowserInfo) {
-    self
+  pub fn add_browser(&self, info: DownloadedBrowserInfo) {
+    let mut data = self.data.lock().unwrap();
+    data
       .browsers
       .entry(info.browser.clone())
       .or_default()
       .insert(info.version.clone(), info);
   }
 
-  pub fn remove_browser(&mut self, browser: &str, version: &str) -> Option<DownloadedBrowserInfo> {
-    self.browsers.get_mut(browser)?.remove(version)
+  pub fn remove_browser(&self, browser: &str, version: &str) -> Option<DownloadedBrowserInfo> {
+    let mut data = self.data.lock().unwrap();
+    data.browsers.get_mut(browser)?.remove(version)
   }
 
   pub fn is_browser_downloaded(&self, browser: &str, version: &str) -> bool {
-    self
+    let data = self.data.lock().unwrap();
+    data
       .browsers
       .get(browser)
       .and_then(|versions| versions.get(version))
-      .map(|info| info.verified)
-      .unwrap_or(false)
+      .is_some()
   }
 
   pub fn get_downloaded_versions(&self, browser: &str) -> Vec<String> {
-    self
+    let data = self.data.lock().unwrap();
+    data
       .browsers
       .get(browser)
-      .map(|versions| {
-        versions
-          .iter()
-          .filter(|(_, info)| info.verified)
-          .map(|(version, _)| version.clone())
-          .collect()
-      })
+      .map(|versions| versions.keys().cloned().collect())
       .unwrap_or_default()
   }
 
-  pub fn mark_download_started(&mut self, browser: &str, version: &str, file_path: PathBuf) {
-    let is_rolling = Self::is_rolling_release(browser, version);
+  pub fn mark_download_started(&self, browser: &str, version: &str, file_path: PathBuf) {
     let info = DownloadedBrowserInfo {
       browser: browser.to_string(),
       version: version.to_string(),
-      download_date: std::time::SystemTime::now()
-        .duration_since(std::time::UNIX_EPOCH)
-        .unwrap_or_default()
-        .as_secs(),
       file_path,
-      verified: false,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: is_rolling,
     };
     self.add_browser(info);
   }
 
-  pub fn mark_download_completed_with_actual_version(
-    &mut self,
-    browser: &str,
-    version: &str,
-    actual_version: Option<String>,
-  ) -> Result<(), String> {
-    if let Some(info) = self
+  pub fn mark_download_completed(&self, browser: &str, version: &str) -> Result<(), String> {
+    let data = self.data.lock().unwrap();
+    if data
       .browsers
-      .get_mut(browser)
-      .and_then(|versions| versions.get_mut(version))
+      .get(browser)
+      .and_then(|versions| versions.get(version))
+      .is_some()
     {
-      info.verified = true;
-      info.actual_version = actual_version;
       Ok(())
     } else {
       Err(format!("Browser {browser}:{version} not found in registry"))
     }
   }
 
-  fn is_rolling_release(browser: &str, version: &str) -> bool {
-    // Check if this is a rolling release like twilight
-    browser == "zen" && version.to_lowercase() == "twilight"
-  }
-
   pub fn cleanup_failed_download(
-    &mut self,
+    &self,
     browser: &str,
     version: &str,
   ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
@@ -178,19 +165,39 @@ impl DownloadedBrowsersRegistry {
 
   /// Find and remove unused browser binaries that are not referenced by any active profiles
   pub fn cleanup_unused_binaries(
-    &mut self,
+    &self,
     active_profiles: &[(String, String)], // (browser, version) pairs
+    running_profiles: &[(String, String)], // (browser, version) pairs for running profiles
   ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
     let active_set: std::collections::HashSet<(String, String)> =
       active_profiles.iter().cloned().collect();
+    let running_set: std::collections::HashSet<(String, String)> =
+      running_profiles.iter().cloned().collect();
     let mut cleaned_up = Vec::new();
 
     // Collect all downloaded browsers that are not in active profiles
     let mut to_remove = Vec::new();
-    for (browser, versions) in &self.browsers {
-      for (version, info) in versions {
-        if info.verified && !active_set.contains(&(browser.clone(), version.clone())) {
-          to_remove.push((browser.clone(), version.clone()));
+    {
+      let data = self.data.lock().unwrap();
+      for (browser, versions) in &data.browsers {
+        for version in versions.keys() {
+          let browser_version = (browser.clone(), version.clone());
+
+          // Don't remove if it's used by any active profile
+          if active_set.contains(&browser_version) {
+            println!("Keeping: {browser} {version} (in use by profile)");
+            continue;
+          }
+
+          // Don't remove if it's currently running (even if not in active profiles)
+          if running_set.contains(&browser_version) {
+            println!("Keeping: {browser} {version} (currently running)");
+            continue;
+          }
+
+          // Mark for removal
+          to_remove.push(browser_version);
+          println!("Marking for removal: {browser} {version} (not used by any profile)");
         }
       }
     }
@@ -201,22 +208,224 @@ impl DownloadedBrowsersRegistry {
         eprintln!("Failed to cleanup unused binary {browser}:{version}: {e}");
       } else {
         cleaned_up.push(format!("{browser} {version}"));
+        println!("Successfully removed unused binary: {browser} {version}");
       }
     }
 
+    if cleaned_up.is_empty() {
+      println!("No unused binaries found to clean up");
+    } else {
+      println!("Cleaned up {} unused binaries", cleaned_up.len());
+    }
+
     Ok(cleaned_up)
   }
 
   /// Get all browsers and versions referenced by active profiles
   pub fn get_active_browser_versions(
     &self,
-    profiles: &[crate::browser_runner::BrowserProfile],
+    profiles: &[crate::profile::BrowserProfile],
   ) -> Vec<(String, String)> {
     profiles
       .iter()
       .map(|profile| (profile.browser.clone(), profile.version.clone()))
       .collect()
   }
+
+  /// Verify that all registered browsers actually exist on disk and clean up stale entries
+  pub fn verify_and_cleanup_stale_entries(
+    &self,
+    browser_runner: &crate::browser_runner::BrowserRunner,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    use crate::browser::{create_browser, BrowserType};
+    let mut cleaned_up = Vec::new();
+    let binaries_dir = browser_runner.get_binaries_dir();
+
+    let browsers_to_check: Vec<(String, String)> = {
+      let data = self.data.lock().unwrap();
+      data
+        .browsers
+        .iter()
+        .flat_map(|(browser, versions)| {
+          versions
+            .keys()
+            .map(|version| (browser.clone(), version.clone()))
+        })
+        .collect()
+    };
+
+    for (browser_str, version) in browsers_to_check {
+      if let Ok(browser_type) = BrowserType::from_str(&browser_str) {
+        let browser = create_browser(browser_type);
+        if !browser.is_version_downloaded(&version, &binaries_dir) {
+          // Files don't exist, remove from registry
+          if let Some(_removed) = self.remove_browser(&browser_str, &version) {
+            cleaned_up.push(format!("{browser_str} {version}"));
+            println!("Removed stale registry entry for {browser_str} {version}");
+          }
+        }
+      }
+    }
+
+    if !cleaned_up.is_empty() {
+      self.save()?;
+    }
+
+    Ok(cleaned_up)
+  }
+
+  /// Get all browsers and versions that are currently running
+  pub fn get_running_browser_versions(
+    &self,
+    profiles: &[crate::profile::BrowserProfile],
+  ) -> Vec<(String, String)> {
+    profiles
+      .iter()
+      .filter(|profile| profile.process_id.is_some())
+      .map(|profile| (profile.browser.clone(), profile.version.clone()))
+      .collect()
+  }
+
+  /// Scan the binaries directory and sync with registry
+  /// This ensures the registry reflects what's actually on disk
+  pub fn sync_with_binaries_directory(
+    &self,
+    binaries_dir: &std::path::Path,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut changes = Vec::new();
+
+    if !binaries_dir.exists() {
+      return Ok(changes);
+    }
+
+    // Scan for actual browser directories
+    for browser_entry in fs::read_dir(binaries_dir)? {
+      let browser_entry = browser_entry?;
+      let browser_path = browser_entry.path();
+
+      if !browser_path.is_dir() {
+        continue;
+      }
+
+      let browser_name = browser_path
+        .file_name()
+        .and_then(|n| n.to_str())
+        .unwrap_or("");
+
+      if browser_name.is_empty() || browser_name.starts_with('.') {
+        continue;
+      }
+
+      // Scan for version directories within this browser
+      for version_entry in fs::read_dir(&browser_path)? {
+        let version_entry = version_entry?;
+        let version_path = version_entry.path();
+
+        if !version_path.is_dir() {
+          continue;
+        }
+
+        let version_name = version_path
+          .file_name()
+          .and_then(|n| n.to_str())
+          .unwrap_or("");
+
+        if version_name.is_empty() || version_name.starts_with('.') {
+          continue;
+        }
+
+        // Check if this browser/version is already in registry
+        if !self.is_browser_downloaded(browser_name, version_name) {
+          // Add to registry
+          let info = DownloadedBrowserInfo {
+            browser: browser_name.to_string(),
+            version: version_name.to_string(),
+            file_path: version_path.clone(),
+          };
+          self.add_browser(info);
+          changes.push(format!("Added {browser_name} {version_name} to registry"));
+        }
+      }
+    }
+
+    if !changes.is_empty() {
+      self.save()?;
+    }
+
+    Ok(changes)
+  }
+
+  /// Comprehensive cleanup that removes unused binaries and syncs registry
+  pub fn comprehensive_cleanup(
+    &self,
+    binaries_dir: &std::path::Path,
+    active_profiles: &[(String, String)],
+    running_profiles: &[(String, String)],
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut cleanup_results = Vec::new();
+
+    // First, sync registry with actual binaries on disk
+    let sync_results = self.sync_with_binaries_directory(binaries_dir)?;
+    cleanup_results.extend(sync_results);
+
+    // Then perform the regular cleanup
+    let regular_cleanup = self.cleanup_unused_binaries(active_profiles, running_profiles)?;
+    cleanup_results.extend(regular_cleanup);
+
+    // Finally, verify and cleanup stale entries
+    let stale_cleanup = self.verify_and_cleanup_stale_entries_simple(binaries_dir)?;
+    cleanup_results.extend(stale_cleanup);
+
+    if !cleanup_results.is_empty() {
+      self.save()?;
+    }
+
+    Ok(cleanup_results)
+  }
+
+  /// Simplified version of verify_and_cleanup_stale_entries that doesn't need BrowserRunner
+  pub fn verify_and_cleanup_stale_entries_simple(
+    &self,
+    binaries_dir: &std::path::Path,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut cleaned_up = Vec::new();
+    let mut browsers_to_remove = Vec::new();
+
+    {
+      let data = self.data.lock().unwrap();
+      for (browser_str, versions) in &data.browsers {
+        for version in versions.keys() {
+          // Check if the browser directory actually exists
+          let browser_dir = binaries_dir.join(browser_str).join(version);
+          if !browser_dir.exists() {
+            browsers_to_remove.push((browser_str.clone(), version.clone()));
+          }
+        }
+      }
+    }
+
+    // Remove stale entries
+    for (browser_str, version) in browsers_to_remove {
+      if let Some(_removed) = self.remove_browser(&browser_str, &version) {
+        cleaned_up.push(format!(
+          "Removed stale registry entry for {browser_str} {version}"
+        ));
+      }
+    }
+
+    Ok(cleaned_up)
+  }
+}
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref DOWNLOADED_BROWSERS_REGISTRY: DownloadedBrowsersRegistry = {
+    let registry = DownloadedBrowsersRegistry::new();
+    if let Err(e) = registry.load() {
+      eprintln!("Warning: Failed to load downloaded browsers registry: {e}");
+    }
+    registry
+  };
 }
 
 #[cfg(test)]
@@ -226,21 +435,17 @@ mod tests {
   #[test]
   fn test_registry_creation() {
     let registry = DownloadedBrowsersRegistry::new();
-    assert!(registry.browsers.is_empty());
+    let data = registry.data.lock().unwrap();
+    assert!(data.browsers.is_empty());
   }
 
   #[test]
   fn test_add_and_get_browser() {
-    let mut registry = DownloadedBrowsersRegistry::new();
+    let registry = DownloadedBrowsersRegistry::new();
     let info = DownloadedBrowserInfo {
       browser: "firefox".to_string(),
       version: "139.0".to_string(),
-      download_date: 1234567890,
       file_path: PathBuf::from("/test/path"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
     };
 
     registry.add_browser(info.clone());
@@ -252,39 +457,24 @@ mod tests {
 
   #[test]
   fn test_get_downloaded_versions() {
-    let mut registry = DownloadedBrowsersRegistry::new();
+    let registry = DownloadedBrowsersRegistry::new();
 
     let info1 = DownloadedBrowserInfo {
       browser: "firefox".to_string(),
       version: "139.0".to_string(),
-      download_date: 1234567890,
       file_path: PathBuf::from("/test/path1"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
     };
 
     let info2 = DownloadedBrowserInfo {
       browser: "firefox".to_string(),
       version: "140.0".to_string(),
-      download_date: 1234567891,
       file_path: PathBuf::from("/test/path2"),
-      verified: false, // Not verified, should not be included
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
     };
 
     let info3 = DownloadedBrowserInfo {
       browser: "firefox".to_string(),
       version: "141.0".to_string(),
-      download_date: 1234567892,
       file_path: PathBuf::from("/test/path3"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
     };
 
     registry.add_browser(info1);
@@ -292,43 +482,38 @@ mod tests {
     registry.add_browser(info3);
 
     let versions = registry.get_downloaded_versions("firefox");
-    assert_eq!(versions.len(), 2);
+    assert_eq!(versions.len(), 3);
     assert!(versions.contains(&"139.0".to_string()));
+    assert!(versions.contains(&"140.0".to_string()));
     assert!(versions.contains(&"141.0".to_string()));
-    assert!(!versions.contains(&"140.0".to_string()));
   }
 
   #[test]
   fn test_mark_download_lifecycle() {
-    let mut registry = DownloadedBrowsersRegistry::new();
+    let registry = DownloadedBrowsersRegistry::new();
 
     // Mark download started
     registry.mark_download_started("firefox", "139.0", PathBuf::from("/test/path"));
 
-    // Should not be considered downloaded yet
-    assert!(!registry.is_browser_downloaded("firefox", "139.0"));
+    // Should be considered downloaded immediately
+    assert!(registry.is_browser_downloaded("firefox", "139.0"));
 
     // Mark as completed
     registry
-      .mark_download_completed_with_actual_version("firefox", "139.0", Some("139.0".to_string()))
+      .mark_download_completed("firefox", "139.0")
       .unwrap();
 
-    // Now should be considered downloaded
+    // Should still be considered downloaded
     assert!(registry.is_browser_downloaded("firefox", "139.0"));
   }
 
   #[test]
   fn test_remove_browser() {
-    let mut registry = DownloadedBrowsersRegistry::new();
+    let registry = DownloadedBrowsersRegistry::new();
     let info = DownloadedBrowserInfo {
       browser: "firefox".to_string(),
       version: "139.0".to_string(),
-      download_date: 1234567890,
       file_path: PathBuf::from("/test/path"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
     };
 
     registry.add_browser(info);
@@ -340,15 +525,13 @@ mod tests {
   }
 
   #[test]
-  fn test_twilight_rolling_release() {
-    let mut registry = DownloadedBrowsersRegistry::new();
+  fn test_twilight_download() {
+    let registry = DownloadedBrowsersRegistry::new();
 
     // Mark twilight download started
     registry.mark_download_started("zen", "twilight", PathBuf::from("/test/zen-twilight"));
 
-    // Check that it's marked as rolling release
-    let zen_versions = &registry.browsers["zen"];
-    let twilight_info = &zen_versions["twilight"];
-    assert!(twilight_info.is_rolling_release);
+    // Check that it's registered
+    assert!(registry.is_browser_downloaded("zen", "twilight"));
   }
 }

src-tauri/src/extraction.rs

@@ -9,10 +9,14 @@ use crate::download::DownloadProgress;
 pub struct Extractor;
 
 impl Extractor {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self
   }
 
+  pub fn instance() -> &'static Extractor {
+    &EXTRACTOR
+  }
+
   pub async fn extract_browser(
     &self,
     app_handle: &tauri::AppHandle,
@@ -1329,15 +1333,9 @@ mod tests {
   use std::io::Write;
   use tempfile::TempDir;
 
-  #[test]
-  fn test_extractor_creation() {
-    let _ = Extractor::new();
-    // Just verify we can create an extractor instance
-  }
-
   #[test]
   fn test_unsupported_archive_format() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
     let fake_archive = temp_dir.path().join("test.rar");
 
@@ -1353,7 +1351,7 @@ mod tests {
 
   #[test]
   fn test_format_detection_zip() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
     let zip_path = temp_dir.path().join("test.zip");
 
@@ -1369,7 +1367,7 @@ mod tests {
 
   #[test]
   fn test_format_detection_dmg_by_extension() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
     let dmg_path = temp_dir.path().join("test.dmg");
 
@@ -1384,7 +1382,7 @@ mod tests {
 
   #[test]
   fn test_format_detection_exe() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
     let exe_path = temp_dir.path().join("test.exe");
 
@@ -1400,7 +1398,7 @@ mod tests {
 
   #[test]
   fn test_format_detection_tar_gz() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
     let tar_gz_path = temp_dir.path().join("test.tar.gz");
 
@@ -1443,7 +1441,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_app_at_root_level() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create a Firefox.app directory
@@ -1471,7 +1469,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_app_in_subdirectory() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create a nested structure like some browsers have
@@ -1503,7 +1501,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_app_multiple_levels_deep() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create a deeply nested structure
@@ -1536,7 +1534,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_app_no_app_found() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create some files and directories that are NOT .app bundles
@@ -1559,7 +1557,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_app_recursive_depth_limit() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create a very deep nested structure (deeper than our limit of 4)
@@ -1581,7 +1579,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_find_macos_app_and_move_from_subdir() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create a nested structure where the app is in a subdirectory
@@ -1619,7 +1617,7 @@ mod tests {
   #[tokio::test]
   #[cfg(target_os = "macos")]
   async fn test_multiple_apps_found_returns_first() {
-    let extractor = Extractor::new();
+    let extractor = Extractor::instance();
     let temp_dir = TempDir::new().unwrap();
 
     // Create multiple .app directories
@@ -1684,3 +1682,8 @@ mod tests {
     }
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref EXTRACTOR: Extractor = Extractor::new();
+}

src-tauri/src/geoip_downloader.rs

@@ -0,0 +1,308 @@
+use crate::browser::GithubRelease;
+use directories::BaseDirs;
+use reqwest::Client;
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use tauri::Emitter;
+use tokio::fs;
+use tokio::io::AsyncWriteExt;
+
+const MMDB_REPO: &str = "P3TERX/GeoLite.mmdb";
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GeoIPDownloadProgress {
+  pub stage: String, // "downloading", "extracting", "completed"
+  pub percentage: f64,
+  pub message: String,
+}
+
+pub struct GeoIPDownloader {
+  client: Client,
+}
+
+impl GeoIPDownloader {
+  fn new() -> Self {
+    Self {
+      client: Client::new(),
+    }
+  }
+
+  pub fn instance() -> &'static GeoIPDownloader {
+    &GEOIP_DOWNLOADER
+  }
+
+  /// Create a new downloader with custom client (for testing)
+  #[cfg(test)]
+  pub fn new_with_client(client: Client) -> Self {
+    Self { client }
+  }
+
+  fn get_cache_dir() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
+    let base_dirs = BaseDirs::new().ok_or("Failed to determine base directories")?;
+
+    #[cfg(target_os = "windows")]
+    let cache_dir = base_dirs
+      .data_local_dir()
+      .join("camoufox")
+      .join("camoufox")
+      .join("Cache");
+
+    #[cfg(target_os = "macos")]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    #[cfg(target_os = "linux")]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    #[cfg(not(any(target_os = "windows", target_os = "macos", target_os = "linux")))]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    Ok(cache_dir)
+  }
+
+  fn get_mmdb_file_path() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
+    Ok(Self::get_cache_dir()?.join("GeoLite2-City.mmdb"))
+  }
+
+  pub fn is_geoip_database_available() -> bool {
+    if let Ok(mmdb_path) = Self::get_mmdb_file_path() {
+      mmdb_path.exists()
+    } else {
+      false
+    }
+  }
+
+  fn find_city_mmdb_asset(&self, release: &GithubRelease) -> Option<String> {
+    for asset in &release.assets {
+      if asset.name.ends_with("-City.mmdb") {
+        return Some(asset.browser_download_url.clone());
+      }
+    }
+    None
+  }
+
+  pub async fn download_geoip_database(
+    &self,
+    app_handle: &tauri::AppHandle,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    // Emit initial progress
+    let _ = app_handle.emit(
+      "geoip-download-progress",
+      GeoIPDownloadProgress {
+        stage: "downloading".to_string(),
+        percentage: 0.0,
+        message: "Starting GeoIP database download".to_string(),
+      },
+    );
+
+    // Fetch latest release from GitHub
+    let releases = self.fetch_geoip_releases().await?;
+    let latest_release = releases.first().ok_or("No GeoIP database releases found")?;
+
+    let download_url = self
+      .find_city_mmdb_asset(latest_release)
+      .ok_or("No compatible GeoIP database asset found")?;
+
+    // Create cache directory
+    let cache_dir = Self::get_cache_dir()?;
+    fs::create_dir_all(&cache_dir).await?;
+
+    let mmdb_path = Self::get_mmdb_file_path()?;
+
+    // Download the file
+    let response = self.client.get(&download_url).send().await?;
+
+    if !response.status().is_success() {
+      return Err(
+        format!(
+          "Failed to download GeoIP database: HTTP {}",
+          response.status()
+        )
+        .into(),
+      );
+    }
+
+    let total_size = response.content_length().unwrap_or(0);
+    let mut downloaded = 0;
+    let mut file = fs::File::create(&mmdb_path).await?;
+    let mut stream = response.bytes_stream();
+
+    use futures_util::StreamExt;
+    while let Some(chunk) = stream.next().await {
+      let chunk = chunk?;
+      downloaded += chunk.len() as u64;
+      file.write_all(&chunk).await?;
+
+      if total_size > 0 {
+        let percentage = (downloaded as f64 / total_size as f64) * 100.0;
+        let _ = app_handle.emit(
+          "geoip-download-progress",
+          GeoIPDownloadProgress {
+            stage: "downloading".to_string(),
+            percentage,
+            message: format!("Downloaded {downloaded} / {total_size} bytes"),
+          },
+        );
+      }
+    }
+
+    file.flush().await?;
+
+    // Emit completion
+    let _ = app_handle.emit(
+      "geoip-download-progress",
+      GeoIPDownloadProgress {
+        stage: "completed".to_string(),
+        percentage: 100.0,
+        message: "GeoIP database download completed".to_string(),
+      },
+    );
+
+    Ok(())
+  }
+
+  async fn fetch_geoip_releases(
+    &self,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    let url = format!("https://api.github.com/repos/{MMDB_REPO}/releases");
+    let response = self
+      .client
+      .get(&url)
+      .header("User-Agent", "Mozilla/5.0 (compatible; donutbrowser)")
+      .send()
+      .await?;
+
+    if !response.status().is_success() {
+      return Err(format!("Failed to fetch releases: HTTP {}", response.status()).into());
+    }
+
+    let releases: Vec<GithubRelease> = response.json().await?;
+    Ok(releases)
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+  use crate::browser::GithubRelease;
+  use wiremock::matchers::{method, path};
+  use wiremock::{Mock, MockServer, ResponseTemplate};
+
+  fn create_mock_release() -> GithubRelease {
+    GithubRelease {
+      tag_name: "v1.0.0".to_string(),
+      name: "Test Release".to_string(),
+      body: Some("Test release body".to_string()),
+      published_at: "2023-01-01T00:00:00Z".to_string(),
+      created_at: Some("2023-01-01T00:00:00Z".to_string()),
+      html_url: Some("https://example.com/release".to_string()),
+      tarball_url: Some("https://example.com/tarball".to_string()),
+      zipball_url: Some("https://example.com/zipball".to_string()),
+      draft: false,
+      prerelease: false,
+      is_nightly: false,
+      id: Some(1),
+      node_id: Some("test_node_id".to_string()),
+      target_commitish: None,
+      assets: vec![crate::browser::GithubAsset {
+        id: Some(1),
+        node_id: Some("test_asset_node_id".to_string()),
+        name: "GeoLite2-City.mmdb".to_string(),
+        label: None,
+        content_type: Some("application/octet-stream".to_string()),
+        state: Some("uploaded".to_string()),
+        size: 1024,
+        download_count: Some(0),
+        created_at: Some("2023-01-01T00:00:00Z".to_string()),
+        updated_at: Some("2023-01-01T00:00:00Z".to_string()),
+        browser_download_url: "https://example.com/GeoLite2-City.mmdb".to_string(),
+      }],
+    }
+  }
+
+  #[tokio::test]
+  async fn test_fetch_geoip_releases_success() {
+    let mock_server = MockServer::start().await;
+    let releases = vec![create_mock_release()];
+
+    Mock::given(method("GET"))
+      .and(path(format!("/repos/{MMDB_REPO}/releases")))
+      .respond_with(ResponseTemplate::new(200).set_body_json(&releases))
+      .mount(&mock_server)
+      .await;
+
+    let client = Client::builder()
+      .build()
+      .expect("Failed to create HTTP client");
+
+    let downloader = GeoIPDownloader::new_with_client(client);
+
+    // Override the URL for testing
+    let url = format!("{}/repos/{}/releases", mock_server.uri(), MMDB_REPO);
+    let response = downloader
+      .client
+      .get(&url)
+      .header("User-Agent", "Mozilla/5.0 (compatible; donutbrowser)")
+      .send()
+      .await
+      .expect("Request should succeed");
+
+    assert!(response.status().is_success());
+
+    let fetched_releases: Vec<GithubRelease> = response.json().await.expect("Should parse JSON");
+    assert_eq!(fetched_releases.len(), 1);
+    assert_eq!(fetched_releases[0].tag_name, "v1.0.0");
+  }
+
+  #[tokio::test]
+  async fn test_find_city_mmdb_asset() {
+    let downloader = GeoIPDownloader::new();
+    let release = create_mock_release();
+
+    let asset_url = downloader.find_city_mmdb_asset(&release);
+    assert!(asset_url.is_some());
+    assert_eq!(asset_url.unwrap(), "https://example.com/GeoLite2-City.mmdb");
+  }
+
+  #[tokio::test]
+  async fn test_find_city_mmdb_asset_not_found() {
+    let downloader = GeoIPDownloader::new();
+    let mut release = create_mock_release();
+    release.assets[0].name = "wrong-file.txt".to_string();
+
+    let asset_url = downloader.find_city_mmdb_asset(&release);
+    assert!(asset_url.is_none());
+  }
+
+  #[test]
+  fn test_get_cache_dir() {
+    let cache_dir = GeoIPDownloader::get_cache_dir();
+    assert!(cache_dir.is_ok());
+
+    let path = cache_dir.unwrap();
+    assert!(path.to_string_lossy().contains("camoufox"));
+  }
+
+  #[test]
+  fn test_get_mmdb_file_path() {
+    let mmdb_path = GeoIPDownloader::get_mmdb_file_path();
+    assert!(mmdb_path.is_ok());
+
+    let path = mmdb_path.unwrap();
+    assert!(path.to_string_lossy().ends_with("GeoLite2-City.mmdb"));
+  }
+
+  #[test]
+  fn test_is_geoip_database_available() {
+    // This test will return false unless the database actually exists
+    // In a real environment, this would check the actual file system
+    let is_available = GeoIPDownloader::is_geoip_database_available();
+    // We can't assert a specific value since it depends on the system state
+    // But we can verify the function doesn't panic
+    println!("GeoIP database available: {is_available}");
+  }
+}
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref GEOIP_DOWNLOADER: GeoIPDownloader = GeoIPDownloader::new();
+}

src-tauri/src/group_manager.rs

@@ -0,0 +1,255 @@
+use directories::BaseDirs;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs;
+use std::path::PathBuf;
+use std::sync::Mutex;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProfileGroup {
+  pub id: String,
+  pub name: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GroupWithCount {
+  pub id: String,
+  pub name: String,
+  pub count: usize,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct GroupsData {
+  groups: Vec<ProfileGroup>,
+}
+
+pub struct GroupManager {
+  base_dirs: BaseDirs,
+}
+
+impl GroupManager {
+  pub fn new() -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+    }
+  }
+
+  fn get_groups_file_path(&self) -> PathBuf {
+    let mut path = self.base_dirs.data_local_dir().to_path_buf();
+    path.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    path.push("data");
+    path.push("groups.json");
+    path
+  }
+
+  fn load_groups_data(&self) -> Result<GroupsData, Box<dyn std::error::Error>> {
+    let groups_file = self.get_groups_file_path();
+
+    if !groups_file.exists() {
+      return Ok(GroupsData { groups: Vec::new() });
+    }
+
+    let content = fs::read_to_string(groups_file)?;
+    let groups_data: GroupsData = serde_json::from_str(&content)?;
+    Ok(groups_data)
+  }
+
+  fn save_groups_data(&self, groups_data: &GroupsData) -> Result<(), Box<dyn std::error::Error>> {
+    let groups_file = self.get_groups_file_path();
+
+    // Ensure the parent directory exists
+    if let Some(parent) = groups_file.parent() {
+      fs::create_dir_all(parent)?;
+    }
+
+    let json = serde_json::to_string_pretty(groups_data)?;
+    fs::write(groups_file, json)?;
+    Ok(())
+  }
+
+  pub fn get_all_groups(&self) -> Result<Vec<ProfileGroup>, Box<dyn std::error::Error>> {
+    let groups_data = self.load_groups_data()?;
+    Ok(groups_data.groups)
+  }
+
+  pub fn create_group(&self, name: String) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
+    let mut groups_data = self.load_groups_data()?;
+
+    // Check if group with this name already exists
+    if groups_data.groups.iter().any(|g| g.name == name) {
+      return Err(format!("Group with name '{name}' already exists").into());
+    }
+
+    let group = ProfileGroup {
+      id: uuid::Uuid::new_v4().to_string(),
+      name,
+    };
+
+    groups_data.groups.push(group.clone());
+    self.save_groups_data(&groups_data)?;
+
+    Ok(group)
+  }
+
+  pub fn update_group(
+    &self,
+    id: String,
+    name: String,
+  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
+    let mut groups_data = self.load_groups_data()?;
+
+    // Check if another group with this name already exists
+    if groups_data
+      .groups
+      .iter()
+      .any(|g| g.name == name && g.id != id)
+    {
+      return Err(format!("Group with name '{name}' already exists").into());
+    }
+
+    let group = groups_data
+      .groups
+      .iter_mut()
+      .find(|g| g.id == id)
+      .ok_or_else(|| format!("Group with id '{id}' not found"))?;
+
+    group.name = name;
+    let updated_group = group.clone();
+
+    self.save_groups_data(&groups_data)?;
+    Ok(updated_group)
+  }
+
+  pub fn delete_group(&self, id: String) -> Result<(), Box<dyn std::error::Error>> {
+    let mut groups_data = self.load_groups_data()?;
+
+    let initial_len = groups_data.groups.len();
+    groups_data.groups.retain(|g| g.id != id);
+
+    if groups_data.groups.len() == initial_len {
+      return Err(format!("Group with id '{id}' not found").into());
+    }
+
+    self.save_groups_data(&groups_data)?;
+    Ok(())
+  }
+
+  pub fn get_groups_with_profile_counts(
+    &self,
+    profiles: &[crate::profile::BrowserProfile],
+  ) -> Result<Vec<GroupWithCount>, Box<dyn std::error::Error>> {
+    let groups = self.get_all_groups()?;
+    let mut group_counts = HashMap::new();
+
+    // Count profiles in each group
+    for profile in profiles {
+      if let Some(group_id) = &profile.group_id {
+        *group_counts.entry(group_id.clone()).or_insert(0) += 1;
+      }
+    }
+
+    // Create result with counts
+    let mut result = Vec::new();
+    for group in groups {
+      let count = group_counts.get(&group.id).copied().unwrap_or(0);
+      if count > 0 {
+        result.push(GroupWithCount {
+          id: group.id,
+          name: group.name,
+          count,
+        });
+      }
+    }
+
+    // Add default group count (profiles without group_id)
+    let default_count = profiles.iter().filter(|p| p.group_id.is_none()).count();
+    if default_count > 0 {
+      let default_group = GroupWithCount {
+        id: "default".to_string(),
+        name: "Default".to_string(),
+        count: default_count,
+      };
+      result.insert(0, default_group);
+    }
+
+    Ok(result)
+  }
+}
+
+// Global instance
+lazy_static::lazy_static! {
+  pub static ref GROUP_MANAGER: Mutex<GroupManager> = Mutex::new(GroupManager::new());
+}
+
+// Helper function to get groups with counts
+pub fn get_groups_with_counts(profiles: &[crate::profile::BrowserProfile]) -> Vec<GroupWithCount> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .get_groups_with_profile_counts(profiles)
+    .unwrap_or_default()
+}
+
+// Tauri commands
+#[tauri::command]
+pub async fn get_profile_groups() -> Result<Vec<ProfileGroup>, String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .get_all_groups()
+    .map_err(|e| format!("Failed to get profile groups: {e}"))
+}
+
+#[tauri::command]
+pub async fn get_groups_with_profile_counts() -> Result<Vec<GroupWithCount>, String> {
+  let profile_manager = crate::profile::ProfileManager::instance();
+  let profiles = profile_manager
+    .list_profiles()
+    .map_err(|e| format!("Failed to list profiles: {e}"))?;
+  Ok(get_groups_with_counts(&profiles))
+}
+
+#[tauri::command]
+pub async fn create_profile_group(name: String) -> Result<ProfileGroup, String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .create_group(name)
+    .map_err(|e| format!("Failed to create group: {e}"))
+}
+
+#[tauri::command]
+pub async fn update_profile_group(group_id: String, name: String) -> Result<ProfileGroup, String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .update_group(group_id, name)
+    .map_err(|e| format!("Failed to update group: {e}"))
+}
+
+#[tauri::command]
+pub async fn delete_profile_group(group_id: String) -> Result<(), String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .delete_group(group_id)
+    .map_err(|e| format!("Failed to delete group: {e}"))
+}
+
+#[tauri::command]
+pub async fn assign_profiles_to_group(
+  profile_names: Vec<String>,
+  group_id: Option<String>,
+) -> Result<(), String> {
+  let profile_manager = crate::profile::ProfileManager::instance();
+  profile_manager
+    .assign_profiles_to_group(profile_names, group_id)
+    .map_err(|e| format!("Failed to assign profiles to group: {e}"))
+}
+
+#[tauri::command]
+pub async fn delete_selected_profiles(profile_names: Vec<String>) -> Result<(), String> {
+  let profile_manager = crate::profile::ProfileManager::instance();
+  profile_manager
+    .delete_multiple_profiles(profile_names)
+    .map_err(|e| format!("Failed to delete profiles: {e}"))
+}

src-tauri/src/lib.rs

@@ -13,10 +13,15 @@ mod auto_updater;
 mod browser;
 mod browser_runner;
 mod browser_version_service;
+mod camoufox;
 mod default_browser;
 mod download;
 mod downloaded_browsers;
 mod extraction;
+mod geoip_downloader;
+mod group_manager;
+mod platform_browser;
+mod profile;
 mod profile_importer;
 mod proxy_manager;
 mod settings_manager;
@@ -26,12 +31,13 @@ mod version_updater;
 extern crate lazy_static;
 
 use browser_runner::{
-  check_browser_exists, check_browser_status, create_browser_profile_new, delete_profile,
-  download_browser, fetch_browser_versions_cached_first, fetch_browser_versions_with_count,
-  fetch_browser_versions_with_count_cached_first, get_browser_release_types,
-  get_downloaded_browser_versions, get_supported_browsers, is_browser_supported_on_platform,
-  kill_browser_profile, launch_browser_profile, list_browser_profiles, rename_profile,
-  update_profile_proxy, update_profile_version,
+  check_browser_exists, check_browser_status, check_missing_binaries, create_browser_profile_new,
+  delete_profile, download_browser, ensure_all_binaries_exist, fetch_browser_versions_cached_first,
+  fetch_browser_versions_with_count, fetch_browser_versions_with_count_cached_first,
+  get_browser_release_types, get_downloaded_browser_versions, get_supported_browsers,
+  is_browser_supported_on_platform, kill_browser_profile, launch_browser_profile,
+  list_browser_profiles, rename_profile, update_camoufox_config, update_profile_proxy,
+  update_profile_version,
 };
 
 use settings_manager::{
@@ -39,9 +45,7 @@ use settings_manager::{
   save_app_settings, save_table_sorting_settings, should_show_settings_on_startup,
 };
 
-use default_browser::{
-  is_default_browser, open_url_with_profile, set_as_default_browser, smart_open_url,
-};
+use default_browser::{is_default_browser, open_url_with_profile, set_as_default_browser};
 
 use version_updater::{
   get_version_update_status, get_version_updater, trigger_manual_version_update,
@@ -60,6 +64,11 @@ use profile_importer::{detect_existing_profiles, import_browser_profile};
 
 use theme_detector::get_system_theme;
 
+use group_manager::{
+  assign_profiles_to_group, create_profile_group, delete_profile_group, delete_selected_profiles,
+  get_groups_with_profile_counts, get_profile_groups, update_profile_group,
+};
+
 // Trait to extend WebviewWindow with transparent titlebar functionality
 pub trait WindowExt {
   #[cfg(target_os = "macos")]
@@ -132,46 +141,36 @@ async fn handle_url_open(app: tauri::AppHandle, url: String) -> Result<(), Strin
 }
 
 #[tauri::command]
-async fn check_and_handle_startup_url(app_handle: tauri::AppHandle) -> Result<bool, String> {
-  println!("check_and_handle_startup_url called");
+async fn create_stored_proxy(
+  name: String,
+  proxy_settings: crate::browser::ProxySettings,
+) -> Result<crate::proxy_manager::StoredProxy, String> {
+  crate::proxy_manager::PROXY_MANAGER
+    .create_stored_proxy(name, proxy_settings)
+    .map_err(|e| format!("Failed to create stored proxy: {e}"))
+}
 
-  let pending_urls = {
-    let mut pending = PENDING_URLS.lock().unwrap();
-    let urls = pending.clone();
-    pending.clear(); // Clear after getting them
-    urls
-  };
+#[tauri::command]
+async fn get_stored_proxies() -> Result<Vec<crate::proxy_manager::StoredProxy>, String> {
+  Ok(crate::proxy_manager::PROXY_MANAGER.get_stored_proxies())
+}
 
-  println!("Found {} pending URLs", pending_urls.len());
+#[tauri::command]
+async fn update_stored_proxy(
+  proxy_id: String,
+  name: Option<String>,
+  proxy_settings: Option<crate::browser::ProxySettings>,
+) -> Result<crate::proxy_manager::StoredProxy, String> {
+  crate::proxy_manager::PROXY_MANAGER
+    .update_stored_proxy(&proxy_id, name, proxy_settings)
+    .map_err(|e| format!("Failed to update stored proxy: {e}"))
+}
 
-  if !pending_urls.is_empty() {
-    println!(
-      "Handling {} pending URLs from frontend request",
-      pending_urls.len()
-    );
-
-    // Ensure the main window is visible and focused
-    if let Some(window) = app_handle.get_webview_window("main") {
-      let _ = window.show();
-      let _ = window.set_focus();
-      let _ = window.unminimize();
-
-      // Give the window a moment to become visible
-      tokio::time::sleep(tokio::time::Duration::from_millis(200)).await;
-    }
-
-    for url in pending_urls {
-      println!("Emitting show-profile-selector event for URL: {url}");
-      if let Err(e) = app_handle.emit("show-profile-selector", url.clone()) {
-        eprintln!("Failed to emit URL event: {e}");
-        return Err(format!("Failed to emit URL event: {e}"));
-      }
-    }
-
-    return Ok(true);
-  }
-
-  Ok(false)
+#[tauri::command]
+async fn delete_stored_proxy(proxy_id: String) -> Result<(), String> {
+  crate::proxy_manager::PROXY_MANAGER
+    .delete_stored_proxy(&proxy_id)
+    .map_err(|e| format!("Failed to delete stored proxy: {e}"))
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -304,10 +303,47 @@ pub fn run() {
         auto_updater::check_for_updates_with_progress(app_handle_auto_updater).await;
       });
 
+      // Handle any pending URLs that were received before the window was ready
+      let handle_pending = handle.clone();
+      tauri::async_runtime::spawn(async move {
+        // Wait a bit for the window to be fully ready
+        tokio::time::sleep(tokio::time::Duration::from_millis(1000)).await;
+
+        let pending_urls = {
+          let mut pending = PENDING_URLS.lock().unwrap();
+          let urls = pending.clone();
+          pending.clear();
+          urls
+        };
+
+        for url in pending_urls {
+          println!("Processing pending URL: {url}");
+          if let Err(e) = handle_url_open(handle_pending.clone(), url).await {
+            eprintln!("Failed to handle pending URL: {e}");
+          }
+        }
+      });
+
+      // Start periodic cleanup task for unused binaries
+      tauri::async_runtime::spawn(async move {
+        let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(43200)); // Every 12 hours
+
+        loop {
+          interval.tick().await;
+
+          let browser_runner = crate::browser_runner::BrowserRunner::instance();
+          if let Err(e) = browser_runner.cleanup_unused_binaries_internal() {
+            eprintln!("Periodic cleanup failed: {e}");
+          } else {
+            println!("Periodic cleanup completed successfully");
+          }
+        }
+      });
+
       let app_handle_update = app.handle().clone();
       tauri::async_runtime::spawn(async move {
         println!("Starting app update check at startup...");
-        let updater = app_auto_updater::AppAutoUpdater::new();
+        let updater = app_auto_updater::AppAutoUpdater::instance();
         match updater.check_for_updates().await {
           Ok(Some(update_info)) => {
             println!(
@@ -330,6 +366,88 @@ pub fn run() {
         }
       });
 
+      // Start Camoufox cleanup task
+      let _app_handle_cleanup = app.handle().clone();
+      tauri::async_runtime::spawn(async move {
+        let launcher = crate::camoufox::CamoufoxNodecarLauncher::instance();
+        let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(5));
+
+        loop {
+          interval.tick().await;
+
+          match launcher.cleanup_dead_instances().await {
+            Ok(_dead_instances) => {
+              // Cleanup completed silently
+            }
+            Err(e) => {
+              eprintln!("Error during Camoufox cleanup: {e}");
+            }
+          }
+        }
+      });
+
+      // Start proxy cleanup task for dead browser processes
+      let app_handle_proxy_cleanup = app.handle().clone();
+      tauri::async_runtime::spawn(async move {
+        let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(30));
+
+        loop {
+          interval.tick().await;
+
+          match crate::proxy_manager::PROXY_MANAGER
+            .cleanup_dead_proxies(app_handle_proxy_cleanup.clone())
+            .await
+          {
+            Ok(dead_pids) => {
+              if !dead_pids.is_empty() {
+                println!(
+                  "Cleaned up proxies for {} dead browser processes",
+                  dead_pids.len()
+                );
+              }
+            }
+            Err(e) => {
+              eprintln!("Error during proxy cleanup: {e}");
+            }
+          }
+        }
+      });
+
+      // Warm up nodecar binary in the background
+      tauri::async_runtime::spawn(async move {
+        println!("Starting nodecar warm-up...");
+        let start_time = std::time::Instant::now();
+
+        // Send a ping request to nodecar to trigger unpacking/warm-up
+        match tokio::process::Command::new("nodecar")
+          .arg("--version")
+          .output()
+          .await
+        {
+          Ok(output) => {
+            let duration = start_time.elapsed();
+            if output.status.success() {
+              println!(
+                "Nodecar warm-up completed successfully in {:.2}s",
+                duration.as_secs_f64()
+              );
+            } else {
+              println!(
+                "Nodecar warm-up completed with non-zero exit code in {:.2}s",
+                duration.as_secs_f64()
+              );
+            }
+          }
+          Err(e) => {
+            let duration = start_time.elapsed();
+            println!(
+              "Nodecar warm-up failed after {:.2}s: {e}",
+              duration.as_secs_f64()
+            );
+          }
+        }
+      });
+
       Ok(())
     })
     .invoke_handler(tauri::generate_handler![
@@ -360,8 +478,6 @@ pub fn run() {
       is_default_browser,
       open_url_with_profile,
       set_as_default_browser,
-      smart_open_url,
-      check_and_handle_startup_url,
       trigger_manual_version_update,
       get_version_update_status,
       check_for_browser_updates,
@@ -374,6 +490,20 @@ pub fn run() {
       get_system_theme,
       detect_existing_profiles,
       import_browser_profile,
+      check_missing_binaries,
+      ensure_all_binaries_exist,
+      create_stored_proxy,
+      get_stored_proxies,
+      update_stored_proxy,
+      delete_stored_proxy,
+      update_camoufox_config,
+      get_profile_groups,
+      get_groups_with_profile_counts,
+      create_profile_group,
+      update_profile_group,
+      delete_profile_group,
+      assign_profiles_to_group,
+      delete_selected_profiles,
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src-tauri/src/profile/mod.rs

@@ -0,0 +1,5 @@
+pub mod manager;
+pub mod types;
+
+pub use manager::ProfileManager;
+pub use types::BrowserProfile;

src-tauri/src/profile/types.rs

@@ -0,0 +1,34 @@
+use crate::camoufox::CamoufoxConfig;
+use serde::{Deserialize, Serialize};
+use std::path::{Path, PathBuf};
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct BrowserProfile {
+  pub id: uuid::Uuid,
+  pub name: String,
+  pub browser: String,
+  pub version: String,
+  #[serde(default)]
+  pub proxy_id: Option<String>, // Reference to stored proxy
+  #[serde(default)]
+  pub process_id: Option<u32>,
+  #[serde(default)]
+  pub last_launch: Option<u64>,
+  #[serde(default = "default_release_type")]
+  pub release_type: String, // "stable" or "nightly"
+  #[serde(default)]
+  pub camoufox_config: Option<CamoufoxConfig>, // Camoufox configuration
+  #[serde(default)]
+  pub group_id: Option<String>, // Reference to profile group
+}
+
+pub fn default_release_type() -> String {
+  "stable".to_string()
+}
+
+impl BrowserProfile {
+  /// Get the path to the profile data directory (profiles/{uuid}/profile)
+  pub fn get_profile_data_path(&self, profiles_dir: &Path) -> PathBuf {
+    profiles_dir.join(self.id.to_string()).join("profile")
+  }
+}

src-tauri/src/profile_importer.rs

@@ -17,17 +17,19 @@ pub struct DetectedProfile {
 
 pub struct ProfileImporter {
   base_dirs: BaseDirs,
-  browser_runner: BrowserRunner,
 }
 
 impl ProfileImporter {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
       base_dirs: BaseDirs::new().expect("Failed to get base directories"),
-      browser_runner: BrowserRunner::new(),
     }
   }
 
+  pub fn instance() -> &'static ProfileImporter {
+    &PROFILE_IMPORTER
+  }
+
   /// Detect existing browser profiles on the system
   pub fn detect_existing_profiles(
     &self,
@@ -656,7 +658,7 @@ impl ProfileImporter {
       .map_err(|_| format!("Invalid browser type: {browser_type}"))?;
 
     // Check if a profile with this name already exists
-    let existing_profiles = self.browser_runner.list_profiles()?;
+    let existing_profiles = BrowserRunner::instance().list_profiles()?;
     if existing_profiles
       .iter()
       .any(|p| p.name.to_lowercase() == new_profile_name.to_lowercase())
@@ -664,33 +666,37 @@ impl ProfileImporter {
       return Err(format!("Profile with name '{new_profile_name}' already exists").into());
     }
 
-    // Create the new profile directory
-    let snake_case_name = new_profile_name.to_lowercase().replace(' ', "_");
-    let profiles_dir = self.browser_runner.get_profiles_dir();
-    let new_profile_path = profiles_dir.join(&snake_case_name);
+    // Generate UUID for new profile and create the directory structure
+    let profile_id = uuid::Uuid::new_v4();
+    let profiles_dir = BrowserRunner::instance().get_profiles_dir();
+    let new_profile_uuid_dir = profiles_dir.join(profile_id.to_string());
+    let new_profile_data_dir = new_profile_uuid_dir.join("profile");
 
-    create_dir_all(&new_profile_path)?;
+    create_dir_all(&new_profile_uuid_dir)?;
+    create_dir_all(&new_profile_data_dir)?;
 
-    // Copy all files from source to destination
-    Self::copy_directory_recursive(source_path, &new_profile_path)?;
+    // Copy all files from source to destination profile subdirectory
+    Self::copy_directory_recursive(source_path, &new_profile_data_dir)?;
 
     // Create the profile metadata without overwriting the imported data
     // We need to find a suitable version for this browser type
     let available_versions = self.get_default_version_for_browser(browser_type)?;
 
-    let profile = crate::browser_runner::BrowserProfile {
+    let profile = crate::profile::BrowserProfile {
+      id: profile_id,
       name: new_profile_name.to_string(),
       browser: browser_type.to_string(),
       version: available_versions,
-      profile_path: new_profile_path.to_string_lossy().to_string(),
-      proxy: None,
+      proxy_id: None,
       process_id: None,
       last_launch: None,
       release_type: "stable".to_string(),
+      camoufox_config: None,
+      group_id: None,
     };
 
     // Save the profile metadata
-    self.browser_runner.save_profile(&profile)?;
+    BrowserRunner::instance().save_profile(&profile)?;
 
     println!(
       "Successfully imported profile '{}' from '{}'",
@@ -706,26 +712,20 @@ impl ProfileImporter {
     &self,
     browser_type: &str,
   ) -> Result<String, Box<dyn std::error::Error>> {
-    // Try to get a downloaded version first, fallback to a reasonable default
-    let registry =
-      crate::downloaded_browsers::DownloadedBrowsersRegistry::load().unwrap_or_default();
+    // Check if any version of the browser is downloaded
+    let registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::instance();
     let downloaded_versions = registry.get_downloaded_versions(browser_type);
 
     if let Some(version) = downloaded_versions.first() {
       return Ok(version.clone());
     }
 
-    // If no downloaded versions, return a sensible default
-    match browser_type {
-      "firefox" => Ok("latest".to_string()),
-      "firefox-developer" => Ok("latest".to_string()),
-      "chromium" => Ok("latest".to_string()),
-      "brave" => Ok("latest".to_string()),
-      "zen" => Ok("latest".to_string()),
-      "mullvad-browser" => Ok("13.5.16".to_string()), // Mullvad Browser common version
-      "tor-browser" => Ok("latest".to_string()),
-      _ => Ok("latest".to_string()),
-    }
+    // If no downloaded versions found, return an error
+    Err(format!(
+      "No downloaded versions found for browser '{}'. Please download a version of {} first before importing profiles.",
+      browser_type,
+      self.get_browser_display_name(browser_type)
+    ).into())
   }
 
   /// Recursively copy directory contents
@@ -756,7 +756,7 @@ impl ProfileImporter {
 // Tauri commands
 #[tauri::command]
 pub async fn detect_existing_profiles() -> Result<Vec<DetectedProfile>, String> {
-  let importer = ProfileImporter::new();
+  let importer = ProfileImporter::instance();
   importer
     .detect_existing_profiles()
     .map_err(|e| format!("Failed to detect existing profiles: {e}"))
@@ -768,8 +768,13 @@ pub async fn import_browser_profile(
   browser_type: String,
   new_profile_name: String,
 ) -> Result<(), String> {
-  let importer = ProfileImporter::new();
+  let importer = ProfileImporter::instance();
   importer
     .import_profile(&source_path, &browser_type, &new_profile_name)
     .map_err(|e| format!("Failed to import profile: {e}"))
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref PROFILE_IMPORTER: ProfileImporter = ProfileImporter::new();
+}

src-tauri/src/proxy_manager.rs

@@ -1,6 +1,9 @@
+use directories::BaseDirs;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
 use std::collections::HashMap;
+use std::fs;
+use std::path::PathBuf;
 use std::sync::Mutex;
 use tauri_plugin_shell::ShellExt;
 
@@ -17,26 +20,240 @@ pub struct ProxyInfo {
   pub local_port: u16,
 }
 
-// Global proxy manager to track active proxies
+// Stored proxy configuration with name and ID for reuse
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct StoredProxy {
+  pub id: String,
+  pub name: String,
+  pub proxy_settings: ProxySettings,
+}
+
+impl StoredProxy {
+  pub fn new(name: String, proxy_settings: ProxySettings) -> Self {
+    Self {
+      id: uuid::Uuid::new_v4().to_string(),
+      name,
+      proxy_settings,
+    }
+  }
+
+  pub fn update_settings(&mut self, proxy_settings: ProxySettings) {
+    self.proxy_settings = proxy_settings;
+  }
+
+  pub fn update_name(&mut self, name: String) {
+    self.name = name;
+  }
+}
+
+// Global proxy manager to track active proxies and stored proxy configurations
 pub struct ProxyManager {
   active_proxies: Mutex<HashMap<u32, ProxyInfo>>, // Maps browser process ID to proxy info
   // Store proxy info by profile name for persistence across browser restarts
   profile_proxies: Mutex<HashMap<String, ProxySettings>>, // Maps profile name to proxy settings
+  stored_proxies: Mutex<HashMap<String, StoredProxy>>,    // Maps proxy ID to stored proxy
+  base_dirs: BaseDirs,
 }
 
 impl ProxyManager {
   pub fn new() -> Self {
-    Self {
+    let base_dirs = BaseDirs::new().expect("Failed to get base directories");
+    let manager = Self {
       active_proxies: Mutex::new(HashMap::new()),
       profile_proxies: Mutex::new(HashMap::new()),
+      stored_proxies: Mutex::new(HashMap::new()),
+      base_dirs,
+    };
+
+    // Load stored proxies on initialization
+    if let Err(e) = manager.load_stored_proxies() {
+      eprintln!("Warning: Failed to load stored proxies: {e}");
     }
+
+    manager
+  }
+
+  // Get the path to the proxies directory
+  fn get_proxies_dir(&self) -> PathBuf {
+    let mut path = self.base_dirs.data_local_dir().to_path_buf();
+    path.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    path.push("proxies");
+    path
+  }
+
+  // Get the path to a specific proxy file
+  fn get_proxy_file_path(&self, proxy_id: &str) -> PathBuf {
+    self.get_proxies_dir().join(format!("{proxy_id}.json"))
+  }
+
+  // Load stored proxies from disk
+  fn load_stored_proxies(&self) -> Result<(), Box<dyn std::error::Error>> {
+    let proxies_dir = self.get_proxies_dir();
+
+    if !proxies_dir.exists() {
+      return Ok(()); // No proxies directory yet
+    }
+
+    let mut stored_proxies = self.stored_proxies.lock().unwrap();
+
+    // Read all JSON files from the proxies directory
+    for entry in fs::read_dir(&proxies_dir)? {
+      let entry = entry?;
+      let path = entry.path();
+
+      if path.extension().is_some_and(|ext| ext == "json") {
+        let content = fs::read_to_string(&path)?;
+        let proxy: StoredProxy = serde_json::from_str(&content)?;
+        stored_proxies.insert(proxy.id.clone(), proxy);
+      }
+    }
+
+    Ok(())
+  }
+
+  // Save a single proxy to disk
+  fn save_proxy(&self, proxy: &StoredProxy) -> Result<(), Box<dyn std::error::Error>> {
+    let proxies_dir = self.get_proxies_dir();
+
+    // Ensure directory exists
+    fs::create_dir_all(&proxies_dir)?;
+
+    let proxy_file = self.get_proxy_file_path(&proxy.id);
+    let content = serde_json::to_string_pretty(proxy)?;
+    fs::write(&proxy_file, content)?;
+
+    Ok(())
+  }
+
+  // Delete a proxy file from disk
+  fn delete_proxy_file(&self, proxy_id: &str) -> Result<(), Box<dyn std::error::Error>> {
+    let proxy_file = self.get_proxy_file_path(proxy_id);
+    if proxy_file.exists() {
+      fs::remove_file(proxy_file)?;
+    }
+    Ok(())
+  }
+
+  // Create a new stored proxy
+  pub fn create_stored_proxy(
+    &self,
+    name: String,
+    proxy_settings: ProxySettings,
+  ) -> Result<StoredProxy, String> {
+    // Check if name already exists
+    {
+      let stored_proxies = self.stored_proxies.lock().unwrap();
+      if stored_proxies.values().any(|p| p.name == name) {
+        return Err(format!("Proxy with name '{name}' already exists"));
+      }
+    }
+
+    let stored_proxy = StoredProxy::new(name, proxy_settings);
+
+    {
+      let mut stored_proxies = self.stored_proxies.lock().unwrap();
+      stored_proxies.insert(stored_proxy.id.clone(), stored_proxy.clone());
+    }
+
+    if let Err(e) = self.save_proxy(&stored_proxy) {
+      eprintln!("Warning: Failed to save proxy: {e}");
+    }
+
+    Ok(stored_proxy)
+  }
+
+  // Get all stored proxies
+  pub fn get_stored_proxies(&self) -> Vec<StoredProxy> {
+    let stored_proxies = self.stored_proxies.lock().unwrap();
+    stored_proxies.values().cloned().collect()
+  }
+
+  // Get a stored proxy by ID
+
+  // Update a stored proxy
+  pub fn update_stored_proxy(
+    &self,
+    proxy_id: &str,
+    name: Option<String>,
+    proxy_settings: Option<ProxySettings>,
+  ) -> Result<StoredProxy, String> {
+    // First, check for conflicts without holding a mutable reference
+    {
+      let stored_proxies = self.stored_proxies.lock().unwrap();
+
+      // Check if proxy exists
+      if !stored_proxies.contains_key(proxy_id) {
+        return Err(format!("Proxy with ID '{proxy_id}' not found"));
+      }
+
+      // Check if new name conflicts with existing proxies
+      if let Some(ref new_name) = name {
+        if stored_proxies
+          .values()
+          .any(|p| p.id != proxy_id && p.name == *new_name)
+        {
+          return Err(format!("Proxy with name '{new_name}' already exists"));
+        }
+      }
+    } // Release the lock here
+
+    // Now get mutable access for updates
+    let updated_proxy = {
+      let mut stored_proxies = self.stored_proxies.lock().unwrap();
+      let stored_proxy = stored_proxies.get_mut(proxy_id).unwrap(); // Safe because we checked above
+
+      if let Some(new_name) = name {
+        stored_proxy.update_name(new_name);
+      }
+
+      if let Some(new_settings) = proxy_settings {
+        stored_proxy.update_settings(new_settings);
+      }
+
+      stored_proxy.clone()
+    };
+
+    if let Err(e) = self.save_proxy(&updated_proxy) {
+      eprintln!("Warning: Failed to save proxy: {e}");
+    }
+
+    Ok(updated_proxy)
+  }
+
+  // Delete a stored proxy
+  pub fn delete_stored_proxy(&self, proxy_id: &str) -> Result<(), String> {
+    {
+      let mut stored_proxies = self.stored_proxies.lock().unwrap();
+      if stored_proxies.remove(proxy_id).is_none() {
+        return Err(format!("Proxy with ID '{proxy_id}' not found"));
+      }
+    }
+
+    if let Err(e) = self.delete_proxy_file(proxy_id) {
+      eprintln!("Warning: Failed to delete proxy file: {e}");
+    }
+
+    Ok(())
+  }
+
+  // Get proxy settings for a stored proxy ID
+  pub fn get_proxy_settings_by_id(&self, proxy_id: &str) -> Option<ProxySettings> {
+    let stored_proxies = self.stored_proxies.lock().unwrap();
+    stored_proxies
+      .get(proxy_id)
+      .map(|p| p.proxy_settings.clone())
   }
 
   // Start a proxy for given proxy settings and associate it with a browser process ID
+  // If proxy_settings is None, starts a direct proxy for traffic monitoring
   pub async fn start_proxy(
     &self,
     app_handle: tauri::AppHandle,
-    proxy_settings: &ProxySettings,
+    proxy_settings: Option<&ProxySettings>,
     browser_pid: u32,
     profile_name: Option<&str>,
   ) -> Result<ProxySettings, String> {
@@ -45,8 +262,7 @@ impl ProxyManager {
       let proxies = self.active_proxies.lock().unwrap();
       if let Some(proxy) = proxies.get(&browser_pid) {
         return Ok(ProxySettings {
-          enabled: true,
-          proxy_type: proxy.upstream_type.clone(),
+          proxy_type: "http".to_string(),
           host: "127.0.0.1".to_string(), // Use 127.0.0.1 instead of localhost for better compatibility
           port: proxy.local_port,
           username: None,
@@ -58,15 +274,19 @@ impl ProxyManager {
     // Check if we have a preferred port for this profile
     let preferred_port = if let Some(name) = profile_name {
       let profile_proxies = self.profile_proxies.lock().unwrap();
-      profile_proxies.get(name).and_then(|settings| {
+      profile_proxies.get(name).and_then(|_settings| {
         // Find existing proxy with same settings to reuse port
         let active_proxies = self.active_proxies.lock().unwrap();
         active_proxies
           .values()
           .find(|p| {
-            p.upstream_host == settings.host
-              && p.upstream_port == settings.port
-              && p.upstream_type == settings.proxy_type
+            if let Some(proxy_settings) = proxy_settings {
+              p.upstream_host == proxy_settings.host
+                && p.upstream_port == proxy_settings.port
+                && p.upstream_type == proxy_settings.proxy_type
+            } else {
+              p.upstream_type == "DIRECT"
+            }
           })
           .map(|p| p.local_port)
       })
@@ -80,20 +300,25 @@ impl ProxyManager {
       .sidecar("nodecar")
       .map_err(|e| format!("Failed to create sidecar: {e}"))?
       .arg("proxy")
-      .arg("start")
-      .arg("--host")
-      .arg(&proxy_settings.host)
-      .arg("--proxy-port")
-      .arg(proxy_settings.port.to_string())
-      .arg("--type")
-      .arg(&proxy_settings.proxy_type);
+      .arg("start");
 
-    // Add credentials if provided
-    if let Some(username) = &proxy_settings.username {
-      nodecar = nodecar.arg("--username").arg(username);
-    }
-    if let Some(password) = &proxy_settings.password {
-      nodecar = nodecar.arg("--password").arg(password);
+    // Add upstream proxy settings if provided, otherwise create direct proxy
+    if let Some(proxy_settings) = proxy_settings {
+      nodecar = nodecar
+        .arg("--host")
+        .arg(&proxy_settings.host)
+        .arg("--proxy-port")
+        .arg(proxy_settings.port.to_string())
+        .arg("--type")
+        .arg(&proxy_settings.proxy_type);
+
+      // Add credentials if provided
+      if let Some(username) = &proxy_settings.username {
+        nodecar = nodecar.arg("--username").arg(username);
+      }
+      if let Some(password) = &proxy_settings.password {
+        nodecar = nodecar.arg("--password").arg(password);
+      }
     }
 
     // If we have a preferred port, use it
@@ -134,9 +359,13 @@ impl ProxyManager {
     let proxy_info = ProxyInfo {
       id: id.to_string(),
       local_url,
-      upstream_host: proxy_settings.host.clone(),
-      upstream_port: proxy_settings.port,
-      upstream_type: proxy_settings.proxy_type.clone(),
+      upstream_host: proxy_settings
+        .map(|p| p.host.clone())
+        .unwrap_or_else(|| "DIRECT".to_string()),
+      upstream_port: proxy_settings.map(|p| p.port).unwrap_or(0),
+      upstream_type: proxy_settings
+        .map(|p| p.proxy_type.clone())
+        .unwrap_or_else(|| "DIRECT".to_string()),
       local_port,
     };
 
@@ -148,13 +377,14 @@ impl ProxyManager {
 
     // Store the profile proxy info for persistence
     if let Some(name) = profile_name {
-      let mut profile_proxies = self.profile_proxies.lock().unwrap();
-      profile_proxies.insert(name.to_string(), proxy_settings.clone());
+      if let Some(proxy_settings) = proxy_settings {
+        let mut profile_proxies = self.profile_proxies.lock().unwrap();
+        profile_proxies.insert(name.to_string(), proxy_settings.clone());
+      }
     }
 
     // Return proxy settings for the browser
     Ok(ProxySettings {
-      enabled: true,
       proxy_type: "http".to_string(),
       host: "127.0.0.1".to_string(), // Use 127.0.0.1 instead of localhost for better compatibility
       port: proxy_info.local_port,
@@ -198,25 +428,6 @@ impl ProxyManager {
     Ok(())
   }
 
-  // Get proxy settings for a browser process ID
-  pub fn get_proxy_settings(&self, browser_pid: u32) -> Option<ProxySettings> {
-    let proxies = self.active_proxies.lock().unwrap();
-    proxies.get(&browser_pid).map(|proxy| ProxySettings {
-      enabled: true,
-      proxy_type: "http".to_string(),
-      host: "127.0.0.1".to_string(), // Use 127.0.0.1 instead of localhost for better compatibility
-      port: proxy.local_port,
-      username: None,
-      password: None,
-    })
-  }
-
-  // Get stored proxy info for a profile
-  pub fn get_profile_proxy_info(&self, profile_name: &str) -> Option<ProxySettings> {
-    let profile_proxies = self.profile_proxies.lock().unwrap();
-    profile_proxies.get(profile_name).cloned()
-  }
-
   // Update the PID mapping for an existing proxy
   pub fn update_proxy_pid(&self, old_pid: u32, new_pid: u32) -> Result<(), String> {
     let mut proxies = self.active_proxies.lock().unwrap();
@@ -227,6 +438,42 @@ impl ProxyManager {
       Err(format!("No proxy found for PID {old_pid}"))
     }
   }
+
+  // Check if a process is still running
+  fn is_process_running(&self, pid: u32) -> bool {
+    use sysinfo::{Pid, System};
+    let system = System::new_all();
+    system.process(Pid::from(pid as usize)).is_some()
+  }
+
+  // Clean up proxies for dead browser processes
+  pub async fn cleanup_dead_proxies(
+    &self,
+    app_handle: tauri::AppHandle,
+  ) -> Result<Vec<u32>, String> {
+    let dead_pids = {
+      let proxies = self.active_proxies.lock().unwrap();
+      proxies
+        .keys()
+        .filter(|&&pid| pid != 0 && !self.is_process_running(pid)) // Skip temporary PID 0
+        .copied()
+        .collect::<Vec<u32>>()
+    };
+
+    for dead_pid in &dead_pids {
+      println!("Cleaning up proxy for dead browser process PID: {dead_pid}");
+      let _ = self.stop_proxy(app_handle.clone(), *dead_pid).await;
+    }
+
+    Ok(dead_pids)
+  }
+
+  // Get all active proxy PIDs for monitoring
+  #[allow(dead_code)]
+  pub fn get_active_proxy_pids(&self) -> Vec<u32> {
+    let proxies = self.active_proxies.lock().unwrap();
+    proxies.keys().copied().collect()
+  }
 }
 
 // Create a singleton instance of the proxy manager
@@ -261,8 +508,7 @@ mod tests {
       .unwrap()
       .to_path_buf();
     let nodecar_dir = project_root.join("nodecar");
-    let nodecar_dist = nodecar_dir.join("dist");
-    let nodecar_binary = nodecar_dist.join("nodecar");
+    let nodecar_binary = nodecar_dir.join("nodecar-bin");
 
     // Check if binary already exists
     if nodecar_binary.exists() {
@@ -316,77 +562,10 @@ mod tests {
     Ok(nodecar_binary)
   }
 
-  #[tokio::test]
-  async fn test_proxy_manager_profile_persistence() {
-    let proxy_manager = ProxyManager::new();
-
-    let proxy_settings = ProxySettings {
-      enabled: true,
-      proxy_type: "socks5".to_string(),
-      host: "127.0.0.1".to_string(),
-      port: 1080,
-      username: None,
-      password: None,
-    };
-
-    // Test profile proxy info storage
-    {
-      let mut profile_proxies = proxy_manager.profile_proxies.lock().unwrap();
-      profile_proxies.insert("test_profile".to_string(), proxy_settings.clone());
-    }
-
-    // Test retrieval
-    let retrieved = proxy_manager.get_profile_proxy_info("test_profile");
-    assert!(retrieved.is_some());
-    let retrieved = retrieved.unwrap();
-    assert_eq!(retrieved.proxy_type, "socks5");
-    assert_eq!(retrieved.host, "127.0.0.1");
-    assert_eq!(retrieved.port, 1080);
-
-    // Test non-existent profile
-    let non_existent = proxy_manager.get_profile_proxy_info("non_existent");
-    assert!(non_existent.is_none());
-  }
-
-  #[tokio::test]
-  async fn test_proxy_manager_active_proxy_tracking() {
-    let proxy_manager = ProxyManager::new();
-
-    let proxy_info = ProxyInfo {
-      id: "test_proxy_123".to_string(),
-      local_url: "http://localhost:8080".to_string(),
-      upstream_host: "proxy.example.com".to_string(),
-      upstream_port: 3128,
-      upstream_type: "http".to_string(),
-      local_port: 8080,
-    };
-
-    let browser_pid = 54321u32;
-
-    // Add active proxy
-    {
-      let mut active_proxies = proxy_manager.active_proxies.lock().unwrap();
-      active_proxies.insert(browser_pid, proxy_info.clone());
-    }
-
-    // Test retrieval of proxy settings
-    let proxy_settings = proxy_manager.get_proxy_settings(browser_pid);
-    assert!(proxy_settings.is_some());
-    let settings = proxy_settings.unwrap();
-    assert!(settings.enabled);
-    assert_eq!(settings.host, "127.0.0.1");
-    assert_eq!(settings.port, 8080);
-
-    // Test non-existent browser PID
-    let non_existent = proxy_manager.get_proxy_settings(99999);
-    assert!(non_existent.is_none());
-  }
-
   #[test]
   fn test_proxy_settings_validation() {
     // Test valid proxy settings
     let valid_settings = ProxySettings {
-      enabled: true,
       proxy_type: "http".to_string(),
       host: "127.0.0.1".to_string(),
       port: 8080,
@@ -394,14 +573,11 @@ mod tests {
       password: Some("pass".to_string()),
     };
 
-    assert!(valid_settings.enabled);
-    assert_eq!(valid_settings.proxy_type, "http");
     assert!(!valid_settings.host.is_empty());
     assert!(valid_settings.port > 0);
 
-    // Test disabled proxy settings
-    let disabled_settings = ProxySettings {
-      enabled: false,
+    // Test proxy settings with empty values
+    let empty_settings = ProxySettings {
       proxy_type: "http".to_string(),
       host: "".to_string(),
       port: 0,
@@ -409,7 +585,7 @@ mod tests {
       password: None,
     };
 
-    assert!(!disabled_settings.enabled);
+    assert!(empty_settings.host.is_empty());
   }
 
   #[tokio::test]
@@ -439,10 +615,6 @@ mod tests {
           active_proxies.insert(browser_pid, proxy_info);
         }
 
-        // Read proxy
-        let settings = pm.get_proxy_settings(browser_pid);
-        assert!(settings.is_some());
-
         browser_pid
       });
       handles.push(handle);
@@ -505,7 +677,7 @@ mod tests {
       .arg("http");
 
     // Set a timeout for the command
-    let output = tokio::time::timeout(Duration::from_secs(10), async { cmd.output() }).await??;
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;
 
     if output.status.success() {
       let stdout = String::from_utf8(output.stdout)?;
@@ -521,7 +693,7 @@ mod tests {
 
       // Wait for proxy worker to start
       println!("Waiting for proxy worker to start...");
-      tokio::time::sleep(Duration::from_secs(3)).await;
+      tokio::time::sleep(Duration::from_secs(1)).await;
 
       // Test that the local port is listening
       let mut port_test = Command::new("nc");
@@ -542,7 +714,7 @@ mod tests {
       stop_cmd.arg("proxy").arg("stop").arg("--id").arg(proxy_id);
 
       let stop_output =
-        tokio::time::timeout(Duration::from_secs(5), async { stop_cmd.output() }).await??;
+        tokio::time::timeout(Duration::from_secs(60), async { stop_cmd.output() }).await??;
 
       assert!(stop_output.status.success());
 
@@ -563,7 +735,6 @@ mod tests {
   #[test]
   fn test_proxy_command_construction() {
     let proxy_settings = ProxySettings {
-      enabled: true,
       proxy_type: "http".to_string(),
       host: "proxy.example.com".to_string(),
       port: 8080,
@@ -618,13 +789,6 @@ mod tests {
     match output {
       Ok(Ok(cmd_output)) => {
         let execution_time = start_time.elapsed();
-        println!("CLI completed in {execution_time:?}");
-
-        // Should complete very quickly if properly detached
-        assert!(
-          execution_time < Duration::from_secs(3),
-          "CLI took too long ({execution_time:?}), should exit immediately after starting worker"
-        );
 
         if cmd_output.status.success() {
           let stdout = String::from_utf8(cmd_output.stdout)?;
@@ -668,17 +832,7 @@ mod tests {
       .arg("--type")
       .arg("http");
 
-    let start_time = std::time::Instant::now();
-    let output = tokio::time::timeout(Duration::from_secs(5), async { cmd.output() }).await??;
-    let execution_time = start_time.elapsed();
-
-    // Command should complete very quickly if properly detached
-    assert!(
-      execution_time < Duration::from_secs(5),
-      "CLI command took {execution_time:?}, should complete in under 5 seconds for proper detachment"
-    );
-
-    println!("CLI detachment test: command completed in {execution_time:?}");
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;
 
     if output.status.success() {
       let stdout = String::from_utf8(output.stdout)?;
@@ -720,7 +874,7 @@ mod tests {
       .arg("--password")
       .arg("pass word!"); // Contains space and special character
 
-    let output = tokio::time::timeout(Duration::from_secs(5), async { cmd.output() }).await??;
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;
 
     if output.status.success() {
       let stdout = String::from_utf8(output.stdout)?;

src-tauri/src/settings_manager.rs

@@ -25,12 +25,8 @@ impl Default for TableSortingSettings {
 pub struct AppSettings {
   #[serde(default)]
   pub set_as_default_browser: bool,
-  #[serde(default)]
-  pub show_settings_on_startup: bool,
   #[serde(default = "default_theme")]
   pub theme: String, // "light", "dark", or "system"
-  #[serde(default)]
-  pub auto_delete_unused_binaries: bool,
 }
 
 fn default_theme() -> String {
@@ -41,9 +37,7 @@ impl Default for AppSettings {
   fn default() -> Self {
     Self {
       set_as_default_browser: false,
-      show_settings_on_startup: true,
       theme: "system".to_string(),
-      auto_delete_unused_binaries: true,
     }
   }
 }
@@ -53,12 +47,16 @@ pub struct SettingsManager {
 }
 
 impl SettingsManager {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self {
       base_dirs: BaseDirs::new().expect("Failed to get base directories"),
     }
   }
 
+  pub fn instance() -> &'static SettingsManager {
+    &SETTINGS_MANAGER
+  }
+
   pub fn get_settings_dir(&self) -> PathBuf {
     let mut path = self.base_dirs.data_local_dir().to_path_buf();
     path.push(if cfg!(debug_assertions) {
@@ -150,19 +148,14 @@ impl SettingsManager {
   }
 
   pub fn should_show_settings_on_startup(&self) -> Result<bool, Box<dyn std::error::Error>> {
-    let settings = self.load_settings()?;
-
-    // Show prompt if:
-    // 1. User wants to see the prompt
-    // 2. Donut Browser is not set as default
-    // 3. User hasn't explicitly disabled the default browser setting
-    Ok(settings.show_settings_on_startup && !settings.set_as_default_browser)
+    // Always return false - we don't show settings on startup anymore
+    Ok(false)
   }
 }
 
 #[tauri::command]
 pub async fn get_app_settings() -> Result<AppSettings, String> {
-  let manager = SettingsManager::new();
+  let manager = SettingsManager::instance();
   manager
     .load_settings()
     .map_err(|e| format!("Failed to load settings: {e}"))
@@ -170,7 +163,7 @@ pub async fn get_app_settings() -> Result<AppSettings, String> {
 
 #[tauri::command]
 pub async fn save_app_settings(settings: AppSettings) -> Result<(), String> {
-  let manager = SettingsManager::new();
+  let manager = SettingsManager::instance();
   manager
     .save_settings(&settings)
     .map_err(|e| format!("Failed to save settings: {e}"))
@@ -178,7 +171,7 @@ pub async fn save_app_settings(settings: AppSettings) -> Result<(), String> {
 
 #[tauri::command]
 pub async fn should_show_settings_on_startup() -> Result<bool, String> {
-  let manager = SettingsManager::new();
+  let manager = SettingsManager::instance();
   manager
     .should_show_settings_on_startup()
     .map_err(|e| format!("Failed to check prompt setting: {e}"))
@@ -186,7 +179,7 @@ pub async fn should_show_settings_on_startup() -> Result<bool, String> {
 
 #[tauri::command]
 pub async fn get_table_sorting_settings() -> Result<TableSortingSettings, String> {
-  let manager = SettingsManager::new();
+  let manager = SettingsManager::instance();
   manager
     .load_table_sorting()
     .map_err(|e| format!("Failed to load table sorting settings: {e}"))
@@ -194,7 +187,7 @@ pub async fn get_table_sorting_settings() -> Result<TableSortingSettings, String
 
 #[tauri::command]
 pub async fn save_table_sorting_settings(sorting: TableSortingSettings) -> Result<(), String> {
-  let manager = SettingsManager::new();
+  let manager = SettingsManager::instance();
   manager
     .save_table_sorting(&sorting)
     .map_err(|e| format!("Failed to save table sorting settings: {e}"))
@@ -204,20 +197,51 @@ pub async fn save_table_sorting_settings(sorting: TableSortingSettings) -> Resul
 pub async fn clear_all_version_cache_and_refetch(
   app_handle: tauri::AppHandle,
 ) -> Result<(), String> {
-  let api_client = ApiClient::new();
+  let api_client = ApiClient::instance();
 
   // Clear all cache first
   api_client
     .clear_all_cache()
     .map_err(|e| format!("Failed to clear version cache: {e}"))?;
 
+  // Disable all browsers during the update process
+  let auto_updater = crate::auto_updater::AutoUpdater::instance();
+  let supported_browsers =
+    crate::browser_version_service::BrowserVersionService::instance().get_supported_browsers();
+
+  // Load current state and disable all browsers
+  let mut state = auto_updater
+    .load_auto_update_state()
+    .map_err(|e| format!("Failed to load auto update state: {e}"))?;
+  for browser in &supported_browsers {
+    state.disabled_browsers.insert(browser.clone());
+  }
+  auto_updater
+    .save_auto_update_state(&state)
+    .map_err(|e| format!("Failed to save auto update state: {e}"))?;
+
   let updater = version_updater::get_version_updater();
   let updater_guard = updater.lock().await;
 
-  updater_guard
+  let result = updater_guard
     .trigger_manual_update(&app_handle)
     .await
-    .map_err(|e| format!("Failed to trigger version update: {e}"))?;
+    .map_err(|e| format!("Failed to trigger version update: {e}"));
 
+  // Re-enable all browsers after the update completes (regardless of success/failure)
+  let mut final_state = auto_updater.load_auto_update_state().unwrap_or_default();
+  for browser in &supported_browsers {
+    final_state.disabled_browsers.remove(browser);
+  }
+  if let Err(e) = auto_updater.save_auto_update_state(&final_state) {
+    eprintln!("Warning: Failed to re-enable browsers after cache clear: {e}");
+  }
+
+  result?;
   Ok(())
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref SETTINGS_MANAGER: SettingsManager = SettingsManager::new();
+}

src-tauri/src/theme_detector.rs

@@ -9,10 +9,14 @@ pub struct SystemTheme {
 pub struct ThemeDetector;
 
 impl ThemeDetector {
-  pub fn new() -> Self {
+  fn new() -> Self {
     Self
   }
 
+  pub fn instance() -> &'static ThemeDetector {
+    &THEME_DETECTOR
+  }
+
   /// Detect the system theme preference
   pub fn detect_system_theme(&self) -> SystemTheme {
     #[cfg(target_os = "linux")]
@@ -514,7 +518,7 @@ mod windows {
 // Command to expose this functionality to the frontend
 #[tauri::command]
 pub fn get_system_theme() -> SystemTheme {
-  let detector = ThemeDetector::new();
+  let detector = ThemeDetector::instance();
   detector.detect_system_theme()
 }
 
@@ -524,7 +528,7 @@ mod tests {
 
   #[test]
   fn test_theme_detector_creation() {
-    let detector = ThemeDetector::new();
+    let detector = ThemeDetector::instance();
     let theme = detector.detect_system_theme();
 
     // Should return a valid theme string
@@ -537,3 +541,8 @@ mod tests {
     assert!(matches!(theme.theme.as_str(), "light" | "dark" | "unknown"));
   }
 }
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref THEME_DETECTOR: ThemeDetector = ThemeDetector::new();
+}

src-tauri/src/version_updater.rs

@@ -47,16 +47,16 @@ impl Default for BackgroundUpdateState {
 }
 
 pub struct VersionUpdater {
-  version_service: BrowserVersionService,
-  auto_updater: AutoUpdater,
+  version_service: &'static BrowserVersionService,
+  auto_updater: &'static AutoUpdater,
   app_handle: Option<tauri::AppHandle>,
 }
 
 impl VersionUpdater {
   pub fn new() -> Self {
     Self {
-      version_service: BrowserVersionService::new(),
-      auto_updater: AutoUpdater::new(),
+      version_service: BrowserVersionService::instance(),
+      auto_updater: AutoUpdater::instance(),
       app_handle: None,
     }
   }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Donut Browser",
-  "version": "0.5.2",
+  "version": "0.8.2",
   "identifier": "com.donutbrowser",
   "build": {
     "beforeDevCommand": "pnpm dev",

src-tauri/tests/common/mod.rs

@@ -0,0 +1,207 @@
+use std::env;
+use std::path::PathBuf;
+use std::process::Command;
+use std::time::Duration;
+
+/// Utility functions for integration tests
+pub struct TestUtils;
+
+impl TestUtils {
+  /// Build the nodecar binary if it doesn't exist
+  pub async fn ensure_nodecar_binary() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>>
+  {
+    let cargo_manifest_dir = env::var("CARGO_MANIFEST_DIR")?;
+    let project_root = PathBuf::from(cargo_manifest_dir)
+      .parent()
+      .unwrap()
+      .to_path_buf();
+    let nodecar_dir = project_root.join("nodecar");
+    let nodecar_binary = nodecar_dir.join("nodecar-bin");
+
+    // Check if binary already exists
+    if nodecar_binary.exists() {
+      return Ok(nodecar_binary);
+    }
+
+    println!("Building nodecar binary for integration tests...");
+
+    // Install dependencies
+    let install_status = Command::new("pnpm")
+      .args(["install", "--frozen-lockfile"])
+      .current_dir(&nodecar_dir)
+      .status()?;
+
+    if !install_status.success() {
+      return Err("Failed to install nodecar dependencies".into());
+    }
+
+    // Build the binary
+    let build_status = Command::new("pnpm")
+      .args(["run", "build"])
+      .current_dir(&nodecar_dir)
+      .status()?;
+
+    if !build_status.success() {
+      return Err("Failed to build nodecar binary".into());
+    }
+
+    if !nodecar_binary.exists() {
+      return Err("Nodecar binary was not created successfully".into());
+    }
+
+    Ok(nodecar_binary)
+  }
+
+  /// Get the appropriate build target for the current platform
+  #[allow(dead_code)]
+  fn get_build_target() -> &'static str {
+    if cfg!(target_arch = "aarch64") && cfg!(target_os = "macos") {
+      "build:mac-aarch64"
+    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "macos") {
+      "build:mac-x86_64"
+    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "linux") {
+      "build:linux-x64"
+    } else if cfg!(target_arch = "aarch64") && cfg!(target_os = "linux") {
+      "build:linux-arm64"
+    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "windows") {
+      "build:win-x64"
+    } else if cfg!(target_arch = "aarch64") && cfg!(target_os = "windows") {
+      "build:win-arm64"
+    } else {
+      panic!("Unsupported target architecture for nodecar build")
+    }
+  }
+
+  /// Execute a nodecar command with timeout
+  pub async fn execute_nodecar_command(
+    binary_path: &PathBuf,
+    args: &[&str],
+  ) -> Result<std::process::Output, Box<dyn std::error::Error + Send + Sync>> {
+    let mut cmd = Command::new(binary_path);
+    cmd.args(args);
+
+    let output = tokio::process::Command::from(cmd).output().await?;
+
+    Ok(output)
+  }
+
+  /// Check if a port is available
+  pub async fn is_port_available(port: u16) -> bool {
+    tokio::net::TcpListener::bind(format!("127.0.0.1:{port}"))
+      .await
+      .is_ok()
+  }
+
+  /// Wait for a port to become available or occupied
+  pub async fn wait_for_port_state(port: u16, should_be_occupied: bool, timeout_secs: u64) -> bool {
+    let start = std::time::Instant::now();
+
+    while start.elapsed().as_secs() < timeout_secs {
+      let is_available = Self::is_port_available(port).await;
+
+      if should_be_occupied && !is_available {
+        return true; // Port is occupied as expected
+      } else if !should_be_occupied && is_available {
+        return true; // Port is available as expected
+      }
+
+      tokio::time::sleep(Duration::from_millis(100)).await;
+    }
+
+    false
+  }
+
+  /// Create a temporary directory for test files
+  pub fn create_temp_dir() -> Result<tempfile::TempDir, Box<dyn std::error::Error + Send + Sync>> {
+    Ok(tempfile::tempdir()?)
+  }
+
+  /// Clean up specific nodecar processes by IDs (for targeted test cleanup)
+  pub async fn cleanup_specific_processes(
+    nodecar_path: &PathBuf,
+    proxy_ids: &[String],
+    camoufox_ids: &[String],
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    println!("Cleaning up specific test processes...");
+
+    // Stop specific proxies
+    for proxy_id in proxy_ids {
+      let stop_args = ["proxy", "stop", "--id", proxy_id];
+      if let Ok(output) = Self::execute_nodecar_command(nodecar_path, &stop_args).await {
+        if output.status.success() {
+          println!("Stopped test proxy: {proxy_id}");
+        }
+      }
+    }
+
+    // Stop specific camoufox instances
+    for camoufox_id in camoufox_ids {
+      let stop_args = ["camoufox", "stop", "--id", camoufox_id];
+      if let Ok(output) = Self::execute_nodecar_command(nodecar_path, &stop_args).await {
+        if output.status.success() {
+          println!("Stopped test camoufox instance: {camoufox_id}");
+        }
+      }
+    }
+
+    // Give processes time to clean up
+    tokio::time::sleep(Duration::from_millis(500)).await;
+
+    println!("Test process cleanup completed");
+    Ok(())
+  }
+
+  /// Clean up all running nodecar processes (proxies and camoufox instances)
+  /// WARNING: This will stop ALL processes, including those from actual app usage
+  #[allow(dead_code)]
+  pub async fn cleanup_all_nodecar_processes(
+    nodecar_path: &PathBuf,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    println!("WARNING: Cleaning up ALL nodecar processes...");
+
+    // Get list of all proxies and stop them individually
+    let proxy_list_args = ["proxy", "list"];
+    if let Ok(list_output) = Self::execute_nodecar_command(nodecar_path, &proxy_list_args).await {
+      if list_output.status.success() {
+        let list_stdout = String::from_utf8(list_output.stdout)?;
+        if let Ok(proxies) = serde_json::from_str::<serde_json::Value>(&list_stdout) {
+          if let Some(proxy_array) = proxies.as_array() {
+            for proxy in proxy_array {
+              if let Some(proxy_id) = proxy["id"].as_str() {
+                let stop_args = ["proxy", "stop", "--id", proxy_id];
+                let _ = Self::execute_nodecar_command(nodecar_path, &stop_args).await;
+                println!("Stopped proxy: {proxy_id}");
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Get list of all camoufox instances and stop them individually
+    let camoufox_list_args = ["camoufox", "list"];
+    if let Ok(list_output) = Self::execute_nodecar_command(nodecar_path, &camoufox_list_args).await
+    {
+      if list_output.status.success() {
+        let list_stdout = String::from_utf8(list_output.stdout)?;
+        if let Ok(instances) = serde_json::from_str::<serde_json::Value>(&list_stdout) {
+          if let Some(instance_array) = instances.as_array() {
+            for instance in instance_array {
+              if let Some(instance_id) = instance["id"].as_str() {
+                let stop_args = ["camoufox", "stop", "--id", instance_id];
+                let _ = Self::execute_nodecar_command(nodecar_path, &stop_args).await;
+                println!("Stopped camoufox instance: {instance_id}");
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Give processes time to clean up
+    tokio::time::sleep(Duration::from_secs(2)).await;
+
+    println!("Nodecar process cleanup completed");
+    Ok(())
+  }
+}

src-tauri/tests/nodecar_integration.rs

@@ -0,0 +1,999 @@
+mod common;
+use common::TestUtils;
+use serde_json::Value;
+
+/// Setup function to ensure clean state before tests
+async fn setup_test() -> Result<std::path::PathBuf, Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = TestUtils::ensure_nodecar_binary().await?;
+
+  // Only clean up test-specific processes, not all processes
+  // This prevents interfering with actual app usage during testing
+  println!("Setting up test environment...");
+
+  Ok(nodecar_path)
+}
+
+/// Helper to track and cleanup specific test resources
+struct TestResourceTracker {
+  proxy_ids: Vec<String>,
+  camoufox_ids: Vec<String>,
+  nodecar_path: std::path::PathBuf,
+}
+
+impl TestResourceTracker {
+  fn new(nodecar_path: std::path::PathBuf) -> Self {
+    Self {
+      proxy_ids: Vec::new(),
+      camoufox_ids: Vec::new(),
+      nodecar_path,
+    }
+  }
+
+  fn track_proxy(&mut self, proxy_id: String) {
+    self.proxy_ids.push(proxy_id);
+  }
+
+  fn track_camoufox(&mut self, camoufox_id: String) {
+    self.camoufox_ids.push(camoufox_id);
+  }
+
+  async fn cleanup_all(&self) {
+    // Use targeted cleanup to only stop test-specific processes
+    let _ = TestUtils::cleanup_specific_processes(
+      &self.nodecar_path,
+      &self.proxy_ids,
+      &self.camoufox_ids,
+    )
+    .await;
+  }
+}
+
+impl Drop for TestResourceTracker {
+  fn drop(&mut self) {
+    // Ensure cleanup happens even if test panics
+    let proxy_ids = self.proxy_ids.clone();
+    let camoufox_ids = self.camoufox_ids.clone();
+    let nodecar_path = self.nodecar_path.clone();
+
+    tokio::spawn(async move {
+      let _ = TestUtils::cleanup_specific_processes(&nodecar_path, &proxy_ids, &camoufox_ids).await;
+    });
+  }
+}
+
+/// Integration tests for nodecar proxy functionality
+#[tokio::test]
+async fn test_nodecar_proxy_lifecycle() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Test proxy start with a known working upstream
+  let args = [
+    "proxy",
+    "start",
+    "--host",
+    "httpbin.org",
+    "--proxy-port",
+    "80",
+    "--type",
+    "http",
+  ];
+
+  println!("Starting proxy with nodecar...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    tracker.cleanup_all().await;
+    return Err(format!("Proxy start failed - stdout: {stdout}, stderr: {stderr}").into());
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  // Verify proxy configuration structure
+  assert!(config["id"].is_string(), "Proxy ID should be a string");
+  assert!(
+    config["localPort"].is_number(),
+    "Local port should be a number"
+  );
+  assert!(
+    config["localUrl"].is_string(),
+    "Local URL should be a string"
+  );
+
+  let proxy_id = config["id"].as_str().unwrap().to_string();
+  let local_port = config["localPort"].as_u64().unwrap() as u16;
+  tracker.track_proxy(proxy_id.clone());
+
+  println!("Proxy started with ID: {proxy_id} on port: {local_port}");
+
+  // Wait for the proxy to start listening
+  let is_listening = TestUtils::wait_for_port_state(local_port, true, 10).await;
+  assert!(
+    is_listening,
+    "Proxy should be listening on the assigned port"
+  );
+
+  // Test stopping the proxy
+  let stop_args = ["proxy", "stop", "--id", &proxy_id];
+  let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+
+  assert!(stop_output.status.success(), "Proxy stop should succeed");
+
+  let port_available = TestUtils::wait_for_port_state(local_port, false, 5).await;
+  assert!(
+    port_available,
+    "Port should be available after stopping proxy"
+  );
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test proxy with authentication
+#[tokio::test]
+async fn test_nodecar_proxy_with_auth() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let args = [
+    "proxy",
+    "start",
+    "--host",
+    "httpbin.org",
+    "--proxy-port",
+    "80",
+    "--type",
+    "http",
+    "--username",
+    "testuser",
+    "--password",
+    "testpass",
+  ];
+
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if output.status.success() {
+    let stdout = String::from_utf8(output.stdout)?;
+    let config: Value = serde_json::from_str(&stdout)?;
+
+    let proxy_id = config["id"].as_str().unwrap().to_string();
+    tracker.track_proxy(proxy_id.clone());
+
+    // Verify upstream URL contains encoded credentials
+    if let Some(upstream_url) = config["upstreamUrl"].as_str() {
+      assert!(
+        upstream_url.contains("testuser"),
+        "Upstream URL should contain username"
+      );
+      // Password might be encoded, so we check for the presence of auth info
+      assert!(
+        upstream_url.contains("@"),
+        "Upstream URL should contain auth separator"
+      );
+    }
+  }
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test proxy list functionality
+#[tokio::test]
+async fn test_nodecar_proxy_list() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Start a proxy first
+  let start_args = [
+    "proxy",
+    "start",
+    "--host",
+    "httpbin.org",
+    "--proxy-port",
+    "80",
+    "--type",
+    "http",
+  ];
+
+  let start_output = TestUtils::execute_nodecar_command(&nodecar_path, &start_args).await?;
+
+  if start_output.status.success() {
+    let stdout = String::from_utf8(start_output.stdout)?;
+    let config: Value = serde_json::from_str(&stdout)?;
+    let proxy_id = config["id"].as_str().unwrap().to_string();
+    tracker.track_proxy(proxy_id.clone());
+
+    // Test list command
+    let list_args = ["proxy", "list"];
+    let list_output = TestUtils::execute_nodecar_command(&nodecar_path, &list_args).await?;
+
+    assert!(list_output.status.success(), "Proxy list should succeed");
+
+    let list_stdout = String::from_utf8(list_output.stdout)?;
+    let proxy_list: Value = serde_json::from_str(&list_stdout)?;
+
+    assert!(proxy_list.is_array(), "Proxy list should be an array");
+
+    let proxies = proxy_list.as_array().unwrap();
+    assert!(
+      !proxies.is_empty(),
+      "Should have at least one proxy in the list"
+    );
+
+    // Find our proxy in the list
+    let found_proxy = proxies.iter().find(|p| p["id"].as_str() == Some(&proxy_id));
+    assert!(found_proxy.is_some(), "Started proxy should be in the list");
+  }
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox functionality
+#[tokio::test]
+async fn test_nodecar_camoufox_lifecycle() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let temp_dir = TestUtils::create_temp_dir()?;
+  let profile_path = temp_dir.path().join("test_profile");
+
+  let args = [
+    "camoufox",
+    "start",
+    "--profile-path",
+    profile_path.to_str().unwrap(),
+    "--headless",
+  ];
+
+  println!("Starting Camoufox with nodecar...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+
+    // If Camoufox is not installed or times out, skip the test
+    if stderr.contains("not installed")
+      || stderr.contains("not found")
+      || stderr.contains("timeout")
+      || stdout.contains("timeout")
+    {
+      println!("Skipping Camoufox test - Camoufox not available or timed out");
+      tracker.cleanup_all().await;
+      return Ok(());
+    }
+
+    tracker.cleanup_all().await;
+    return Err(format!("Camoufox start failed - stdout: {stdout}, stderr: {stderr}").into());
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  // Verify Camoufox configuration structure
+  assert!(config["id"].is_string(), "Camoufox ID should be a string");
+
+  let camoufox_id = config["id"].as_str().unwrap().to_string();
+  tracker.track_camoufox(camoufox_id.clone());
+  println!("Camoufox started with ID: {camoufox_id}");
+
+  // Test stopping Camoufox
+  let stop_args = ["camoufox", "stop", "--id", &camoufox_id];
+  let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+
+  assert!(stop_output.status.success(), "Camoufox stop should succeed");
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox with URL opening
+#[tokio::test]
+async fn test_nodecar_camoufox_with_url() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let temp_dir = TestUtils::create_temp_dir()?;
+  let profile_path = temp_dir.path().join("test_profile_url");
+
+  let args = [
+    "camoufox",
+    "start",
+    "--profile-path",
+    profile_path.to_str().unwrap(),
+    "--url",
+    "https://httpbin.org/get",
+    "--headless",
+  ];
+
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if output.status.success() {
+    let stdout = String::from_utf8(output.stdout)?;
+    let config: Value = serde_json::from_str(&stdout)?;
+
+    let camoufox_id = config["id"].as_str().unwrap().to_string();
+    tracker.track_camoufox(camoufox_id.clone());
+
+    // Verify URL is set
+    if let Some(url) = config["url"].as_str() {
+      assert_eq!(
+        url, "https://httpbin.org/get",
+        "URL should match what was provided"
+      );
+    }
+
+    // Test stopping Camoufox explicitly
+    let stop_args = ["camoufox", "stop", "--id", &camoufox_id];
+    let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+    assert!(stop_output.status.success(), "Camoufox stop should succeed");
+  } else {
+    println!("Skipping Camoufox URL test - likely not installed");
+    tracker.cleanup_all().await;
+    return Ok(());
+  }
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox list functionality
+#[tokio::test]
+async fn test_nodecar_camoufox_list() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Test list command (should work even without Camoufox installed)
+  let list_args = ["camoufox", "list"];
+  let list_output = TestUtils::execute_nodecar_command(&nodecar_path, &list_args).await?;
+
+  assert!(list_output.status.success(), "Camoufox list should succeed");
+
+  let list_stdout = String::from_utf8(list_output.stdout)?;
+  let camoufox_list: Value = serde_json::from_str(&list_stdout)?;
+
+  assert!(camoufox_list.is_array(), "Camoufox list should be an array");
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox process tracking and management
+#[tokio::test]
+async fn test_nodecar_camoufox_process_tracking(
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let temp_dir = TestUtils::create_temp_dir()?;
+  let profile_path = temp_dir.path().join("test_profile_tracking");
+
+  // Start multiple Camoufox instances
+  let mut instance_ids: Vec<String> = Vec::new();
+
+  for i in 0..2 {
+    let instance_profile_path = format!("{}_instance_{}", profile_path.to_str().unwrap(), i);
+    let args = [
+      "camoufox",
+      "start",
+      "--profile-path",
+      &instance_profile_path,
+      "--headless",
+    ];
+
+    println!("Starting Camoufox instance {i}...");
+    let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+    if !output.status.success() {
+      let stderr = String::from_utf8_lossy(&output.stderr);
+      let stdout = String::from_utf8_lossy(&output.stdout);
+
+      // If Camoufox is not installed, skip the test
+      if stderr.contains("not installed") || stderr.contains("not found") {
+        println!("Skipping Camoufox process tracking test - Camoufox not installed");
+        tracker.cleanup_all().await;
+        return Ok(());
+      }
+
+      tracker.cleanup_all().await;
+      return Err(
+        format!("Camoufox instance {i} start failed - stdout: {stdout}, stderr: {stderr}").into(),
+      );
+    }
+
+    let stdout = String::from_utf8(output.stdout)?;
+    let config: Value = serde_json::from_str(&stdout)?;
+
+    let camoufox_id = config["id"].as_str().unwrap().to_string();
+    instance_ids.push(camoufox_id.clone());
+    tracker.track_camoufox(camoufox_id.clone());
+    println!("Camoufox instance {i} started with ID: {camoufox_id}");
+  }
+
+  // Verify all instances are tracked
+  let list_args = ["camoufox", "list"];
+  let list_output = TestUtils::execute_nodecar_command(&nodecar_path, &list_args).await?;
+
+  assert!(list_output.status.success(), "Camoufox list should succeed");
+
+  let list_stdout = String::from_utf8(list_output.stdout)?;
+  println!("Camoufox list output: {list_stdout}");
+  let instances: Value = serde_json::from_str(&list_stdout)?;
+
+  let instances_array = instances.as_array().unwrap();
+  println!("Found {} instances in list", instances_array.len());
+
+  // Verify our instances are in the list
+  for instance_id in &instance_ids {
+    let instance_found = instances_array
+      .iter()
+      .any(|i| i["id"].as_str() == Some(instance_id));
+    if !instance_found {
+      println!("Instance {instance_id} not found in list. Available instances:");
+      for instance in instances_array {
+        if let Some(id) = instance["id"].as_str() {
+          println!("  - {id}");
+        }
+      }
+    }
+    assert!(
+      instance_found,
+      "Camoufox instance {instance_id} should be found in list"
+    );
+  }
+
+  // Stop all instances individually
+  for instance_id in &instance_ids {
+    println!("Stopping Camoufox instance: {instance_id}");
+    let stop_args = ["camoufox", "stop", "--id", instance_id];
+    let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+
+    if stop_output.status.success() {
+      let stop_stdout = String::from_utf8(stop_output.stdout)?;
+      if let Ok(stop_result) = serde_json::from_str::<Value>(&stop_stdout) {
+        let success = stop_result["success"].as_bool().unwrap_or(false);
+        if !success {
+          println!("Warning: Stop command returned success=false for instance {instance_id}");
+        }
+      } else {
+        println!("Warning: Could not parse stop result for instance {instance_id}");
+      }
+    } else {
+      println!("Warning: Stop command failed for instance {instance_id}");
+    }
+  }
+
+  // Verify all instances are removed
+  let list_output_after = TestUtils::execute_nodecar_command(&nodecar_path, &list_args).await?;
+
+  let instances_after: Value = serde_json::from_str(&String::from_utf8(list_output_after.stdout)?)?;
+  let instances_after_array = instances_after.as_array().unwrap();
+
+  for instance_id in &instance_ids {
+    let instance_still_exists = instances_after_array
+      .iter()
+      .any(|i| i["id"].as_str() == Some(instance_id));
+    assert!(
+      !instance_still_exists,
+      "Stopped Camoufox instance {instance_id} should not be found in list"
+    );
+  }
+
+  println!("Camoufox process tracking test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox with various configuration options
+#[tokio::test]
+async fn test_nodecar_camoufox_configuration_options(
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let temp_dir = TestUtils::create_temp_dir()?;
+  let profile_path = temp_dir.path().join("test_profile_config");
+
+  let args = [
+    "camoufox",
+    "start",
+    "--profile-path",
+    profile_path.to_str().unwrap(),
+    "--block-images",
+    "--max-width",
+    "1920",
+    "--max-height",
+    "1080",
+    "--headless",
+  ];
+
+  println!("Starting Camoufox with configuration options...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+
+    // If Camoufox is not installed, skip the test
+    if stderr.contains("not installed") || stderr.contains("not found") {
+      println!("Skipping Camoufox configuration test - Camoufox not installed");
+      tracker.cleanup_all().await;
+      return Ok(());
+    }
+
+    tracker.cleanup_all().await;
+    return Err(
+      format!("Camoufox with config start failed - stdout: {stdout}, stderr: {stderr}").into(),
+    );
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  let camoufox_id = config["id"].as_str().unwrap().to_string();
+  tracker.track_camoufox(camoufox_id.clone());
+  println!("Camoufox with configuration started with ID: {camoufox_id}");
+
+  // Verify configuration was applied by checking the profile path
+  if let Some(returned_profile_path) = config["profilePath"].as_str() {
+    assert!(
+      returned_profile_path.contains("test_profile_config"),
+      "Profile path should match what was provided"
+    );
+  }
+
+  // Test stopping Camoufox explicitly
+  let stop_args = ["camoufox", "stop", "--id", &camoufox_id];
+  let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+
+  assert!(stop_output.status.success(), "Camoufox stop should succeed");
+
+  println!("Camoufox configuration test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox generate-config command with basic options
+#[ignore = "CI is rate limited for camoufox download"]
+#[tokio::test]
+async fn test_nodecar_camoufox_generate_config_basic(
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let args = [
+    "camoufox",
+    "generate-config",
+    "--max-width",
+    "1920",
+    "--max-height",
+    "1080",
+    "--block-images",
+  ];
+
+  println!("Testing Camoufox config generation with basic options...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+
+    tracker.cleanup_all().await;
+    return Err(
+      format!("Camoufox generate-config failed - stdout: {stdout}, stderr: {stderr}").into(),
+    );
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+  println!("Generated config output: {stdout}");
+
+  // Parse the generated config as JSON
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  // Verify the config contains expected properties
+  assert!(
+    config.is_object(),
+    "Generated config should be a JSON object"
+  );
+
+  // Check for some expected fingerprint properties
+  assert!(
+    config.get("screen.width").is_some(),
+    "Config should contain screen.width"
+  );
+  assert!(
+    config.get("screen.height").is_some(),
+    "Config should contain screen.height"
+  );
+  assert!(
+    config.get("navigator.userAgent").is_some(),
+    "Config should contain navigator.userAgent"
+  );
+
+  println!("Camoufox generate-config basic test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test Camoufox generate-config command with custom fingerprint
+#[ignore = "CI is rate limited for camoufox download"]
+#[tokio::test]
+async fn test_nodecar_camoufox_generate_config_custom_fingerprint(
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Create a custom fingerprint JSON
+  let custom_fingerprint = r#"{
+    "screen.width": 1440,
+    "screen.height": 900,
+    "navigator.userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/140.0",
+    "navigator.platform": "TestPlatform",
+    "timezone": "America/New_York",
+    "locale:language": "en",
+    "locale:region": "US"
+  }"#;
+
+  let args = [
+    "camoufox",
+    "generate-config",
+    "--fingerprint",
+    custom_fingerprint,
+    "--block-webrtc",
+  ];
+
+  println!("Testing Camoufox config generation with custom fingerprint...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+
+    tracker.cleanup_all().await;
+    return Err(
+      format!("Camoufox generate-config with custom fingerprint failed - stdout: {stdout}, stderr: {stderr}").into(),
+    );
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+
+  // Parse the generated config as JSON
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  // Verify the config contains expected properties
+  assert!(
+    config.is_object(),
+    "Generated config should be a JSON object"
+  );
+
+  // Check that our custom values are preserved
+  assert_eq!(
+    config.get("screen.width").and_then(|v| v.as_u64()),
+    Some(1440),
+    "Custom screen width should be preserved"
+  );
+  assert_eq!(
+    config.get("screen.height").and_then(|v| v.as_u64()),
+    Some(900),
+    "Custom screen height should be preserved"
+  );
+  assert_eq!(
+    config.get("navigator.userAgent").and_then(|v| v.as_str()),
+    Some("Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/140.0"),
+    "Custom user agent should be preserved"
+  );
+  assert_eq!(
+    config.get("timezone").and_then(|v| v.as_str()),
+    Some("America/New_York"),
+    "Custom timezone should be preserved"
+  );
+
+  println!("Camoufox generate-config custom fingerprint test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test nodecar command validation
+#[tokio::test]
+async fn test_nodecar_command_validation() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Test invalid command
+  let invalid_args = ["invalid", "command"];
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &invalid_args).await?;
+
+  assert!(!output.status.success(), "Invalid command should fail");
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test concurrent proxy operations
+#[tokio::test]
+async fn test_nodecar_concurrent_proxies() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Start multiple proxies concurrently
+  let mut handles = vec![];
+
+  for i in 0..3 {
+    let nodecar_path_clone = nodecar_path.clone();
+    let handle = tokio::spawn(async move {
+      let args = [
+        "proxy",
+        "start",
+        "--host",
+        "httpbin.org",
+        "--proxy-port",
+        "80",
+        "--type",
+        "http",
+      ];
+
+      TestUtils::execute_nodecar_command(&nodecar_path_clone, &args).await
+    });
+    handles.push((i, handle));
+  }
+
+  // Wait for all proxies to start
+  for (i, handle) in handles {
+    match handle.await.map_err(|e| format!("Join error: {e}"))? {
+      Ok(output) if output.status.success() => {
+        let stdout = String::from_utf8(output.stdout)?;
+        let config: Value = serde_json::from_str(&stdout)?;
+        let proxy_id = config["id"].as_str().unwrap().to_string();
+        tracker.track_proxy(proxy_id.clone());
+        println!("Proxy {i} started successfully");
+      }
+      Ok(output) => {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        println!("Proxy {i} failed to start: {stderr}");
+      }
+      Err(e) => {
+        println!("Proxy {i} error: {e}");
+      }
+    }
+  }
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test proxy with different upstream types
+#[tokio::test]
+async fn test_nodecar_proxy_types() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  let test_cases = vec![
+    ("http", "httpbin.org", "80"),
+    ("https", "httpbin.org", "443"),
+  ];
+
+  for (proxy_type, host, port) in test_cases {
+    println!("Testing {proxy_type} proxy to {host}:{port}");
+
+    let args = [
+      "proxy",
+      "start",
+      "--host",
+      host,
+      "--proxy-port",
+      port,
+      "--type",
+      proxy_type,
+    ];
+
+    let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+    if output.status.success() {
+      let stdout = String::from_utf8(output.stdout)?;
+      let config: Value = serde_json::from_str(&stdout)?;
+      let proxy_id = config["id"].as_str().unwrap().to_string();
+      tracker.track_proxy(proxy_id.clone());
+
+      println!("{proxy_type} proxy test passed");
+    } else {
+      let stderr = String::from_utf8_lossy(&output.stderr);
+      println!("{proxy_type} proxy test failed: {stderr}");
+    }
+  }
+
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test direct proxy (no upstream) functionality
+#[tokio::test]
+async fn test_nodecar_direct_proxy() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Test starting a direct proxy (no upstream)
+  let args = ["proxy", "start"];
+
+  println!("Starting direct proxy with nodecar...");
+  let output = TestUtils::execute_nodecar_command(&nodecar_path, &args).await?;
+
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    tracker.cleanup_all().await;
+    return Err(format!("Direct proxy start failed - stdout: {stdout}, stderr: {stderr}").into());
+  }
+
+  let stdout = String::from_utf8(output.stdout)?;
+  let config: Value = serde_json::from_str(&stdout)?;
+
+  // Verify proxy configuration structure
+  assert!(config["id"].is_string(), "Proxy ID should be a string");
+  assert!(
+    config["localPort"].is_number(),
+    "Local port should be a number"
+  );
+  assert!(
+    config["localUrl"].is_string(),
+    "Local URL should be a string"
+  );
+  assert_eq!(
+    config["upstreamUrl"].as_str().unwrap(),
+    "DIRECT",
+    "Upstream URL should be DIRECT"
+  );
+
+  let proxy_id = config["id"].as_str().unwrap().to_string();
+  let local_port = config["localPort"].as_u64().unwrap() as u16;
+  tracker.track_proxy(proxy_id.clone());
+
+  println!("Direct proxy started with ID: {proxy_id} on port: {local_port}");
+
+  // Wait for the proxy to start listening
+  let is_listening = TestUtils::wait_for_port_state(local_port, true, 10).await;
+  assert!(
+    is_listening,
+    "Direct proxy should be listening on the assigned port"
+  );
+
+  // Test stopping the proxy
+  let stop_args = ["proxy", "stop", "--id", &proxy_id];
+  let stop_output = TestUtils::execute_nodecar_command(&nodecar_path, &stop_args).await?;
+
+  assert!(
+    stop_output.status.success(),
+    "Direct proxy stop should succeed"
+  );
+
+  let port_available = TestUtils::wait_for_port_state(local_port, false, 5).await;
+  assert!(
+    port_available,
+    "Port should be available after stopping direct proxy"
+  );
+
+  println!("Direct proxy test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}
+
+/// Test SOCKS5 proxy chaining - create two proxies where the second uses the first as upstream
+#[tokio::test]
+async fn test_nodecar_socks5_proxy_chaining() -> Result<(), Box<dyn std::error::Error + Send + Sync>>
+{
+  let nodecar_path = setup_test().await?;
+  let mut tracker = TestResourceTracker::new(nodecar_path.clone());
+
+  // Step 1: Start a SOCKS5 proxy with a known working upstream (httpbin.org)
+  let socks5_args = [
+    "proxy",
+    "start",
+    "--host",
+    "httpbin.org",
+    "--proxy-port",
+    "80",
+    "--type",
+    "http", // Use HTTP upstream for the first proxy
+  ];
+
+  println!("Starting first proxy with HTTP upstream...");
+  let socks5_output = TestUtils::execute_nodecar_command(&nodecar_path, &socks5_args).await?;
+
+  if !socks5_output.status.success() {
+    let stderr = String::from_utf8_lossy(&socks5_output.stderr);
+    let stdout = String::from_utf8_lossy(&socks5_output.stdout);
+    tracker.cleanup_all().await;
+    return Err(format!("First proxy start failed - stdout: {stdout}, stderr: {stderr}").into());
+  }
+
+  let socks5_stdout = String::from_utf8(socks5_output.stdout)?;
+  let socks5_config: Value = serde_json::from_str(&socks5_stdout)?;
+
+  let socks5_proxy_id = socks5_config["id"].as_str().unwrap().to_string();
+  let socks5_local_port = socks5_config["localPort"].as_u64().unwrap() as u16;
+  tracker.track_proxy(socks5_proxy_id.clone());
+
+  println!("First proxy started with ID: {socks5_proxy_id} on port: {socks5_local_port}");
+
+  // Step 2: Start a second proxy that uses the first proxy as upstream
+  let http_proxy_args = [
+    "proxy",
+    "start",
+    "--upstream",
+    &format!("http://127.0.0.1:{socks5_local_port}"),
+  ];
+
+  println!("Starting second proxy with first proxy as upstream...");
+  let http_output = TestUtils::execute_nodecar_command(&nodecar_path, &http_proxy_args).await?;
+
+  if !http_output.status.success() {
+    let stderr = String::from_utf8_lossy(&http_output.stderr);
+    let stdout = String::from_utf8_lossy(&http_output.stdout);
+    tracker.cleanup_all().await;
+    return Err(
+      format!("Second proxy with chained upstream failed - stdout: {stdout}, stderr: {stderr}")
+        .into(),
+    );
+  }
+
+  let http_stdout = String::from_utf8(http_output.stdout)?;
+  let http_config: Value = serde_json::from_str(&http_stdout)?;
+
+  let http_proxy_id = http_config["id"].as_str().unwrap().to_string();
+  let http_local_port = http_config["localPort"].as_u64().unwrap() as u16;
+  tracker.track_proxy(http_proxy_id.clone());
+
+  println!(
+    "Second proxy started with ID: {http_proxy_id} on port: {http_local_port} (chained through first proxy)"
+  );
+
+  // Verify both proxies are listening by waiting for them to be occupied
+  let socks5_listening = TestUtils::wait_for_port_state(socks5_local_port, true, 5).await;
+  let http_listening = TestUtils::wait_for_port_state(http_local_port, true, 5).await;
+
+  assert!(
+    socks5_listening,
+    "First proxy should be listening on port {socks5_local_port}"
+  );
+  assert!(
+    http_listening,
+    "Second proxy should be listening on port {http_local_port}"
+  );
+
+  // Clean up both proxies
+  let stop_http_args = ["proxy", "stop", "--id", &http_proxy_id];
+  let stop_socks5_args = ["proxy", "stop", "--id", &socks5_proxy_id];
+
+  let http_stop_result = TestUtils::execute_nodecar_command(&nodecar_path, &stop_http_args).await;
+  let socks5_stop_result =
+    TestUtils::execute_nodecar_command(&nodecar_path, &stop_socks5_args).await;
+
+  // Verify cleanup
+  assert!(
+    http_stop_result.is_ok() && http_stop_result.unwrap().status.success(),
+    "Second proxy stop should succeed"
+  );
+  assert!(
+    socks5_stop_result.is_ok() && socks5_stop_result.unwrap().status.success(),
+    "First proxy stop should succeed"
+  );
+
+  let http_port_available = TestUtils::wait_for_port_state(http_local_port, false, 5).await;
+  let socks5_port_available = TestUtils::wait_for_port_state(socks5_local_port, false, 5).await;
+
+  assert!(
+    http_port_available,
+    "Second proxy port should be available after stopping"
+  );
+  assert!(
+    socks5_port_available,
+    "First proxy port should be available after stopping"
+  );
+
+  println!("Proxy chaining test completed successfully");
+  tracker.cleanup_all().await;
+  Ok(())
+}

src/app/layout.tsx

@@ -24,12 +24,12 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden`}
       >
         <CustomThemeProvider>
-          <WindowDragArea />
           <TooltipProvider>{children}</TooltipProvider>
-          <Toaster />
+          <Toaster className="pointer-events-none" />
+          <WindowDragArea />
         </CustomThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -1,39 +1,31 @@
 "use client";
 
-import { ChangeVersionDialog } from "@/components/change-version-dialog";
-import { CreateProfileDialog } from "@/components/create-profile-dialog";
-import { ImportProfileDialog } from "@/components/import-profile-dialog";
-import { PermissionDialog } from "@/components/permission-dialog";
-import { ProfilesDataTable } from "@/components/profile-data-table";
-import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
-import { ProxySettingsDialog } from "@/components/proxy-settings-dialog";
-import { SettingsDialog } from "@/components/settings-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
-import { usePermissions } from "@/hooks/use-permissions";
-import type { PermissionType } from "@/hooks/use-permissions";
-import { useUpdateNotifications } from "@/hooks/use-update-notifications";
-import { useVersionUpdater } from "@/hooks/use-version-updater";
-import { showErrorToast } from "@/lib/toast-utils";
-import type { BrowserProfile, ProxySettings } from "@/types";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrent } from "@tauri-apps/plugin-deep-link";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { FaDownload } from "react-icons/fa";
-import { GoGear, GoKebabHorizontal, GoPlus } from "react-icons/go";
+import { CamoufoxConfigDialog } from "@/components/camoufox-config-dialog";
+import { ChangeVersionDialog } from "@/components/change-version-dialog";
+import { CreateProfileDialog } from "@/components/create-profile-dialog";
+import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
+import { GroupAssignmentDialog } from "@/components/group-assignment-dialog";
+import { GroupBadges } from "@/components/group-badges";
+import { GroupManagementDialog } from "@/components/group-management-dialog";
+import HomeHeader from "@/components/home-header";
+import { ImportProfileDialog } from "@/components/import-profile-dialog";
+import { PermissionDialog } from "@/components/permission-dialog";
+import { ProfilesDataTable } from "@/components/profile-data-table";
+import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
+import { ProxyManagementDialog } from "@/components/proxy-management-dialog";
+import { ProxySettingsDialog } from "@/components/proxy-settings-dialog";
+import { SettingsDialog } from "@/components/settings-dialog";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
+import type { PermissionType } from "@/hooks/use-permissions";
+import { usePermissions } from "@/hooks/use-permissions";
+import { useUpdateNotifications } from "@/hooks/use-update-notifications";
+import { showErrorToast } from "@/lib/toast-utils";
+import type { BrowserProfile, CamoufoxConfig, GroupWithCount } from "@/types";
 
 type BrowserTypeString =
   | "mullvad-browser"
@@ -42,7 +34,8 @@ type BrowserTypeString =
   | "chromium"
   | "brave"
   | "zen"
-  | "tor-browser";
+  | "tor-browser"
+  | "camoufox";
 
 interface PendingUrl {
   id: string;
@@ -57,18 +50,97 @@ export default function Home() {
   const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
   const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
   const [importProfileDialogOpen, setImportProfileDialogOpen] = useState(false);
+  const [proxyManagementDialogOpen, setProxyManagementDialogOpen] =
+    useState(false);
+  const [camoufoxConfigDialogOpen, setCamoufoxConfigDialogOpen] =
+    useState(false);
+  const [groupManagementDialogOpen, setGroupManagementDialogOpen] =
+    useState(false);
+  const [groupAssignmentDialogOpen, setGroupAssignmentDialogOpen] =
+    useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState<string>("default");
+  const [selectedProfilesForGroup, setSelectedProfilesForGroup] = useState<
+    string[]
+  >([]);
+  const [selectedProfiles, setSelectedProfiles] = useState<string[]>([]);
   const [pendingUrls, setPendingUrls] = useState<PendingUrl[]>([]);
   const [currentProfileForProxy, setCurrentProfileForProxy] =
     useState<BrowserProfile | null>(null);
   const [currentProfileForVersionChange, setCurrentProfileForVersionChange] =
     useState<BrowserProfile | null>(null);
+  const [currentProfileForCamoufoxConfig, setCurrentProfileForCamoufoxConfig] =
+    useState<BrowserProfile | null>(null);
   const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
   const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
+  const [groups, setGroups] = useState<GroupWithCount[]>([]);
+  const [areGroupsLoading, setGroupsLoading] = useState(true);
   const [currentPermissionType, setCurrentPermissionType] =
     useState<PermissionType>("microphone");
+  const [showBulkDeleteConfirmation, setShowBulkDeleteConfirmation] =
+    useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   const { isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized } =
     usePermissions();
 
+  const handleSelectGroup = useCallback((groupId: string) => {
+    setSelectedGroupId(groupId);
+    setSelectedProfiles([]);
+  }, []);
+
+  // Check for missing binaries and offer to download them
+  const checkMissingBinaries = useCallback(async () => {
+    try {
+      const missingBinaries = await invoke<[string, string, string][]>(
+        "check_missing_binaries",
+      );
+
+      if (missingBinaries.length > 0) {
+        console.log("Found missing binaries:", missingBinaries);
+
+        // Group missing binaries by browser type to avoid concurrent downloads
+        const browserMap = new Map<string, string[]>();
+        for (const [profileName, browser, version] of missingBinaries) {
+          if (!browserMap.has(browser)) {
+            browserMap.set(browser, []);
+          }
+          const versions = browserMap.get(browser);
+          if (versions) {
+            versions.push(`${version} (for ${profileName})`);
+          }
+        }
+
+        // Show a toast notification about missing binaries and auto-download them
+        const missingList = Array.from(browserMap.entries())
+          .map(([browser, versions]) => `${browser}: ${versions.join(", ")}`)
+          .join(", ");
+
+        console.log(`Downloading missing binaries: ${missingList}`);
+
+        try {
+          // Download missing binaries sequentially by browser type to prevent conflicts
+          const downloaded = await invoke<string[]>(
+            "ensure_all_binaries_exist",
+          );
+          if (downloaded.length > 0) {
+            console.log(
+              "Successfully downloaded missing binaries:",
+              downloaded,
+            );
+          }
+        } catch (downloadError) {
+          console.error("Failed to download missing binaries:", downloadError);
+          setError(
+            `Failed to download missing binaries: ${JSON.stringify(
+              downloadError,
+            )}`,
+          );
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Failed to check missing binaries:", err);
+    }
+  }, []);
+
   // Simple profiles loader without updates check (for use as callback)
   const loadProfiles = useCallback(async () => {
     try {
@@ -76,14 +148,46 @@ export default function Home() {
         "list_browser_profiles",
       );
       setProfiles(profileList);
+
+      // Check for missing binaries after loading profiles
+      await checkMissingBinaries();
     } catch (err: unknown) {
       console.error("Failed to load profiles:", err);
       setError(`Failed to load profiles: ${JSON.stringify(err)}`);
     }
-  }, []);
+  }, [checkMissingBinaries]);
 
-  // Version updater for handling version fetching progress events and auto-updates
-  useVersionUpdater();
+  const [processingUrls, setProcessingUrls] = useState<Set<string>>(new Set());
+
+  const handleUrlOpen = useCallback(
+    async (url: string) => {
+      // Prevent duplicate processing of the same URL
+      if (processingUrls.has(url)) {
+        console.log("URL already being processed:", url);
+        return;
+      }
+
+      setProcessingUrls((prev) => new Set(prev).add(url));
+
+      try {
+        console.log("URL received for opening:", url);
+
+        // Always show profile selector for manual selection - never auto-open
+        // Replace any existing pending URL with the new one
+        setPendingUrls([{ id: Date.now().toString(), url }]);
+      } finally {
+        // Remove URL from processing set after a short delay to prevent rapid duplicates
+        setTimeout(() => {
+          setProcessingUrls((prev) => {
+            const next = new Set(prev);
+            next.delete(url);
+            return next;
+          });
+        }, 1000);
+      }
+    },
+    [processingUrls],
+  );
 
   // Auto-update functionality - use the existing hook for compatibility
   const updateNotifications = useUpdateNotifications(loadProfiles);
@@ -99,60 +203,34 @@ export default function Home() {
 
       // Check for updates after loading profiles
       await checkForUpdates();
+      await checkMissingBinaries();
     } catch (err: unknown) {
       console.error("Failed to load profiles:", err);
       setError(`Failed to load profiles: ${JSON.stringify(err)}`);
     }
-  }, [checkForUpdates]);
+  }, [checkForUpdates, checkMissingBinaries]);
 
   useAppUpdateNotifications();
 
-  // For some reason, app.deep_link().get_current() is not working properly
+  // Check for startup URLs but only process them once
+  const [hasCheckedStartupUrl, setHasCheckedStartupUrl] = useState(false);
   const checkCurrentUrl = useCallback(async () => {
+    if (hasCheckedStartupUrl) return;
+
     try {
       const currentUrl = await getCurrent();
       if (currentUrl && currentUrl.length > 0) {
+        console.log("Startup URL detected:", currentUrl[0]);
         void handleUrlOpen(currentUrl[0]);
       }
     } catch (error) {
       console.error("Failed to check current URL:", error);
+    } finally {
+      setHasCheckedStartupUrl(true);
     }
-  }, []);
+  }, [handleUrlOpen, hasCheckedStartupUrl]);
 
-  useEffect(() => {
-    void loadProfilesWithUpdateCheck();
-
-    // Check for startup default browser prompt
-    void checkStartupPrompt();
-
-    // Listen for URL open events
-    void listenForUrlEvents();
-
-    // Check for startup URLs (when app was launched as default browser)
-    void checkStartupUrls();
-    void checkCurrentUrl();
-
-    // Set up periodic update checks (every 30 minutes)
-    const updateInterval = setInterval(
-      () => {
-        void checkForUpdates();
-      },
-      30 * 60 * 1000,
-    );
-
-    return () => {
-      clearInterval(updateInterval);
-    };
-  }, [loadProfilesWithUpdateCheck, checkForUpdates, checkCurrentUrl]);
-
-  // Check permissions when they are initialized
-  useEffect(() => {
-    if (isInitialized) {
-      void checkAllPermissions();
-    }
-  }, [isInitialized]);
-
-  const checkStartupPrompt = async () => {
+  const checkStartupPrompt = useCallback(async () => {
     // Only check once during app startup to prevent reopening after dismissing notifications
     if (hasCheckedStartupPrompt) return;
 
@@ -163,14 +241,14 @@ export default function Home() {
       if (shouldShow) {
         setSettingsDialogOpen(true);
       }
-      setHasCheckedStartupPrompt(true);
     } catch (error) {
       console.error("Failed to check startup prompt:", error);
+    } finally {
       setHasCheckedStartupPrompt(true);
     }
-  };
+  }, [hasCheckedStartupPrompt]);
 
-  const checkAllPermissions = async () => {
+  const checkAllPermissions = useCallback(async () => {
     try {
       // Wait for permissions to be initialized before checking
       if (!isInitialized) {
@@ -188,9 +266,9 @@ export default function Home() {
     } catch (error) {
       console.error("Failed to check permissions:", error);
     }
-  };
+  }, [isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized]);
 
-  const checkNextPermission = () => {
+  const checkNextPermission = useCallback(() => {
     try {
       if (!isMicrophoneAccessGranted) {
         setCurrentPermissionType("microphone");
@@ -204,22 +282,9 @@ export default function Home() {
     } catch (error) {
       console.error("Failed to check next permission:", error);
     }
-  };
+  }, [isMicrophoneAccessGranted, isCameraAccessGranted]);
 
-  const checkStartupUrls = async () => {
-    try {
-      const hasStartupUrl = await invoke<boolean>(
-        "check_and_handle_startup_url",
-      );
-      if (hasStartupUrl) {
-        console.log("Handled startup URL successfully");
-      }
-    } catch (error) {
-      console.error("Failed to check startup URLs:", error);
-    }
-  };
-
-  const listenForUrlEvents = async () => {
+  const listenForUrlEvents = useCallback(async () => {
     try {
       // Listen for URL open events from the deep link handler (when app is already running)
       await listen<string>("url-open-request", (event) => {
@@ -230,7 +295,7 @@ export default function Home() {
       // Listen for show profile selector events
       await listen<string>("show-profile-selector", (event) => {
         console.log("Received show profile selector request:", event.payload);
-        setPendingUrls([{ id: Date.now().toString(), url: event.payload }]);
+        void handleUrlOpen(event.payload);
       });
 
       // Listen for show create profile dialog events
@@ -244,30 +309,29 @@ export default function Home() {
         );
         setCreateProfileDialogOpen(true);
       });
+
+      // Listen for custom logo click events
+      const handleLogoUrlEvent = (event: CustomEvent) => {
+        console.log("Received logo URL event:", event.detail);
+        void handleUrlOpen(event.detail);
+      };
+
+      window.addEventListener(
+        "url-open-request",
+        handleLogoUrlEvent as EventListener,
+      );
+
+      // Return cleanup function
+      return () => {
+        window.removeEventListener(
+          "url-open-request",
+          handleLogoUrlEvent as EventListener,
+        );
+      };
     } catch (error) {
       console.error("Failed to setup URL listener:", error);
     }
-  };
-
-  const handleUrlOpen = async (url: string) => {
-    try {
-      // Use smart profile selection
-      const result = await invoke<string>("smart_open_url", {
-        url,
-      });
-      console.log("Smart URL opening succeeded:", result);
-      // URL was handled successfully, no need to show selector
-    } catch (error: unknown) {
-      console.log(
-        "Smart URL opening failed or requires profile selection:",
-        error,
-      );
-
-      // Show profile selector for manual selection
-      // Replace any existing pending URL with the new one
-      setPendingUrls([{ id: Date.now().toString(), url }]);
-    }
-  };
+  }, [handleUrlOpen]);
 
   const openProxyDialog = useCallback((profile: BrowserProfile | null) => {
     setCurrentProfileForProxy(profile);
@@ -279,8 +343,32 @@ export default function Home() {
     setChangeVersionDialogOpen(true);
   }, []);
 
+  const handleConfigureCamoufox = useCallback((profile: BrowserProfile) => {
+    setCurrentProfileForCamoufoxConfig(profile);
+    setCamoufoxConfigDialogOpen(true);
+  }, []);
+
+  const handleSaveCamoufoxConfig = useCallback(
+    async (profile: BrowserProfile, config: CamoufoxConfig) => {
+      setError(null);
+      try {
+        await invoke("update_camoufox_config", {
+          profileName: profile.name,
+          config,
+        });
+        await loadProfiles();
+        setCamoufoxConfigDialogOpen(false);
+      } catch (err: unknown) {
+        console.error("Failed to update camoufox config:", err);
+        setError(`Failed to update camoufox config: ${JSON.stringify(err)}`);
+        throw err;
+      }
+    },
+    [loadProfiles],
+  );
+
   const handleSaveProxy = useCallback(
-    async (proxySettings: ProxySettings) => {
+    async (proxyId: string | null) => {
       setProxyDialogOpen(false);
       setError(null);
 
@@ -288,10 +376,11 @@ export default function Home() {
         if (currentProfileForProxy) {
           await invoke("update_profile_proxy", {
             profileName: currentProfileForProxy.name,
-            proxy: proxySettings,
+            proxyId: proxyId,
           });
         }
         await loadProfiles();
+        // Trigger proxy data reload in the table
       } catch (err: unknown) {
         console.error("Failed to update proxy settings:", err);
         setError(`Failed to update proxy settings: ${JSON.stringify(err)}`);
@@ -300,36 +389,52 @@ export default function Home() {
     [currentProfileForProxy, loadProfiles],
   );
 
+  const loadGroups = useCallback(async () => {
+    setGroupsLoading(true);
+    try {
+      const groupsWithCounts = await invoke<GroupWithCount[]>(
+        "get_groups_with_profile_counts",
+      );
+      setGroups(groupsWithCounts);
+    } catch (err) {
+      console.error("Failed to load groups with counts:", err);
+      setGroups([]);
+    } finally {
+      setGroupsLoading(false);
+    }
+  }, []);
+
   const handleCreateProfile = useCallback(
     async (profileData: {
       name: string;
       browserStr: BrowserTypeString;
       version: string;
       releaseType: string;
-      proxy?: ProxySettings;
+      proxyId?: string;
+      camoufoxConfig?: CamoufoxConfig;
+      groupId?: string;
     }) => {
       setError(null);
 
       try {
-        const profile = await invoke<BrowserProfile>(
+        const _profile = await invoke<BrowserProfile>(
           "create_browser_profile_new",
           {
             name: profileData.name,
             browserStr: profileData.browserStr,
             version: profileData.version,
             releaseType: profileData.releaseType,
+            proxyId: profileData.proxyId,
+            camoufoxConfig: profileData.camoufoxConfig,
+            groupId:
+              profileData.groupId ||
+              (selectedGroupId !== "default" ? selectedGroupId : undefined),
           },
         );
 
-        // Update proxy if provided
-        if (profileData.proxy) {
-          await invoke("update_profile_proxy", {
-            profileName: profile.name,
-            proxy: profileData.proxy,
-          });
-        }
-
         await loadProfiles();
+        await loadGroups();
+        // Trigger proxy data reload in the table
       } catch (error) {
         setError(
           `Failed to create profile: ${
@@ -339,7 +444,7 @@ export default function Home() {
         throw error;
       }
     },
-    [loadProfiles],
+    [loadProfiles, loadGroups, selectedGroupId],
   );
 
   const [runningProfiles, setRunningProfiles] = useState<Set<string>>(
@@ -357,6 +462,9 @@ export default function Home() {
       const currentRunning = runningProfilesRef.current.has(profile.name);
 
       if (isRunning !== currentRunning) {
+        console.log(
+          `Profile ${profile.name} (${profile.browser}) status changed: ${currentRunning} -> ${isRunning}`,
+        );
         setRunningProfiles((prev) => {
           const next = new Set(prev);
           if (isRunning) {
@@ -411,43 +519,43 @@ export default function Home() {
     [loadProfiles, checkBrowserStatus, isUpdating],
   );
 
-  useEffect(() => {
-    if (profiles.length === 0) return;
-
-    const interval = setInterval(() => {
-      for (const profile of profiles) {
-        void checkBrowserStatus(profile);
-      }
-    }, 500);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [profiles, checkBrowserStatus]);
-
-  useEffect(() => {
-    runningProfilesRef.current = runningProfiles;
-  }, [runningProfiles]);
-
-  useEffect(() => {
-    if (error) {
-      showErrorToast(error);
-      setError(null);
-    }
-  }, [error]);
-
   const handleDeleteProfile = useCallback(
     async (profile: BrowserProfile) => {
       setError(null);
+      console.log("Attempting to delete profile:", profile.name);
+
       try {
+        // First check if the browser is running for this profile
+        const isRunning = await invoke<boolean>("check_browser_status", {
+          profile,
+        });
+
+        if (isRunning) {
+          setError(
+            "Cannot delete profile while browser is running. Please stop the browser first.",
+          );
+          return;
+        }
+
+        // Attempt to delete the profile
         await invoke("delete_profile", { profileName: profile.name });
+        console.log("Profile deletion command completed successfully");
+
+        // Give a small delay to ensure file system operations complete
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        // Reload profiles and groups to ensure UI is updated
         await loadProfiles();
+        await loadGroups();
+
+        console.log("Profile deleted and profiles reloaded successfully");
       } catch (err: unknown) {
         console.error("Failed to delete profile:", err);
-        setError(`Failed to delete profile: ${JSON.stringify(err)}`);
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        setError(`Failed to delete profile: ${errorMessage}`);
       }
     },
-    [loadProfiles],
+    [loadProfiles, loadGroups],
   );
 
   const handleRenameProfile = useCallback(
@@ -479,61 +587,167 @@ export default function Home() {
     [loadProfiles],
   );
 
+  const handleDeleteSelectedProfiles = useCallback(
+    async (profileNames: string[]) => {
+      setError(null);
+      try {
+        await invoke("delete_selected_profiles", { profileNames });
+        await loadProfiles();
+        await loadGroups();
+      } catch (err: unknown) {
+        console.error("Failed to delete selected profiles:", err);
+        setError(`Failed to delete selected profiles: ${JSON.stringify(err)}`);
+      }
+    },
+    [loadProfiles, loadGroups],
+  );
+
+  const handleAssignProfilesToGroup = useCallback((profileNames: string[]) => {
+    setSelectedProfilesForGroup(profileNames);
+    setGroupAssignmentDialogOpen(true);
+  }, []);
+
+  const handleBulkDelete = useCallback(() => {
+    if (selectedProfiles.length === 0) return;
+    setShowBulkDeleteConfirmation(true);
+  }, [selectedProfiles]);
+
+  const confirmBulkDelete = useCallback(async () => {
+    if (selectedProfiles.length === 0) return;
+
+    setIsBulkDeleting(true);
+    try {
+      await invoke("delete_selected_profiles", {
+        profileNames: selectedProfiles,
+      });
+      await loadProfiles();
+      await loadGroups();
+      setSelectedProfiles([]);
+      setShowBulkDeleteConfirmation(false);
+    } catch (error) {
+      console.error("Failed to delete selected profiles:", error);
+      setError(`Failed to delete selected profiles: ${JSON.stringify(error)}`);
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  }, [selectedProfiles, loadProfiles, loadGroups]);
+
+  const handleBulkGroupAssignment = useCallback(() => {
+    if (selectedProfiles.length === 0) return;
+    handleAssignProfilesToGroup(selectedProfiles);
+    setSelectedProfiles([]);
+  }, [selectedProfiles, handleAssignProfilesToGroup]);
+
+  const handleGroupAssignmentComplete = useCallback(async () => {
+    await loadProfiles();
+    await loadGroups();
+    setGroupAssignmentDialogOpen(false);
+    setSelectedProfilesForGroup([]);
+  }, [loadProfiles, loadGroups]);
+
+  const handleGroupManagementComplete = useCallback(async () => {
+    await loadGroups();
+  }, [loadGroups]);
+
+  useEffect(() => {
+    void loadProfilesWithUpdateCheck();
+    void loadGroups();
+
+    // Check for startup default browser prompt
+    void checkStartupPrompt();
+
+    // Listen for URL open events and get cleanup function
+    const setupListeners = async () => {
+      const cleanup = await listenForUrlEvents();
+      return cleanup;
+    };
+
+    let cleanup: (() => void) | undefined;
+    setupListeners().then((cleanupFn) => {
+      cleanup = cleanupFn;
+    });
+
+    // Check for startup URLs (when app was launched as default browser)
+    void checkCurrentUrl();
+
+    // Set up periodic update checks (every 30 minutes)
+    const updateInterval = setInterval(
+      () => {
+        void checkForUpdates();
+      },
+      30 * 60 * 1000,
+    );
+
+    return () => {
+      clearInterval(updateInterval);
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [
+    loadProfilesWithUpdateCheck,
+    checkForUpdates,
+    checkStartupPrompt,
+    listenForUrlEvents,
+    checkCurrentUrl,
+    loadGroups,
+  ]);
+
+  useEffect(() => {
+    if (profiles.length === 0) return;
+
+    const interval = setInterval(() => {
+      for (const profile of profiles) {
+        void checkBrowserStatus(profile);
+      }
+    }, 500);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [profiles, checkBrowserStatus]);
+
+  useEffect(() => {
+    runningProfilesRef.current = runningProfiles;
+  }, [runningProfiles]);
+
+  useEffect(() => {
+    if (error) {
+      showErrorToast(error);
+      setError(null);
+    }
+  }, [error]);
+
+  // Check permissions when they are initialized
+  useEffect(() => {
+    if (isInitialized) {
+      void checkAllPermissions();
+    }
+  }, [isInitialized, checkAllPermissions]);
+
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-8 font-[family-name:var(--font-geist-sans)]  bg-white dark:bg-black">
       <main className="flex flex-col row-start-2 gap-8 items-center w-full max-w-3xl">
-        <Card className="w-full">
+        <Card className="gap-2 w-full">
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <CardTitle>Profiles</CardTitle>
-              <div className="flex gap-2 items-center">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="flex gap-2 items-center"
-                    >
-                      <GoKebabHorizontal className="w-4 h-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setSettingsDialogOpen(true);
-                      }}
-                    >
-                      <GoGear className="mr-2 w-4 h-4" />
-                      Settings
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setImportProfileDialogOpen(true);
-                      }}
-                    >
-                      <FaDownload className="mr-2 w-4 h-4" />
-                      Import Profile
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      onClick={() => {
-                        setCreateProfileDialogOpen(true);
-                      }}
-                      className="flex gap-2 items-center"
-                    >
-                      <GoPlus className="w-4 h-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Create a new profile</TooltipContent>
-                </Tooltip>
-              </div>
-            </div>
+            <HomeHeader
+              selectedProfiles={selectedProfiles}
+              onBulkDelete={handleBulkDelete}
+              onBulkGroupAssignment={handleBulkGroupAssignment}
+              onCreateProfileDialogOpen={setCreateProfileDialogOpen}
+              onGroupManagementDialogOpen={setGroupManagementDialogOpen}
+              onImportProfileDialogOpen={setImportProfileDialogOpen}
+              onProxyManagementDialogOpen={setProxyManagementDialogOpen}
+              onSettingsDialogOpen={setSettingsDialogOpen}
+            />
           </CardHeader>
           <CardContent>
+            <GroupBadges
+              selectedGroupId={selectedGroupId}
+              onGroupSelect={handleSelectGroup}
+              groups={groups}
+              isLoading={areGroupsLoading}
+            />
             <ProfilesDataTable
               data={profiles}
               onLaunchProfile={launchProfile}
@@ -542,8 +756,14 @@ export default function Home() {
               onDeleteProfile={handleDeleteProfile}
               onRenameProfile={handleRenameProfile}
               onChangeVersion={openChangeVersionDialog}
+              onConfigureCamoufox={handleConfigureCamoufox}
               runningProfiles={runningProfiles}
               isUpdating={isUpdating}
+              onDeleteSelectedProfiles={handleDeleteSelectedProfiles}
+              onAssignProfilesToGroup={handleAssignProfilesToGroup}
+              selectedGroupId={selectedGroupId}
+              selectedProfiles={selectedProfiles}
+              onSelectedProfilesChange={setSelectedProfiles}
             />
           </CardContent>
         </Card>
@@ -554,8 +774,8 @@ export default function Home() {
         onClose={() => {
           setProxyDialogOpen(false);
         }}
-        onSave={(proxy: ProxySettings) => void handleSaveProxy(proxy)}
-        initialSettings={currentProfileForProxy?.proxy}
+        onSave={handleSaveProxy}
+        initialProxyId={currentProfileForProxy?.proxy_id}
         browserType={currentProfileForProxy?.browser}
       />
 
@@ -565,6 +785,7 @@ export default function Home() {
           setCreateProfileDialogOpen(false);
         }}
         onCreateProfile={handleCreateProfile}
+        selectedGroupId={selectedGroupId}
       />
 
       <SettingsDialog
@@ -591,6 +812,13 @@ export default function Home() {
         onImportComplete={() => void loadProfiles()}
       />
 
+      <ProxyManagementDialog
+        isOpen={proxyManagementDialogOpen}
+        onClose={() => {
+          setProxyManagementDialogOpen(false);
+        }}
+      />
+
       {pendingUrls.map((pendingUrl) => (
         <ProfileSelectorDialog
           key={pendingUrl.id}
@@ -601,6 +829,7 @@ export default function Home() {
             );
           }}
           url={pendingUrl.url}
+          isUpdating={isUpdating}
           runningProfiles={runningProfiles}
         />
       ))}
@@ -613,6 +842,43 @@ export default function Home() {
         permissionType={currentPermissionType}
         onPermissionGranted={checkNextPermission}
       />
+
+      <CamoufoxConfigDialog
+        isOpen={camoufoxConfigDialogOpen}
+        onClose={() => {
+          setCamoufoxConfigDialogOpen(false);
+        }}
+        profile={currentProfileForCamoufoxConfig}
+        onSave={handleSaveCamoufoxConfig}
+      />
+
+      <GroupManagementDialog
+        isOpen={groupManagementDialogOpen}
+        onClose={() => {
+          setGroupManagementDialogOpen(false);
+        }}
+        onGroupManagementComplete={handleGroupManagementComplete}
+      />
+
+      <GroupAssignmentDialog
+        isOpen={groupAssignmentDialogOpen}
+        onClose={() => {
+          setGroupAssignmentDialogOpen(false);
+        }}
+        selectedProfiles={selectedProfilesForGroup}
+        onAssignmentComplete={handleGroupAssignmentComplete}
+      />
+
+      <DeleteConfirmationDialog
+        isOpen={showBulkDeleteConfirmation}
+        onClose={() => setShowBulkDeleteConfirmation(false)}
+        onConfirm={confirmBulkDelete}
+        title="Delete Selected Profiles"
+        description={`This action cannot be undone. This will permanently delete ${selectedProfiles.length} profile${selectedProfiles.length !== 1 ? "s" : ""} and all associated data.`}
+        confirmButtonText={`Delete ${selectedProfiles.length} Profile${selectedProfiles.length !== 1 ? "s" : ""}`}
+        isLoading={isBulkDeleting}
+        profileNames={selectedProfiles}
+      />
     </div>
   );
 }

src/components/app-update-toast.tsx

@@ -1,26 +1,57 @@
 "use client";
 
+import { FaDownload, FaTimes } from "react-icons/fa";
+import { LuCheckCheck, LuCog, LuRefreshCw } from "react-icons/lu";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import React from "react";
-import { FaDownload, FaTimes } from "react-icons/fa";
-import { LuRefreshCw } from "react-icons/lu";
-
-interface AppUpdateInfo {
-  current_version: string;
-  new_version: string;
-  release_notes: string;
-  download_url: string;
-  is_nightly: boolean;
-  published_at: string;
-}
+import type { AppUpdateInfo, AppUpdateProgress } from "@/types";
 
 interface AppUpdateToastProps {
   updateInfo: AppUpdateInfo;
   onUpdate: (updateInfo: AppUpdateInfo) => Promise<void>;
   onDismiss: () => void;
   isUpdating?: boolean;
-  updateProgress?: string;
+  updateProgress?: AppUpdateProgress | null;
+}
+
+function getStageIcon(stage?: string, isUpdating?: boolean) {
+  if (!isUpdating) {
+    return <FaDownload className="flex-shrink-0 w-5 h-5 text-blue-500" />;
+  }
+
+  switch (stage) {
+    case "downloading":
+      return <FaDownload className="flex-shrink-0 w-5 h-5 text-blue-500" />;
+    case "extracting":
+      return (
+        <LuRefreshCw className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
+      );
+    case "installing":
+      return (
+        <LuCog className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
+      );
+    case "completed":
+      return <LuCheckCheck className="flex-shrink-0 w-5 h-5 text-green-500" />;
+    default:
+      return (
+        <LuRefreshCw className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
+      );
+  }
+}
+
+function getStageDisplayName(stage?: string) {
+  switch (stage) {
+    case "downloading":
+      return "Downloading";
+    case "extracting":
+      return "Extracting";
+    case "installing":
+      return "Installing";
+    case "completed":
+      return "Completed";
+    default:
+      return "Updating";
+  }
 }
 
 export function AppUpdateToast({
@@ -34,22 +65,32 @@ export function AppUpdateToast({
     await onUpdate(updateInfo);
   };
 
+  const showDownloadProgress =
+    isUpdating &&
+    updateProgress?.stage === "downloading" &&
+    updateProgress.percentage !== undefined;
+
+  const showOtherStageProgress =
+    isUpdating &&
+    updateProgress &&
+    (updateProgress.stage === "extracting" ||
+      updateProgress.stage === "installing" ||
+      updateProgress.stage === "completed");
+
   return (
-    <div className="flex items-start w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-lg max-w-md">
+    <div className="flex items-start p-4 w-full max-w-md bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
       <div className="mr-3 mt-0.5">
-        {isUpdating ? (
-          <LuRefreshCw className="h-5 w-5 text-blue-500 animate-spin flex-shrink-0" />
-        ) : (
-          <FaDownload className="h-5 w-5 text-blue-500 flex-shrink-0" />
-        )}
+        {getStageIcon(updateProgress?.stage, isUpdating)}
       </div>
 
       <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
+        <div className="flex gap-2 justify-between items-start">
           <div className="flex flex-col gap-1">
-            <div className="flex items-center gap-2">
-              <span className="font-semibold text-foreground text-sm">
-                Donut Browser Update Available
+            <div className="flex gap-2 items-center">
+              <span className="text-sm font-semibold text-foreground">
+                {isUpdating
+                  ? `${getStageDisplayName(updateProgress?.stage)} Donut Browser Update`
+                  : "Donut Browser Update Available"}
               </span>
               <Badge
                 variant={updateInfo.is_nightly ? "secondary" : "default"}
@@ -59,8 +100,14 @@ export function AppUpdateToast({
               </Badge>
             </div>
             <div className="text-xs text-muted-foreground">
-              Update from {updateInfo.current_version} to{" "}
-              <span className="font-medium">{updateInfo.new_version}</span>
+              {isUpdating ? (
+                updateProgress?.message || "Updating..."
+              ) : (
+                <>
+                  Update from {updateInfo.current_version} to{" "}
+                  <span className="font-medium">{updateInfo.new_version}</span>
+                </>
+              )}
             </div>
           </div>
 
@@ -69,27 +116,56 @@ export function AppUpdateToast({
               variant="ghost"
               size="sm"
               onClick={onDismiss}
-              className="h-6 w-6 p-0 shrink-0"
+              className="p-0 w-6 h-6 shrink-0"
             >
-              <FaTimes className="h-3 w-3" />
+              <FaTimes className="w-3 h-3" />
             </Button>
           )}
         </div>
 
-        {isUpdating && updateProgress && (
-          <div className="mt-2">
-            <p className="text-xs text-muted-foreground">{updateProgress}</p>
+        {/* Download progress */}
+        {showDownloadProgress && updateProgress && (
+          <div className="mt-2 space-y-1">
+            <div className="flex justify-between items-center">
+              <p className="flex-1 min-w-0 text-xs text-muted-foreground">
+                {updateProgress.percentage?.toFixed(1)}%
+                {updateProgress.speed && ` • ${updateProgress.speed} MB/s`}
+                {updateProgress.eta && ` • ${updateProgress.eta} remaining`}
+              </p>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+              <div
+                className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                style={{ width: `${updateProgress.percentage}%` }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Other stage progress (with visual indicators) */}
+        {showOtherStageProgress && (
+          <div className="mt-2 space-y-1">
+            {/* Progress indicator for non-downloading stages */}
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+              <div
+                className={`h-1.5 rounded-full transition-all duration-500 ${
+                  updateProgress.stage === "completed"
+                    ? "bg-green-500 w-full"
+                    : "bg-blue-500 w-full animate-pulse"
+                }`}
+              />
+            </div>
           </div>
         )}
 
         {!isUpdating && (
-          <div className="flex items-center gap-2 mt-3">
+          <div className="flex gap-2 items-center mt-3">
             <Button
               onClick={() => void handleUpdateClick()}
               size="sm"
-              className="flex items-center gap-2 text-xs"
+              className="flex gap-2 items-center text-xs"
             >
-              <FaDownload className="h-3 w-3" />
+              <FaDownload className="w-3 h-3" />
               Update Now
             </Button>
             <Button
@@ -102,21 +178,6 @@ export function AppUpdateToast({
             </Button>
           </div>
         )}
-
-        {updateInfo.release_notes && !isUpdating && (
-          <div className="mt-2">
-            <details className="text-xs">
-              <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
-                Release Notes
-              </summary>
-              <div className="mt-1 text-muted-foreground whitespace-pre-wrap max-h-32 overflow-y-auto">
-                {updateInfo.release_notes.length > 200
-                  ? `${updateInfo.release_notes.substring(0, 200)}...`
-                  : updateInfo.release_notes}
-              </div>
-            </details>
-          </div>
-        )}
       </div>
     </div>
   );

src/components/camoufox-config-dialog.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { BrowserProfile, CamoufoxConfig } from "@/types";
+
+interface CamoufoxConfigDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  profile: BrowserProfile | null;
+  onSave: (profile: BrowserProfile, config: CamoufoxConfig) => Promise<void>;
+}
+
+export function CamoufoxConfigDialog({
+  isOpen,
+  onClose,
+  profile,
+  onSave,
+}: CamoufoxConfigDialogProps) {
+  const [config, setConfig] = useState<CamoufoxConfig>({
+    geoip: true,
+  });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Initialize config when profile changes
+  useEffect(() => {
+    if (profile && profile.browser === "camoufox") {
+      setConfig(
+        profile.camoufox_config || {
+          geoip: true,
+        },
+      );
+    }
+  }, [profile]);
+
+  const updateConfig = (key: keyof CamoufoxConfig, value: unknown) => {
+    setConfig((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = async () => {
+    if (!profile) return;
+
+    // Validate fingerprint JSON if it exists
+    if (config.fingerprint) {
+      try {
+        JSON.parse(config.fingerprint);
+      } catch (_error) {
+        const { toast } = await import("sonner");
+        toast.error("Invalid fingerprint configuration", {
+          description:
+            "The fingerprint configuration contains invalid JSON. Please check your advanced settings.",
+        });
+        return;
+      }
+    }
+
+    setIsSaving(true);
+    try {
+      await onSave(profile, config);
+      onClose();
+    } catch (error) {
+      console.error("Failed to save camoufox config:", error);
+      const { toast } = await import("sonner");
+      toast.error("Failed to save configuration", {
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleClose = () => {
+    // Reset config to original when closing without saving
+    if (profile && profile.browser === "camoufox") {
+      setConfig(
+        profile.camoufox_config || {
+          geoip: true,
+        },
+      );
+    }
+    onClose();
+  };
+
+  if (!profile || profile.browser !== "camoufox") {
+    return null;
+  }
+
+  // No OS warning needed anymore since we removed OS selection
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>
+            Configure Camoufox Settings - {profile.name}
+          </DialogTitle>
+        </DialogHeader>
+
+        <ScrollArea className="flex-1 pr-6 h-[400px]">
+          <div className="py-4">
+            <SharedCamoufoxConfigForm
+              config={config}
+              onConfigChange={updateConfig}
+              forceAdvanced={true}
+            />
+          </div>
+        </ScrollArea>
+
+        <DialogFooter className="flex-shrink-0 pt-4 border-t">
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? "Saving..." : "Save Configuration"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/change-version-dialog.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { LuTriangleAlert } from "react-icons/lu";
 import { LoadingButton } from "@/components/loading-button";
 import { ReleaseTypeSelector } from "@/components/release-type-selector";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -16,9 +19,6 @@ import { Label } from "@/components/ui/label";
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { getBrowserDisplayName } from "@/lib/browser-utils";
 import type { BrowserProfile, BrowserReleaseTypes } from "@/types";
-import { invoke } from "@tauri-apps/api/core";
-import { useEffect, useState } from "react";
-import { LuTriangleAlert } from "react-icons/lu";
 
 interface ChangeVersionDialogProps {
   isOpen: boolean;
@@ -44,23 +44,13 @@ export function ChangeVersionDialog({
 
   const {
     downloadedVersions,
-    isDownloading,
+    isBrowserDownloading,
     loadDownloadedVersions,
     downloadBrowser,
     isVersionDownloaded,
   } = useBrowserDownload();
 
-  useEffect(() => {
-    if (isOpen && profile) {
-      // Set current release type based on profile
-      setSelectedReleaseType(profile.release_type as "stable" | "nightly");
-      setAcknowledgeDowngrade(false);
-      void loadReleaseTypes(profile.browser);
-      void loadDownloadedVersions(profile.browser);
-    }
-  }, [isOpen, profile, loadDownloadedVersions]);
-
-  const loadReleaseTypes = async (browser: string) => {
+  const loadReleaseTypes = useCallback(async (browser: string) => {
     setIsLoadingReleaseTypes(true);
     try {
       const releaseTypes = await invoke<BrowserReleaseTypes>(
@@ -73,7 +63,7 @@ export function ChangeVersionDialog({
     } finally {
       setIsLoadingReleaseTypes(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     if (
@@ -93,7 +83,7 @@ export function ChangeVersionDialog({
     }
   }, [selectedReleaseType, profile]);
 
-  const handleDownload = async () => {
+  const handleDownload = useCallback(async () => {
     if (!profile || !selectedReleaseType) return;
 
     const version =
@@ -103,9 +93,9 @@ export function ChangeVersionDialog({
     if (!version) return;
 
     await downloadBrowser(profile.browser, version);
-  };
+  }, [profile, selectedReleaseType, downloadBrowser, releaseTypes]);
 
-  const handleVersionChange = async () => {
+  const handleVersionChange = useCallback(async () => {
     if (!profile || !selectedReleaseType) return;
 
     const version =
@@ -127,7 +117,7 @@ export function ChangeVersionDialog({
     } finally {
       setIsUpdating(false);
     }
-  };
+  }, [profile, selectedReleaseType, releaseTypes, onVersionChanged, onClose]);
 
   const selectedVersion =
     selectedReleaseType === "stable"
@@ -142,6 +132,16 @@ export function ChangeVersionDialog({
     isVersionDownloaded(selectedVersion) &&
     (!showDowngradeWarning || acknowledgeDowngrade);
 
+  useEffect(() => {
+    if (isOpen && profile) {
+      // Set current release type based on profile
+      setSelectedReleaseType(profile.release_type as "stable" | "nightly");
+      setAcknowledgeDowngrade(false);
+      void loadReleaseTypes(profile.browser);
+      void loadDownloadedVersions(profile.browser);
+    }
+  }, [isOpen, profile, loadDownloadedVersions, loadReleaseTypes]);
+
   if (!profile) return null;
 
   return (
@@ -207,7 +207,7 @@ export function ChangeVersionDialog({
                       onReleaseTypeSelect={setSelectedReleaseType}
                       availableReleaseTypes={releaseTypes}
                       browser={profile.browser}
-                      isDownloading={isDownloading}
+                      isDownloading={isBrowserDownloading(profile.browser)}
                       onDownload={() => {
                         void handleDownload();
                       }}
@@ -247,7 +247,7 @@ export function ChangeVersionDialog({
                     onReleaseTypeSelect={setSelectedReleaseType}
                     availableReleaseTypes={releaseTypes}
                     browser={profile.browser}
-                    isDownloading={isDownloading}
+                    isDownloading={isBrowserDownloading(profile.browser)}
                     onDownload={() => {
                       void handleDownload();
                     }}

src/components/create-group-dialog.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface CreateGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroupCreated: (group: ProfileGroup) => void;
+}
+
+export function CreateGroupDialog({
+  isOpen,
+  onClose,
+  onGroupCreated,
+}: CreateGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = useCallback(async () => {
+    if (!groupName.trim()) return;
+
+    setIsCreating(true);
+    setError(null);
+    try {
+      const newGroup = await invoke<ProfileGroup>("create_profile_group", {
+        name: groupName.trim(),
+      });
+
+      toast.success("Group created successfully");
+      onGroupCreated(newGroup);
+      setGroupName("");
+      onClose();
+    } catch (err) {
+      console.error("Failed to create group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to create group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [groupName, onGroupCreated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setGroupName("");
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New Group</DialogTitle>
+          <DialogDescription>
+            Create a new group to organize your browser profiles.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleCreate();
+                }
+              }}
+              disabled={isCreating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isCreating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isCreating}
+            onClick={() => void handleCreate()}
+            disabled={!groupName.trim()}
+          >
+            Create Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/custom-toast.tsx

@@ -48,7 +48,6 @@
  * ```
  */
 
-import React from "react";
 import {
   LuCheckCheck,
   LuDownload,
@@ -134,6 +133,7 @@ function getToastIcon(type: ToastProps["type"], stage?: string) {
         );
       }
       return <LuDownload className="flex-shrink-0 w-4 h-4 text-blue-500" />;
+
     case "version-update":
       return (
         <LuRefreshCw className="flex-shrink-0 w-4 h-4 text-blue-500 animate-spin" />

src/components/delete-confirmation-dialog.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface DeleteConfirmationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void | Promise<void>;
+  title: string;
+  description: string;
+  confirmButtonText?: string;
+  isLoading?: boolean;
+  profileNames?: string[];
+}
+
+export function DeleteConfirmationDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmButtonText = "Delete",
+  isLoading = false,
+  profileNames,
+}: DeleteConfirmationDialogProps) {
+  const handleConfirm = async () => {
+    await onConfirm();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+          {profileNames && profileNames.length > 0 && (
+            <div className="mt-4">
+              <p className="text-sm font-medium mb-2">
+                Profiles to be deleted:
+              </p>
+              <div className="bg-muted rounded-md p-3 max-h-32 overflow-y-auto">
+                <ul className="space-y-1">
+                  {profileNames.map((name) => (
+                    <li key={name} className="text-sm text-muted-foreground">
+                      • {name}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => void handleConfirm()}
+            disabled={isLoading}
+          >
+            {isLoading ? "Deleting..." : confirmButtonText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/delete-group-dialog.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { BrowserProfile, ProfileGroup } from "@/types";
+
+interface DeleteGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupDeleted: () => void;
+}
+
+export function DeleteGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupDeleted,
+}: DeleteGroupDialogProps) {
+  const [associatedProfiles, setAssociatedProfiles] = useState<
+    BrowserProfile[]
+  >([]);
+  const [deleteAction, setDeleteAction] = useState<"move" | "delete">("move");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadAssociatedProfiles = useCallback(async () => {
+    if (!group) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const allProfiles = await invoke<BrowserProfile[]>(
+        "list_browser_profiles",
+      );
+      const groupProfiles = allProfiles.filter(
+        (profile) => profile.group_id === group.id,
+      );
+      setAssociatedProfiles(groupProfiles);
+    } catch (err) {
+      console.error("Failed to load associated profiles:", err);
+      setError(err instanceof Error ? err.message : "Failed to load profiles");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [group]);
+
+  useEffect(() => {
+    if (isOpen && group) {
+      void loadAssociatedProfiles();
+    }
+  }, [isOpen, group, loadAssociatedProfiles]);
+
+  const handleDelete = useCallback(async () => {
+    if (!group) return;
+
+    setIsDeleting(true);
+    setError(null);
+    try {
+      if (deleteAction === "delete" && associatedProfiles.length > 0) {
+        // Delete all associated profiles first
+        const profileNames = associatedProfiles.map((p) => p.name);
+        await invoke("delete_selected_profiles", { profileNames });
+      } else if (deleteAction === "move" && associatedProfiles.length > 0) {
+        // Move profiles to default group (null group_id)
+        const profileNames = associatedProfiles.map((p) => p.name);
+        await invoke("assign_profiles_to_group", {
+          profileNames,
+          groupId: null,
+        });
+      }
+
+      // Delete the group
+      await invoke("delete_profile_group", { groupId: group.id });
+
+      toast.success("Group deleted successfully");
+      onGroupDeleted();
+      onClose();
+    } catch (err) {
+      console.error("Failed to delete group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to delete group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [group, deleteAction, associatedProfiles, onGroupDeleted, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    setDeleteAction("move");
+    setAssociatedProfiles([]);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete Group</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete the group
+            "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {isLoading ? (
+            <div className="text-sm text-muted-foreground">
+              Loading associated profiles...
+            </div>
+          ) : (
+            <>
+              {associatedProfiles.length > 0 && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label>
+                      Associated Profiles ({associatedProfiles.length})
+                    </Label>
+                    <ScrollArea className="h-32 w-full border rounded-md p-3">
+                      <div className="space-y-1">
+                        {associatedProfiles.map((profile) => (
+                          <div key={profile.id} className="text-sm">
+                            • {profile.name}
+                          </div>
+                        ))}
+                      </div>
+                    </ScrollArea>
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label>What should happen to these profiles?</Label>
+                    <RadioGroup
+                      value={deleteAction}
+                      onValueChange={(value) =>
+                        setDeleteAction(value as "move" | "delete")
+                      }
+                    >
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="move" id="move" />
+                        <Label htmlFor="move" className="text-sm">
+                          Move profiles to Default group
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="delete" id="delete" />
+                        <Label
+                          htmlFor="delete"
+                          className="text-sm text-red-600"
+                        >
+                          Delete profiles along with the group
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </div>
+                </div>
+              )}
+
+              {associatedProfiles.length === 0 && !isLoading && (
+                <div className="text-sm text-muted-foreground">
+                  This group has no associated profiles.
+                </div>
+              )}
+            </>
+          )}
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <LoadingButton
+            variant="destructive"
+            isLoading={isDeleting}
+            onClick={() => void handleDelete()}
+            disabled={isLoading}
+          >
+            Delete Group
+            {deleteAction === "delete" &&
+              associatedProfiles.length > 0 &&
+              " & Profiles"}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/edit-group-dialog.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface EditGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupUpdated: (group: ProfileGroup) => void;
+}
+
+export function EditGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupUpdated,
+}: EditGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (group) {
+      setGroupName(group.name);
+    } else {
+      setGroupName("");
+    }
+    setError(null);
+  }, [group]);
+
+  const handleUpdate = useCallback(async () => {
+    if (!group || !groupName.trim()) return;
+
+    setIsUpdating(true);
+    setError(null);
+    try {
+      const updatedGroup = await invoke<ProfileGroup>("update_profile_group", {
+        groupId: group.id,
+        name: groupName.trim(),
+      });
+
+      toast.success("Group updated successfully");
+      onGroupUpdated(updatedGroup);
+      onClose();
+    } catch (err) {
+      console.error("Failed to update group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to update group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsUpdating(false);
+    }
+  }, [group, groupName, onGroupUpdated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Group</DialogTitle>
+          <DialogDescription>
+            Update the name of the group "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleUpdate();
+                }
+              }}
+              disabled={isUpdating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isUpdating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isUpdating}
+            onClick={() => void handleUpdate()}
+            disabled={!groupName.trim() || groupName === group?.name}
+          >
+            Update Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/group-assignment-dialog.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ProfileGroup } from "@/types";
+
+interface GroupAssignmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProfiles: string[];
+  onAssignmentComplete: () => void;
+}
+
+export function GroupAssignmentDialog({
+  isOpen,
+  onClose,
+  selectedProfiles,
+  onAssignmentComplete,
+}: GroupAssignmentDialogProps) {
+  const [groups, setGroups] = useState<ProfileGroup[]>([]);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isAssigning, setIsAssigning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleAssign = useCallback(async () => {
+    setIsAssigning(true);
+    setError(null);
+    try {
+      await invoke("assign_profiles_to_group", {
+        profileNames: selectedProfiles,
+        groupId: selectedGroupId,
+      });
+
+      const groupName = selectedGroupId
+        ? groups.find((g) => g.id === selectedGroupId)?.name || "Unknown Group"
+        : "Default";
+
+      toast.success(
+        `Successfully assigned ${selectedProfiles.length} profile(s) to ${groupName}`,
+      );
+      onAssignmentComplete();
+      onClose();
+    } catch (err) {
+      console.error("Failed to assign profiles to group:", err);
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "Failed to assign profiles to group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsAssigning(false);
+    }
+  }, [
+    selectedProfiles,
+    selectedGroupId,
+    groups,
+    onAssignmentComplete,
+    onClose,
+  ]);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+      setSelectedGroupId(null);
+      setError(null);
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Assign to Group</DialogTitle>
+          <DialogDescription>
+            Assign {selectedProfiles.length} selected profile(s) to a group.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Selected Profiles:</Label>
+            <div className="p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
+              <ul className="text-sm space-y-1">
+                {selectedProfiles.map((profileName) => (
+                  <li key={profileName} className="truncate">
+                    • {profileName}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="group-select">Assign to Group:</Label>
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : (
+              <Select
+                value={selectedGroupId || "default"}
+                onValueChange={(value) => {
+                  setSelectedGroupId(value === "default" ? null : value);
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a group" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">Default (No Group)</SelectItem>
+                  {groups.map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isAssigning}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isAssigning}
+            onClick={() => void handleAssign()}
+            disabled={isLoading}
+          >
+            Assign
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/group-badges.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { GroupWithCount } from "@/types";
+
+interface GroupBadgesProps {
+  selectedGroupId: string | null;
+  onGroupSelect: (groupId: string) => void;
+  refreshTrigger?: number;
+  groups: GroupWithCount[];
+  isLoading: boolean;
+}
+
+export function GroupBadges({
+  selectedGroupId,
+  onGroupSelect,
+  groups,
+  isLoading,
+}: GroupBadgesProps) {
+  if (isLoading && !groups.length) {
+    return (
+      <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex items-center gap-2 px-4.5 py-1.5 text-xs">
+          Loading groups...
+        </div>
+      </div>
+    );
+  }
+
+  if (groups.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 mb-4">
+      {groups.map((group) => (
+        <Badge
+          key={group.id}
+          variant={selectedGroupId === group.id ? "default" : "secondary"}
+          className="cursor-pointer hover:bg-primary/80 transition-colors flex items-center gap-2 px-3 py-1"
+          onClick={() => {
+            onGroupSelect(selectedGroupId === group.id ? "default" : group.id);
+          }}
+        >
+          <span>{group.name}</span>
+          <span className="bg-background/20 text-xs px-1.5 py-0.5 rounded-sm">
+            {group.count}
+          </span>
+        </Badge>
+      ))}
+    </div>
+  );
+}

src/components/group-management-dialog.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { GoPlus } from "react-icons/go";
+import { LuPencil, LuTrash2 } from "react-icons/lu";
+import { CreateGroupDialog } from "@/components/create-group-dialog";
+import { DeleteGroupDialog } from "@/components/delete-group-dialog";
+import { EditGroupDialog } from "@/components/edit-group-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { ProfileGroup } from "@/types";
+
+interface GroupManagementDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroupManagementComplete: () => void;
+}
+
+export function GroupManagementDialog({
+  isOpen,
+  onClose,
+  onGroupManagementComplete,
+}: GroupManagementDialogProps) {
+  const [groups, setGroups] = useState<ProfileGroup[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Dialog states
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedGroup, setSelectedGroup] = useState<ProfileGroup | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleGroupCreated = useCallback(
+    (newGroup: ProfileGroup) => {
+      setGroups((prev) => [...prev, newGroup]);
+      onGroupManagementComplete();
+    },
+    [onGroupManagementComplete],
+  );
+
+  const handleGroupUpdated = useCallback(
+    (updatedGroup: ProfileGroup) => {
+      setGroups((prev) =>
+        prev.map((group) =>
+          group.id === updatedGroup.id ? updatedGroup : group,
+        ),
+      );
+      onGroupManagementComplete();
+    },
+    [onGroupManagementComplete],
+  );
+
+  const handleGroupDeleted = useCallback(() => {
+    void loadGroups();
+    onGroupManagementComplete();
+  }, [loadGroups, onGroupManagementComplete]);
+
+  const handleEditGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setEditDialogOpen(true);
+  }, []);
+
+  const handleDeleteGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Manage Profile Groups</DialogTitle>
+            <DialogDescription>
+              Create, edit, and delete profile groups. Profiles without a group
+              will appear in the "Default" group.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Create new group button */}
+            <div className="flex justify-between items-center">
+              <Label>Groups</Label>
+              <Button
+                size="sm"
+                onClick={() => setCreateDialogOpen(true)}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+                Create Group
+              </Button>
+            </div>
+
+            {error && (
+              <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            {/* Groups list */}
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : groups.length === 0 ? (
+              <div className="text-sm text-muted-foreground">
+                No groups created yet. Create your first group using the button
+                above.
+              </div>
+            ) : (
+              <div className="border rounded-md">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead className="w-24">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {groups.map((group) => (
+                      <TableRow key={group.id}>
+                        <TableCell className="font-medium">
+                          {group.name}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleEditGroup(group)}
+                            >
+                              <LuPencil className="w-4 h-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteGroup(group)}
+                            >
+                              <LuTrash2 className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <CreateGroupDialog
+        isOpen={createDialogOpen}
+        onClose={() => setCreateDialogOpen(false)}
+        onGroupCreated={handleGroupCreated}
+      />
+
+      <EditGroupDialog
+        isOpen={editDialogOpen}
+        onClose={() => setEditDialogOpen(false)}
+        group={selectedGroup}
+        onGroupUpdated={handleGroupUpdated}
+      />
+
+      <DeleteGroupDialog
+        isOpen={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        group={selectedGroup}
+        onGroupDeleted={handleGroupDeleted}
+      />
+    </>
+  );
+}

src/components/home-header.tsx

@@ -0,0 +1,153 @@
+import { FaDownload } from "react-icons/fa";
+import { FiWifi } from "react-icons/fi";
+import { GoGear, GoKebabHorizontal, GoPlus } from "react-icons/go";
+import { LuTrash2, LuUsers } from "react-icons/lu";
+import { Logo } from "./icons/logo";
+import { Button } from "./ui/button";
+import { CardTitle } from "./ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  selectedProfiles: string[];
+  onBulkGroupAssignment: () => void;
+  onBulkDelete: () => void;
+  onSettingsDialogOpen: (open: boolean) => void;
+  onProxyManagementDialogOpen: (open: boolean) => void;
+  onGroupManagementDialogOpen: (open: boolean) => void;
+  onImportProfileDialogOpen: (open: boolean) => void;
+  onCreateProfileDialogOpen: (open: boolean) => void;
+};
+
+const HomeHeader = ({
+  selectedProfiles,
+  onBulkGroupAssignment,
+  onBulkDelete,
+  onSettingsDialogOpen,
+  onProxyManagementDialogOpen,
+  onGroupManagementDialogOpen,
+  onImportProfileDialogOpen,
+  onCreateProfileDialogOpen,
+}: Props) => {
+  const handleLogoClick = () => {
+    // Trigger the same URL handling logic as if the URL came from the system
+    const event = new CustomEvent("url-open-request", {
+      detail: "https://donutbrowser.com",
+    });
+    window.dispatchEvent(event);
+  };
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={handleLogoClick}
+          className="p-1 cursor-pointer"
+          title="Open donutbrowser.com"
+        >
+          <Logo className="w-10 h-10" />
+        </button>
+        {selectedProfiles.length > 0 ? (
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">
+              {selectedProfiles.length} profile
+              {selectedProfiles.length !== 1 ? "s" : ""} selected
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onBulkGroupAssignment}
+                className="flex gap-2 items-center"
+              >
+                <LuUsers className="w-4 h-4" />
+                Assign to Group
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={onBulkDelete}
+                className="flex gap-2 items-center"
+              >
+                <LuTrash2 className="w-4 h-4" />
+                Delete Selected
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <CardTitle>Donut</CardTitle>
+        )}
+      </div>
+      <div className="flex gap-2 items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex gap-2 items-center"
+            >
+              <GoKebabHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => {
+                onSettingsDialogOpen(true);
+              }}
+            >
+              <GoGear className="mr-2 w-4 h-4" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onProxyManagementDialogOpen(true);
+              }}
+            >
+              <FiWifi className="mr-2 w-4 h-4" />
+              Proxies
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onGroupManagementDialogOpen(true);
+              }}
+            >
+              <LuUsers className="mr-2 w-4 h-4" />
+              Groups
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onImportProfileDialogOpen(true);
+              }}
+            >
+              <FaDownload className="mr-2 w-4 h-4" />
+              Import Profile
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <Button
+                size="sm"
+                onClick={() => {
+                  onCreateProfileDialogOpen(true);
+                }}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Create a new profile</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default HomeHeader;

src/components/import-profile-dialog.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { useCallback, useEffect, useState } from "react";
+import { FaFolder } from "react-icons/fa";
+import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,11 +26,6 @@ import {
 import { useBrowserSupport } from "@/hooks/use-browser-support";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
 import type { DetectedProfile } from "@/types";
-import { invoke } from "@tauri-apps/api/core";
-import { open } from "@tauri-apps/plugin-dialog";
-import { useEffect, useState } from "react";
-import { FaFolder } from "react-icons/fa";
-import { toast } from "sonner";
 
 interface ImportProfileDialogProps {
   isOpen: boolean;
@@ -63,13 +63,7 @@ export function ImportProfileDialog({
   const { supportedBrowsers, isLoading: isLoadingSupport } =
     useBrowserSupport();
 
-  useEffect(() => {
-    if (isOpen) {
-      void loadDetectedProfiles();
-    }
-  }, [isOpen]);
-
-  const loadDetectedProfiles = async () => {
+  const loadDetectedProfiles = useCallback(async () => {
     setIsLoading(true);
     try {
       const profiles = await invoke<DetectedProfile[]>(
@@ -96,7 +90,7 @@ export function ImportProfileDialog({
     } finally {
       setIsLoading(false);
     }
-  };
+  }, []);
 
   const handleBrowseFolder = async () => {
     try {
@@ -115,7 +109,7 @@ export function ImportProfileDialog({
     }
   };
 
-  const handleAutoDetectImport = async () => {
+  const handleAutoDetectImport = useCallback(async () => {
     if (!selectedDetectedProfile || !autoDetectProfileName.trim()) {
       toast.error("Please select a profile and provide a name");
       return;
@@ -148,13 +142,31 @@ export function ImportProfileDialog({
       console.error("Failed to import profile:", error);
       const errorMessage =
         error instanceof Error ? error.message : String(error);
-      toast.error(`Failed to import profile: ${errorMessage}`);
+
+      // Check if error is about browser not being downloaded
+      if (errorMessage.includes("No downloaded versions found")) {
+        const browserDisplayName = getBrowserDisplayName(profile.browser);
+        toast.error(
+          `${browserDisplayName} is not installed. Please download ${browserDisplayName} first from the main window, then try importing again.`,
+          {
+            duration: 8000,
+          },
+        );
+      } else {
+        toast.error(`Failed to import profile: ${errorMessage}`);
+      }
     } finally {
       setIsImporting(false);
     }
-  };
+  }, [
+    selectedDetectedProfile,
+    autoDetectProfileName,
+    detectedProfiles,
+    onImportComplete,
+    onClose,
+  ]);
 
-  const handleManualImport = async () => {
+  const handleManualImport = useCallback(async () => {
     if (
       !manualBrowserType ||
       !manualProfilePath.trim() ||
@@ -183,11 +195,29 @@ export function ImportProfileDialog({
       console.error("Failed to import profile:", error);
       const errorMessage =
         error instanceof Error ? error.message : String(error);
-      toast.error(`Failed to import profile: ${errorMessage}`);
+
+      // Check if error is about browser not being downloaded
+      if (errorMessage.includes("No downloaded versions found")) {
+        const browserDisplayName = getBrowserDisplayName(manualBrowserType);
+        toast.error(
+          `${browserDisplayName} is not installed. Please download ${browserDisplayName} first from the main window, then try importing again.`,
+          {
+            duration: 8000,
+          },
+        );
+      } else {
+        toast.error(`Failed to import profile: ${errorMessage}`);
+      }
     } finally {
       setIsImporting(false);
     }
-  };
+  }, [
+    manualBrowserType,
+    manualProfilePath,
+    manualProfileName,
+    onImportComplete,
+    onClose,
+  ]);
 
   const handleClose = () => {
     setSelectedDetectedProfile(null);
@@ -222,6 +252,12 @@ export function ImportProfileDialog({
     (p) => p.path === selectedDetectedProfile,
   );
 
+  useEffect(() => {
+    if (isOpen) {
+      void loadDetectedProfiles();
+    }
+  }, [isOpen, loadDetectedProfiles]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-2xl max-h-[80vh] my-8 flex flex-col">

src/components/loading-button.tsx

@@ -1,5 +1,6 @@
 import { LuLoaderCircle } from "react-icons/lu";
 import { type ButtonProps, Button as UIButton } from "./ui/button";
+
 type Props = ButtonProps & {
   isLoading: boolean;
   "aria-label"?: string;

src/components/multiple-selector.tsx

@@ -0,0 +1,537 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: temporary suppress until in active use */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: temporary suppress until in active use */
+"use client";
+
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import * as React from "react";
+import { forwardRef, useEffect } from "react";
+import { LuX } from "react-icons/lu";
+import { cn } from "../lib/utils";
+import { Badge } from "./ui/badge";
+import { Command, CommandGroup, CommandItem, CommandList } from "./ui/command";
+
+export interface Option {
+  value: string;
+  label?: string;
+  disable?: boolean;
+  /** fixed option that can't be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+interface GroupOption {
+  [key: string]: Option[];
+}
+
+interface MultipleSelectorProps {
+  value?: Option[];
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
+    "value" | "placeholder" | "disabled"
+  >;
+}
+
+export interface MultipleSelectorRef {
+  selectedValue: Option[];
+  input: HTMLInputElement;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function transToGroupOption(options: Option[], groupBy?: string) {
+  if (options.length === 0) {
+    return {};
+  }
+  if (!groupBy) {
+    return {
+      "": options,
+    };
+  }
+
+  const groupOption: GroupOption = {};
+  options.forEach((option) => {
+    const key = (option[groupBy] as string) || "";
+    if (!groupOption[key]) {
+      groupOption[key] = [option];
+    } else {
+      groupOption[key]?.push(option);
+    }
+  });
+  return groupOption;
+}
+
+function removePickedOption(groupOption: GroupOption, picked: Option[]) {
+  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
+
+  for (const [key, value] of Object.entries(cloneOption)) {
+    cloneOption[key] = value.filter(
+      (val) => !picked.find((p) => p.value === val.value),
+    );
+  }
+  return cloneOption;
+}
+
+function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
+  for (const [, value] of Object.entries(groupOption)) {
+    if (
+      value.some((option) => targetOption.find((p) => p.value === option.value))
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.
+ * So we create one and copy the `Empty` implementation from `cmdk`.
+ *
+ * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
+ **/
+const CommandEmpty = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, forwardedRef) => {
+  const render = useCommandState((state) => state.filtered.count === 0);
+
+  if (!render) return null;
+
+  return (
+    <div
+      ref={forwardedRef}
+      className={cn("py-6 text-sm text-center", className)}
+      cmdk-empty=""
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+CommandEmpty.displayName = "CommandEmpty";
+
+const MultipleSelector = React.forwardRef<
+  MultipleSelectorRef,
+  MultipleSelectorProps
+>(
+  (
+    {
+      value,
+      onChange,
+      placeholder,
+      defaultOptions: arrayDefaultOptions = [],
+      options: arrayOptions,
+      delay,
+      onSearch,
+      loadingIndicator,
+      emptyIndicator,
+      maxSelected = Number.MAX_SAFE_INTEGER,
+      onMaxSelected,
+      hidePlaceholderWhenSelected,
+      disabled,
+      groupBy,
+      className,
+      badgeClassName,
+      selectFirstItem = true,
+      creatable = false,
+      triggerSearchOnFocus = false,
+      commandProps,
+      inputProps,
+    }: MultipleSelectorProps,
+    ref: React.Ref<MultipleSelectorRef>,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [open, setOpen] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const [selected, setSelected] = React.useState<Option[]>(value || []);
+    const [options, setOptions] = React.useState<GroupOption>(
+      transToGroupOption(arrayDefaultOptions, groupBy),
+    );
+    const [inputValue, setInputValue] = React.useState("");
+    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        selectedValue: [...selected],
+        input: inputRef.current as HTMLInputElement,
+        focus: () => inputRef.current?.focus(),
+      }),
+      [selected],
+    );
+
+    const handleUnselect = React.useCallback(
+      (option: Option) => {
+        const newOptions = selected.filter((s) => s.value !== option.value);
+        setSelected(newOptions);
+        onChange?.(newOptions);
+      },
+      [onChange, selected],
+    );
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const input = inputRef.current;
+        if (input) {
+          if (e.key === "Delete" || e.key === "Backspace") {
+            if (input.value === "" && selected.length > 0) {
+              const lastSelectOption = selected[selected.length - 1];
+              // If last item is fixed, we should not remove it.
+              if (!lastSelectOption?.fixed) {
+                // biome-ignore lint/style/noNonNullAssertion: false positive
+                handleUnselect(selected.at(-1)!);
+              }
+            }
+          }
+          // This is not a default behavior of the <input /> field
+          if (e.key === "Escape") {
+            input.blur();
+          }
+        }
+      },
+      [handleUnselect, selected],
+    );
+
+    useEffect(() => {
+      if (value) {
+        setSelected(value);
+      }
+    }, [value]);
+
+    useEffect(() => {
+      /** If `onSearch` is provided, do not trigger options updated. */
+      if (!arrayOptions || onSearch) {
+        return;
+      }
+      const newOption = transToGroupOption(arrayOptions || [], groupBy);
+      if (JSON.stringify(newOption) !== JSON.stringify(options)) {
+        setOptions(newOption);
+      }
+    }, [arrayOptions, groupBy, onSearch, options]);
+
+    useEffect(() => {
+      const doSearch = async () => {
+        setIsLoading(true);
+        const res = await onSearch?.(debouncedSearchTerm);
+        setOptions(transToGroupOption(res || [], groupBy));
+        setIsLoading(false);
+      };
+
+      const exec = async () => {
+        if (!onSearch || !open) return;
+
+        if (triggerSearchOnFocus) {
+          await doSearch();
+        }
+
+        if (debouncedSearchTerm) {
+          await doSearch();
+        }
+      };
+
+      void exec();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);
+
+    const CreatableItem = () => {
+      if (!creatable) return undefined;
+      if (
+        isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
+        selected.find((s) => s.value === inputValue)
+      ) {
+        return undefined;
+      }
+
+      const Item = (
+        <CommandItem
+          value={inputValue}
+          className="cursor-pointer"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onSelect={(value: string) => {
+            if (selected.length >= maxSelected) {
+              onMaxSelected?.(selected.length);
+              return;
+            }
+            setInputValue("");
+            const newOptions = [...selected, { value, label: value }];
+            setSelected(newOptions);
+            onChange?.(newOptions);
+          }}
+        >
+          {`Create "${inputValue}"`}
+        </CommandItem>
+      );
+
+      // For normal creatable
+      if (!onSearch && inputValue.length > 0) {
+        return Item;
+      }
+
+      // For async search creatable. avoid showing creatable item before loading at first.
+      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+        return Item;
+      }
+
+      return undefined;
+    };
+
+    const EmptyItem = React.useCallback(() => {
+      if (!emptyIndicator) return undefined;
+
+      // For async search that showing emptyIndicator
+      if (onSearch && !creatable && Object.keys(options).length === 0) {
+        return (
+          <CommandItem value="-" disabled>
+            {emptyIndicator}
+          </CommandItem>
+        );
+      }
+
+      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;
+    }, [creatable, emptyIndicator, onSearch, options]);
+
+    const selectables = React.useMemo<GroupOption>(
+      () => removePickedOption(options, selected),
+      [options, selected],
+    );
+
+    /** Avoid Creatable Selector freezing or lagging when paste a long string. */
+    const commandFilter = React.useCallback(() => {
+      if (commandProps?.filter) {
+        return commandProps.filter;
+      }
+
+      if (creatable) {
+        return (value: string, search: string) => {
+          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        };
+      }
+      // Using default filter in `cmdk`. We don't have to provide it.
+      return undefined;
+    }, [creatable, commandProps?.filter]);
+
+    return (
+      <Command
+        {...commandProps}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          commandProps?.onKeyDown?.(e);
+        }}
+        className={cn(
+          "h-auto overflow-visible bg-transparent",
+          commandProps?.className,
+        )}
+        shouldFilter={
+          commandProps?.shouldFilter !== undefined
+            ? commandProps.shouldFilter
+            : !onSearch
+        } // When onSearch is provided, we don't want to filter the options. You can still override it.
+        filter={commandFilter()}
+      >
+        <div
+          className={cn(
+            "min-h-10 rounded-md border border-input text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            {
+              "px-3 py-2": selected.length !== 0,
+              "cursor-text": !disabled && selected.length !== 0,
+            },
+            className,
+          )}
+          onClick={() => {
+            if (disabled) return;
+            inputRef.current?.focus();
+          }}
+        >
+          <div className="flex flex-wrap gap-1">
+            {selected.map((option) => {
+              return (
+                <Badge
+                  key={option.value}
+                  className={cn(
+                    "data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground",
+                    "data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground",
+                    badgeClassName,
+                  )}
+                  data-fixed={option.fixed}
+                  data-disabled={disabled || undefined}
+                >
+                  {option.label ?? option.value}
+                  <button
+                    type="button"
+                    className={cn(
+                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      (disabled || option.fixed) && "hidden",
+                    )}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        handleUnselect(option);
+                      }
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={() => handleUnselect(option)}
+                  >
+                    <LuX className="w-3 h-3 text-muted-foreground hover:text-foreground" />
+                  </button>
+                </Badge>
+              );
+            })}
+            {/* Avoid having the "Search" Icon */}
+            <CommandPrimitive.Input
+              {...inputProps}
+              ref={inputRef}
+              value={inputValue}
+              disabled={disabled}
+              onValueChange={(value) => {
+                setInputValue(value);
+                inputProps?.onValueChange?.(value);
+              }}
+              onBlur={(event) => {
+                setOpen(false);
+                inputProps?.onBlur?.(event);
+              }}
+              onFocus={(event) => {
+                setOpen(true);
+                if (triggerSearchOnFocus && onSearch) {
+                  onSearch(debouncedSearchTerm);
+                }
+                inputProps?.onFocus?.(event);
+              }}
+              placeholder={
+                hidePlaceholderWhenSelected && selected.length !== 0
+                  ? ""
+                  : placeholder
+              }
+              className={cn(
+                "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                {
+                  "w-full": hidePlaceholderWhenSelected,
+                  "px-3 py-2": selected.length === 0,
+                  "ml-1": selected.length !== 0,
+                },
+                inputProps?.className,
+              )}
+            />
+          </div>
+        </div>
+        <div className="relative">
+          {open && (
+            <CommandList className="absolute top-1 z-10 w-full rounded-md border shadow-md outline-none bg-popover text-popover-foreground animate-in">
+              {isLoading ? (
+                loadingIndicator
+              ) : (
+                <>
+                  {EmptyItem()}
+                  {CreatableItem()}
+                  {!selectFirstItem && (
+                    <CommandItem value="-" className="hidden" />
+                  )}
+                  {Object.entries(selectables).map(([key, dropdowns]) => (
+                    <CommandGroup
+                      key={key}
+                      heading={key}
+                      className="overflow-auto h-full"
+                    >
+                      {dropdowns.map((option) => {
+                        return (
+                          <CommandItem
+                            key={option.value}
+                            value={option.value}
+                            disabled={option.disable}
+                            onMouseDown={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            }}
+                            onSelect={() => {
+                              if (selected.length >= maxSelected) {
+                                onMaxSelected?.(selected.length);
+                                return;
+                              }
+                              setInputValue("");
+                              const newOptions = [...selected, option];
+                              setSelected(newOptions);
+                              onChange?.(newOptions);
+                            }}
+                            className={cn(
+                              "cursor-pointer",
+                              option.disable &&
+                                "cursor-default text-muted-foreground",
+                            )}
+                          >
+                            {option.label ?? option.value}
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  ))}
+                </>
+              )}
+            </CommandList>
+          )}
+        </div>
+      </Command>
+    );
+  },
+);
+
+MultipleSelector.displayName = "MultipleSelector";
+export default MultipleSelector;

src/components/permission-dialog.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { BsCamera, BsMic } from "react-icons/bs";
 import { LoadingButton } from "@/components/loading-button";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,11 +12,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { usePermissions } from "@/hooks/use-permissions";
 import type { PermissionType } from "@/hooks/use-permissions";
+import { usePermissions } from "@/hooks/use-permissions";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
-import { useEffect, useState } from "react";
-import { BsCamera, BsMic } from "react-icons/bs";
 
 interface PermissionDialogProps {
   isOpen: boolean;

src/components/profile-selector-dialog.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { LuCopy } from "react-icons/lu";
+import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -23,16 +27,14 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useBrowserState } from "@/hooks/use-browser-state";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserProfile } from "@/types";
-import { invoke } from "@tauri-apps/api/core";
-import { useEffect, useState } from "react";
-import { LuCopy } from "react-icons/lu";
-import { toast } from "sonner";
+import type { BrowserProfile, StoredProxy } from "@/types";
 
 interface ProfileSelectorDialogProps {
   isOpen: boolean;
   onClose: () => void;
+  isUpdating: (browser: string) => boolean;
   url?: string;
   runningProfiles?: Set<string>;
 }
@@ -42,124 +44,91 @@ export function ProfileSelectorDialog({
   onClose,
   url,
   runningProfiles = new Set(),
+  isUpdating,
 }: ProfileSelectorDialogProps) {
   const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
   const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isLaunching, setIsLaunching] = useState(false);
+  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const [launchingProfiles, setLaunchingProfiles] = useState<Set<string>>(
+    new Set(),
+  );
+  const [stoppingProfiles, _setStoppingProfiles] = useState<Set<string>>(
+    new Set(),
+  );
 
-  useEffect(() => {
-    if (isOpen) {
-      void loadProfiles();
-    }
-  }, [isOpen]);
+  // Use shared browser state hook
+  const browserState = useBrowserState(
+    profiles,
+    runningProfiles,
+    isUpdating,
+    launchingProfiles,
+    stoppingProfiles,
+  );
 
-  const loadProfiles = async () => {
+  // Helper function to check if a profile has a proxy
+  const hasProxy = useCallback(
+    (profile: BrowserProfile): boolean => {
+      if (!profile.proxy_id) return false;
+      const proxy = storedProxies.find((p) => p.id === profile.proxy_id);
+      return proxy !== undefined;
+    },
+    [storedProxies],
+  );
+
+  const loadProfiles = useCallback(async () => {
     setIsLoading(true);
     try {
-      const profileList = await invoke<BrowserProfile[]>(
-        "list_browser_profiles",
-      );
+      // Load both profiles and stored proxies
+      const [profileList, proxiesList] = await Promise.all([
+        invoke<BrowserProfile[]>("list_browser_profiles"),
+        invoke<StoredProxy[]>("get_stored_proxies"),
+      ]);
 
       // Sort profiles by name
       profileList.sort((a, b) => a.name.localeCompare(b.name));
 
-      // Don't filter any profiles, show all of them
+      // Set both profiles and proxies
       setProfiles(profileList);
+      setStoredProxies(proxiesList);
 
       // Auto-select first available profile for link opening
       if (profileList.length > 0) {
         // First, try to find a running profile that can be used for opening links
         const runningAvailableProfile = profileList.find((profile) => {
           const isRunning = runningProfiles.has(profile.name);
+          // Simple check without browserState dependency
           return (
             isRunning &&
-            canUseProfileForLinks(profile, profileList, runningProfiles)
+            profile.browser !== "tor-browser" &&
+            profile.browser !== "mullvad-browser"
           );
         });
 
         if (runningAvailableProfile) {
           setSelectedProfile(runningAvailableProfile.name);
         } else {
-          // If no running profile is suitable, find the first profile that can be used for opening links
-          const availableProfile = profileList.find((profile) => {
-            return canUseProfileForLinks(profile, profileList, runningProfiles);
-          });
-
-          if (availableProfile) {
-            setSelectedProfile(availableProfile.name);
-          } else {
-            // If no suitable profile found, still select the first one to show UI
-            setSelectedProfile(profileList[0].name);
-          }
+          setSelectedProfile(profileList[0].name);
         }
       }
-    } catch (error) {
-      console.error("Failed to load profiles:", error);
+    } catch (err) {
+      console.error("Failed to load profiles:", err);
     } finally {
       setIsLoading(false);
     }
+  }, [runningProfiles]);
+
+  // Helper function to get tooltip content for profiles - now uses shared hook
+  const getProfileTooltipContent = (profile: BrowserProfile): string | null => {
+    return browserState.getProfileTooltipContent(profile);
   };
 
-  // Helper function to determine if a profile can be used for opening links
-  const canUseProfileForLinks = (
-    profile: BrowserProfile,
-    allProfiles: BrowserProfile[],
-    runningProfiles: Set<string>,
-  ): boolean => {
-    const isRunning = runningProfiles.has(profile.name);
-
-    // For TOR browser: Check if any TOR browser is running
-    if (profile.browser === "tor-browser") {
-      const runningTorProfiles = allProfiles.filter(
-        (p) => p.browser === "tor-browser" && runningProfiles.has(p.name),
-      );
-
-      // If no TOR browser is running, allow any TOR profile
-      if (runningTorProfiles.length === 0) {
-        return true;
-      }
-
-      // If TOR browser(s) are running, only allow the running one(s)
-      return isRunning;
-    }
-
-    // For Mullvad browser: never allow if running
-    if (profile.browser === "mullvad-browser" && isRunning) {
-      return false;
-    }
-
-    // For other browsers: always allow
-    return true;
-  };
-
-  // Helper function to get tooltip content for profiles
-  const getProfileTooltipContent = (profile: BrowserProfile): string => {
-    const isRunning = runningProfiles.has(profile.name);
-
-    if (profile.browser === "tor-browser") {
-      // If another TOR profile is running, this one is not available
-      return "Only 1 instance can run at a time";
-    }
-
-    if (profile.browser === "mullvad-browser") {
-      if (isRunning) {
-        return "Only launching the browser is supported, opening them in a running browser is not yet available";
-      }
-      return "Only launching the browser is supported, opening them in a running browser is not yet available";
-    }
-
-    if (isRunning) {
-      return "URL will open in a new tab in the existing browser window";
-    }
-
-    return "";
-  };
-
-  const handleOpenUrl = async () => {
+  const handleOpenUrl = useCallback(async () => {
     if (!selectedProfile || !url) return;
 
     setIsLaunching(true);
+    setLaunchingProfiles((prev) => new Set(prev).add(selectedProfile));
     try {
       await invoke("open_url_with_profile", {
         profileName: selectedProfile,
@@ -170,15 +139,20 @@ export function ProfileSelectorDialog({
       console.error("Failed to open URL with profile:", error);
     } finally {
       setIsLaunching(false);
+      setLaunchingProfiles((prev) => {
+        const next = new Set(prev);
+        next.delete(selectedProfile);
+        return next;
+      });
     }
-  };
+  }, [selectedProfile, url, onClose]);
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     setSelectedProfile(null);
     onClose();
-  };
+  }, [onClose]);
 
-  const handleCopyUrl = async () => {
+  const handleCopyUrl = useCallback(async () => {
     if (!url) return;
 
     try {
@@ -188,26 +162,28 @@ export function ProfileSelectorDialog({
       console.error("Failed to copy URL:", error);
       toast.error("Failed to copy URL to clipboard");
     }
-  };
+  }, [url]);
 
   const selectedProfileData = profiles.find((p) => p.name === selectedProfile);
 
   // Check if the selected profile can be used for opening links
   const canOpenWithSelectedProfile = () => {
     if (!selectedProfileData) return false;
-    return canUseProfileForLinks(
-      selectedProfileData,
-      profiles,
-      runningProfiles,
-    );
+    return browserState.canUseProfileForLinks(selectedProfileData);
   };
 
   // Get tooltip content for disabled profiles
   const getTooltipContent = () => {
-    if (!selectedProfileData) return "";
+    if (!selectedProfileData) return null;
     return getProfileTooltipContent(selectedProfileData);
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      void loadProfiles();
+    }
+  }, [isOpen, loadProfiles]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-md">
@@ -253,37 +229,35 @@ export function ProfileSelectorDialog({
                 </div>
               </div>
             ) : (
-              <>
-                <Select
-                  value={selectedProfile ?? undefined}
-                  onValueChange={setSelectedProfile}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Choose a profile" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {profiles.map((profile) => {
-                      const isRunning = runningProfiles.has(profile.name);
-                      const canUseForLinks = canUseProfileForLinks(
-                        profile,
-                        profiles,
-                        runningProfiles,
-                      );
-                      const tooltipContent = getProfileTooltipContent(profile);
+              <Select
+                value={selectedProfile ?? undefined}
+                onValueChange={setSelectedProfile}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Choose a profile" />
+                </SelectTrigger>
+                <SelectContent>
+                  {profiles.map((profile) => {
+                    const isRunning = runningProfiles.has(profile.name);
+                    const canUseForLinks =
+                      browserState.canUseProfileForLinks(profile);
+                    const tooltipContent = getProfileTooltipContent(profile);
 
-                      return (
-                        <Tooltip key={profile.name}>
-                          <TooltipTrigger asChild>
+                    return (
+                      <Tooltip key={profile.name}>
+                        <TooltipTrigger asChild>
+                          <div>
                             <SelectItem
                               value={profile.name}
                               disabled={!canUseForLinks}
+                              className="cursor-pointer"
                             >
                               <div
                                 className={`flex items-center gap-2 ${
                                   !canUseForLinks ? "opacity-50" : ""
                                 }`}
                               >
-                                <div className="flex gap-3 items-center px-2 py-1 rounded-lg cursor-pointer hover:bg-accent">
+                                <div className="flex gap-3 items-center px-2 py-1 rounded-lg">
                                   <div className="flex gap-2 items-center">
                                     {(() => {
                                       const IconComponent = getBrowserIcon(
@@ -303,7 +277,7 @@ export function ProfileSelectorDialog({
                                 <Badge variant="secondary" className="text-xs">
                                   {getBrowserDisplayName(profile.browser)}
                                 </Badge>
-                                {profile.proxy?.enabled && (
+                                {hasProxy(profile) && (
                                   <Badge variant="outline" className="text-xs">
                                     Proxy
                                   </Badge>
@@ -323,16 +297,16 @@ export function ProfileSelectorDialog({
                                 )}
                               </div>
                             </SelectItem>
-                          </TooltipTrigger>
-                          {tooltipContent && (
-                            <TooltipContent>{tooltipContent}</TooltipContent>
-                          )}
-                        </Tooltip>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              </>
+                          </div>
+                        </TooltipTrigger>
+                        {tooltipContent && (
+                          <TooltipContent>{tooltipContent}</TooltipContent>
+                        )}
+                      </Tooltip>
+                    );
+                  })}
+                </SelectContent>
+              </Select>
             )}
           </div>
         </div>
@@ -343,7 +317,7 @@ export function ProfileSelectorDialog({
           </Button>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div>
+              <span className="inline-flex">
                 <LoadingButton
                   isLoading={isLaunching}
                   onClick={() => void handleOpenUrl()}
@@ -355,7 +329,7 @@ export function ProfileSelectorDialog({
                 >
                   Open
                 </LoadingButton>
-              </div>
+              </span>
             </TooltipTrigger>
             {getTooltipContent() && (
               <TooltipContent>{getTooltipContent()}</TooltipContent>

src/components/proxy-form-dialog.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { StoredProxy } from "@/types";
+
+interface ProxyFormData {
+  name: string;
+  proxy_type: string;
+  host: string;
+  port: number;
+  username: string;
+  password: string;
+}
+
+interface ProxyFormDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (proxy: StoredProxy) => void;
+  editingProxy?: StoredProxy | null;
+}
+
+export function ProxyFormDialog({
+  isOpen,
+  onClose,
+  onSave,
+  editingProxy,
+}: ProxyFormDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<ProxyFormData>({
+    name: "",
+    proxy_type: "http",
+    host: "",
+    port: 8080,
+    username: "",
+    password: "",
+  });
+
+  const resetForm = useCallback(() => {
+    setFormData({
+      name: "",
+      proxy_type: "http",
+      host: "",
+      port: 8080,
+      username: "",
+      password: "",
+    });
+  }, []);
+
+  // Load editing proxy data when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      if (editingProxy) {
+        setFormData({
+          name: editingProxy.name,
+          proxy_type: editingProxy.proxy_settings.proxy_type,
+          host: editingProxy.proxy_settings.host,
+          port: editingProxy.proxy_settings.port,
+          username: editingProxy.proxy_settings.username || "",
+          password: editingProxy.proxy_settings.password || "",
+        });
+      } else {
+        resetForm();
+      }
+    }
+  }, [isOpen, editingProxy, resetForm]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!formData.name.trim()) {
+      toast.error("Proxy name is required");
+      return;
+    }
+
+    if (!formData.host.trim() || !formData.port) {
+      toast.error("Host and port are required");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const proxySettings = {
+        proxy_type: formData.proxy_type,
+        host: formData.host.trim(),
+        port: formData.port,
+        username: formData.username.trim() || undefined,
+        password: formData.password.trim() || undefined,
+      };
+
+      let savedProxy: StoredProxy;
+
+      if (editingProxy) {
+        // Update existing proxy
+        savedProxy = await invoke<StoredProxy>("update_stored_proxy", {
+          proxyId: editingProxy.id,
+          name: formData.name.trim(),
+          proxySettings,
+        });
+        toast.success("Proxy updated successfully");
+      } else {
+        // Create new proxy
+        savedProxy = await invoke<StoredProxy>("create_stored_proxy", {
+          name: formData.name.trim(),
+          proxySettings,
+        });
+        toast.success("Proxy created successfully");
+      }
+
+      onSave(savedProxy);
+      onClose();
+    } catch (error) {
+      console.error("Failed to save proxy:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(`Failed to save proxy: ${errorMessage}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [formData, editingProxy, onSave, onClose]);
+
+  const handleClose = useCallback(() => {
+    if (!isSubmitting) {
+      onClose();
+    }
+  }, [isSubmitting, onClose]);
+
+  const isFormValid =
+    formData.name.trim() &&
+    formData.host.trim() &&
+    formData.port > 0 &&
+    formData.port <= 65535;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {editingProxy ? "Edit Proxy" : "Create New Proxy"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="proxy-name">Proxy Name</Label>
+            <Input
+              id="proxy-name"
+              value={formData.name}
+              onChange={(e) =>
+                setFormData({ ...formData, name: e.target.value })
+              }
+              placeholder="e.g. Office Proxy, Home VPN, etc."
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>Proxy Type</Label>
+            <Select
+              value={formData.proxy_type}
+              onValueChange={(value) =>
+                setFormData({ ...formData, proxy_type: value })
+              }
+              disabled={isSubmitting}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select proxy type" />
+              </SelectTrigger>
+              <SelectContent>
+                {["http", "https", "socks4", "socks5"].map((type) => (
+                  <SelectItem key={type} value={type}>
+                    {type.toUpperCase()}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="proxy-host">Host</Label>
+              <Input
+                id="proxy-host"
+                value={formData.host}
+                onChange={(e) =>
+                  setFormData({ ...formData, host: e.target.value })
+                }
+                placeholder="e.g. 127.0.0.1"
+                disabled={isSubmitting}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="proxy-port">Port</Label>
+              <Input
+                id="proxy-port"
+                type="number"
+                value={formData.port}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    port: parseInt(e.target.value, 10) || 0,
+                  })
+                }
+                placeholder="e.g. 8080"
+                min="1"
+                max="65535"
+                disabled={isSubmitting}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="proxy-username">Username (optional)</Label>
+              <Input
+                id="proxy-username"
+                value={formData.username}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    username: e.target.value,
+                  })
+                }
+                placeholder="Proxy username"
+                disabled={isSubmitting}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="proxy-password">Password (optional)</Label>
+              <Input
+                id="proxy-password"
+                type="password"
+                value={formData.password}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    password: e.target.value,
+                  })
+                }
+                placeholder="Proxy password"
+                disabled={isSubmitting}
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isSubmitting}
+            onClick={handleSubmit}
+            disabled={!isFormValid}
+          >
+            {editingProxy ? "Update Proxy" : "Create Proxy"}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/proxy-management-dialog.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { FiEdit2, FiPlus, FiTrash2, FiWifi } from "react-icons/fi";
+import { toast } from "sonner";
+import { ProxyFormDialog } from "@/components/proxy-form-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { trimName } from "@/lib/name-utils";
+import type { StoredProxy } from "@/types";
+
+interface ProxyManagementDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ProxyManagementDialog({
+  isOpen,
+  onClose,
+}: ProxyManagementDialogProps) {
+  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showProxyForm, setShowProxyForm] = useState(false);
+  const [editingProxy, setEditingProxy] = useState<StoredProxy | null>(null);
+
+  const loadStoredProxies = useCallback(async () => {
+    try {
+      setLoading(true);
+      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
+      setStoredProxies(proxies);
+    } catch (error) {
+      console.error("Failed to load stored proxies:", error);
+      toast.error("Failed to load proxies");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadStoredProxies();
+    }
+  }, [isOpen, loadStoredProxies]);
+
+  const handleDeleteProxy = useCallback(async (proxy: StoredProxy) => {
+    if (
+      !confirm(`Are you sure you want to delete the proxy "${proxy.name}"?`)
+    ) {
+      return;
+    }
+
+    try {
+      await invoke("delete_stored_proxy", { proxyId: proxy.id });
+      setStoredProxies((prev) => prev.filter((p) => p.id !== proxy.id));
+      toast.success("Proxy deleted successfully");
+    } catch (error) {
+      console.error("Failed to delete proxy:", error);
+      toast.error("Failed to delete proxy");
+    }
+  }, []);
+
+  const handleCreateProxy = useCallback(() => {
+    setEditingProxy(null);
+    setShowProxyForm(true);
+  }, []);
+
+  const handleEditProxy = useCallback((proxy: StoredProxy) => {
+    setEditingProxy(proxy);
+    setShowProxyForm(true);
+  }, []);
+
+  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
+    setStoredProxies((prev) => {
+      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
+      if (existingIndex >= 0) {
+        // Update existing proxy
+        const updated = [...prev];
+        updated[existingIndex] = savedProxy;
+        return updated;
+      } else {
+        // Add new proxy
+        return [...prev, savedProxy];
+      }
+    });
+    setShowProxyForm(false);
+    setEditingProxy(null);
+  }, []);
+
+  const handleProxyFormClose = useCallback(() => {
+    setShowProxyForm(false);
+    setEditingProxy(null);
+  }, []);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+          <DialogHeader className="flex-shrink-0">
+            <div className="flex gap-2 items-center">
+              <FiWifi className="w-5 h-5" />
+              <DialogTitle>Proxy Management</DialogTitle>
+            </div>
+          </DialogHeader>
+
+          <div className="flex flex-col flex-1 gap-4 py-4 min-h-0">
+            {/* Header with Create Button */}
+            <div className="flex flex-shrink-0 justify-between items-center">
+              <div>
+                <h3 className="text-lg font-medium">Stored Proxies</h3>
+                <p className="text-sm text-muted-foreground">
+                  Manage your saved proxy configurations for reuse across
+                  profiles
+                </p>
+              </div>
+              <Button
+                onClick={handleCreateProxy}
+                className="flex gap-2 items-center"
+              >
+                <FiPlus className="w-4 h-4" />
+                Create Proxy
+              </Button>
+            </div>
+
+            {/* Proxy List - Scrollable */}
+            <div className="flex-1 min-h-0">
+              {loading ? (
+                <div className="flex justify-center items-center h-32">
+                  <p className="text-sm text-muted-foreground">
+                    Loading proxies...
+                  </p>
+                </div>
+              ) : storedProxies.length === 0 ? (
+                <div className="flex flex-col justify-center items-center h-32 text-center">
+                  <FiWifi className="mx-auto mb-4 w-12 h-12 text-muted-foreground" />
+                  <p className="mb-2 text-muted-foreground">
+                    No proxies configured
+                  </p>
+                  <p className="mb-4 text-sm text-muted-foreground">
+                    Create your first proxy configuration to get started
+                  </p>
+                  <Button variant="outline" onClick={handleCreateProxy}>
+                    <FiPlus className="mr-2 w-4 h-4" />
+                    Create First Proxy
+                  </Button>
+                </div>
+              ) : (
+                <div className="overflow-y-auto pr-2 space-y-2 h-full">
+                  {storedProxies.map((proxy) => (
+                    <div
+                      key={proxy.id}
+                      className="flex justify-between items-center p-1 rounded border bg-card"
+                    >
+                      <div className="flex-1 ml-2 min-w-0">
+                        {proxy.name.length > 30 ? (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="block font-medium truncate text-card-foreground">
+                                {trimName(proxy.name)}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <span className="text-sm font-medium text-card-foreground">
+                                {proxy.name}
+                              </span>
+                            </TooltipContent>
+                          </Tooltip>
+                        ) : (
+                          <span className="text-sm font-medium text-card-foreground">
+                            {proxy.name}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-shrink-0 gap-1 items-center">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleEditProxy(proxy)}
+                            >
+                              <FiEdit2 className="w-4 h-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Edit proxy</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteProxy(proxy)}
+                              className="text-destructive hover:text-destructive"
+                            >
+                              <FiTrash2 className="w-4 h-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Delete proxy</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="flex-shrink-0">
+            <Button onClick={onClose}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ProxyFormDialog
+        isOpen={showProxyForm}
+        onClose={handleProxyFormClose}
+        onSave={handleProxySaved}
+        editingProxy={editingProxy}
+      />
+    </>
+  );
+}

src/components/proxy-settings-dialog.tsx

@@ -1,7 +1,13 @@
 "use client";
 
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { FiPlus } from "react-icons/fi";
+import { toast } from "sonner";
+import { ProxyFormDialog } from "@/components/proxy-form-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -9,36 +15,20 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useEffect, useState } from "react";
-
-interface ProxySettings {
-  enabled: boolean;
-  proxy_type: string;
-  host: string;
-  port: number;
-  username?: string;
-  password?: string;
-}
+import { cn } from "@/lib/utils";
+import type { StoredProxy } from "@/types";
 
 interface ProxySettingsDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (proxySettings: ProxySettings) => void;
-  initialSettings?: ProxySettings;
+  onSave: (proxyId: string | null) => void;
+  initialProxyId?: string | null;
   browserType?: string;
 }
 
@@ -46,232 +36,248 @@ export function ProxySettingsDialog({
   isOpen,
   onClose,
   onSave,
-  initialSettings,
+  initialProxyId,
   browserType,
 }: ProxySettingsDialogProps) {
-  const [settings, setSettings] = useState<ProxySettings>({
-    enabled: initialSettings?.enabled ?? false,
-    proxy_type: initialSettings?.proxy_type ?? "http",
-    host: initialSettings?.host ?? "",
-    port: initialSettings?.port ?? 8080,
-    username: initialSettings?.username ?? "",
-    password: initialSettings?.password ?? "",
-  });
-
-  const [initialSettingsState, setInitialSettingsState] =
-    useState<ProxySettings>({
-      enabled: false,
-      proxy_type: "http",
-      host: "",
-      port: 8080,
-      username: "",
-      password: "",
-    });
-
-  useEffect(() => {
-    if (isOpen && initialSettings) {
-      const newSettings = {
-        enabled: initialSettings.enabled,
-        proxy_type: initialSettings.proxy_type,
-        host: initialSettings.host,
-        port: initialSettings.port,
-        username: initialSettings.username ?? "",
-        password: initialSettings.password ?? "",
-      };
-      setSettings(newSettings);
-      setInitialSettingsState(newSettings);
-    } else if (isOpen) {
-      const defaultSettings = {
-        enabled: false,
-        proxy_type: "http",
-        host: "",
-        port: 80,
-        username: "",
-        password: "",
-      };
-      setSettings(defaultSettings);
-      setInitialSettingsState(defaultSettings);
-    }
-  }, [isOpen, initialSettings]);
-
-  const handleSubmit = () => {
-    onSave(settings);
-  };
-
-  // Check if settings have changed
-  const hasChanged = () => {
-    return (
-      settings.enabled !== initialSettingsState.enabled ||
-      settings.proxy_type !== initialSettingsState.proxy_type ||
-      settings.host !== initialSettingsState.host ||
-      settings.port !== initialSettingsState.port ||
-      settings.username !== initialSettingsState.username ||
-      settings.password !== initialSettingsState.password
-    );
-  };
+  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const [selectedProxyId, setSelectedProxyId] = useState<string | null>(
+    initialProxyId || null,
+  );
+  const [loading, setLoading] = useState(false);
+  const [showProxyForm, setShowProxyForm] = useState(false);
 
   // Helper to determine if proxy should be disabled for the selected browser
   const isProxyDisabled = browserType === "tor-browser";
 
-  // Update proxy enabled state when browser is tor-browser
-  useEffect(() => {
-    if (browserType === "tor-browser" && settings.enabled) {
-      setSettings((prev) => ({ ...prev, enabled: false }));
+  const loadStoredProxies = useCallback(async () => {
+    try {
+      setLoading(true);
+      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
+      setStoredProxies(proxies);
+    } catch (error) {
+      console.error("Failed to load stored proxies:", error);
+      toast.error("Failed to load proxies");
+    } finally {
+      setLoading(false);
     }
-  }, [browserType, settings.enabled]);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadStoredProxies();
+      if (isProxyDisabled) {
+        setSelectedProxyId(null);
+      } else {
+        // Reset to initial proxy ID when dialog opens
+        setSelectedProxyId(initialProxyId || null);
+      }
+    }
+  }, [isOpen, isProxyDisabled, loadStoredProxies, initialProxyId]);
+
+  const handleCreateProxy = useCallback(() => {
+    setShowProxyForm(true);
+  }, []);
+
+  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
+    setStoredProxies((prev) => {
+      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
+      if (existingIndex >= 0) {
+        // Update existing proxy
+        const updated = [...prev];
+        updated[existingIndex] = savedProxy;
+        return updated;
+      } else {
+        // Add new proxy
+        return [...prev, savedProxy];
+      }
+    });
+    setSelectedProxyId(savedProxy.id);
+    setShowProxyForm(false);
+  }, []);
+
+  const handleProxyFormClose = useCallback(() => {
+    setShowProxyForm(false);
+  }, []);
+
+  const handleSave = () => {
+    onSave(selectedProxyId);
+  };
+
+  const hasChanged = () => {
+    return selectedProxyId !== initialProxyId;
+  };
 
   return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Proxy Settings</DialogTitle>
-        </DialogHeader>
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            onClose();
+          }
+        }}
+      >
+        <DialogContent className="max-w-md max-h-[80vh] my-8 flex flex-col">
+          <DialogHeader className="flex-shrink-0">
+            <DialogTitle>Proxy Settings</DialogTitle>
+          </DialogHeader>
 
-        <div className="grid gap-4 py-4">
-          <div className="flex items-center space-x-2">
-            {isProxyDisabled ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="flex items-center space-x-2 opacity-50">
-                    <Checkbox
-                      id="proxy-enabled"
-                      checked={false}
-                      disabled={true}
-                    />
-                    <Label htmlFor="proxy-enabled" className="text-gray-500">
-                      Enable Proxy
-                    </Label>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>
-                    Tor Browser has its own built-in proxy system and
-                    doesn&apos;t support additional proxy configuration
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
+          <div className="grid gap-6 py-4">
+            {isProxyDisabled && (
+              <div className="p-4 bg-yellow-50 rounded-md border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800">
+                <p className="text-sm text-yellow-800 dark:text-yellow-200">
+                  Tor Browser has its own built-in proxy system and doesn't
+                  support additional proxy configuration.
+                </p>
+              </div>
+            )}
+
+            {!isProxyDisabled && (
               <>
-                <Checkbox
-                  id="proxy-enabled"
-                  checked={settings.enabled}
-                  onCheckedChange={(checked) => {
-                    setSettings({ ...settings, enabled: checked as boolean });
-                  }}
-                />
-                <Label htmlFor="proxy-enabled">Enable Proxy</Label>
+                {/* Proxy Selection */}
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <Label className="text-base font-medium">
+                      Select Proxy
+                    </Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={handleCreateProxy}
+                          className="flex gap-2 items-center"
+                        >
+                          <FiPlus className="w-4 h-4" />
+                          Create New
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Create a new proxy configuration</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+
+                  <div className="overflow-y-auto p-2 space-y-2 h-full">
+                    <Button
+                      variant="ghost"
+                      onClick={() => setSelectedProxyId(null)}
+                      asChild
+                    >
+                      <Card
+                        className={cn(
+                          "w-full bg-card cursor-pointer transition-colors",
+                          selectedProxyId === null
+                            ? "ring-2 ring-blue-500"
+                            : "",
+                        )}
+                      >
+                        <CardContent className="p-4 w-full">
+                          <div className="flex items-center space-x-3">
+                            <input
+                              type="radio"
+                              id="no-proxy"
+                              name="proxy-selection"
+                              checked={selectedProxyId === null}
+                              onChange={() => setSelectedProxyId(null)}
+                            />
+                            <div className="flex gap-2 items-center">
+                              <Label
+                                htmlFor="no-proxy"
+                                className="font-medium cursor-pointer"
+                              >
+                                No Proxy
+                              </Label>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Button>
+
+                    {loading ? (
+                      <p className="text-sm text-muted-foreground">
+                        Loading proxies...
+                      </p>
+                    ) : (
+                      storedProxies.map((proxy) => (
+                        <Button
+                          key={proxy.id}
+                          variant="ghost"
+                          onClick={() => setSelectedProxyId(proxy.id)}
+                          asChild
+                        >
+                          <Card
+                            className={cn(
+                              "w-full bg-card cursor-pointer transition-colors",
+                              selectedProxyId === proxy.id
+                                ? "ring-2 ring-blue-500"
+                                : "",
+                            )}
+                          >
+                            <CardContent className="p-4 w-full">
+                              <div className="flex items-center space-x-3">
+                                <input
+                                  type="radio"
+                                  id={`proxy-${proxy.id}`}
+                                  name="proxy-selection"
+                                  checked={selectedProxyId === proxy.id}
+                                  onChange={() => setSelectedProxyId(proxy.id)}
+                                />
+                                <div className="flex gap-2 items-center">
+                                  <Label
+                                    htmlFor={`proxy-${proxy.id}`}
+                                    className="font-medium cursor-pointer"
+                                  >
+                                    {proxy.name}
+                                  </Label>
+                                  <Badge variant="outline">
+                                    {proxy.proxy_settings.proxy_type.toUpperCase()}
+                                  </Badge>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        </Button>
+                      ))
+                    )}
+
+                    {!loading && storedProxies.length === 0 && (
+                      <div className="py-4 text-center">
+                        <p className="mb-2 text-sm text-muted-foreground">
+                          No saved proxies available.
+                        </p>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={handleCreateProxy}
+                        >
+                          <FiPlus className="mr-2 w-4 h-4" />
+                          Create First Proxy
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </>
             )}
           </div>
 
-          {settings.enabled && !isProxyDisabled && (
-            <>
-              <div className="grid gap-2">
-                <Label>Proxy Type</Label>
-                <Select
-                  value={settings.proxy_type}
-                  onValueChange={(value) => {
-                    setSettings({
-                      ...settings,
-                      proxy_type: value,
-                    });
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select proxy type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {["http", "https", "socks4", "socks5"].map((type) => (
-                      <SelectItem key={type} value={type}>
-                        {type.toUpperCase()}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={!hasChanged()}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-              <div className="grid gap-2">
-                <Label htmlFor="host">Host</Label>
-                <Input
-                  id="host"
-                  value={settings.host}
-                  onChange={(e) => {
-                    setSettings({ ...settings, host: e.target.value });
-                  }}
-                  placeholder="e.g. 127.0.0.1"
-                />
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="port">Port</Label>
-                <Input
-                  id="port"
-                  type="number"
-                  value={settings.port}
-                  onChange={(e) => {
-                    setSettings({
-                      ...settings,
-                      port: Number.parseInt(e.target.value, 10) || 0,
-                    });
-                  }}
-                  placeholder="e.g. 8080"
-                  min="1"
-                  max="65535"
-                />
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="username">Username (optional)</Label>
-                <Input
-                  id="username"
-                  value={settings.username}
-                  onChange={(e) => {
-                    setSettings({ ...settings, username: e.target.value });
-                  }}
-                  placeholder="Proxy username"
-                />
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="password">Password (optional)</Label>
-                <Input
-                  id="password"
-                  type="password"
-                  value={settings.password}
-                  onChange={(e) => {
-                    setSettings({ ...settings, password: e.target.value });
-                  }}
-                  placeholder="Proxy password"
-                />
-              </div>
-            </>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            disabled={
-              !hasChanged() ||
-              (!isProxyDisabled &&
-                settings.enabled &&
-                (!settings.host || !settings.port))
-            }
-          >
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      <ProxyFormDialog
+        isOpen={showProxyForm}
+        onClose={handleProxyFormClose}
+        onSave={handleProxySaved}
+      />
+    </>
   );
 }

src/components/release-type-selector.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+import { LuCheck, LuChevronsUpDown, LuDownload } from "react-icons/lu";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -17,9 +19,6 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import type { BrowserReleaseTypes } from "@/types";
-import { useState } from "react";
-import { LuDownload } from "react-icons/lu";
-import { LuCheck, LuChevronsUpDown } from "react-icons/lu";
 
 interface ReleaseTypeSelectorProps {
   selectedReleaseType: "stable" | "nightly" | null;
@@ -55,6 +54,16 @@ export function ReleaseTypeSelector({
       : []),
   ];
 
+  // Only show dropdown if there are multiple release types available
+  const showDropdown = releaseOptions.length > 1;
+
+  // If only one release type is available, auto-select it
+  if (!showDropdown && releaseOptions.length === 1 && !selectedReleaseType) {
+    setTimeout(() => {
+      onReleaseTypeSelect(releaseOptions[0].type);
+    }, 0);
+  }
+
   const selectedDisplayText = selectedReleaseType
     ? selectedReleaseType === "stable"
       ? "Stable"
@@ -73,75 +82,99 @@ export function ReleaseTypeSelector({
 
   return (
     <div className="space-y-4">
-      <Popover open={popoverOpen} onOpenChange={setPopoverOpen} modal={true}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={popoverOpen}
-            className="justify-between w-full"
-          >
-            {selectedDisplayText}
-            <LuChevronsUpDown className="ml-2 w-4 h-4 opacity-50 shrink-0" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
-          <Command>
-            <CommandEmpty>No release types available.</CommandEmpty>
-            <CommandList>
-              <CommandGroup>
-                {releaseOptions.map((option) => {
-                  const isDownloaded = downloadedVersions.includes(
-                    option.version,
-                  );
-                  return (
-                    <CommandItem
-                      key={option.type}
-                      value={option.type}
-                      onSelect={(currentValue) => {
-                        const selectedType = currentValue as
-                          | "stable"
-                          | "nightly";
-                        onReleaseTypeSelect(
-                          selectedType === selectedReleaseType
-                            ? null
-                            : selectedType,
-                        );
-                        setPopoverOpen(false);
-                      }}
-                    >
-                      <LuCheck
-                        className={cn(
-                          "mr-2 h-4 w-4",
-                          selectedReleaseType === option.type
-                            ? "opacity-100"
-                            : "opacity-0",
-                        )}
-                      />
-                      <div className="flex gap-2 items-center">
-                        <span className="capitalize">{option.type}</span>
-                        {option.type === "nightly" && (
-                          <Badge variant="secondary" className="text-xs">
-                            Nightly
+      {showDropdown ? (
+        <Popover open={popoverOpen} onOpenChange={setPopoverOpen} modal={true}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={popoverOpen}
+              className="justify-between w-full"
+            >
+              {selectedDisplayText}
+              <LuChevronsUpDown className="ml-2 w-4 h-4 opacity-50 shrink-0" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0">
+            <Command>
+              <CommandEmpty>No release types available.</CommandEmpty>
+              <CommandList>
+                <CommandGroup>
+                  {releaseOptions.map((option) => {
+                    const isDownloaded = downloadedVersions.includes(
+                      option.version,
+                    );
+                    return (
+                      <CommandItem
+                        key={option.type}
+                        value={option.type}
+                        onSelect={(currentValue) => {
+                          const selectedType = currentValue as
+                            | "stable"
+                            | "nightly";
+                          onReleaseTypeSelect(
+                            selectedType === selectedReleaseType
+                              ? null
+                              : selectedType,
+                          );
+                          setPopoverOpen(false);
+                        }}
+                      >
+                        <LuCheck
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            selectedReleaseType === option.type
+                              ? "opacity-100"
+                              : "opacity-0",
+                          )}
+                        />
+                        <div className="flex gap-2 items-center">
+                          <span className="capitalize">{option.type}</span>
+                          {option.type === "nightly" && (
+                            <Badge variant="secondary" className="text-xs">
+                              Nightly
+                            </Badge>
+                          )}
+                          <Badge variant="outline" className="text-xs">
+                            {option.version}
                           </Badge>
-                        )}
-                        <Badge variant="outline" className="text-xs">
-                          {option.version}
-                        </Badge>
-                        {isDownloaded && (
-                          <Badge variant="default" className="text-xs">
-                            Downloaded
-                          </Badge>
-                        )}
-                      </div>
-                    </CommandItem>
-                  );
-                })}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
+                          {isDownloaded && (
+                            <Badge variant="default" className="text-xs">
+                              Downloaded
+                            </Badge>
+                          )}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      ) : (
+        // Show a simple display when only one release type is available
+        releaseOptions.length === 1 && (
+          <div className="flex gap-2 justify-center items-center p-3 rounded-md border bg-muted/50">
+            <span className="text-sm font-medium capitalize">
+              {releaseOptions[0].type}
+            </span>
+            {releaseOptions[0].type === "nightly" && (
+              <Badge variant="secondary" className="text-xs">
+                Nightly
+              </Badge>
+            )}
+            <Badge variant="outline" className="text-xs">
+              {releaseOptions[0].version}
+            </Badge>
+            {downloadedVersions.includes(releaseOptions[0].version) && (
+              <Badge variant="default" className="text-xs">
+                Downloaded
+              </Badge>
+            )}
+          </div>
+        )
+      )}
 
       {showDownloadButton &&
         selectedReleaseType &&

src/components/settings-dialog.tsx

@@ -1,9 +1,14 @@
 "use client";
 
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useState } from "react";
+import { BsCamera, BsMic } from "react-icons/bs";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+
 import {
   Dialog,
   DialogContent,
@@ -19,19 +24,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { usePermissions } from "@/hooks/use-permissions";
 import type { PermissionType } from "@/hooks/use-permissions";
-import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
-import { invoke } from "@tauri-apps/api/core";
-import { useTheme } from "next-themes";
-import { useCallback, useEffect, useState } from "react";
-import { BsCamera, BsMic } from "react-icons/bs";
+import { usePermissions } from "@/hooks/use-permissions";
+import { getBrowserDisplayName } from "@/lib/browser-utils";
+import {
+  dismissToast,
+  showErrorToast,
+  showSuccessToast,
+  showUnifiedVersionUpdateToast,
+} from "@/lib/toast-utils";
 
 interface AppSettings {
   set_as_default_browser: boolean;
-  show_settings_on_startup: boolean;
   theme: string;
-  auto_delete_unused_binaries: boolean;
 }
 
 interface PermissionInfo {
@@ -40,6 +45,15 @@ interface PermissionInfo {
   description: string;
 }
 
+interface VersionUpdateProgress {
+  current_browser: string;
+  total_browsers: number;
+  completed_browsers: number;
+  new_versions_found: number;
+  browser_new_versions: number;
+  status: string; // "updating", "completed", "error"
+}
+
 interface SettingsDialogProps {
   isOpen: boolean;
   onClose: () => void;
@@ -48,15 +62,11 @@ interface SettingsDialogProps {
 export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const [settings, setSettings] = useState<AppSettings>({
     set_as_default_browser: false,
-    show_settings_on_startup: true,
     theme: "system",
-    auto_delete_unused_binaries: true,
   });
   const [originalSettings, setOriginalSettings] = useState<AppSettings>({
     set_as_default_browser: false,
-    show_settings_on_startup: true,
     theme: "system",
-    auto_delete_unused_binaries: true,
   });
   const [isDefaultBrowser, setIsDefaultBrowser] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -76,6 +86,35 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     isCameraAccessGranted,
   } = usePermissions();
 
+  const getPermissionIcon = useCallback((type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return <BsMic className="w-4 h-4" />;
+      case "camera":
+        return <BsCamera className="w-4 h-4" />;
+    }
+  }, []);
+
+  const getPermissionDisplayName = useCallback((type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return "Microphone";
+      case "camera":
+        return "Camera";
+    }
+  }, []);
+
+  const getStatusBadge = useCallback((isGranted: boolean) => {
+    if (isGranted) {
+      return (
+        <Badge variant="default" className="text-green-800 bg-green-100">
+          Granted
+        </Badge>
+      );
+    }
+    return <Badge variant="secondary">Not Granted</Badge>;
+  }, []);
+
   const getPermissionDescription = useCallback((type: PermissionType) => {
     switch (type) {
       case "microphone":
@@ -84,60 +123,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         return "Access to camera for browser applications";
     }
   }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      loadSettings().catch(console.error);
-      checkDefaultBrowserStatus().catch(console.error);
-
-      // Check if we're on macOS
-      const userAgent = navigator.userAgent;
-      const isMac = userAgent.includes("Mac");
-      setIsMacOS(isMac);
-
-      if (isMac) {
-        loadPermissions().catch(console.error);
-      }
-
-      // Set up interval to check default browser status
-      const intervalId = setInterval(() => {
-        checkDefaultBrowserStatus().catch(console.error);
-      }, 500); // Check every 500ms
-
-      // Cleanup interval on component unmount or dialog close
-      return () => {
-        clearInterval(intervalId);
-      };
-    }
-  }, [isOpen]);
-
-  // Update permissions when the permission states change
-  useEffect(() => {
-    if (isMacOS) {
-      const permissionList: PermissionInfo[] = [
-        {
-          permission_type: "microphone",
-          isGranted: isMicrophoneAccessGranted,
-          description: getPermissionDescription("microphone"),
-        },
-        {
-          permission_type: "camera",
-          isGranted: isCameraAccessGranted,
-          description: getPermissionDescription("camera"),
-        },
-      ];
-      setPermissions(permissionList);
-    } else {
-      setPermissions([]);
-    }
-  }, [
-    isMacOS,
-    isMicrophoneAccessGranted,
-    isCameraAccessGranted,
-    getPermissionDescription,
-  ]);
-
-  const loadSettings = async () => {
+  const loadSettings = useCallback(async () => {
     setIsLoading(true);
     try {
       const appSettings = await invoke<AppSettings>("get_app_settings");
@@ -148,9 +134,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, []);
 
-  const loadPermissions = async () => {
+  const loadPermissions = useCallback(async () => {
     setIsLoadingPermissions(true);
     try {
       if (!isMacOS) {
@@ -178,18 +164,23 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     } finally {
       setIsLoadingPermissions(false);
     }
-  };
+  }, [
+    getPermissionDescription,
+    isCameraAccessGranted,
+    isMacOS,
+    isMicrophoneAccessGranted,
+  ]);
 
-  const checkDefaultBrowserStatus = async () => {
+  const checkDefaultBrowserStatus = useCallback(async () => {
     try {
       const isDefault = await invoke<boolean>("is_default_browser");
       setIsDefaultBrowser(isDefault);
     } catch (error) {
       console.error("Failed to check default browser status:", error);
     }
-  };
+  }, []);
 
-  const handleSetDefaultBrowser = async () => {
+  const handleSetDefaultBrowser = useCallback(async () => {
     setIsSettingDefault(true);
     try {
       await invoke("set_as_default_browser");
@@ -199,17 +190,13 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     } finally {
       setIsSettingDefault(false);
     }
-  };
+  }, [checkDefaultBrowserStatus]);
 
-  const handleClearCache = async () => {
+  const handleClearCache = useCallback(async () => {
     setIsClearingCache(true);
     try {
       await invoke("clear_all_version_cache_and_refetch");
-      showSuccessToast("Cache cleared successfully", {
-        description:
-          "All browser version cache has been cleared and browsers are being refreshed.",
-        duration: 4000,
-      });
+      // Don't show immediate success toast - let the version update progress events handle it
     } catch (error) {
       console.error("Failed to clear cache:", error);
       showErrorToast("Failed to clear cache", {
@@ -220,52 +207,25 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     } finally {
       setIsClearingCache(false);
     }
-  };
+  }, []);
 
-  const handleRequestPermission = async (permissionType: PermissionType) => {
-    setRequestingPermission(permissionType);
-    try {
-      await requestPermission(permissionType);
-      showSuccessToast(
-        `${getPermissionDisplayName(permissionType)} access requested`,
-      );
-    } catch (error) {
-      console.error("Failed to request permission:", error);
-    } finally {
-      setRequestingPermission(null);
-    }
-  };
-
-  const getPermissionIcon = (type: PermissionType) => {
-    switch (type) {
-      case "microphone":
-        return <BsMic className="w-4 h-4" />;
-      case "camera":
-        return <BsCamera className="w-4 h-4" />;
-    }
-  };
-
-  const getPermissionDisplayName = (type: PermissionType) => {
-    switch (type) {
-      case "microphone":
-        return "Microphone";
-      case "camera":
-        return "Camera";
-    }
-  };
-
-  const getStatusBadge = (isGranted: boolean) => {
-    if (isGranted) {
-      return (
-        <Badge variant="default" className="text-green-800 bg-green-100">
-          Granted
-        </Badge>
-      );
-    }
-    return <Badge variant="secondary">Not Granted</Badge>;
-  };
-
-  const handleSave = async () => {
+  const handleRequestPermission = useCallback(
+    async (permissionType: PermissionType) => {
+      setRequestingPermission(permissionType);
+      try {
+        await requestPermission(permissionType);
+        showSuccessToast(
+          `${getPermissionDisplayName(permissionType)} access requested`,
+        );
+      } catch (error) {
+        console.error("Failed to request permission:", error);
+      } finally {
+        setRequestingPermission(null);
+      }
+    },
+    [getPermissionDisplayName, requestPermission],
+  );
+  const handleSave = useCallback(async () => {
     setIsSaving(true);
     try {
       await invoke("save_app_settings", { settings });
@@ -277,19 +237,143 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     } finally {
       setIsSaving(false);
     }
-  };
+  }, [onClose, setTheme, settings]);
 
-  const updateSetting = (key: keyof AppSettings, value: boolean | string) => {
-    setSettings((prev) => ({ ...prev, [key]: value }));
-  };
+  const updateSetting = useCallback(
+    (key: keyof AppSettings, value: boolean | string) => {
+      setSettings((prev) => ({ ...prev, [key]: value }));
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      loadSettings().catch(console.error);
+      checkDefaultBrowserStatus().catch(console.error);
+
+      // Check if we're on macOS
+      const userAgent = navigator.userAgent;
+      const isMac = userAgent.includes("Mac");
+      setIsMacOS(isMac);
+
+      if (isMac) {
+        loadPermissions().catch(console.error);
+      }
+
+      // Set up interval to check default browser status
+      const intervalId = setInterval(() => {
+        checkDefaultBrowserStatus().catch(console.error);
+      }, 500); // Check every 500ms
+
+      // Listen for version update progress events
+      let unlistenFn: (() => void) | null = null;
+      const setupVersionUpdateListener = async () => {
+        try {
+          unlistenFn = await listen<VersionUpdateProgress>(
+            "version-update-progress",
+            (event) => {
+              const progress = event.payload;
+
+              if (progress.status === "updating") {
+                // Show unified progress toast
+                const currentBrowserName = progress.current_browser
+                  ? getBrowserDisplayName(progress.current_browser)
+                  : undefined;
+
+                showUnifiedVersionUpdateToast(
+                  "Checking for browser updates...",
+                  {
+                    description: currentBrowserName
+                      ? `Fetching ${currentBrowserName} release information...`
+                      : "Initializing version check...",
+                    progress: {
+                      current: progress.completed_browsers,
+                      total: progress.total_browsers,
+                      found: progress.new_versions_found,
+                      current_browser: currentBrowserName,
+                    },
+                  },
+                );
+              } else if (progress.status === "completed") {
+                dismissToast("unified-version-update");
+
+                if (progress.new_versions_found > 0) {
+                  showSuccessToast("Browser versions updated successfully", {
+                    duration: 5000,
+                    description:
+                      "Auto-downloads will start shortly for available updates.",
+                  });
+                } else {
+                  showSuccessToast("No new browser versions found", {
+                    duration: 3000,
+                    description: "All browser versions are up to date",
+                  });
+                }
+              } else if (progress.status === "error") {
+                dismissToast("unified-version-update");
+
+                showErrorToast("Failed to update browser versions", {
+                  duration: 6000,
+                  description: "Check your internet connection and try again",
+                });
+              }
+            },
+          );
+        } catch (error) {
+          console.error(
+            "Failed to setup version update progress listener:",
+            error,
+          );
+        }
+      };
+
+      setupVersionUpdateListener();
+
+      // Cleanup interval and listener on component unmount or dialog close
+      return () => {
+        clearInterval(intervalId);
+        if (unlistenFn) {
+          try {
+            unlistenFn();
+          } catch (error) {
+            console.error(
+              "Failed to cleanup version update progress listener:",
+              error,
+            );
+          }
+        }
+      };
+    }
+  }, [isOpen, loadPermissions, checkDefaultBrowserStatus, loadSettings]);
+
+  // Update permissions when the permission states change
+  useEffect(() => {
+    if (isMacOS) {
+      const permissionList: PermissionInfo[] = [
+        {
+          permission_type: "microphone",
+          isGranted: isMicrophoneAccessGranted,
+          description: getPermissionDescription("microphone"),
+        },
+        {
+          permission_type: "camera",
+          isGranted: isCameraAccessGranted,
+          description: getPermissionDescription("camera"),
+        },
+      ];
+      setPermissions(permissionList);
+    } else {
+      setPermissions([]);
+    }
+  }, [
+    isMacOS,
+    isMicrophoneAccessGranted,
+    isCameraAccessGranted,
+    getPermissionDescription,
+  ]);
 
   // Check if settings have changed (excluding default browser setting)
-  const hasChanges =
-    settings.show_settings_on_startup !==
-      originalSettings.show_settings_on_startup ||
-    settings.theme !== originalSettings.theme ||
-    settings.auto_delete_unused_binaries !==
-      originalSettings.auto_delete_unused_binaries;
+  const hasChanges = settings.theme !== originalSettings.theme;
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -358,56 +442,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             </p>
           </div>
 
-          {/* Auto-Update Section */}
-          <div className="space-y-4">
-            <Label className="text-base font-medium">Auto-Updates</Label>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="auto-delete-binaries"
-                checked={settings.auto_delete_unused_binaries}
-                onCheckedChange={(checked) => {
-                  updateSetting(
-                    "auto_delete_unused_binaries",
-                    checked as boolean,
-                  );
-                }}
-              />
-              <Label htmlFor="auto-delete-binaries" className="text-sm">
-                Automatically delete unused browser binaries
-              </Label>
-            </div>
-
-            <p className="text-xs text-muted-foreground">
-              When enabled, Donut Browser will check for browser updates and
-              notify you when updates are available for your profiles. Unused
-              binaries will be automatically deleted to save disk space.
-            </p>
-          </div>
-
-          {/* Startup Behavior Section */}
-          <div className="space-y-4">
-            <Label className="text-base font-medium">Startup Behavior</Label>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="show-settings"
-                checked={settings.show_settings_on_startup}
-                onCheckedChange={(checked) => {
-                  updateSetting("show_settings_on_startup", checked as boolean);
-                }}
-              />
-              <Label htmlFor="show-settings" className="text-sm">
-                Show settings on app startup
-              </Label>
-            </div>
-
-            <p className="text-xs text-muted-foreground">
-              When enabled, the settings dialog will be shown when the app
-              starts.
-            </p>
-          </div>
-
           {/* Permissions Section - Only show on macOS */}
           {isMacOS && (
             <div className="space-y-4">

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

@@ -0,0 +1,888 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import MultipleSelector, { type Option } from "@/components/multiple-selector";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import type { CamoufoxConfig, CamoufoxFingerprintConfig } from "@/types";
+
+interface SharedCamoufoxConfigFormProps {
+  config: CamoufoxConfig;
+  onConfigChange: (key: keyof CamoufoxConfig, value: unknown) => void;
+  className?: string;
+  isCreating?: boolean; // Flag to indicate if this is for creating a new profile
+  forceAdvanced?: boolean; // Force advanced mode (for editing)
+}
+
+// Component for editing nested objects like webGl:parameters
+interface ObjectEditorProps {
+  value: Record<string, unknown> | undefined;
+  onChange: (value: Record<string, unknown> | undefined) => void;
+  title: string;
+}
+
+function ObjectEditor({ value, onChange, title }: ObjectEditorProps) {
+  const [jsonString, setJsonString] = useState("");
+
+  useEffect(() => {
+    setJsonString(JSON.stringify(value || {}, null, 2));
+  }, [value]);
+
+  const handleChange = (newValue: string) => {
+    setJsonString(newValue);
+    try {
+      if (newValue.trim() === "" || newValue.trim() === "{}") {
+        onChange(undefined); // Treat empty objects as undefined
+        return;
+      }
+      const parsed = JSON.parse(newValue);
+      if (
+        typeof parsed === "object" &&
+        parsed !== null &&
+        Object.keys(parsed).length === 0
+      ) {
+        onChange(undefined);
+        return;
+      }
+      onChange(parsed as Record<string, unknown>);
+    } catch (err) {
+      console.warn("Invalid JSON:", err);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>{title}</Label>
+      <Textarea
+        value={jsonString}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={`Enter ${title} as JSON`}
+        className="font-mono text-sm"
+        rows={6}
+      />
+    </div>
+  );
+}
+
+export function SharedCamoufoxConfigForm({
+  config,
+  onConfigChange,
+  className = "",
+  isCreating = false,
+  forceAdvanced = false,
+}: SharedCamoufoxConfigFormProps) {
+  const [activeTab, setActiveTab] = useState(
+    forceAdvanced ? "advanced" : "normal",
+  );
+  const [fingerprintConfig, setFingerprintConfig] =
+    useState<CamoufoxFingerprintConfig>({});
+
+  // Set screen resolution to user's screen size when creating a new profile
+  useEffect(() => {
+    if (isCreating && typeof window !== "undefined") {
+      const screenWidth = window.screen.width;
+      const screenHeight = window.screen.height;
+
+      // Only set if not already configured
+      if (!config.screen_max_width) {
+        onConfigChange("screen_max_width", screenWidth);
+      }
+      if (!config.screen_max_height) {
+        onConfigChange("screen_max_height", screenHeight);
+      }
+    }
+  }, [
+    isCreating,
+    config.screen_max_width,
+    config.screen_max_height,
+    onConfigChange,
+  ]);
+
+  // Parse fingerprint config when component mounts or config changes
+  useEffect(() => {
+    if (config.fingerprint) {
+      try {
+        const parsed = JSON.parse(
+          config.fingerprint,
+        ) as CamoufoxFingerprintConfig;
+        setFingerprintConfig(parsed);
+      } catch (error) {
+        console.error("Failed to parse fingerprint config:", error);
+        setFingerprintConfig({});
+      }
+    } else {
+      // Initialize with empty config if no fingerprint is set
+      setFingerprintConfig({});
+    }
+  }, [config.fingerprint]);
+
+  // Update fingerprint config and serialize it
+  const updateFingerprintConfig = (
+    key: keyof CamoufoxFingerprintConfig,
+    value: unknown,
+  ) => {
+    const newConfig = { ...fingerprintConfig };
+
+    // Remove undefined values to keep the config clean
+    if (
+      value === undefined ||
+      value === "" ||
+      (Array.isArray(value) && value.length === 0)
+    ) {
+      delete newConfig[key];
+    } else {
+      (newConfig as Record<string, unknown>)[key] = value;
+    }
+
+    setFingerprintConfig(newConfig);
+
+    // Validate that the config can be serialized to JSON
+    try {
+      const jsonString = JSON.stringify(newConfig);
+      onConfigChange("fingerprint", jsonString);
+    } catch (error) {
+      console.error("Failed to serialize fingerprint config:", error);
+      // Don't update if serialization fails
+    }
+  };
+
+  // Determine if automatic location configuration is enabled
+  const isAutoLocationEnabled = config.geoip !== false;
+
+  // Handle automatic location configuration toggle
+  const handleAutoLocationToggle = (enabled: boolean) => {
+    if (enabled) {
+      onConfigChange("geoip", true);
+    } else {
+      onConfigChange("geoip", false);
+    }
+  };
+
+  const renderAdvancedForm = () => (
+    <div className="space-y-6">
+      <Alert>
+        <AlertDescription>
+          ⚠️ Warning: Only edit these parameters if you know what you're doing.
+          Incorrect values may break websites, make them detect you, and lead to
+          hard-to-debug bugs.{" "}
+        </AlertDescription>
+      </Alert>
+
+      {/* Blocking Options */}
+      <div className="space-y-3">
+        <Label>Blocking Options</Label>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-images"
+              checked={config.block_images || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_images", checked)
+              }
+            />
+            <Label htmlFor="block-images">Block Images</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-webrtc"
+              checked={config.block_webrtc || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_webrtc", checked)
+              }
+            />
+            <Label htmlFor="block-webrtc">Block WebRTC</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-webgl"
+              checked={config.block_webgl || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_webgl", checked)
+              }
+            />
+            <Label htmlFor="block-webgl">Block WebGL</Label>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigator Properties */}
+      <div className="space-y-3">
+        <Label>Navigator Properties</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="user-agent">User Agent</Label>
+            <Input
+              id="user-agent"
+              value={fingerprintConfig["navigator.userAgent"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.userAgent",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="Mozilla/5.0..."
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="platform">Platform</Label>
+            <Input
+              id="platform"
+              value={fingerprintConfig["navigator.platform"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.platform",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., MacIntel, Win32"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="app-version">App Version</Label>
+            <Input
+              id="app-version"
+              value={fingerprintConfig["navigator.appVersion"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.appVersion",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., 5.0 (Macintosh)"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="oscpu">OS CPU</Label>
+            <Input
+              id="oscpu"
+              value={fingerprintConfig["navigator.oscpu"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.oscpu",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., Intel Mac OS X 10.15"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="hardware-concurrency">Hardware Concurrency</Label>
+            <Input
+              id="hardware-concurrency"
+              type="number"
+              value={fingerprintConfig["navigator.hardwareConcurrency"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.hardwareConcurrency",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 8"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="max-touch-points">Max Touch Points</Label>
+            <Input
+              id="max-touch-points"
+              type="number"
+              value={fingerprintConfig["navigator.maxTouchPoints"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.maxTouchPoints",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 0"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="do-not-track">Do Not Track</Label>
+            <Select
+              value={fingerprintConfig["navigator.doNotTrack"] || ""}
+              onValueChange={(value) =>
+                updateFingerprintConfig(
+                  "navigator.doNotTrack",
+                  value || undefined,
+                )
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select DNT value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0">0 (tracking allowed)</SelectItem>
+                <SelectItem value="1">1 (tracking not allowed)</SelectItem>
+                <SelectItem value="unspecified">unspecified</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="language">Language</Label>
+            <Input
+              id="language"
+              value={fingerprintConfig["navigator.language"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "navigator.language",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., en-US"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Screen Properties */}
+      <div className="space-y-3">
+        <Label>Screen Properties</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="screen-width">Screen Width</Label>
+            <Input
+              id="screen-width"
+              type="number"
+              value={fingerprintConfig["screen.width"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.width",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1920"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="screen-height">Screen Height</Label>
+            <Input
+              id="screen-height"
+              type="number"
+              value={fingerprintConfig["screen.height"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.height",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1080"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="avail-width">Available Width</Label>
+            <Input
+              id="avail-width"
+              type="number"
+              value={fingerprintConfig["screen.availWidth"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.availWidth",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1920"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="avail-height">Available Height</Label>
+            <Input
+              id="avail-height"
+              type="number"
+              value={fingerprintConfig["screen.availHeight"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.availHeight",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1055"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="color-depth">Color Depth</Label>
+            <Input
+              id="color-depth"
+              type="number"
+              value={fingerprintConfig["screen.colorDepth"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.colorDepth",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 30"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="pixel-depth">Pixel Depth</Label>
+            <Input
+              id="pixel-depth"
+              type="number"
+              value={fingerprintConfig["screen.pixelDepth"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "screen.pixelDepth",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 30"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Window Properties */}
+      <div className="space-y-3">
+        <Label>Window Properties</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="outer-width">Outer Width</Label>
+            <Input
+              id="outer-width"
+              type="number"
+              value={fingerprintConfig["window.outerWidth"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.outerWidth",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1512"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="outer-height">Outer Height</Label>
+            <Input
+              id="outer-height"
+              type="number"
+              value={fingerprintConfig["window.outerHeight"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.outerHeight",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 886"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="inner-width">Inner Width</Label>
+            <Input
+              id="inner-width"
+              type="number"
+              value={fingerprintConfig["window.innerWidth"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.innerWidth",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1512"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="inner-height">Inner Height</Label>
+            <Input
+              id="inner-height"
+              type="number"
+              value={fingerprintConfig["window.innerHeight"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.innerHeight",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 886"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="screen-x">Screen X</Label>
+            <Input
+              id="screen-x"
+              type="number"
+              value={fingerprintConfig["window.screenX"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.screenX",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 0"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="screen-y">Screen Y</Label>
+            <Input
+              id="screen-y"
+              type="number"
+              value={fingerprintConfig["window.screenY"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "window.screenY",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 0"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* WebGL Properties */}
+      <div className="space-y-3">
+        <Label>WebGL Properties</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="webgl-vendor">WebGL Vendor</Label>
+            <Input
+              id="webgl-vendor"
+              value={fingerprintConfig["webGl:vendor"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "webGl:vendor",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., Mesa"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="webgl-renderer">WebGL Renderer</Label>
+            <Input
+              id="webgl-renderer"
+              value={fingerprintConfig["webGl:renderer"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "webGl:renderer",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., llvmpipe, or similar"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* WebGL Parameters */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl:parameters"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl:parameters", value)
+          }
+          title="WebGL Parameters"
+        />
+      </div>
+
+      {/* WebGL2 Parameters */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl2:parameters"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl2:parameters", value)
+          }
+          title="WebGL2 Parameters"
+        />
+      </div>
+
+      {/* WebGL Shader Precision Formats */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl:shaderPrecisionFormats"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl:shaderPrecisionFormats", value)
+          }
+          title="WebGL Shader Precision Formats"
+        />
+      </div>
+
+      {/* WebGL2 Shader Precision Formats */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl2:shaderPrecisionFormats"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl2:shaderPrecisionFormats", value)
+          }
+          title="WebGL2 Shader Precision Formats"
+        />
+      </div>
+
+      {/* Geolocation */}
+      <div className="space-y-3">
+        <Label>Geolocation</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="latitude">Latitude</Label>
+            <Input
+              id="latitude"
+              type="number"
+              step="any"
+              value={fingerprintConfig["geolocation:latitude"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "geolocation:latitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 41.0019"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="longitude">Longitude</Label>
+            <Input
+              id="longitude"
+              type="number"
+              step="any"
+              value={fingerprintConfig["geolocation:longitude"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "geolocation:longitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 28.9645"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="timezone">Timezone</Label>
+            <Input
+              id="timezone"
+              type="text"
+              value={fingerprintConfig.timezone || ""}
+              onChange={(e) =>
+                updateFingerprintConfig("timezone", e.target.value || undefined)
+              }
+              placeholder="e.g., America/New_York"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Locale */}
+      <div className="space-y-3">
+        <Label>Locale</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="locale-language">Language</Label>
+            <Input
+              id="locale-language"
+              value={fingerprintConfig["locale:language"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:language",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., tr"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="locale-region">Region</Label>
+            <Input
+              id="locale-region"
+              value={fingerprintConfig["locale:region"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:region",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., TR"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="locale-script">Script</Label>
+            <Input
+              id="locale-script"
+              value={fingerprintConfig["locale:script"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:script",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., Latn"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Fonts */}
+      <div className="space-y-3">
+        <Label>Fonts</Label>
+        <MultipleSelector
+          value={
+            fingerprintConfig.fonts?.map((font) => ({
+              label: font,
+              value: font,
+            })) || []
+          }
+          onChange={(selected: Option[]) =>
+            updateFingerprintConfig(
+              "fonts",
+              selected.map((s: Option) => s.value),
+            )
+          }
+          placeholder="Add fonts..."
+          creatable
+        />
+      </div>
+
+      {/* Battery */}
+      <div className="space-y-3">
+        <Label>Battery</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="battery-charging"
+                checked={fingerprintConfig["battery:charging"] || false}
+                onCheckedChange={(checked) =>
+                  updateFingerprintConfig("battery:charging", checked)
+                }
+              />
+              <Label htmlFor="battery-charging">Charging</Label>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="charging-time">Charging Time</Label>
+            <Input
+              id="charging-time"
+              type="number"
+              step="any"
+              value={fingerprintConfig["battery:chargingTime"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "battery:chargingTime",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 0"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="discharging-time">Discharging Time</Label>
+            <Input
+              id="discharging-time"
+              type="number"
+              step="any"
+              value={fingerprintConfig["battery:dischargingTime"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "battery:dischargingTime",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 0"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {forceAdvanced ? (
+        // Advanced mode only (for editing)
+        renderAdvancedForm()
+      ) : (
+        // Normal/Advanced tabs for creation
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid grid-cols-2 w-full">
+            <TabsTrigger value="normal">Normal</TabsTrigger>
+            <TabsTrigger value="advanced">Advanced</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="normal" className="space-y-6">
+            {/* Automatic Location Configuration */}
+            <div className="mt-4 space-y-3">
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="auto-location"
+                  checked={isAutoLocationEnabled}
+                  onCheckedChange={handleAutoLocationToggle}
+                />
+                <Label htmlFor="auto-location">
+                  Automatically configure location information based on proxy
+                  configuration or your connection if no proxy provided
+                </Label>
+              </div>
+            </div>
+
+            {/* Screen Resolution */}
+            <div className="space-y-3">
+              <Label>Screen Resolution</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="screen-max-width">Max Width</Label>
+                  <Input
+                    id="screen-max-width"
+                    type="number"
+                    value={config.screen_max_width || ""}
+                    onChange={(e) =>
+                      onConfigChange(
+                        "screen_max_width",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1920"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="screen-max-height">Max Height</Label>
+                  <Input
+                    id="screen-max-height"
+                    type="number"
+                    value={config.screen_max_height || ""}
+                    onChange={(e) =>
+                      onConfigChange(
+                        "screen_max_height",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1080"
+                  />
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="advanced" className="space-y-6">
+            {renderAdvancedForm()}
+          </TabsContent>
+        </Tabs>
+      )}
+    </div>
+  );
+}

src/components/ui/alert.tsx

@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";