chore: versiom bump

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/prompts/telegram-release-summary.prompt.yml

@@ -0,0 +1,23 @@
+messages:
+  - role: system
+    content: |-
+      You write short, friendly release summaries for Donut Browser, an anti-detect browser desktop app built with Tauri and Next.js.
+
+      Rules:
+      - Keep it minimal and friendly. No marketing voice, no filler, no superlatives.
+      - No emojis or pictographic symbols.
+      - Plain ASCII punctuation only. No em-dashes, en-dashes, ellipses, smart quotes, or any non-ASCII characters. Use a regular hyphen, three dots, or straight quotes instead.
+      - Plain text only. No markdown (no asterisks for bold, no backticks for code, no headings), no HTML tags.
+      - Focus on user-visible changes. Skip chore, docs-only, CI, test, dependency, formatting, and purely internal refactor commits unless they have user-visible impact.
+      - Group related commits into a single bullet when it reads better.
+      - Use simple, direct language.
+      - Do not include the version number, download links, or a heading. The surrounding message already has those.
+      - If nothing in the commits is user-visible, output exactly one bullet: "- Small fixes and internal improvements."
+  - role: user
+    content: |-
+      Write the summary for Donut Browser {{version}} from these commits:
+
+      {{commits}}
+
+      Format: one short opening sentence, a blank line, then bullets starting with "- " (one per line). Nothing else.
+model: openai/gpt-4.1

.github/workflows/codeql.yml

@@ -34,7 +34,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

.github/workflows/compliance-close.yml

@@ -0,0 +1,108 @@
+name: Compliance Close
+
+on:
+  schedule:
+    # Every 30 minutes; the actual close decision uses comment age, so the cron
+    # cadence only bounds how stale the closure can get past the 24-hour mark.
+    - cron: "*/30 * * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  close-non-compliant:
+    if: github.repository == 'zhom/donutbrowser'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close non-compliant issues and PRs after 24 hours
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const { data: items } = await github.rest.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: 'needs:compliance',
+              state: 'open',
+              per_page: 100,
+            });
+
+            if (items.length === 0) {
+              core.info('No open issues/PRs with needs:compliance label');
+              return;
+            }
+
+            const now = Date.now();
+            const window_ms = 24 * 60 * 60 * 1000;
+
+            for (const item of items) {
+              const isPR = !!item.pull_request;
+              const kind = isPR ? 'PR' : 'issue';
+
+              const { data: comments } = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: item.number,
+              });
+
+              // Use the OLDEST compliance sentinel as the start of the 24-hour
+              // window so back-and-forth edits don't reset the clock.
+              const sentinel = comments
+                .filter(c => c.body && c.body.includes('<!-- issue-compliance -->'))
+                .sort((a, b) => new Date(a.created_at) - new Date(b.created_at))[0];
+
+              if (!sentinel) {
+                core.info(`${kind} #${item.number} has needs:compliance label but no compliance comment; skipping`);
+                continue;
+              }
+
+              const age_ms = now - new Date(sentinel.created_at).getTime();
+              if (age_ms < window_ms) {
+                const hours = (age_ms / (60 * 60 * 1000)).toFixed(1);
+                core.info(`${kind} #${item.number} still within 24-hour window (${hours}h elapsed)`);
+                continue;
+              }
+
+              const closeMessage = isPR
+                ? 'This pull request has been automatically closed because it was not updated to meet our [contributing guidelines](../blob/main/CONTRIBUTING.md) within the 24-hour window.\n\nFeel free to open a new pull request that follows our guidelines.'
+                : 'This issue has been automatically closed because it was not updated to meet our [contributing guidelines](../blob/main/CONTRIBUTING.md) within the 24-hour window.\n\nFeel free to open a new issue that follows our issue templates.';
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: item.number,
+                body: closeMessage,
+              });
+
+              try {
+                await github.rest.issues.removeLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: item.number,
+                  name: 'needs:compliance',
+                });
+              } catch (e) {
+                core.info(`Could not remove needs:compliance label from #${item.number}: ${e.message}`);
+              }
+
+              if (isPR) {
+                await github.rest.pulls.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  pull_number: item.number,
+                  state: 'closed',
+                });
+              } else {
+                await github.rest.issues.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: item.number,
+                  state: 'closed',
+                  state_reason: 'not_planned',
+                });
+              }
+
+              core.info(`Closed non-compliant ${kind} #${item.number} after 24-hour window`);
+            }

.github/workflows/dependabot-automerge.yml

@@ -13,7 +13,7 @@ jobs:
   security-scan:
     name: Security Vulnerability Scan
     if: github.repository == 'zhom/donutbrowser' && github.actor == 'dependabot[bot]'
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r

.github/workflows/docker-sync.yml

@@ -33,10 +33,10 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd #v4.0.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 #v4.1.0
 
       - name: Log in to Docker Hub
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 #v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee #v4.2.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -62,7 +62,7 @@ jobs:
           echo "Tags: ${TAGS}"
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f #v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf #v7.2.0
         with:
           context: .
           file: ./donut-sync/Dockerfile

.github/workflows/issue-compliance.yml

@@ -0,0 +1,269 @@
+name: Issue Compliance Check
+
+on:
+  issues:
+    types: [opened, edited]
+
+permissions:
+  contents: read
+  issues: write
+
+env:
+  MODEL: z-ai/glm-5.1
+
+jobs:
+  check-compliance:
+    if: github.repository == 'zhom/donutbrowser' && github.event.action == 'opened'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Gather context
+        env:
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+          ISSUE_BODY: ${{ github.event.issue.body }}
+        run: |
+          printf '%s' "$ISSUE_TITLE" > /tmp/issue-title.txt
+          printf '%s' "${ISSUE_BODY:-}" > /tmp/issue-body.txt
+
+      - name: Build prompt
+        run: |
+          cat > /tmp/system.txt <<'PROMPT'
+          You are reviewing a new GitHub issue for template compliance. Return ONLY a single JSON object, no prose, no markdown fences.
+
+          Project: Donut Browser. There are three valid templates:
+          - Bug Report (Description + Operating System + Donut Browser version + Which browser is affected + Steps to reproduce + Error logs/screenshots fields)
+          - Feature Request (description + verification checkbox)
+          - Question (free form)
+
+          ## Compliance — flag NON-compliant ONLY when at least one of these is true
+          - The issue body is empty or contains only placeholder text from the template
+          - The issue is an obvious AI-generated wall of text with no real specifics
+          - A bug report has no reproduction information or no error description
+          - A feature request gives no use case at all
+          - The author left required fields empty (Operating System, Donut Browser version, Which browser is affected, Steps to reproduce on bug reports)
+
+          Do NOT flag for missing optional fields, missing screenshots, short titles, or stylistic issues. Be conservative.
+
+          ## Output schema
+          {
+            "is_compliant": true | false,
+            "non_compliance_reasons": ["short bullet", ...]
+          }
+
+          If there is nothing to flag, return:
+          {"is_compliant": true, "non_compliance_reasons": []}
+          PROMPT
+
+      - name: Call OpenRouter
+        env:
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+        run: |
+          PAYLOAD=$(jq -n \
+            --arg model "$MODEL" \
+            --rawfile system_prompt /tmp/system.txt \
+            --rawfile title /tmp/issue-title.txt \
+            --rawfile body /tmp/issue-body.txt \
+            '{
+              model: $model,
+              messages: [
+                { role: "system", content: $system_prompt },
+                { role: "user",
+                  content: ("New issue title: " + $title + "\n\nNew issue body:\n" + $body) }
+              ],
+              response_format: { type: "json_object" }
+            }')
+
+          RESPONSE=$(curl -fsSL https://openrouter.ai/api/v1/chat/completions \
+            -H "Authorization: Bearer $OPENROUTER_API_KEY" \
+            -H "Content-Type: application/json" \
+            -d "$PAYLOAD")
+
+          jq -r '.choices[0].message.content // empty' <<< "$RESPONSE" > /tmp/raw.txt
+
+          # Strip accidental markdown fences and parse. On parse failure, fall back
+          # to a noop result so the workflow doesn't fail the issue author's run.
+          sed -E 's/^```(json)?$//; s/```$//' /tmp/raw.txt > /tmp/result.json
+          if ! jq -e . /tmp/result.json >/dev/null 2>&1; then
+            echo "::warning::Model returned non-JSON; treating as compliant"
+            cat /tmp/raw.txt
+            echo '{"is_compliant": true, "non_compliance_reasons": []}' > /tmp/result.json
+          fi
+          echo "Result:"
+          cat /tmp/result.json
+
+      - name: Build comment
+        run: |
+          python3 - <<'EOF'
+          import json, os
+          r = json.load(open('/tmp/result.json'))
+          compliant = bool(r.get('is_compliant', True))
+          reasons = r.get('non_compliance_reasons') or []
+
+          parts = []
+          if not compliant:
+              parts.append('<!-- issue-compliance -->')
+              parts.append("This issue doesn't fully meet our [contributing guidelines](../blob/main/CONTRIBUTING.md).")
+              parts.append('')
+              parts.append('**What needs to be fixed:**')
+              for reason in reasons:
+                  parts.append(f'- {reason}')
+              parts.append('')
+              parts.append('Please edit this issue to address the above within **24 hours**, or it will be automatically closed.')
+              parts.append('')
+              parts.append('If you believe this was flagged incorrectly, please let a maintainer know.')
+
+          comment = '\n'.join(parts).strip()
+          open('/tmp/comment.md', 'w').write(comment)
+          with open(os.environ['GITHUB_OUTPUT'], 'a') as fh:
+              fh.write(f'has_comment={"true" if comment else "false"}\n')
+              fh.write(f'non_compliant={"true" if not compliant else "false"}\n')
+          EOF
+        id: build
+
+      - name: Post comment
+        if: steps.build.outputs.has_comment == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_NUMBER: ${{ github.event.issue.number }}
+        run: |
+          gh issue comment "$ISSUE_NUMBER" --repo "$GITHUB_REPOSITORY" --body-file /tmp/comment.md
+
+      - name: Apply needs:compliance label
+        if: steps.build.outputs.non_compliant == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_NUMBER: ${{ github.event.issue.number }}
+        run: |
+          gh issue edit "$ISSUE_NUMBER" --repo "$GITHUB_REPOSITORY" --add-label "needs:compliance"
+
+  recheck-compliance:
+    # When a flagged issue is edited, re-check. If now compliant: remove label,
+    # delete the previous compliance comment, and thank the author. If still
+    # non-compliant: leave label and post an updated note.
+    if: >
+      github.repository == 'zhom/donutbrowser' &&
+      github.event.action == 'edited' &&
+      contains(github.event.issue.labels.*.name, 'needs:compliance')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Gather context
+        env:
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+          ISSUE_BODY: ${{ github.event.issue.body }}
+        run: |
+          printf '%s' "$ISSUE_TITLE" > /tmp/issue-title.txt
+          printf '%s' "${ISSUE_BODY:-}" > /tmp/issue-body.txt
+
+      - name: Build prompt
+        run: |
+          cat > /tmp/system.txt <<'PROMPT'
+          You are re-checking a GitHub issue that was previously flagged as not meeting template requirements. Return ONLY a single JSON object, no prose, no markdown fences.
+
+          Project: Donut Browser. There are three valid templates:
+          - Bug Report (Description + Operating System + Donut Browser version + Which browser is affected + Steps to reproduce + Error logs/screenshots fields)
+          - Feature Request (description + verification checkbox)
+          - Question (free form)
+
+          ## Flag NON-compliant ONLY when at least one of these is true
+          - The issue body is empty or contains only placeholder text from the template
+          - The issue is an obvious AI-generated wall of text with no real specifics
+          - A bug report has no reproduction information or no error description
+          - A feature request gives no use case at all
+          - The author left required fields empty (Operating System, Donut Browser version, Which browser is affected, Steps to reproduce on bug reports)
+
+          Do NOT flag for missing optional fields, missing screenshots, short titles, or stylistic issues. Be conservative.
+
+          ## Output schema
+          {
+            "is_compliant": true | false,
+            "non_compliance_reasons": ["short bullet", ...]
+          }
+          PROMPT
+
+      - name: Call OpenRouter
+        env:
+          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
+        run: |
+          PAYLOAD=$(jq -n \
+            --arg model "$MODEL" \
+            --rawfile system_prompt /tmp/system.txt \
+            --rawfile title /tmp/issue-title.txt \
+            --rawfile body /tmp/issue-body.txt \
+            '{
+              model: $model,
+              messages: [
+                { role: "system", content: $system_prompt },
+                { role: "user", content: ("Title: " + $title + "\n\nBody:\n" + $body) }
+              ],
+              response_format: { type: "json_object" }
+            }')
+
+          RESPONSE=$(curl -fsSL https://openrouter.ai/api/v1/chat/completions \
+            -H "Authorization: Bearer $OPENROUTER_API_KEY" \
+            -H "Content-Type: application/json" \
+            -d "$PAYLOAD")
+
+          jq -r '.choices[0].message.content // empty' <<< "$RESPONSE" > /tmp/raw.txt
+          sed -E 's/^```(json)?$//; s/```$//' /tmp/raw.txt > /tmp/result.json
+          if ! jq -e . /tmp/result.json >/dev/null 2>&1; then
+            echo "::warning::Model returned non-JSON; assuming still non-compliant"
+            echo '{"is_compliant": false, "non_compliance_reasons": ["unable to parse model output"]}' > /tmp/result.json
+          fi
+
+      - name: Resolve compliance state
+        id: resolve
+        run: |
+          IS_COMPLIANT=$(jq -r '.is_compliant // false' /tmp/result.json)
+          echo "is_compliant=$IS_COMPLIANT" >> "$GITHUB_OUTPUT"
+
+      - name: Clear compliance label and acknowledge fix
+        if: steps.resolve.outputs.is_compliant == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_NUMBER: ${{ github.event.issue.number }}
+        run: |
+          gh issue edit "$ISSUE_NUMBER" --repo "$GITHUB_REPOSITORY" --remove-label "needs:compliance" || true
+
+          # Delete the previous <!-- issue-compliance --> sentinel comment so
+          # the thread is clean once the author has addressed the issue.
+          COMMENT_ID=$(gh api "repos/$GITHUB_REPOSITORY/issues/$ISSUE_NUMBER/comments" \
+            --jq '[.[] | select(.body | contains("<!-- issue-compliance -->"))][-1].id // empty')
+          if [ -n "$COMMENT_ID" ]; then
+            gh api -X DELETE "repos/$GITHUB_REPOSITORY/issues/comments/$COMMENT_ID" || true
+          fi
+
+          gh issue comment "$ISSUE_NUMBER" --repo "$GITHUB_REPOSITORY" \
+            --body "Thanks for updating the issue."
+
+      - name: Build follow-up comment
+        if: steps.resolve.outputs.is_compliant != 'true'
+        run: |
+          python3 - <<'EOF'
+          import json
+          r = json.load(open('/tmp/result.json'))
+          reasons = r.get('non_compliance_reasons') or []
+          parts = [
+            '<!-- issue-compliance -->',
+            'This issue still does not meet our [contributing guidelines](../blob/main/CONTRIBUTING.md).',
+            '',
+            '**What still needs to be fixed:**',
+          ]
+          for reason in reasons:
+              parts.append(f'- {reason}')
+          parts.append('')
+          parts.append('Please edit this issue to address the above within **24 hours**, or it will be automatically closed.')
+          open('/tmp/comment.md', 'w').write('\n'.join(parts))
+          EOF
+
+      - name: Post follow-up comment
+        if: steps.resolve.outputs.is_compliant != 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_NUMBER: ${{ github.event.issue.number }}
+        run: |
+          gh issue comment "$ISSUE_NUMBER" --repo "$GITHUB_REPOSITORY" --body-file /tmp/comment.md

.github/workflows/issue-validation.yml

@@ -18,8 +18,8 @@ permissions:
 
 env:
   # Single source of truth for the model used by both triage and composer.
-  TRIAGE_MODEL: anthropic/claude-opus-4.7
-  COMPOSER_MODEL: anthropic/claude-opus-4.7
+  TRIAGE_MODEL: z-ai/glm-5.1
+  COMPOSER_MODEL: z-ai/glm-5.1
 
 jobs:
   analyze-issue:
@@ -102,12 +102,14 @@ jobs:
             its API, MCP server, and the bundled `donut-sync` self-hosted server.
           - **Wayfern** — a Chromium fork maintained by zhom (the same maintainer). Wayfern
             bugs are in-scope here unless they are obviously upstream Chromium issues.
-          - **Camoufox** — a Firefox fork by daijro. The maintainer of THIS repo does NOT
-            contribute to Camoufox and CANNOT fix bugs in it.
+          - **Camoufox** — a Firefox fork by daijro, used by Donut but maintained in a
+            separate repository. Bugs about Camoufox's *internal* behavior are outside
+            the scope of this project.
               - Bugs about Camoufox's *internal* behavior (page rendering, JS engine,
                 dropdowns, form widgets, fingerprinting *as Camoufox implements it*,
-                checkbox/radio quirks) are UPSTREAM ONLY. Redirect to
-                https://github.com/daijro/camoufox/issues.
+                checkbox/radio quirks) are out of scope here. Ask the user to first
+                search https://github.com/daijro/camoufox/issues for a matching report,
+                and if they don't find one, to open it there themselves.
               - Bugs about how Donut *launches, configures, or downloads* Camoufox are
                 in-scope here.
           - **Forks of Wayfern or Camoufox** (e.g. CloverLabsAI, VulpineOS) are NOT
@@ -146,7 +148,10 @@ jobs:
             dismiss as "known issue" / "expected" / "false positive in Tauri apps". Ask
             which exact version was the last working one and what changed.
           - **Out-of-scope (upstream Camoufox)**: report is about Camoufox's own
-            behavior. Redirect, do not collect logs.
+            behavior. Tell the user it's outside the scope of this project and ask
+            them to search the Camoufox repo and, if no matching issue exists, file
+            one there. Do NOT say the maintainer doesn't contribute / can't fix it
+            — keep it strictly about project scope. Do not collect logs.
           - **Fork-support request**: asks the maintainer to support an alternative
             Wayfern/Camoufox fork. Acknowledge in one neutral sentence — do NOT call it
             "clear", "reasonable", "well-thought-out", etc.
@@ -159,10 +164,14 @@ jobs:
             numbers. Never speculate about how subscription / paid-plan checks work.
 
           # OS-SPECIFIC LOG PATHS (use ONLY the one matching the user's OS)
+          # Easiest path for the user: Donut → Settings → Advanced → Copy logs
+          # (puts the latest rotated log on the clipboard). If they prefer to
+          # attach files directly, the active log is `DonutBrowser.log`; older
+          # rotated copies sit next to it (`DonutBrowser.log.YYYY-MM-DD-…`).
 
-          - macOS:   `~/Library/Logs/com.donutbrowser/`
-          - Linux:   `~/.local/share/com.donutbrowser/logs/`
-          - Windows: `%APPDATA%\com.donutbrowser\logs\`
+          - macOS:   `~/Library/Logs/com.donutbrowser/DonutBrowser.log`
+          - Linux:   `~/.local/share/com.donutbrowser/logs/DonutBrowser.log`
+          - Windows: `%LOCALAPPDATA%\com.donutbrowser\logs\DonutBrowser.log`
 
           # KNOWN ERROR SIGNATURES (truth, not guesses — match these
           # verbatim before suggesting anything else)
@@ -338,7 +347,7 @@ jobs:
           The triage classification (`triage.classification`) determines the response shape:
 
           - `bug-in-scope`: ask for what is missing using the user's reported OS log path. Be concrete about how to obtain logs.
-          - `bug-upstream-camoufox`: redirect ONLY. One sentence acknowledging, then a sentence saying this is a Camoufox-internal issue and the maintainer of this repo does not contribute to Camoufox; ask the user to file at https://github.com/daijro/camoufox/issues. Do NOT ask for Donut logs. Stop after that.
+          - `bug-upstream-camoufox`: redirect ONLY. One sentence acknowledging, then say this is outside the scope of this project — ask the user to first search https://github.com/daijro/camoufox/issues for a matching report and, if none exists, to open one there themselves. Do NOT phrase it as "the maintainer does not contribute" or anything personal — keep it strictly about scope. Do NOT ask for Donut logs. Stop after that.
           - `bug-template-violation` or `ai-generated-junk`: politely ask the user to refile using the bug-report template (the Operating System, Donut Browser version, Which browser, Steps to reproduce, Error logs sections). If they cited "documentation" from any non-`donutbrowser.com`/non-`github.com/zhom` URL (e.g. context7, deepwiki), gently note that those are AI-generated third-party summaries and the only authoritative sources are this repo and donutbrowser.com.
           - `feature-request`: one neutral sentence acknowledging, then ask only what is genuinely needed (concrete use case, whether a workaround would suffice). Do NOT validate.
           - `fork-request`: one neutral sentence acknowledging the request. Note that this would substantially increase support burden and the maintainer evaluates such requests on a case-by-case basis. Ask whether the alternative fork supports all platforms the user uses (macOS / Windows / Linux). No "clear enhancement" language.
@@ -352,10 +361,14 @@ jobs:
           If the issue body is not in English, write the comment in English (the maintainer reads English). The FIRST line must politely ask the user to communicate in English so the maintainer can help. Then continue with the normal triage response, in English.
 
           ## OS-specific log paths
-          Use ONLY the one matching `triage.operating_system`:
-            - macos:   `~/Library/Logs/com.donutbrowser/`
-            - linux:   `~/.local/share/com.donutbrowser/logs/`
-            - windows: `%APPDATA%\com.donutbrowser\logs\` (PowerShell-friendly: `Get-ChildItem $env:APPDATA\com.donutbrowser\logs`)
+          Recommend Settings → Advanced → Copy logs first — it bundles the
+          latest rotated log onto the clipboard without the user hunting for
+          a directory. If they want to attach files directly, point at the
+          path that matches `triage.operating_system`. The active log is
+          always `DonutBrowser.log`; rotated copies sit next to it.
+            - macos:   `~/Library/Logs/com.donutbrowser/DonutBrowser.log`
+            - linux:   `~/.local/share/com.donutbrowser/logs/DonutBrowser.log`
+            - windows: `%LOCALAPPDATA%\com.donutbrowser\logs\DonutBrowser.log` (PowerShell: `Get-Content $env:LOCALAPPDATA\com.donutbrowser\logs\DonutBrowser.log -Tail 200`)
             - unknown: ask the user to share their OS first.
 
           ## Known error signatures (apply BEFORE asking generic questions)
@@ -607,7 +620,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Run opencode
-        uses: anomalyco/opencode/github@8ba2a9171597262df9d19516c82a5e14f18f5c63 #v1.14.41
+        uses: anomalyco/opencode/github@d74d166acf40e51146f8547216913a4e787a4bc1 #v1.15.10
         env:
           ZHIPU_API_KEY: ${{ secrets.ZHIPU_API_KEY }}
           TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint-js.yml

@@ -37,7 +37,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

.github/workflows/lint-rs.yml

@@ -44,7 +44,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Set up pnpm package manager
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

.github/workflows/notify-telegram.yml

@@ -22,6 +22,7 @@ on:
 
 permissions:
   contents: read
+  models: read
 
 jobs:
   notify:
@@ -105,21 +106,12 @@ jobs:
           fi
           echo "skip=false" >> "$GITHUB_OUTPUT"
 
-      - name: Post release announcement to Telegram
+      - name: Collect commits between previous tag and current tag
+        id: commits
         if: steps.gate.outputs.skip != 'true'
         env:
-          TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }}
-          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
           TAG: ${{ steps.tag.outputs.tag }}
-          REPO: ${{ github.repository }}
         run: |
-          if [ -z "$TELEGRAM_BOT_TOKEN" ] || [ -z "$TELEGRAM_CHAT_ID" ]; then
-            echo "::warning::TELEGRAM_BOT_TOKEN or TELEGRAM_CHAT_ID is not set — skipping Telegram notification."
-            exit 0
-          fi
-
-          # Find the previous stable tag (skip the current one) so the
-          # changelog range is well-defined.
           PREV_TAG=$(git tag --sort=-version:refname \
             | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+$' \
             | grep -v "^${TAG}$" \
@@ -127,29 +119,52 @@ jobs:
           if [ -z "$PREV_TAG" ]; then
             PREV_TAG=$(git rev-list --max-parents=0 HEAD)
           fi
+          git log --pretty=format:"- %s (%h)" "${PREV_TAG}..${TAG}" --no-merges > commits.txt
+          echo "previous-tag=${PREV_TAG}" >> "$GITHUB_OUTPUT"
+          echo "Collected $(wc -l < commits.txt) commits between ${PREV_TAG} and ${TAG}."
 
-          strip_prefix() { echo "$1" | sed -E 's/^[a-z]+(\([^)]*\))?: //'; }
+      - name: Generate summary with AI
+        id: ai
+        if: steps.gate.outputs.skip != 'true'
+        uses: actions/ai-inference@17ff458cb182449bbb2e43701fcd98f6af8f6570 # v2.1.0
+        with:
+          prompt-file: .github/prompts/telegram-release-summary.prompt.yml
+          input: |
+            version: ${{ steps.tag.outputs.tag }}
+          file_input: |
+            commits: ./commits.txt
+          max-tokens: 1024
 
-          # Build a plain bullet list from feat / fix / refactor commits.
-          # Other commit types (chore, docs, ci, test, deps) are intentionally
-          # filtered out to keep the channel focused on user-visible changes.
-          CHANGES=""
-          while IFS= read -r msg; do
-            [ -z "$msg" ] && continue
-            case "$msg" in
-              feat\(*\):*|feat:*|fix\(*\):*|fix:*|refactor\(*\):*|refactor:*)
-                CHANGES="${CHANGES}• $(strip_prefix "$msg")"$'\n'
-                ;;
-            esac
-          done < <(git log --pretty=format:%s "${PREV_TAG}..${TAG}")
-
-          if [ -z "$CHANGES" ]; then
-            CHANGES="• See release notes."$'\n'
+      - name: Post release announcement to Telegram
+        if: steps.gate.outputs.skip != 'true'
+        env:
+          TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }}
+          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
+          TAG: ${{ steps.tag.outputs.tag }}
+          REPO: ${{ github.repository }}
+          AI_RESPONSE_FILE: ${{ steps.ai.outputs.response-file }}
+          AI_RESPONSE: ${{ steps.ai.outputs.response }}
+        run: |
+          if [ -z "$TELEGRAM_BOT_TOKEN" ] || [ -z "$TELEGRAM_CHAT_ID" ]; then
+            echo "::warning::TELEGRAM_BOT_TOKEN or TELEGRAM_CHAT_ID is not set — skipping Telegram notification."
+            exit 0
           fi
 
-          # HTML-escape the changelog before injecting into Telegram HTML
-          # mode — commit messages can legitimately contain `<`, `>`, `&`.
-          ESCAPED_CHANGES=$(printf '%s' "$CHANGES" \
+          # Prefer the file output — `response` can be truncated for longer summaries.
+          if [ -n "$AI_RESPONSE_FILE" ] && [ -f "$AI_RESPONSE_FILE" ]; then
+            SUMMARY=$(cat "$AI_RESPONSE_FILE")
+          else
+            SUMMARY="$AI_RESPONSE"
+          fi
+
+          if [ -z "${SUMMARY//[[:space:]]/}" ]; then
+            echo "::error::AI summary is empty"
+            exit 1
+          fi
+
+          # HTML-escape the AI summary before injecting into Telegram HTML mode —
+          # commit messages can legitimately contain `<`, `>`, `&` and the AI may echo them.
+          ESCAPED_CHANGES=$(printf '%s' "$SUMMARY" \
             | python3 -c "import html, sys; sys.stdout.write(html.escape(sys.stdin.read()))")
 
           VERSION="${TAG}"

.github/workflows/osv.yml

@@ -46,7 +46,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@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r
@@ -58,7 +58,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@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r

.github/workflows/pr-checks.yml

@@ -29,7 +29,7 @@ jobs:
   security-scan:
     name: Security Vulnerability Scan
     if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r

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

@@ -82,7 +82,7 @@ jobs:
       - name: Generate release notes with AI
         id: generate-notes
         if: steps.get-release.outputs.is-prerelease == 'false'
-        uses: actions/ai-inference@e09e65981758de8b2fdab13c2bfb7c7d5493b0b6 # v2.0.7
+        uses: actions/ai-inference@17ff458cb182449bbb2e43701fcd98f6af8f6570 # v2.1.0
         with:
           prompt-file: .github/prompts/release-notes.prompt.yml
           input: |

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
   security-scan:
     if: github.repository == 'zhom/donutbrowser'
     name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r
@@ -108,7 +108,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

.github/workflows/rolling-release.yml

@@ -19,7 +19,7 @@ jobs:
   security-scan:
     if: github.repository == 'zhom/donutbrowser'
     name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@c51854704019a247608d928f370c98740469d4b5" # v2.3.5
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@9a498708959aeaef5ef730655706c5a1df1edbc2" # v2.3.8
     with:
       scan-args: |-
         -r
@@ -107,7 +107,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

.github/workflows/spellcheck.yml

@@ -23,4 +23,4 @@ jobs:
       - name: Checkout Actions Repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
       - name: Spell Check Repo
-        uses: crate-ci/typos@5374cbf686e897b15713110e233094e2874de7ef #v1.46.1
+        uses: crate-ci/typos@aca895bf05aec0cb7dffa6f94495e923224d9f17 #v1.46.2

.github/workflows/stale.yml

@@ -13,7 +13,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+      - uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-issue-message: "This issue has been inactive for 30 days. Please respond to keep it open."

.github/workflows/sync-e2e.yml

@@ -35,7 +35,7 @@ jobs:
         uses: actions/checkout@v6.0.2
 
       - name: Install pnpm
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 
@@ -94,7 +94,7 @@ jobs:
           done
 
       - name: Install pnpm
-        uses: pnpm/action-setup@91ab88e2619ed1f46221f0ba42d1492c02baf788 #v6.0.6
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 #v6.0.8
         with:
           run_install: false
 

AGENTS.md

@@ -53,6 +53,8 @@ donutbrowser/
 - After making changes, run `pnpm format && pnpm lint && pnpm test` at the root of the project
 - Always run this command before finishing a task to ensure the application isn't broken
 - `pnpm lint` includes spellcheck via [typos](https://github.com/crate-ci/typos). False positives can be allowlisted in `_typos.toml`
+- The full `pnpm test` output dumps every test name (≈400+ lines) which burns context for no signal. Filter:
+  `pnpm test 2>&1 | grep -E "test result|panicked|FAILED"` — four "test result: ok" lines means everything passed.
 
 ## Code Quality
 
@@ -69,6 +71,86 @@ donutbrowser/
 - Strings excluded from this rule: `console.log/warn/error`, dev-only debug labels, internal IDs, CSS class names, type names. If unsure whether a string renders to the user, assume it does and translate it.
 - **Never use `t(key, "fallback")` with a default-value second argument.** The 2-arg form is forbidden — every key must exist in every locale file before the call site lands. Fallbacks mask missing translations: a key missing from `ru.json` will silently render the English fallback to Russian users, so the bug never surfaces in CI or review. Only call `t("namespace.key")`. If a translation is missing for any locale, that's a bug to fix at the JSON, not a hole to paper over at the call site.
 - Empty-string values in non-English locales are also forbidden — a locale either has the right translation or it has the same content as English; never `""`. If a particular language doesn't need a particular phrase (e.g. a suffix that doesn't grammatically apply), refactor the JSX to use a single interpolated key (`t("foo.bar", { name })` with `"...{{name}}..."` in each locale) instead of splitting prefix/suffix.
+- When adding or removing keys across all seven locales, use a one-shot Python script in `/tmp/` that loads each `*.json`, mutates it, and writes it back. Seven sequential `Edit` calls drift (typos, ordering differences) and burn tokens; a single script keeps the locales in lockstep and is easy to throw away.
+
+## Backend error codes (mandatory)
+
+User-facing errors returned from a Tauri command MUST be JSON `{ "code": "FOO_BAR", "params": { … } }` strings — never raw English (`format!("Failed to …")`). The frontend resolves the code via `translateBackendError(t, err)` from `src/lib/backend-errors.ts`. Adding a new code requires four parallel edits:
+
+1. Emit the JSON from Rust:
+   ```rust
+   return Err(serde_json::json!({ "code": "FOO_BAR" }).to_string());
+   // or with params:
+   return Err(serde_json::json!({ "code": "FOO_BAR", "params": { "n": "5" } }).to_string());
+   ```
+2. Add `"FOO_BAR"` to the `BackendErrorCode` union in `src/lib/backend-errors.ts`.
+3. Add a `case "FOO_BAR":` in the switch that returns `t("backendErrors.fooBar", …)`.
+4. Add `backendErrors.fooBar` to all seven locale files.
+
+Raw error strings reach the user untranslated; that's the bug pattern this rule blocks.
+
+## Sub-page Dialog mode
+
+A `<Dialog>` becomes a first-class app sub-page (no modal overlay, no center positioning) when `subPage` is passed. Pages like Account, Settings, Proxy Management, and Extension Management use this. The pattern for a sub-page with tabs:
+
+```tsx
+<Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
+  <DialogContent className="max-w-2xl flex flex-col">
+    <Tabs defaultValue="account">
+      <TabsList
+        className={cn(
+          "w-full",
+          subPage &&
+            "!bg-transparent !p-0 !h-auto !rounded-none justify-start gap-4",
+        )}
+      >
+        <TabsTrigger
+          value="account"
+          className={cn(
+            "flex-1",
+            subPage &&
+              "!flex-none !rounded-none !bg-transparent !shadow-none data-[state=active]:!bg-transparent data-[state=active]:!text-foreground data-[state=active]:!shadow-none text-muted-foreground hover:text-foreground !px-1 !py-1 text-xs",
+          )}
+        >
+          Account
+        </TabsTrigger>
+        …
+      </TabsList>
+      <TabsContent value="account" className="mt-4">…</TabsContent>
+    </Tabs>
+  </DialogContent>
+</Dialog>
+```
+
+Reference implementations: `src/components/account-page.tsx`, `src/components/proxy-management-dialog.tsx`. Reuse the exact class strings — the overrides are tuned to match the rest of the sub-page chrome.
+
+### Cross-component tab control
+
+When a tabbed sub-page dialog needs to be opened to a specific tab by an external trigger (e.g. a keyboard shortcut that toggles `proxies` ↔ `vpns`), expose an `initialTab` prop and key the `Tabs` component off it. The `key` change forces a remount so the new tab is selected even though the internal `activeTab` state is otherwise sticky:
+
+```tsx
+<AnimatedTabs key={initialTab} defaultValue={initialTab} ...>
+```
+
+Reference implementations: `proxy-management-dialog.tsx`, `extension-management-dialog.tsx`, `integrations-dialog.tsx`. The owning page in `src/app/page.tsx` keeps one piece of `useState` per dialog (`proxyManagementInitialTab`, `extensionManagementInitialTab`, `integrationsInitialTab`) and flips it on repeated shortcut presses.
+
+## Keyboard shortcuts
+
+All app-wide shortcuts live in `src/lib/shortcuts.ts`:
+
+- `SHORTCUTS[]` — one entry per shortcut (id, label translation key, group, key, modifier flags). The label key must exist in all seven locales.
+- `formatShortcut(s)` returns platform-correct token strings (`["⌘", "K"]` on mac, `["Ctrl", "K"]` elsewhere) — used by both the shortcuts page and the command palette.
+- `matchesShortcut(s, event)` matches a real `KeyboardEvent` and rejects the wrong-platform modifier so Ctrl+K on macOS never fires a `mod: true` shortcut.
+- `matchesGroupDigit(event)` returns 1–9 if Mod+digit was pressed — group switching is dynamic (driven by `orderedGroupTargets` in `page.tsx`) and isn't in the `SHORTCUTS` table.
+
+Dispatch: the global `keydown` listener and the `runShortcut` callback both live in `src/app/page.tsx`. To add a new static shortcut:
+
+1. Append to `SHORTCUTS` in `src/lib/shortcuts.ts`. Add the `ShortcutId` variant.
+2. Add a `case "yourId":` in `runShortcut` in `page.tsx`.
+3. Add the icon mapping in `src/components/command-palette.tsx::ICONS`.
+4. Add `shortcuts.yourId` (label) to all seven locale files.
+
+The command palette (Mod+K) is built on the shadcn `Command` primitive with a token-AND fuzzy filter — `fuzzyFilter` in `command-palette.tsx`. The `CommandDialog` wrapper now forwards `filter`/`shouldFilter` to the inner `Command` for callers that need custom matching.
 
 ## Singletons
 
@@ -93,6 +175,16 @@ donutbrowser/
 - Use these as Tailwind classes: `bg-success`, `text-destructive`, `border-warning`, etc.
 - For lighter variants use opacity: `bg-destructive/10`, `bg-success/10`, `border-warning/50`
 
+## App data directory naming
+
+`src-tauri/src/app_dirs.rs::app_name()` returns `"DonutBrowserDev"` when `cfg!(debug_assertions)` is true, `"DonutBrowser"` otherwise. So release builds (anything built via `tauri build` / `cargo build --release`) write to:
+
+- macOS — `~/Library/Application Support/DonutBrowser/`
+- Linux — `~/.local/share/DonutBrowser/`
+- Windows — `%LOCALAPPDATA%\DonutBrowser\`
+
+Debug builds (`cargo build`, `pnpm tauri dev`) write to the `DonutBrowserDev` sibling at the same root, and a `dev-{version}` `BUILD_VERSION` is injected via `build.rs`. Logs / screenshots referencing `DonutBrowserDev` therefore mean a local dev build is in play, not a release; useful when a bug report seems to disagree with what production users see.
+
 ## Publishing Linux Repositories
 
 The `scripts/publish-repo.sh` script publishes DEB and RPM packages to Cloudflare R2 (served at `repo.donutbrowser.com`). It requires Linux tools, so run it in Docker on macOS:

CHANGELOG.md

@@ -1,6 +1,103 @@
 # Changelog
 
 
+## v0.24.3 (2026-05-25)
+
+### Features
+
+- add shortcuts
+
+### Bug Fixes
+
+- track gecko_id for extension groups
+
+### Refactoring
+
+- cleanup
+- cleanup, korean translation
+- reduce token usage
+
+### Maintenance
+
+- chore: version bump
+- chore: linting
+- chore: update pnpm
+- chore: make telegram releases ai-generated
+- chore: workflow cleanup
+- ci(deps): bump the github-actions group with 6 updates
+- chore: use less tokens
+- chore: improve issue validation
+- ci(deps): bump the github-actions group across 1 directory with 6 updates
+- chore: update flake.nix for v0.24.2 [skip ci] (#370)
+
+### Other
+
+- deps(rust)(deps): bump the rust-dependencies group
+- deps(rust)(deps): bump the rust-dependencies group
+
+
+## v0.24.2 (2026-05-16)
+
+### Features
+
+- more mcp integrations
+
+### Bug Fixes
+
+- camoufox proxy pid connection
+
+### Refactoring
+
+- browser update
+- ui cleanup
+- cleanup
+
+### Maintenance
+
+- chore: version bump
+- chore: cleanup
+- chore: update flake.nix for v0.24.1 [skip ci] (#364)
+
+
+## v0.24.1 (2026-05-12)
+
+### Refactoring
+
+- creation button disaster recovery
+
+### Maintenance
+
+- chore: version bump
+- chore: update flake.nix for v0.24.0 [skip ci] (#357)
+
+
+## v0.24.0 (2026-05-12)
+
+### Features
+
+- support latest camoufox
+- full ui refresh
+
+### Bug Fixes
+
+- pass correct parameter for dns list selection
+
+### Refactoring
+
+- better error handling and prevention of creating ephemeral password protected profiles
+- ui cleanup
+- sync cleanup
+- proxy spawn
+
+### Maintenance
+
+- chore: version bump
+- chore: update dependencies
+- chore: fix telegram notifications
+- chore: fix issue validation
+- chore: update flake.nix for v0.23.0 [skip ci] (#351)
+
+
 ## v0.23.0 (2026-05-10)
 
 ### Features

README.md

@@ -19,9 +19,6 @@
   <a style="text-decoration: none;" href="https://github.com/zhom/donutbrowser/network/members" target="_blank">
     <img src="https://img.shields.io/github/forks/zhom/donutbrowser?style=social" alt="GitHub forks">
   </a>
-  <a style="text-decoration: none;" href="https://github.com/zhom/donutbrowser/releases" target="_blank">
-    <img src="https://img.shields.io/github/downloads/zhom/donutbrowser/total" alt="Downloads">
-  </a>
 </p>
 
 <img alt="Donut Browser Preview" src="assets/donut-preview.png" />
@@ -30,6 +27,7 @@
 
 - **Unlimited browser profiles** — each fully isolated with its own fingerprint, cookies, extensions, and data
 - **Chromium & Firefox engines** — Chromium powered by [Wayfern](https://wayfern.com), Firefox powered by [Camoufox](https://camoufox.com), both with advanced fingerprint spoofing
+- **DNS AdBlocker** - block ads, trackers, and other unwanted content with per-profile DNS blocking
 - **Proxy support** — HTTP, HTTPS, SOCKS4, SOCKS5 per profile, with dynamic proxy URLs
 - **VPN support** — WireGuard configs per profile
 - **Local API & MCP** — REST API and [Model Context Protocol](https://modelcontextprotocol.io) server for integration with Claude, automation tools, and custom workflows
@@ -48,7 +46,7 @@
 
 | | Apple Silicon | Intel |
 |---|---|---|
-| **DMG** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_aarch64.dmg) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_x64.dmg) |
+| **DMG** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_aarch64.dmg) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_x64.dmg) |
 
 Or install via Homebrew:
 
@@ -58,15 +56,15 @@ brew install --cask donut
 
 ### Windows
 
-[Download Windows Installer (x64)](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_x64-setup.exe) · [Portable (x64)](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_x64-portable.zip)
+[Download Windows Installer (x64)](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_x64-setup.exe) · [Portable (x64)](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_x64-portable.zip)
 
 ### Linux
 
 | Format | x86_64 | ARM64 |
 |---|---|---|
-| **deb** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_amd64.deb) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_arm64.deb) |
-| **rpm** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut-0.23.0-1.x86_64.rpm) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut-0.23.0-1.aarch64.rpm) |
-| **AppImage** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_amd64.AppImage) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_aarch64.AppImage) |
+| **deb** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_amd64.deb) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_arm64.deb) |
+| **rpm** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut-0.24.3-1.x86_64.rpm) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut-0.24.3-1.aarch64.rpm) |
+| **AppImage** | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_amd64.AppImage) | [Download](https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_aarch64.AppImage) |
 <!-- install-links-end -->
 
 Or install via package manager:

flake.nix

@@ -94,17 +94,17 @@
         pkgConfigPath = lib.makeSearchPath "lib/pkgconfig" (
           pkgConfigLibs ++ map lib.getDev pkgConfigLibs
         );
-        releaseVersion = "0.23.0";
+        releaseVersion = "0.24.3";
         releaseAppImage =
           if system == "x86_64-linux" then
             pkgs.fetchurl {
-              url = "https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_amd64.AppImage";
-              hash = "sha256-bcdZOV1Vj7H9BxlYKUUtGZprrA80283J34xb3NslRjg=";
+              url = "https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_amd64.AppImage";
+              hash = "sha256-4RXEpNiD10hhZhBJ96lhvRG+K6ZrsEF+atwfkAicnhc=";
             }
           else if system == "aarch64-linux" then
             pkgs.fetchurl {
-              url = "https://github.com/zhom/donutbrowser/releases/download/v0.23.0/Donut_0.23.0_aarch64.AppImage";
-              hash = "sha256-IbGvqHMxwYHFj6dFP07MhFl00aiHVont+KoZck+HIvk=";
+              url = "https://github.com/zhom/donutbrowser/releases/download/v0.24.3/Donut_0.24.3_aarch64.AppImage";
+              hash = "sha256-EmyJwfUnEQ3vtS2N99QrGrsNESHmiqIdGCrTYvTlMTI=";
             }
           else
             null;

package.json

@@ -2,7 +2,7 @@
   "name": "donutbrowser",
   "private": true,
   "license": "AGPL-3.0",
-  "version": "0.24.0",
+  "version": "0.24.4",
   "type": "module",
   "scripts": {
     "dev": "next dev --turbopack -p 12341",
@@ -89,17 +89,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3"
   },
-  "pnpm": {
-    "overrides": {
-      "picomatch@>=4.0.0 <4.0.4": ">=4.0.4",
-      "path-to-regexp@>=8.0.0 <8.4.0": ">=8.4.0",
-      "postcss@<8.5.10": ">=8.5.12",
-      "fast-xml-parser@<5.7.0": ">=5.7.2",
-      "fast-uri@<3.1.2": ">=3.1.2",
-      "fast-xml-builder@<1.2.0": ">=1.2.0"
-    }
-  },
-  "packageManager": "pnpm@10.33.2",
+  "packageManager": "pnpm@11.2.2",
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json,css}": [
       "biome check --fix"

pnpm-lock.yaml

@@ -11,6 +11,8 @@ overrides:
   fast-xml-parser@<5.7.0: '>=5.7.2'
   fast-uri@<3.1.2: '>=3.1.2'
   fast-xml-builder@<1.2.0: '>=1.2.0'
+  qs@>=6.11.1 <6.15.2: '>=6.15.2'
+  js-cookie@<3.0.7: '>=3.0.7'
 
 importers:
 
@@ -212,7 +214,7 @@ importers:
     devDependencies:
       '@nestjs/cli':
         specifier: ^11.0.21
-        version: 11.0.21(@types/node@25.7.0)(lightningcss@1.32.0)
+        version: 11.0.21(@types/node@25.7.0)
       '@nestjs/schematics':
         specifier: ^11.1.0
         version: 11.1.0(chokidar@4.0.3)(typescript@6.0.3)
@@ -248,7 +250,7 @@ importers:
         version: 29.4.9(@babel/core@7.29.0)(@jest/transform@30.4.1)(@jest/types@30.4.1)(babel-jest@30.4.1(@babel/core@7.29.0))(jest-util@30.4.1)(jest@30.4.2(@types/node@25.7.0)(ts-node@10.9.2(@types/node@25.7.0)(typescript@6.0.3)))(typescript@6.0.3)
       ts-loader:
         specifier: ^9.5.7
-        version: 9.5.7(typescript@6.0.3)(webpack@5.106.0(lightningcss@1.32.0))
+        version: 9.5.7(typescript@6.0.3)(webpack@5.106.0)
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@types/node@25.7.0)(typescript@6.0.3)
@@ -2060,6 +2062,7 @@ packages:
   '@smithy/core@3.24.1':
     resolution: {integrity: sha512-3mT7o4qQyUWttYnVK3A0Z/u3Xha3E81tXn32Tz6vjZiUXhBrkEivpw1hBYfh84iFF9CSzkBU9Y1DJ3Q6RQ231g==}
     engines: {node: '>=18.0.0'}
+    deprecated: Deprecated due to bug in browser bundling instructions https://github.com/smithy-lang/smithy-typescript/issues/2025
 
   '@smithy/credential-provider-imds@4.3.1':
     resolution: {integrity: sha512-0S/acwHnqX4WrjXzhdiDRxsG2s9SC0cpPIK9nZ1R6UOHd+j7uL28+4bHu22urbLk2TVw3fkp6na/+fkUt/pLNQ==}
@@ -3872,9 +3875,9 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
-  js-cookie@3.0.5:
-    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
-    engines: {node: '>=14'}
+  js-cookie@3.0.7:
+    resolution: {integrity: sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==}
+    engines: {node: '>=20'}
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -4401,8 +4404,8 @@ packages:
   pure-rand@7.0.1:
     resolution: {integrity: sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==}
 
-  qs@6.15.1:
-    resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
+  qs@6.15.2:
+    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
     engines: {node: '>=0.6'}
 
   radix-ui@1.4.3:
@@ -6421,7 +6424,7 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
-  '@nestjs/cli@11.0.21(@types/node@25.7.0)(lightningcss@1.32.0)':
+  '@nestjs/cli@11.0.21(@types/node@25.7.0)':
     dependencies:
       '@angular-devkit/core': 19.2.24(chokidar@4.0.3)
       '@angular-devkit/schematics': 19.2.24(chokidar@4.0.3)
@@ -6432,14 +6435,14 @@ snapshots:
       chokidar: 4.0.3
       cli-table3: 0.6.5
       commander: 4.1.1
-      fork-ts-checker-webpack-plugin: 9.1.0(typescript@5.9.3)(webpack@5.106.0(lightningcss@1.32.0))
+      fork-ts-checker-webpack-plugin: 9.1.0(typescript@5.9.3)(webpack@5.106.0)
       glob: 13.0.6
       node-emoji: 1.11.0
       ora: 5.4.1
       tsconfig-paths: 4.2.0
       tsconfig-paths-webpack-plugin: 4.2.0
       typescript: 5.9.3
-      webpack: 5.106.0(lightningcss@1.32.0)
+      webpack: 5.106.0
       webpack-node-externals: 3.0.0
     transitivePeerDependencies:
       - '@minify-html/node'
@@ -8125,7 +8128,7 @@ snapshots:
       '@types/js-cookie': 3.0.6
       dayjs: 1.11.20
       intersection-observer: 0.12.2
-      js-cookie: 3.0.5
+      js-cookie: 3.0.7
       lodash: 4.18.1
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
@@ -8295,7 +8298,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
-      qs: 6.15.1
+      qs: 6.15.2
       raw-body: 3.0.2
       type-is: 2.0.1
     transitivePeerDependencies:
@@ -8733,7 +8736,7 @@ snapshots:
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.15.1
+      qs: 6.15.2
       range-parser: 1.2.1
       router: 2.2.0
       send: 1.2.1
@@ -8804,7 +8807,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.9.3)(webpack@5.106.0(lightningcss@1.32.0)):
+  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.9.3)(webpack@5.106.0):
     dependencies:
       '@babel/code-frame': 7.29.0
       chalk: 4.1.2
@@ -8819,7 +8822,7 @@ snapshots:
       semver: 7.8.0
       tapable: 2.3.3
       typescript: 5.9.3
-      webpack: 5.106.0(lightningcss@1.32.0)
+      webpack: 5.106.0
 
   form-data@4.0.5:
     dependencies:
@@ -9382,7 +9385,7 @@ snapshots:
 
   jiti@2.7.0: {}
 
-  js-cookie@3.0.5: {}
+  js-cookie@3.0.7: {}
 
   js-tokens@4.0.0: {}
 
@@ -9834,7 +9837,7 @@ snapshots:
 
   pure-rand@7.0.1: {}
 
-  qs@6.15.1:
+  qs@6.15.2:
     dependencies:
       side-channel: 1.1.0
 
@@ -10294,7 +10297,7 @@ snapshots:
       formidable: 3.5.4
       methods: 1.1.2
       mime: 2.6.0
-      qs: 6.15.1
+      qs: 6.15.2
     transitivePeerDependencies:
       - supports-color
 
@@ -10330,15 +10333,13 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.11.0
 
-  terser-webpack-plugin@5.6.0(lightningcss@1.32.0)(webpack@5.106.0(lightningcss@1.32.0)):
+  terser-webpack-plugin@5.6.0(webpack@5.106.0):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       terser: 5.47.1
-      webpack: 5.106.0(lightningcss@1.32.0)
-    optionalDependencies:
-      lightningcss: 1.32.0
+      webpack: 5.106.0
 
   terser@5.47.1:
     dependencies:
@@ -10391,7 +10392,7 @@ snapshots:
       babel-jest: 30.4.1(@babel/core@7.29.0)
       jest-util: 30.4.1
 
-  ts-loader@9.5.7(typescript@6.0.3)(webpack@5.106.0(lightningcss@1.32.0)):
+  ts-loader@9.5.7(typescript@6.0.3)(webpack@5.106.0):
     dependencies:
       chalk: 4.1.2
       enhanced-resolve: 5.21.3
@@ -10399,7 +10400,7 @@ snapshots:
       semver: 7.8.0
       source-map: 0.7.6
       typescript: 6.0.3
-      webpack: 5.106.0(lightningcss@1.32.0)
+      webpack: 5.106.0
 
   ts-node@10.9.2(@types/node@25.7.0)(typescript@6.0.3):
     dependencies:
@@ -10588,7 +10589,7 @@ snapshots:
 
   webpack-sources@3.4.1: {}
 
-  webpack@5.106.0(lightningcss@1.32.0):
+  webpack@5.106.0:
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.9
@@ -10612,7 +10613,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.3
-      terser-webpack-plugin: 5.6.0(lightningcss@1.32.0)(webpack@5.106.0(lightningcss@1.32.0))
+      terser-webpack-plugin: 5.6.0(webpack@5.106.0)
       watchpack: 2.5.1
       webpack-sources: 3.4.1
     transitivePeerDependencies:

pnpm-workspace.yaml

@@ -11,3 +11,25 @@ onlyBuiltDependencies:
   - sharp
   - sqlite3
   - unrs-resolver
+
+# Husky and lint-staged shell out to pnpm without a TTY, so the interactive
+# "purge modules dir?" prompt errors out (ERR_PNPM_ABORTED_REMOVE_MODULES_DIR_NO_TTY)
+# and aborts the commit. Skipping the prompt lets the hook proceed.
+confirmModulesPurge: false
+
+# Pinned for security. Moved from package.json#pnpm.overrides — pnpm 11
+# no longer reads that field; settings live here now.
+overrides:
+  picomatch@>=4.0.0 <4.0.4: '>=4.0.4'
+  path-to-regexp@>=8.0.0 <8.4.0: '>=8.4.0'
+  postcss@<8.5.10: '>=8.5.12'
+  fast-xml-parser@<5.7.0: '>=5.7.2'
+  fast-uri@<3.1.2: '>=3.1.2'
+  fast-xml-builder@<1.2.0: '>=1.2.0'
+  qs@>=6.11.1 <6.15.2: '>=6.15.2'
+  js-cookie@<3.0.7: '>=3.0.7'
+
+allowBuilds:
+  '@nestjs/core': true
+  sharp: true
+  unrs-resolver: true

src-tauri/Cargo.lock

@@ -35,7 +35,7 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "66bd29a732b644c0431c6140f370d097879203d79b80c94a6747ba0872adaef8"
 dependencies = [
- "cipher 0.5.1",
+ "cipher 0.5.2",
  "cpubits",
  "cpufeatures 0.3.0",
 ]
@@ -169,7 +169,7 @@ version = "1.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "40c48f72fd53cd289104fc64099abca73db4166ad86ea0b4341abe65af83dadc"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -180,7 +180,7 @@ checksum = "291e6a250ff86cd4a820112fb8898808a366d8f9f58ce16d1f538353ad55747d"
 dependencies = [
  "anstyle",
  "once_cell_polyfill",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -445,9 +445,9 @@ checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
 
 [[package]]
 name = "autocfg"
-version = "1.5.0"
+version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+checksum = "f2032f911046de80f0a198e0901378627c33f59ea0ac00e363d481118bd70a53"
 
 [[package]]
 name = "av-scenechange"
@@ -785,15 +785,15 @@ dependencies = [
 
 [[package]]
 name = "built"
-version = "0.8.0"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f4ad8f11f288f48ca24471bbd51ac257aaeaaa07adae295591266b792902ae64"
+checksum = "5c0e531d93d39c34eef561e929e8a7f86d77a5af08aac4f6d6e39976c51858e9"
 
 [[package]]
 name = "bumpalo"
-version = "3.20.2"
+version = "3.20.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d20789868f4b01b2f2caec9f5c4e0213b41e3e5702a50157d699ae31ced2fcb"
+checksum = "72f5acc6cb2ba439de613abc23857ec3d78374d8ed5ac84e9d11336e87da8649"
 
 [[package]]
 name = "byte-unit"
@@ -962,11 +962,11 @@ dependencies = [
 
 [[package]]
 name = "cbc"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "98db6aeaef0eeef2c1e3ce9a27b739218825dae116076352ac3777076aa22225"
+checksum = "ce2dc9ee5f88d11e0beb842c88b33c8a5cf0d1329c4b19494af42b07dbfe8896"
 dependencies = [
- "cipher 0.5.1",
+ "cipher 0.5.2",
 ]
 
 [[package]]
@@ -1103,11 +1103,11 @@ dependencies = [
 
 [[package]]
 name = "cipher"
-version = "0.5.1"
+version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e34d8227fe1ba289043aeb13792056ff80fd6de1a9f49137a5f499de8e8c78ea"
+checksum = "e8cf2a2c93cd704877c0858356ed03480ff301ee950b43f1cbe4573b088bfa6c"
 dependencies = [
- "crypto-common 0.2.1",
+ "crypto-common 0.2.2",
  "inout 0.2.2",
 ]
 
@@ -1405,9 +1405,9 @@ dependencies = [
 
 [[package]]
 name = "crypto-common"
-version = "0.2.1"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77727bb15fa921304124b128af125e7e3b968275d1b108b379190264f4423710"
+checksum = "ce6e4c961d6cd6c9a86db418387425e8bdeaf05b3c8bc1411e6dca4c252f1453"
 dependencies = [
  "hybrid-array",
 ]
@@ -1679,7 +1679,7 @@ checksum = "f1dd6dbb5841937940781866fa1281a1ff7bd3bf827091440879f9994983d5c2"
 dependencies = [
  "block-buffer 0.12.0",
  "const-oid 0.10.2",
- "crypto-common 0.2.1",
+ "crypto-common 0.2.2",
 ]
 
 [[package]]
@@ -1709,7 +1709,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -1784,7 +1784,7 @@ dependencies = [
 
 [[package]]
 name = "donutbrowser"
-version = "0.24.0"
+version = "0.24.4"
 dependencies = [
  "aes 0.9.0",
  "aes-gcm",
@@ -1824,7 +1824,7 @@ dependencies = [
  "objc2-app-kit",
  "once_cell",
  "playwright",
- "quick-xml",
+ "quick-xml 0.40.1",
  "rand 0.10.1",
  "regex-lite",
  "reqwest 0.13.3",
@@ -1858,6 +1858,7 @@ dependencies = [
  "tokio",
  "tokio-tungstenite",
  "tokio-util",
+ "toml 1.1.2+spec-1.1.0",
  "tower",
  "tower-http",
  "tray-icon 0.24.0",
@@ -1961,9 +1962,9 @@ dependencies = [
 
 [[package]]
 name = "either"
-version = "1.15.0"
+version = "1.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
+checksum = "91622ff5e7162018101f2fea40d6ebf4a78bbe5a49736a2020649edf9693679e"
 
 [[package]]
 name = "embed-resource"
@@ -2098,7 +2099,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2212,9 +2213,9 @@ dependencies = [
 
 [[package]]
 name = "filetime"
-version = "0.2.28"
+version = "0.2.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2d5b2eef6fafbf69f877e55509ce5b11a760690ac9700a2921be067aa6afaef6"
+checksum = "5c287a33c7f0a620c38e641e7f60827713987b3c0f26e8ddc9462cc69cf75759"
 dependencies = [
  "cfg-if",
  "libc",
@@ -3086,7 +3087,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.62.2",
+ "windows-core 0.61.2",
 ]
 
 [[package]]
@@ -3553,12 +3554,13 @@ dependencies = [
 
 [[package]]
 name = "kurbo"
-version = "0.13.0"
+version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7564e90fe3c0d5771e1f0bc95322b21baaeaa0d9213fa6a0b61c99f8b17b3bfb"
+checksum = "4b60dfc32f652b926df6192e55525b16d186c69d47876c3ead4da5cc9f8450e2"
 dependencies = [
  "arrayvec",
  "euclid",
+ "polycool",
  "smallvec",
 ]
 
@@ -3913,9 +3915,9 @@ dependencies = [
 
 [[package]]
 name = "muda"
-version = "0.19.1"
+version = "0.19.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0ae8844f63b5b118e334e205585b8c5c17b984121dbdb179d44aeb087ffad3cb"
+checksum = "47a2e3dff89cd322c66647942668faee0a2b1f88ea6cbb4d374b4a8d7e92528c"
 dependencies = [
  "crossbeam-channel",
  "dpi",
@@ -3930,7 +3932,7 @@ dependencies = [
  "png 0.18.1",
  "serde",
  "thiserror 2.0.18",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -4037,9 +4039,9 @@ dependencies = [
 
 [[package]]
 name = "num-conv"
-version = "0.2.1"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6673768db2d862beb9b39a78fdcb1a69439615d5794a1be50caa9bc92c81967"
+checksum = "521739c6d2bac4aa25192232afe6841231376b2b26d4d9fae5ecf8ca5772e441"
 
 [[package]]
 name = "num-derive"
@@ -4381,9 +4383,9 @@ checksum = "c08d65885ee38876c4f86fa503fb49d7b507c2b62552df7c70b2fce627e06381"
 
 [[package]]
 name = "open"
-version = "5.3.4"
+version = "5.3.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f3bab717c29a857abf75fcef718d441ec7cb2725f937343c734740a985d37fd"
+checksum = "2fbaa89d2ddc8473c78a3adf69eea8cffa28c483b8e02a971ef31527cd0fc92c"
 dependencies = [
  "dunce",
  "is-wsl",
@@ -4393,9 +4395,9 @@ dependencies = [
 
 [[package]]
 name = "openssl"
-version = "0.10.79"
+version = "0.10.80"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf0b434746ee2832f4f0baf10137e1cabb18cbe6912c69e2e33263c45250f542"
+checksum = "a45fa2aa886c42762255da344f0a0d313e254066c46aad76f300c3d3da62d967"
 dependencies = [
  "bitflags 2.11.1",
  "cfg-if",
@@ -4424,9 +4426,9 @@ checksum = "7c87def4c32ab89d880effc9e097653c8da5d6ef28e6b539d313baaacfbafcbe"
 
 [[package]]
 name = "openssl-sys"
-version = "0.9.115"
+version = "0.9.116"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "158fe5b292746440aa6e7a7e690e55aeb72d41505e2804c23c6973ad0e9c9781"
+checksum = "f28a22dc7140cda5f096e5e7724a6962ca81a7f8bfd2979f9b18c11af56318c4"
 dependencies = [
  "cc",
  "libc",
@@ -4467,7 +4469,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7d8fae84b431384b68627d0f9b3b1245fcf9f46f6c0e3dc902e9dce64edd1967"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.45.0",
 ]
 
 [[package]]
@@ -4659,18 +4661,18 @@ checksum = "5be167a7af36ee22fe3115051bc51f6e6c7054c9348e28deb4f49bd6f705a315"
 
 [[package]]
 name = "pin-project"
-version = "1.1.12"
+version = "1.1.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cbf0d9e68100b3a7989b4901972f265cd542e560a3a8a724e1e20322f4d06ce9"
+checksum = "2466b2336ed02bcdca6b294417127b90ec92038d1d5c4fbeac971a922e0e0924"
 dependencies = [
  "pin-project-internal",
 ]
 
 [[package]]
 name = "pin-project-internal"
-version = "1.1.12"
+version = "1.1.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a990e22f43e84855daf260dded30524ef4a9021cc7541c26540500a50b624389"
+checksum = "c96395f0a926bc13b1c17622aaddda1ecb55d49c8f1bf9777e4d877800a43f8b"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4741,7 +4743,7 @@ checksum = "092791278e026273c1b65bbdcfbba3a300f2994c896bd01ab01da613c29c46f1"
 dependencies = [
  "base64 0.22.1",
  "indexmap 2.14.0",
- "quick-xml",
+ "quick-xml 0.39.4",
  "serde",
  "time",
 ]
@@ -4797,6 +4799,15 @@ dependencies = [
  "universal-hash",
 ]
 
+[[package]]
+name = "polycool"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50596ddc09eb5ad5f75cacd40209568e66df71baf86e1499a0e99c4cff12a5a6"
+dependencies = [
+ "arrayvec",
+]
+
 [[package]]
 name = "polyval"
 version = "0.6.2"
@@ -5013,6 +5024,15 @@ name = "quick-xml"
 version = "0.39.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cdcc8dd4e2f670d309a5f0e83fe36dfdc05af317008fea29144da1a2ac858e5e"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "quick-xml"
+version = "0.40.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2474bd2e5029e7ccb6abb2ba48cf2383a333851dedf495901544281590c7da7f"
 dependencies = [
  "memchr",
  "serde",
@@ -5488,9 +5508,9 @@ dependencies = [
 
 [[package]]
 name = "rsqlite-vfs"
-version = "0.1.0"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8a1f2315036ef6b1fbacd1972e8ee7688030b0a2121edfc2a6550febd41574d"
+checksum = "c51c9ae4df8a7fba42103df5c621fa3c37eccf3a3c650879e90fc48b11cc192c"
 dependencies = [
  "hashbrown 0.16.1",
  "thiserror 2.0.18",
@@ -5563,7 +5583,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -5853,9 +5873,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.149"
+version = "1.0.150"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+checksum = "e8014e44b4736ed0538adeecded0fce2a272f22dc9578a7eb6b2d9993c74cfb9"
 dependencies = [
  "itoa",
  "memchr",
@@ -6232,7 +6252,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a766e1110788c36f4fa1c2b71b387a7815aa65f88ce0229841826633d93723e"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -6304,9 +6324,9 @@ dependencies = [
 
 [[package]]
 name = "sqlite-wasm-rs"
-version = "0.5.3"
+version = "0.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b2c760607300407ddeaee518acf28c795661b7108c75421303dbefb237d3a36"
+checksum = "cdd578e94101503d97e2b286bbf8db2135035ca24b2ce4cbf3f9e2fb2bbf1eee"
 dependencies = [
  "cc",
  "js-sys",
@@ -6448,9 +6468,9 @@ dependencies = [
 
 [[package]]
 name = "sysinfo"
-version = "0.39.1"
+version = "0.39.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4deba334e1190ba7cb498327affa11e5ece10d26a30ab2f27fcf09504b8d8b6"
+checksum = "14311e7e9a03114cd4b65eedd54e8fed2945e17f08586ae97ef53bc0669f9581"
 dependencies = [
  "libc",
  "memchr",
@@ -6497,9 +6517,9 @@ dependencies = [
 
 [[package]]
 name = "tao"
-version = "0.35.2"
+version = "0.35.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a33f7f9e486ade65fcf1e45c440f9236c904f5c1002cdc7fc6ae582777345ce4"
+checksum = "d1c93047acf68669466a34690ac58cca7010bd1b201e1ec86f1fd0a75d3dd4a9"
 dependencies = [
  "bitflags 2.11.1",
  "block2",
@@ -6554,9 +6574,9 @@ checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
 
 [[package]]
 name = "tar"
-version = "0.4.45"
+version = "0.4.46"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22692a6476a21fa75fdfc11d452fda482af402c008cdbaf3476414e122040973"
+checksum = "3f6221d9a6003c78398e3b239969f352578258df48c8eb051caadae0015bc840"
 dependencies = [
  "filetime",
  "libc",
@@ -6571,9 +6591,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.11.1"
+version = "2.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b93bd86d231f0a8138f11a02a584769fe4b703dc36ae133d783228dbc4801405"
+checksum = "437404997acf375d85f1177afa7e11bb971f274ed6a7b83a2a3e339015f4cc28"
 dependencies = [
  "anyhow",
  "bytes",
@@ -6622,9 +6642,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "2.6.1"
+version = "2.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a318b234cc2dea65f575467bafcfb76286bce228ebc3778e337d61d03213007"
+checksum = "4aa1f9055fc23919a54e4e125052bed16ed04aef0487086e758fe01a67b451c7"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -6643,9 +6663,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "2.6.1"
+version = "2.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6bd11644962add2549a60b7e7c6800f17d7020156e02f516021d8103e80cc528"
+checksum = "e4a0319528a025a38c4078e7dae2c446f4e63620ddb0659a643ede1cb38f90e9"
 dependencies = [
  "base64 0.22.1",
  "brotli",
@@ -6670,9 +6690,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "2.6.1"
+version = "2.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fed9d3742a37a355d2e47c9af924e9fbc112abb76f9835d35d4780e318419502"
+checksum = "ae6cb4e3896c21d2f6da5b31251d2faea0153bba56ed0e970f918115dbee4924"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
@@ -6684,9 +6704,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin"
-version = "2.6.1"
+version = "2.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eefb2c18e8a605c23edb48fc56bb77381199e1a1e7f6ff0c9b970afe7b3cb8ee"
+checksum = "e126abc9e84e35cdfd01596140a73a1850cdb0df0a23acf0185776c30b469a6e"
 dependencies = [
  "anyhow",
  "glob",
@@ -6873,9 +6893,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime"
-version = "2.11.1"
+version = "2.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8fef478ba1d2ac21c2d528740b24d0cb315e1e8b1111aae53fafac34804371fc"
+checksum = "48222d7116c8807eaa6fe2f372e023fae125084e61e6eca6d70b7961cdf129ef"
 dependencies = [
  "cookie",
  "dpi",
@@ -6898,9 +6918,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "2.11.1"
+version = "2.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a3989df2ae1c476404fe0a2e8ffc4cfbde97e51efd613c2bb5355fbc9ab52cf0"
+checksum = "b83849ee63ecb27a8e8d0fe51915ca215076914aca43f96db1179f0f415f6cd9"
 dependencies = [
  "gtk",
  "http",
@@ -6924,9 +6944,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "2.9.1"
+version = "2.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d57200389a2f82b4b0a40ae29ca19b6978116e8f4d4e974c3234ce40c0ffbdec"
+checksum = "092379df9a707631978e6c56b1bc2401d387f01e2d4a3c123360d167bbb9aa95"
 dependencies = [
  "anyhow",
  "brotli",
@@ -6953,7 +6973,7 @@ dependencies = [
  "serde_with",
  "swift-rs",
  "thiserror 2.0.18",
- "toml 1.1.2+spec-1.1.0",
+ "toml 0.9.12+spec-1.1.0",
  "url",
  "urlpattern",
  "uuid",
@@ -6981,7 +7001,7 @@ dependencies = [
  "getrandom 0.4.2",
  "once_cell",
  "rustix",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -7383,9 +7403,9 @@ dependencies = [
 
 [[package]]
 name = "tower-http"
-version = "0.6.10"
+version = "0.6.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68d6fdd9f81c2819c9a8b0e0cd91660e7746a8e6ea2ba7c6b2b057985f6bcb51"
+checksum = "4cfcf7e2740e6fc6d4d688b4ef00650406bb94adf4731e43c096c3a19fe40840"
 dependencies = [
  "bitflags 2.11.1",
  "bytes",
@@ -7483,7 +7503,7 @@ dependencies = [
  "png 0.18.1",
  "serde",
  "thiserror 2.0.18",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -7504,7 +7524,7 @@ dependencies = [
  "once_cell",
  "png 0.18.1",
  "thiserror 2.0.18",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -7576,7 +7596,7 @@ checksum = "f2f6fb2847f6742cd76af783a2a2c49e9375d0a111c7bef6f71cd9e738c72d6e"
 dependencies = [
  "memoffset",
  "tempfile",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -8091,7 +8111,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c324a910fd86ebdc364a3e61ec1f11737d3b1d6c273c0239ee8ff4bc0d24b4a"
 dependencies = [
  "proc-macro2",
- "quick-xml",
+ "quick-xml 0.39.4",
  "quote",
 ]
 
@@ -8234,7 +8254,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -8760,7 +8780,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7d6f32a0ff4a9f6f01231eb2059cc85479330739333e0e58cadf03b6af2cca10"
 dependencies = [
  "cfg-if",
- "windows-sys 0.61.2",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -9144,9 +9164,9 @@ dependencies = [
 
 [[package]]
 name = "zerofrom"
-version = "0.1.7"
+version = "0.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69faa1f2a1ea75661980b013019ed6687ed0e83d069bc1114e2cc74c6c04c4df"
+checksum = "0ec05a11813ea801ff6d75110ad09cd0824ddba17dfe17128ea0d5f68e6c5272"
 dependencies = [
  "zerofrom-derive",
 ]

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "donutbrowser"
-version = "0.24.0"
+version = "0.24.4"
 description = "Simple Yet Powerful Anti-Detect Browser"
 authors = ["zhom@github"]
 edition = "2021"
@@ -100,11 +100,12 @@ playwright = { git = "https://github.com/zhom/playwright-rust", branch = "master
 tokio-tungstenite = { version = "0.29", features = ["native-tls"] }
 rusqlite = { version = "0.39", features = ["bundled"] }
 serde_yaml = "0.9"
+toml = "1.1"
 thiserror = "2.0"
 regex-lite = "0.1"
 tempfile = "3"
 maxminddb = "0.28"
-quick-xml = { version = "0.39", features = ["serialize"] }
+quick-xml = { version = "0.40", features = ["serialize"] }
 
 # VPN support
 boringtun = "0.7"

src-tauri/src/api_server.rs

@@ -87,6 +87,8 @@ pub struct UpdateProfileRequest {
   pub tags: Option<Vec<String>>,
   pub extension_group_id: Option<String>,
   pub proxy_bypass_rules: Option<Vec<String>>,
+  /// One of "Disabled", "Regular", "Encrypted".
+  pub sync_mode: Option<String>,
 }
 
 #[derive(Clone)]
@@ -215,6 +217,20 @@ struct OpenUrlRequest {
   url: String,
 }
 
+#[derive(Debug, Deserialize, ToSchema)]
+struct ImportCookiesRequest {
+  /// Raw cookie file content. Format is auto-detected: a JSON array
+  /// (Puppeteer / EditThisCookie style) or a Netscape `cookies.txt`.
+  content: String,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+struct ImportCookiesResponse {
+  cookies_imported: usize,
+  cookies_replaced: usize,
+  errors: Vec<String>,
+}
+
 #[derive(OpenApi)]
 #[openapi(
   paths(
@@ -226,6 +242,7 @@ struct OpenUrlRequest {
     run_profile,
     open_url_in_profile,
     kill_profile,
+    import_profile_cookies,
     get_groups,
     get_group,
     create_group,
@@ -268,6 +285,8 @@ struct OpenUrlRequest {
     RunProfileResponse,
     RunProfileRequest,
     OpenUrlRequest,
+    ImportCookiesRequest,
+    ImportCookiesResponse,
     ProxySettings,
   )),
   tags(
@@ -277,6 +296,7 @@ struct OpenUrlRequest {
     (name = "proxies", description = "Proxy management endpoints"),
     (name = "vpns", description = "VPN management endpoints"),
     (name = "browsers", description = "Browser management endpoints"),
+    (name = "cookies", description = "Cookie management endpoints"),
   ),
   modifiers(&SecurityAddon),
 )]
@@ -363,6 +383,7 @@ impl ApiServer {
       .routes(routes!(run_profile))
       .routes(routes!(open_url_in_profile))
       .routes(routes!(kill_profile))
+      .routes(routes!(import_profile_cookies))
       .routes(routes!(get_groups, create_group))
       .routes(routes!(get_group, update_group, delete_group))
       .routes(routes!(get_tags))
@@ -397,10 +418,15 @@ impl ApiServer {
       .route("/events", get(ws_handler))
       .with_state(ws_state);
 
+    let api_for_v1 = api.clone();
     let app = Router::new()
       .merge(v1_routes)
       .nest("/ws", ws_routes)
       .route("/openapi.json", get(move || async move { Json(api) }))
+      .route(
+        "/v1/openapi.json",
+        get(move || async move { Json(api_for_v1) }),
+      )
       // Outermost layer: logs every request so customer reports show what
       // their automation is actually calling, what the response status was,
       // and how long it took. Never logs request bodies or auth headers.
@@ -929,6 +955,15 @@ async fn update_profile(
     }
   }
 
+  if let Some(sync_mode) = request.sync_mode {
+    if crate::sync::set_profile_sync_mode(state.app_handle.clone(), id.clone(), sync_mode)
+      .await
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+  }
+
   // Return updated profile
   get_profile(Path(id), State(state)).await
 }
@@ -1818,6 +1853,77 @@ async fn kill_profile(
   Ok(StatusCode::NO_CONTENT)
 }
 
+#[utoipa::path(
+  post,
+  path = "/v1/profiles/{id}/cookies/import",
+  params(
+    ("id" = String, Path, description = "Profile ID")
+  ),
+  request_body = ImportCookiesRequest,
+  responses(
+    (status = 200, description = "Cookies imported successfully", body = ImportCookiesResponse),
+    (status = 400, description = "Invalid cookie file or unsupported browser"),
+    (status = 401, description = "Unauthorized"),
+    (status = 404, description = "Profile not found"),
+    (status = 409, description = "Browser is currently running"),
+    (status = 500, description = "Internal server error")
+  ),
+  security(
+    ("bearer_auth" = [])
+  ),
+  tag = "cookies"
+)]
+async fn import_profile_cookies(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+  Json(request): Json<ImportCookiesRequest>,
+) -> Result<Json<ImportCookiesResponse>, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+  let profiles = profile_manager
+    .list_profiles()
+    .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+  if !profiles.iter().any(|p| p.id.to_string() == id) {
+    return Err(StatusCode::NOT_FOUND);
+  }
+
+  match crate::cookie_manager::CookieManager::import_cookies(
+    &state.app_handle,
+    &id,
+    &request.content,
+  )
+  .await
+  {
+    Ok(result) => {
+      if let Some(scheduler) = crate::sync::get_global_scheduler() {
+        if let Some(profile) = profiles.iter().find(|p| p.id.to_string() == id) {
+          if profile.is_sync_enabled() {
+            let pid = id.clone();
+            tauri::async_runtime::spawn(async move {
+              scheduler.queue_profile_sync(pid).await;
+            });
+          }
+        }
+      }
+      Ok(Json(ImportCookiesResponse {
+        cookies_imported: result.cookies_imported,
+        cookies_replaced: result.cookies_replaced,
+        errors: result.errors,
+      }))
+    }
+    Err(e) => {
+      let msg = e.to_lowercase();
+      if msg.contains("running") {
+        Err(StatusCode::CONFLICT)
+      } else if msg.contains("no valid cookies") || msg.contains("unsupported browser") {
+        Err(StatusCode::BAD_REQUEST)
+      } else {
+        Err(StatusCode::INTERNAL_SERVER_ERROR)
+      }
+    }
+  }
+}
+
 // API Handler - Download Browser
 #[utoipa::path(
   post,

src-tauri/src/browser_runner.rs

@@ -1582,7 +1582,10 @@ impl BrowserRunner {
       }
 
       if profile.password_protected {
-        crate::profile::password::complete_after_quit(profile);
+        // Await the re-encryption so the queued sync (released later by
+        // `mark_profile_stopped` in `kill_browser`) sees fresh ciphertext on
+        // disk instead of the previous snapshot.
+        crate::profile::password::complete_after_quit_and_wait(profile).await;
       } else if profile.ephemeral {
         crate::ephemeral_dirs::remove_ephemeral_dir(&profile.id.to_string());
       }
@@ -1924,7 +1927,10 @@ impl BrowserRunner {
       }
 
       if profile.password_protected {
-        crate::profile::password::complete_after_quit(profile);
+        // Await the re-encryption so the queued sync (released later by
+        // `mark_profile_stopped` in `kill_browser`) sees fresh ciphertext on
+        // disk instead of the previous snapshot.
+        crate::profile::password::complete_after_quit_and_wait(profile).await;
       } else if profile.ephemeral {
         crate::ephemeral_dirs::remove_ephemeral_dir(&profile.id.to_string());
       }

src-tauri/src/camoufox/config.rs

@@ -376,11 +376,12 @@ impl CamoufoxConfigBuilder {
       (config, target_os)
     };
 
-    // Add random window history length
-    config.insert(
-      "window.history.length".to_string(),
-      serde_json::json!(rng.random_range(1..=5)),
-    );
+    // Note: we used to spoof `window.history.length` to a random value in
+    // [1, 5] here. Newer Camoufox builds clamp the docShell session history
+    // to this value, which disables the toolbar back/forward buttons when
+    // the spoof rolls a small number. The fingerprint value drifts on every
+    // user navigation anyway, so a constant spoof is detectable and not
+    // worth the broken navigation UX.
 
     // Add fonts
     if !self.custom_fonts_only {

src-tauri/src/camoufox_manager.rs

@@ -222,10 +222,16 @@ impl CamoufoxManager {
       .map_err(|e| format!("Failed to get Camoufox executable path: {e}"))?;
 
     // Parse the fingerprint config JSON
-    let fingerprint_config: HashMap<String, serde_json::Value> =
+    let mut fingerprint_config: HashMap<String, serde_json::Value> =
       serde_json::from_str(&custom_config)
         .map_err(|e| format!("Failed to parse fingerprint config: {e}"))?;
 
+    // Strip `window.history.length` even when present in a previously-saved
+    // fingerprint. Newer Camoufox clamps the docShell session history to the
+    // spoofed value, which disables the toolbar back/forward buttons. See
+    // the matching note in camoufox/config.rs.
+    fingerprint_config.remove("window.history.length");
+
     // Convert to environment variables using CAMOU_CONFIG chunking
     let env_vars = crate::camoufox::env_vars::config_to_env_vars(&fingerprint_config)
       .map_err(|e| format!("Failed to convert config to env vars: {e}"))?;
@@ -264,13 +270,33 @@ impl CamoufoxManager {
       args
     );
 
-    // Spawn the browser process
+    // Spawn the browser process. Camoufox prints NSS/PSM and proxy failures
+    // to stderr (e.g. cert errors, CONNECT failures) and the user otherwise
+    // sees only an opaque "Secure Connection Failed" page — capture stderr
+    // to a per-launch file so diagnostics survive without a TTY.
+    let stderr_log_path = std::env::temp_dir().join(format!("camoufox-stderr-{}.log", profile.id));
     let mut command = TokioCommand::new(&executable_path);
     command
       .args(&args)
       .stdin(Stdio::null())
-      .stdout(Stdio::null())
-      .stderr(Stdio::null());
+      .stdout(Stdio::null());
+
+    match std::fs::File::create(&stderr_log_path) {
+      Ok(file) => {
+        log::info!(
+          "Camoufox stderr will be logged to: {}",
+          stderr_log_path.display()
+        );
+        command.stderr(Stdio::from(file));
+      }
+      Err(e) => {
+        log::warn!(
+          "Failed to open Camoufox stderr log {}: {e}",
+          stderr_log_path.display()
+        );
+        command.stderr(Stdio::null());
+      }
+    }
 
     // Add environment variables
     for (key, value) in &env_vars {
@@ -287,7 +313,7 @@ impl CamoufoxManager {
       }
     }
 
-    let child = command
+    let mut child = command
       .spawn()
       .map_err(|e| format!("Failed to spawn Camoufox process: {e}"))?;
 
@@ -296,6 +322,34 @@ impl CamoufoxManager {
 
     log::info!("Camoufox launched with PID: {:?}", process_id);
 
+    // Watch the child so its exit status (signal / non-zero code) lands in
+    // the log. Without this, all we see is "PID X is no longer running" via
+    // the periodic sysinfo poll, with no clue why it died.
+    let watch_profile_path = profile_path.to_string();
+    tokio::spawn(async move {
+      match child.wait().await {
+        Ok(status) => {
+          if status.success() {
+            log::info!(
+              "Camoufox PID {:?} for {} exited cleanly (status=0)",
+              process_id,
+              watch_profile_path
+            );
+          } else {
+            log::warn!(
+              "Camoufox PID {:?} for {} exited abnormally: {}",
+              process_id,
+              watch_profile_path,
+              status
+            );
+          }
+        }
+        Err(e) => {
+          log::warn!("Failed to await Camoufox PID {:?} exit: {}", process_id, e);
+        }
+      }
+    });
+
     // Store the instance
     let instance = CamoufoxInstance {
       id: instance_id.clone(),
@@ -557,28 +611,28 @@ impl CamoufoxManager {
 
       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
+            log::info!(
+              "Camoufox instance {} (PID {}) is no longer running; profile_path={:?}",
+              id,
+              process_id,
+              instance.profile_path
+            );
             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
+          log::info!("Camoufox instance {} has no PID, marking as dead", id);
           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
       }
     }
 
@@ -662,54 +716,98 @@ impl CamoufoxManager {
       }
     }
 
-    // Write explicit proxy prefs to user.js so Firefox always uses the local
-    // donut-proxy and never falls back to stale proxy settings baked into prefs.js
-    // from a previous session. user.js values override prefs.js on every launch.
-    if let Some(proxy_str) = &config.proxy {
+    // Patch user.js with Camoufox-specific overrides on every launch. This
+    // always runs (not gated on the proxy being set) because Camoufox's
+    // bundled camoufox.cfg ships defaults that break basic browser features
+    // and we need to override them per-profile.
+    {
       let user_js_path = profile_path.join("user.js");
       let mut prefs = String::new();
 
-      // Preserve existing user.js content (ephemeral prefs, etc.)
+      // Preserve existing user.js lines, but strip any keys we're about to
+      // re-emit so they never duplicate.
+      let managed_keys = [
+        "network.proxy.",
+        "network.http.http3.enable",
+        "network.http.http3.enabled",
+        "xpinstall.signatures.required",
+        "extensions.startupScanScopes",
+        "browser.sessionhistory.max_entries",
+        "browser.sessionhistory.max_total_viewers",
+      ];
       if let Ok(existing) = std::fs::read_to_string(&user_js_path) {
-        // Strip old proxy prefs so we don't duplicate
         for line in existing.lines() {
-          if !line.contains("network.proxy.") {
+          if !managed_keys.iter().any(|k| line.contains(k)) {
             prefs.push_str(line);
             prefs.push('\n');
           }
         }
       }
 
-      if let Ok(parsed) = url::Url::parse(proxy_str) {
-        let host = parsed.host_str().unwrap_or("127.0.0.1");
-        let port = parsed.port().unwrap_or(8080);
-        let scheme = parsed.scheme();
+      // Camoufox's bundled camoufox.cfg sets these to 0, which makes
+      // docShell remember zero prior pages and leaves the toolbar
+      // back/forward buttons permanently disabled no matter how much
+      // the user navigates. Restore Firefox defaults.
+      prefs.push_str(
+        "user_pref(\"browser.sessionhistory.max_entries\", 50);\n\
+         user_pref(\"browser.sessionhistory.max_total_viewers\", -1);\n",
+      );
 
-        if scheme == "socks5" || scheme == "socks4" {
-          prefs.push_str(&format!(
-            "user_pref(\"network.proxy.type\", 1);\n\
-             user_pref(\"network.proxy.socks\", \"{host}\");\n\
-             user_pref(\"network.proxy.socks_port\", {port});\n\
-             user_pref(\"network.proxy.socks_version\", {});\n\
-             user_pref(\"network.proxy.socks_remote_dns\", true);\n",
-            if scheme == "socks5" { 5 } else { 4 }
-          ));
-        } else {
-          // HTTP/HTTPS proxy
-          prefs.push_str(&format!(
-            "user_pref(\"network.proxy.type\", 1);\n\
-             user_pref(\"network.proxy.http\", \"{host}\");\n\
-             user_pref(\"network.proxy.http_port\", {port});\n\
-             user_pref(\"network.proxy.ssl\", \"{host}\");\n\
-             user_pref(\"network.proxy.ssl_port\", {port});\n\
-             user_pref(\"network.proxy.no_proxies_on\", \"\");\n"
-          ));
-        }
+      // Required for sideloaded extensions:
+      // - signatures.required=false accepts unsigned .xpi (Camoufox is built
+      //   without MOZ_REQUIRE_SIGNING so this is honored).
+      // - startupScanScopes=1 rescans SCOPE_PROFILE on each launch so newly
+      //   dropped .xpi files in <profile>/extensions/ get registered.
+      prefs.push_str(
+        "user_pref(\"xpinstall.signatures.required\", false);\n\
+         user_pref(\"extensions.startupScanScopes\", 1);\n",
+      );
 
-        if let Err(e) = std::fs::write(&user_js_path, prefs) {
-          log::warn!("Failed to write proxy prefs to user.js: {e}");
+      // Disable HTTP/3 / QUIC. Camoufox always sits behind the local
+      // donut-proxy, and Firefox-150's QUIC stack bypasses configured HTTP
+      // proxies and goes direct UDP to the remote host. With an upstream
+      // proxy that's the only allowed egress, that traffic silently fails
+      // and pages won't load. (Chromium suppresses QUIC under a proxy on
+      // its own, so Wayfern doesn't need the equivalent toggle.) Both
+      // pref names are emitted because they've been renamed across FF
+      // versions and either could be the active one at runtime.
+      prefs.push_str(
+        "user_pref(\"network.http.http3.enable\", false);\n\
+         user_pref(\"network.http.http3.enabled\", false);\n",
+      );
+
+      if let Some(proxy_str) = &config.proxy {
+        if let Ok(parsed) = url::Url::parse(proxy_str) {
+          let host = parsed.host_str().unwrap_or("127.0.0.1");
+          let port = parsed.port().unwrap_or(8080);
+          let scheme = parsed.scheme();
+
+          if scheme == "socks5" || scheme == "socks4" {
+            prefs.push_str(&format!(
+              "user_pref(\"network.proxy.type\", 1);\n\
+               user_pref(\"network.proxy.socks\", \"{host}\");\n\
+               user_pref(\"network.proxy.socks_port\", {port});\n\
+               user_pref(\"network.proxy.socks_version\", {});\n\
+               user_pref(\"network.proxy.socks_remote_dns\", true);\n",
+              if scheme == "socks5" { 5 } else { 4 }
+            ));
+          } else {
+            // HTTP/HTTPS proxy
+            prefs.push_str(&format!(
+              "user_pref(\"network.proxy.type\", 1);\n\
+               user_pref(\"network.proxy.http\", \"{host}\");\n\
+               user_pref(\"network.proxy.http_port\", {port});\n\
+               user_pref(\"network.proxy.ssl\", \"{host}\");\n\
+               user_pref(\"network.proxy.ssl_port\", {port});\n\
+               user_pref(\"network.proxy.no_proxies_on\", \"\");\n"
+            ));
+          }
         }
       }
+
+      if let Err(e) = std::fs::write(&user_js_path, prefs) {
+        log::warn!("Failed to write user.js: {e}");
+      }
     }
 
     self

src-tauri/src/cloud_auth.rs

@@ -1215,13 +1215,14 @@ pub async fn cloud_refresh_profile() -> Result<CloudUser, String> {
 pub async fn cloud_logout(app_handle: tauri::AppHandle) -> Result<(), String> {
   CLOUD_AUTH.logout().await?;
 
-  // Clear sync settings if they point to the cloud URL (prevent leak into Self-Hosted tab)
+  // Always clear the stored sync URL and token on cloud logout. While the
+  // user was signed in, the cloud auth flow populated these with the hosted
+  // sync server's URL + a server-issued token — leaving them in place would
+  // pre-fill the Self-Hosted tab with our production URL and a token the
+  // user never typed. The cloud-URL-only check we used to do here missed
+  // trailing-slash / scheme variants and any future cloud endpoint moves.
   let manager = crate::settings_manager::SettingsManager::instance();
-  if let Ok(sync_settings) = manager.get_sync_settings() {
-    if sync_settings.sync_server_url.as_deref() == Some(CLOUD_SYNC_URL) {
-      let _ = manager.save_sync_server_url(None);
-    }
-  }
+  let _ = manager.save_sync_server_url(None);
   let _ = manager.remove_sync_token(&app_handle).await;
 
   // Remove cloud-managed and cloud-derived proxies

src-tauri/src/downloaded_browsers_registry.rs

@@ -290,24 +290,45 @@ impl DownloadedBrowsersRegistry {
       }
     }
 
-    // Filter out versions that would leave a browser with zero versions in the registry
+    // For each browser where every registered version would be removed (no
+    // profile uses any), keep the newest one by semver. Without this, the
+    // version preserved depends on HashMap iteration order, so a freshly
+    // downloaded version can be deleted in favor of an older orphan — leaving
+    // the UI stuck on "needs to be downloaded".
     {
       let data = self.data.lock().unwrap();
-      let mut removal_counts: std::collections::HashMap<String, usize> =
+      let mut removal_versions_by_browser: std::collections::HashMap<String, Vec<String>> =
         std::collections::HashMap::new();
-      for (browser, _) in &to_remove {
-        *removal_counts.entry(browser.clone()).or_insert(0) += 1;
+      for (browser, version) in &to_remove {
+        removal_versions_by_browser
+          .entry(browser.clone())
+          .or_default()
+          .push(version.clone());
       }
-      to_remove.retain(|(browser, version)| {
+      let mut keep_per_browser: std::collections::HashMap<String, String> =
+        std::collections::HashMap::new();
+      for (browser, versions) in &removal_versions_by_browser {
         let total = data
           .browsers
           .get(browser.as_str())
           .map(|v| v.len())
           .unwrap_or(0);
-        let removing = *removal_counts.get(browser.as_str()).unwrap_or(&0);
-        if removing >= total {
-          log::info!("Keeping last available version: {browser} {version}");
-          *removal_counts.get_mut(browser.as_str()).unwrap() -= 1;
+        if versions.len() >= total {
+          if let Some(latest) = versions
+            .iter()
+            .max_by(|a, b| crate::api_client::compare_versions(a, b))
+          {
+            keep_per_browser.insert(browser.clone(), latest.clone());
+          }
+        }
+      }
+      drop(data);
+      to_remove.retain(|(browser, version)| {
+        if keep_per_browser
+          .get(browser)
+          .is_some_and(|keep| keep == version)
+        {
+          log::info!("Keeping latest available version: {browser} {version}");
           return false;
         }
         true

src-tauri/src/extension_manager.rs

@@ -27,6 +27,11 @@ pub struct Extension {
   pub author: Option<String>,
   #[serde(default)]
   pub homepage_url: Option<String>,
+  /// Firefox extension ID from `browser_specific_settings.gecko.id` (or
+  /// `applications.gecko.id` in old manifests). Firefox refuses to load a
+  /// sideloaded .xpi unless the filename matches this value.
+  #[serde(default)]
+  pub gecko_id: Option<String>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -157,6 +162,32 @@ fn extract_manifest_metadata(
   (name, version, description, author, homepage_url)
 }
 
+/// Read `browser_specific_settings.gecko.id` (or the legacy
+/// `applications.gecko.id`) from the extension's manifest.json. Firefox uses
+/// this value as the canonical add-on ID; sideloaded .xpi files must be named
+/// `<gecko_id>.xpi` to be picked up.
+fn extract_gecko_id(file_data: &[u8], file_type: &str) -> Option<String> {
+  let zip_start = if file_type == "crx" {
+    find_zip_start(file_data)
+  } else {
+    0
+  };
+  let cursor = std::io::Cursor::new(&file_data[zip_start..]);
+  let mut archive = zip::ZipArchive::new(cursor).ok()?;
+  let mut manifest_content = String::new();
+  std::io::Read::read_to_string(
+    &mut archive.by_name("manifest.json").ok()?,
+    &mut manifest_content,
+  )
+  .ok()?;
+  let manifest: serde_json::Value = serde_json::from_str(&manifest_content).ok()?;
+  manifest
+    .pointer("/browser_specific_settings/gecko/id")
+    .or_else(|| manifest.pointer("/applications/gecko/id"))
+    .and_then(|v| v.as_str())
+    .map(|s| s.to_string())
+}
+
 fn extract_icon_from_archive(file_data: &[u8], file_type: &str) -> Option<(Vec<u8>, String)> {
   let zip_start = if file_type == "crx" {
     find_zip_start(file_data)
@@ -285,6 +316,7 @@ impl ExtensionManager {
       name
     };
 
+    let gecko_id = extract_gecko_id(&file_data, &file_type);
     let ext = Extension {
       id: uuid::Uuid::new_v4().to_string(),
       name: final_name,
@@ -299,6 +331,7 @@ impl ExtensionManager {
       description,
       author,
       homepage_url,
+      gecko_id,
     };
 
     let file_dir = self.get_file_dir(&ext.id);
@@ -415,6 +448,7 @@ impl ExtensionManager {
           ext.name = mn;
         }
       }
+      ext.gecko_id = extract_gecko_id(&data, &new_file_type);
 
       if let Some((icon_data, icon_ext)) = extract_icon_from_archive(&data, &new_file_type) {
         let icon_path = self.get_extension_dir(id).join(format!("icon.{icon_ext}"));
@@ -893,24 +927,33 @@ impl ExtensionManager {
               continue;
             }
             let src_file = self.get_file_dir(ext_id).join(&ext.file_name);
-            if src_file.exists() {
-              // Firefox expects .xpi files in extensions dir
-              let dest_name = if ext.file_type == "zip" {
-                format!(
-                  "{}.xpi",
-                  ext
-                    .file_name
-                    .rsplit('.')
-                    .next_back()
-                    .unwrap_or(&ext.file_name)
-                )
-              } else {
-                ext.file_name.clone()
-              };
-              let dest = extensions_dir.join(&dest_name);
-              fs::copy(&src_file, &dest)?;
-              extension_paths.push(dest.to_string_lossy().to_string());
+            if !src_file.exists() {
+              continue;
             }
+
+            // Firefox/Camoufox only loads sideloaded .xpi files whose filename
+            // matches `browser_specific_settings.gecko.id` from the manifest.
+            // Prefer the cached value; fall back to reading the manifest now
+            // for extensions added before the field existed.
+            let gecko_id = if let Some(ref id) = ext.gecko_id {
+              Some(id.clone())
+            } else if let Ok(data) = fs::read(&src_file) {
+              extract_gecko_id(&data, &ext.file_type)
+            } else {
+              None
+            };
+
+            let Some(gecko_id) = gecko_id else {
+              log::warn!(
+                "Skipping Firefox extension '{}': could not determine gecko id from manifest.json",
+                ext.name
+              );
+              continue;
+            };
+
+            let dest = extensions_dir.join(format!("{gecko_id}.xpi"));
+            fs::copy(&src_file, &dest)?;
+            extension_paths.push(dest.to_string_lossy().to_string());
           }
         }
       }
@@ -1022,30 +1065,49 @@ impl ExtensionManager {
         }
       }
 
-      if ext.version.is_none() && ext.description.is_none() {
+      let needs_meta_backfill = ext.version.is_none() && ext.description.is_none();
+      let needs_gecko_backfill =
+        ext.gecko_id.is_none() && ext.browser_compatibility.iter().any(|b| b == "firefox");
+
+      if needs_meta_backfill || needs_gecko_backfill {
         let file_path = file_dir.join(&ext.file_name);
         if let Ok(file_data) = fs::read(&file_path) {
-          let (manifest_name, version, description, author, homepage_url) =
-            extract_manifest_metadata(&file_data, &ext.file_type);
-          if version.is_some()
-            || description.is_some()
-            || author.is_some()
-            || homepage_url.is_some()
-            || manifest_name.is_some()
-          {
-            let mut updated_ext = ext.clone();
-            if let Some(v) = version {
-              updated_ext.version = Some(v);
+          let mut updated_ext = ext.clone();
+          let mut changed = false;
+
+          if needs_meta_backfill {
+            let (manifest_name, version, description, author, homepage_url) =
+              extract_manifest_metadata(&file_data, &ext.file_type);
+            if version.is_some()
+              || description.is_some()
+              || author.is_some()
+              || homepage_url.is_some()
+              || manifest_name.is_some()
+            {
+              if let Some(v) = version {
+                updated_ext.version = Some(v);
+              }
+              if let Some(d) = description {
+                updated_ext.description = Some(d);
+              }
+              if let Some(a) = author {
+                updated_ext.author = Some(a);
+              }
+              if let Some(h) = homepage_url {
+                updated_ext.homepage_url = Some(h);
+              }
+              changed = true;
             }
-            if let Some(d) = description {
-              updated_ext.description = Some(d);
-            }
-            if let Some(a) = author {
-              updated_ext.author = Some(a);
-            }
-            if let Some(h) = homepage_url {
-              updated_ext.homepage_url = Some(h);
+          }
+
+          if needs_gecko_backfill {
+            if let Some(gid) = extract_gecko_id(&file_data, &ext.file_type) {
+              updated_ext.gecko_id = Some(gid);
+              changed = true;
             }
+          }
+
+          if changed {
             let metadata_path = self.get_metadata_path(&ext.id);
             if let Ok(json) = serde_json::to_string_pretty(&updated_ext) {
               let _ = fs::write(metadata_path, json);

src-tauri/src/group_manager.rs

@@ -268,7 +268,9 @@ impl GroupManager {
       }
     }
 
-    // Create result including all groups (even those with 0 count)
+    // Create result including all groups (even those with 0 count).
+    // The "Default" pseudo-group is intentionally not returned: profiles
+    // without a group_id are surfaced through the "All" filter instead.
     let mut result = Vec::new();
     for group in groups {
       let count = group_counts.get(&group.id).copied().unwrap_or(0);
@@ -281,18 +283,6 @@ impl GroupManager {
       });
     }
 
-    // Add default group count (profiles without group_id), always include even if 0
-    let default_count = profiles.iter().filter(|p| p.group_id.is_none()).count();
-    let default_group = GroupWithCount {
-      id: "default".to_string(),
-      name: "Default".to_string(),
-      count: default_count,
-      sync_enabled: false,
-      last_sync: None,
-    };
-    // Insert at the beginning for consistent ordering with UI expectations
-    result.insert(0, default_group);
-
     Ok(result)
   }
 }

src-tauri/src/lib.rs

@@ -52,6 +52,7 @@ pub mod daemon_client;
 mod daemon_spawn;
 pub mod daemon_ws;
 pub mod events;
+mod mcp_integrations;
 mod mcp_server;
 mod tag_manager;
 mod team_lock;
@@ -74,7 +75,7 @@ use profile::manager::{
 
 use profile::password::{
   change_profile_password, is_profile_locked, lock_profile, remove_profile_password,
-  set_profile_password, unlock_profile,
+  set_profile_password, unlock_profile, verify_profile_password,
 };
 
 use browser_version_manager::{
@@ -98,11 +99,12 @@ use settings_manager::{
 };
 
 use sync::{
-  check_has_e2e_password, delete_e2e_password, enable_sync_for_all_entities,
+  cancel_profile_sync, check_has_e2e_password, delete_e2e_password, enable_sync_for_all_entities,
   get_unsynced_entity_counts, is_group_in_use_by_synced_profile, is_proxy_in_use_by_synced_profile,
   is_vpn_in_use_by_synced_profile, request_profile_sync, rollover_encryption_for_all_entities,
   set_e2e_password, set_extension_group_sync_enabled, set_extension_sync_enabled,
   set_group_sync_enabled, set_profile_sync_mode, set_proxy_sync_enabled, set_vpn_sync_enabled,
+  verify_e2e_password,
 };
 
 use tag_manager::get_all_tags;
@@ -503,20 +505,20 @@ fn claude_desktop_extension_dir() -> Option<std::path::PathBuf> {
   }
 }
 
-#[tauri::command]
-fn is_mcp_in_claude_desktop() -> Result<bool, String> {
-  let dir = claude_desktop_extension_dir().ok_or("Unsupported platform")?;
-  Ok(dir.join("manifest.json").exists())
+fn is_mcp_in_claude_desktop_internal() -> bool {
+  let Some(dir) = claude_desktop_extension_dir() else {
+    return false;
+  };
+  dir.join("manifest.json").exists()
 }
 
-#[tauri::command]
-async fn add_mcp_to_claude_desktop(app_handle: tauri::AppHandle) -> Result<(), String> {
+async fn add_mcp_to_claude_desktop_internal(app_handle: &tauri::AppHandle) -> Result<(), String> {
   let mcp_server = mcp_server::McpServer::instance();
   let port = mcp_server.get_port().ok_or("MCP server is not running")?;
 
   let settings_manager = settings_manager::SettingsManager::instance();
   let token = settings_manager
-    .get_mcp_token(&app_handle)
+    .get_mcp_token(app_handle)
     .await
     .map_err(|e| format!("Failed to get MCP token: {e}"))?
     .ok_or("MCP token not found")?;
@@ -605,8 +607,7 @@ rl.on("close", () => setTimeout(() => process.exit(0), 500));
   Ok(())
 }
 
-#[tauri::command]
-fn remove_mcp_from_claude_desktop() -> Result<(), String> {
+fn remove_mcp_from_claude_desktop_internal() -> Result<(), String> {
   let ext_dir = claude_desktop_extension_dir().ok_or("Unsupported platform")?;
   if ext_dir.exists() {
     std::fs::remove_dir_all(&ext_dir).map_err(|e| format!("Failed to remove extension: {e}"))?;
@@ -668,91 +669,48 @@ fn update_claude_extensions_registry(
   Ok(())
 }
 
-fn find_claude_cli() -> Option<std::path::PathBuf> {
-  let mut candidates: Vec<std::path::PathBuf> = vec![
-    std::path::PathBuf::from("/usr/local/bin/claude"),
-    std::path::PathBuf::from("/opt/homebrew/bin/claude"),
-  ];
-  if let Some(home) = dirs::home_dir() {
-    candidates.insert(0, home.join(".local/bin/claude"));
-    candidates.push(home.join(".claude/local/claude"));
-  }
-  #[cfg(windows)]
-  if let Ok(appdata) = std::env::var("APPDATA") {
-    candidates.insert(
-      0,
-      std::path::PathBuf::from(appdata).join("Claude/claude.exe"),
-    );
-  }
-  for p in &candidates {
-    if p.exists() {
-      return Some(p.clone());
-    }
-  }
-  None
-}
-
-#[tauri::command]
-async fn is_mcp_in_claude_code() -> Result<bool, String> {
-  let cli = find_claude_cli().ok_or("Claude Code CLI not found")?;
-  // `claude mcp list` health-checks every registered MCP server, so a
-  // missing or stalled server can hang the call for many seconds. Cap it
-  // — for this dialog, a slow `claude` is treated the same as "not registered".
-  let fut = tokio::process::Command::new(&cli)
-    .args(["mcp", "list"])
-    .output();
-  let output = tokio::time::timeout(std::time::Duration::from_secs(2), fut)
-    .await
-    .map_err(|_| "claude mcp list timed out".to_string())?
-    .map_err(|e| format!("Failed to run claude: {e}"))?;
-  let stdout = String::from_utf8_lossy(&output.stdout);
-  Ok(stdout.contains("donut-browser"))
-}
-
-#[tauri::command]
-async fn add_mcp_to_claude_code(app_handle: tauri::AppHandle) -> Result<(), String> {
-  let cli = find_claude_cli().ok_or("Claude Code CLI not found")?;
-
+async fn current_mcp_url(app_handle: &tauri::AppHandle) -> Result<String, String> {
   let mcp_server = mcp_server::McpServer::instance();
   let port = mcp_server.get_port().ok_or("MCP server is not running")?;
-
   let settings_manager = settings_manager::SettingsManager::instance();
   let token = settings_manager
-    .get_mcp_token(&app_handle)
+    .get_mcp_token(app_handle)
     .await
     .map_err(|e| format!("Failed to get MCP token: {e}"))?
     .ok_or("MCP token not found")?;
-
-  let url = format!("http://127.0.0.1:{port}/mcp/{token}");
-
-  let _ = std::process::Command::new(&cli)
-    .args(["mcp", "remove", "donut-browser"])
-    .output();
-
-  let output = std::process::Command::new(&cli)
-    .args(["mcp", "add", "--transport", "http", "donut-browser", &url])
-    .output()
-    .map_err(|e| format!("Failed to run claude: {e}"))?;
-
-  if !output.status.success() {
-    let stderr = String::from_utf8_lossy(&output.stderr);
-    return Err(format!("Failed to add MCP to Claude Code: {stderr}"));
-  }
-  Ok(())
+  Ok(format!("http://127.0.0.1:{port}/mcp/{token}"))
 }
 
 #[tauri::command]
-fn remove_mcp_from_claude_code() -> Result<(), String> {
-  let cli = find_claude_cli().ok_or("Claude Code CLI not found")?;
-  let output = std::process::Command::new(&cli)
-    .args(["mcp", "remove", "donut-browser"])
-    .output()
-    .map_err(|e| format!("Failed to run claude: {e}"))?;
-  if !output.status.success() {
-    let stderr = String::from_utf8_lossy(&output.stderr);
-    return Err(format!("Failed to remove MCP from Claude Code: {stderr}"));
+async fn list_mcp_agents() -> Result<Vec<mcp_integrations::McpAgentInfo>, String> {
+  let claude_desktop_connected = is_mcp_in_claude_desktop_internal();
+  Ok(mcp_integrations::list_agents_with_status(&[(
+    "claude-desktop",
+    claude_desktop_connected,
+  )]))
+}
+
+#[tauri::command]
+async fn add_mcp_to_agent(app_handle: tauri::AppHandle, agent_id: String) -> Result<(), String> {
+  if !mcp_integrations::agent_exists(&agent_id) {
+    return Err(format!("Unknown agent: {agent_id}"));
   }
-  Ok(())
+  if agent_id == "claude-desktop" {
+    return add_mcp_to_claude_desktop_internal(&app_handle).await;
+  }
+  let url = current_mcp_url(&app_handle).await?;
+  mcp_integrations::install_generic(&agent_id, &url)
+}
+
+#[tauri::command]
+async fn remove_mcp_from_agent(agent_id: String) -> Result<(), String> {
+  if !mcp_integrations::agent_exists(&agent_id) {
+    return Err(format!("Unknown agent: {agent_id}"));
+  }
+  if agent_id == "claude-desktop" {
+    return remove_mcp_from_claude_desktop_internal();
+  }
+  mcp_integrations::uninstall_generic(&agent_id)
 }
 
 #[tauri::command]
@@ -1822,6 +1780,19 @@ pub fn run() {
                     );
                   }
 
+                  // Re-encrypt password-protected profiles when the browser
+                  // exits naturally (user closing the window) — the explicit
+                  // kill path in browser_runner.rs handles app-driven stops.
+                  // Must run BEFORE `mark_profile_stopped` because that
+                  // releases any queued sync run, and a sync that picks up
+                  // the on-disk dir before re-encryption finishes uploads
+                  // the previous snapshot (issue: encrypted profiles not
+                  // syncing fresh data).
+                  if !is_running && profile.password_protected {
+                    crate::profile::password::complete_after_quit_and_wait(&profile)
+                      .await;
+                  }
+
                   // Notify sync scheduler of running state changes
                   if let Some(scheduler) = sync::get_global_scheduler() {
                     if is_running {
@@ -1832,13 +1803,6 @@ pub fn run() {
                     }
                   }
 
-                  // Re-encrypt password-protected profiles when the browser
-                  // exits naturally (user closing the window) — the explicit
-                  // kill path in browser_runner.rs handles app-driven stops.
-                  if !is_running && profile.password_protected {
-                    crate::profile::password::complete_after_quit(&profile);
-                  }
-
                   last_running_states.insert(profile_id, is_running);
                 } else {
                   // Update the state even if unchanged to ensure we have it tracked
@@ -2093,6 +2057,7 @@ pub fn run() {
       get_sync_settings,
       save_sync_settings,
       set_profile_sync_mode,
+      cancel_profile_sync,
       request_profile_sync,
       set_proxy_sync_enabled,
       set_group_sync_enabled,
@@ -2106,6 +2071,7 @@ pub fn run() {
       enable_sync_for_all_entities,
       set_e2e_password,
       check_has_e2e_password,
+      verify_e2e_password,
       delete_e2e_password,
       rollover_encryption_for_all_entities,
       read_profile_cookies,
@@ -2123,12 +2089,9 @@ pub fn run() {
       stop_mcp_server,
       get_mcp_server_status,
       get_mcp_config,
-      is_mcp_in_claude_desktop,
-      add_mcp_to_claude_desktop,
-      remove_mcp_from_claude_desktop,
-      is_mcp_in_claude_code,
-      add_mcp_to_claude_code,
-      remove_mcp_from_claude_code,
+      list_mcp_agents,
+      add_mcp_to_agent,
+      remove_mcp_from_agent,
       // VPN commands
       import_vpn_config,
       list_vpn_configs,
@@ -2171,6 +2134,7 @@ pub fn run() {
       set_profile_password,
       change_profile_password,
       remove_profile_password,
+      verify_profile_password,
       unlock_profile,
       lock_profile,
       is_profile_locked,

src-tauri/src/mcp_integrations.rs

@@ -0,0 +1,574 @@
+// MCP client integrations — installs/removes the donut-browser MCP server in
+// 14 popular AI assistant clients. Ports the add-mcp registry to Rust.
+//
+// Claude Desktop is managed via Claude's local extensions bundle
+// (manifest.json + node bridge), since the desktop app supports only stdio
+// servers via its plain JSON config but exposes HTTP through the extension
+// framework. See `add_mcp_to_claude_desktop_internal` in lib.rs. All other
+// agents (including Claude Code) use the generic config-file installer here.
+
+use serde::{Deserialize, Serialize};
+use std::fs;
+use std::path::{Path, PathBuf};
+
+const SERVER_NAME: &str = "donut-browser";
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq, Hash)]
+#[serde(rename_all = "kebab-case")]
+pub enum AgentCategory {
+  DesktopApp,
+  Cli,
+  Editor,
+  EditorExt,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum ConfigFormat {
+  Json,
+  Toml,
+  Yaml,
+}
+
+#[derive(Debug, Clone)]
+struct AgentSpec {
+  id: &'static str,
+  display_name: &'static str,
+  category: AgentCategory,
+  /// Top-level key (supports dot notation) where the server is written.
+  config_key: &'static str,
+  format: ConfigFormat,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct McpAgentInfo {
+  pub id: String,
+  pub display_name: String,
+  pub category: AgentCategory,
+  pub connected: bool,
+  /// True when the underlying client appears to be installed on the system
+  /// (its config directory exists), regardless of whether we have installed
+  /// the donut-browser server into it.
+  pub detected: bool,
+}
+
+fn home() -> Option<PathBuf> {
+  dirs::home_dir()
+}
+
+#[cfg(target_os = "macos")]
+fn vscode_user_dir() -> Option<PathBuf> {
+  home().map(|h| {
+    h.join("Library")
+      .join("Application Support")
+      .join("Code")
+      .join("User")
+  })
+}
+
+#[cfg(target_os = "windows")]
+fn vscode_user_dir() -> Option<PathBuf> {
+  std::env::var("APPDATA")
+    .ok()
+    .map(|a| PathBuf::from(a).join("Code").join("User"))
+}
+
+#[cfg(target_os = "linux")]
+fn vscode_user_dir() -> Option<PathBuf> {
+  let base = std::env::var("XDG_CONFIG_HOME")
+    .ok()
+    .map(PathBuf::from)
+    .or_else(|| home().map(|h| h.join(".config")))?;
+  Some(base.join("Code").join("User"))
+}
+
+#[cfg(target_os = "macos")]
+fn zed_config_dir() -> Option<PathBuf> {
+  home().map(|h| h.join("Library").join("Application Support").join("Zed"))
+}
+
+#[cfg(target_os = "windows")]
+fn zed_config_dir() -> Option<PathBuf> {
+  std::env::var("APPDATA")
+    .ok()
+    .map(|a| PathBuf::from(a).join("Zed"))
+}
+
+#[cfg(target_os = "linux")]
+fn zed_config_dir() -> Option<PathBuf> {
+  let base = std::env::var("XDG_CONFIG_HOME")
+    .ok()
+    .map(PathBuf::from)
+    .or_else(|| home().map(|h| h.join(".config")))?;
+  Some(base.join("zed"))
+}
+
+#[cfg(target_os = "windows")]
+fn goose_config_path() -> Option<PathBuf> {
+  std::env::var("APPDATA").ok().map(|a| {
+    PathBuf::from(a)
+      .join("Block")
+      .join("goose")
+      .join("config")
+      .join("config.yaml")
+  })
+}
+
+#[cfg(not(target_os = "windows"))]
+fn goose_config_path() -> Option<PathBuf> {
+  let base = std::env::var("XDG_CONFIG_HOME")
+    .ok()
+    .map(PathBuf::from)
+    .or_else(|| home().map(|h| h.join(".config")))?;
+  Some(base.join("goose").join("config.yaml"))
+}
+
+/// Resolve the global config path for an agent. Returns `None` on unsupported
+/// platforms (none currently — every supported agent has a defined path on
+/// macOS/Linux/Windows).
+fn config_path_for(agent_id: &str) -> Option<PathBuf> {
+  let h = home()?;
+  match agent_id {
+    "antigravity" => Some(
+      h.join(".gemini")
+        .join("antigravity")
+        .join("mcp_config.json"),
+    ),
+    "cline" => vscode_user_dir().map(|d| {
+      d.join("globalStorage")
+        .join("saoudrizwan.claude-dev")
+        .join("settings")
+        .join("cline_mcp_settings.json")
+    }),
+    "cline-cli" => {
+      let base = std::env::var("CLINE_DIR")
+        .ok()
+        .map(PathBuf::from)
+        .unwrap_or_else(|| h.join(".cline"));
+      Some(
+        base
+          .join("data")
+          .join("settings")
+          .join("cline_mcp_settings.json"),
+      )
+    }
+    "claude-code" => Some(h.join(".claude.json")),
+    "claude-desktop" => claude_desktop_config_path(),
+    "codex" => {
+      let base = std::env::var("CODEX_HOME")
+        .ok()
+        .map(PathBuf::from)
+        .unwrap_or_else(|| h.join(".codex"));
+      Some(base.join("config.toml"))
+    }
+    "cursor" => Some(h.join(".cursor").join("mcp.json")),
+    "gemini-cli" => Some(h.join(".gemini").join("settings.json")),
+    "goose" => goose_config_path(),
+    "github-copilot-cli" => Some(
+      std::env::var("XDG_CONFIG_HOME")
+        .ok()
+        .map(PathBuf::from)
+        .unwrap_or_else(|| h.join(".copilot"))
+        .join("mcp-config.json"),
+    ),
+    "mcporter" => {
+      // add-mcp's resolveMcporterConfigPath: prefer mcporter.json, fall back
+      // to mcporter.jsonc if it already exists, else default to mcporter.json.
+      let dir = h.join(".mcporter");
+      let json_path = dir.join("mcporter.json");
+      let jsonc_path = dir.join("mcporter.jsonc");
+      if json_path.exists() {
+        Some(json_path)
+      } else if jsonc_path.exists() {
+        Some(jsonc_path)
+      } else {
+        Some(json_path)
+      }
+    }
+    "opencode" => Some(h.join(".config").join("opencode").join("opencode.json")),
+    "vscode" => vscode_user_dir().map(|d| d.join("mcp.json")),
+    "zed" => zed_config_dir().map(|d| d.join("settings.json")),
+    _ => None,
+  }
+}
+
+#[cfg(target_os = "macos")]
+fn claude_desktop_config_path() -> Option<PathBuf> {
+  home().map(|h| {
+    h.join("Library")
+      .join("Application Support")
+      .join("Claude")
+      .join("claude_desktop_config.json")
+  })
+}
+
+#[cfg(target_os = "windows")]
+fn claude_desktop_config_path() -> Option<PathBuf> {
+  std::env::var("APPDATA").ok().map(|a| {
+    PathBuf::from(a)
+      .join("Claude")
+      .join("claude_desktop_config.json")
+  })
+}
+
+#[cfg(target_os = "linux")]
+fn claude_desktop_config_path() -> Option<PathBuf> {
+  let base = std::env::var("XDG_CONFIG_HOME")
+    .ok()
+    .map(PathBuf::from)
+    .or_else(|| home().map(|h| h.join(".config")))?;
+  Some(base.join("Claude").join("claude_desktop_config.json"))
+}
+
+const AGENT_SPECS: &[AgentSpec] = &[
+  AgentSpec {
+    id: "claude-desktop",
+    display_name: "Claude Desktop",
+    category: AgentCategory::DesktopApp,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "claude-code",
+    display_name: "Claude Code",
+    category: AgentCategory::Cli,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "cursor",
+    display_name: "Cursor",
+    category: AgentCategory::Editor,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "vscode",
+    display_name: "VS Code",
+    category: AgentCategory::Editor,
+    config_key: "servers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "zed",
+    display_name: "Zed",
+    category: AgentCategory::Editor,
+    config_key: "context_servers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "cline-cli",
+    display_name: "Cline CLI",
+    category: AgentCategory::Cli,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "cline",
+    display_name: "Cline VSCode",
+    category: AgentCategory::EditorExt,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "codex",
+    display_name: "Codex",
+    category: AgentCategory::Cli,
+    config_key: "mcp_servers",
+    format: ConfigFormat::Toml,
+  },
+  AgentSpec {
+    id: "gemini-cli",
+    display_name: "Gemini CLI",
+    category: AgentCategory::Cli,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "github-copilot-cli",
+    display_name: "GitHub Copilot CLI",
+    category: AgentCategory::Cli,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "goose",
+    display_name: "Goose",
+    category: AgentCategory::Cli,
+    config_key: "extensions",
+    format: ConfigFormat::Yaml,
+  },
+  AgentSpec {
+    id: "antigravity",
+    display_name: "Antigravity",
+    category: AgentCategory::DesktopApp,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "opencode",
+    display_name: "OpenCode",
+    category: AgentCategory::Cli,
+    config_key: "mcp",
+    format: ConfigFormat::Json,
+  },
+  AgentSpec {
+    id: "mcporter",
+    display_name: "MCPorter",
+    category: AgentCategory::Cli,
+    config_key: "mcpServers",
+    format: ConfigFormat::Json,
+  },
+];
+
+fn spec_for(agent_id: &str) -> Option<&'static AgentSpec> {
+  AGENT_SPECS.iter().find(|s| s.id == agent_id)
+}
+
+fn detect_agent_directory(agent_id: &str) -> bool {
+  // Mirrors add-mcp's `detectGlobalInstall` checks — typically the immediate
+  // parent of the config file. Used only for UI annotation; install/uninstall
+  // always operates on the resolved config path.
+  let Some(h) = home() else {
+    return false;
+  };
+  match agent_id {
+    "antigravity" => h.join(".gemini").exists(),
+    "cline" => config_path_for("cline")
+      .and_then(|p| p.parent().map(|d| d.exists()))
+      .unwrap_or(false),
+    "cline-cli" => config_path_for("cline-cli")
+      .and_then(|p| p.parent().map(|d| d.exists()))
+      .unwrap_or(false),
+    "claude-code" => h.join(".claude").exists(),
+    "claude-desktop" => claude_desktop_config_path()
+      .and_then(|p| p.parent().map(|d| d.exists()))
+      .unwrap_or(false),
+    "codex" => h.join(".codex").exists(),
+    "cursor" => h.join(".cursor").exists(),
+    "gemini-cli" => h.join(".gemini").exists(),
+    "github-copilot-cli" => config_path_for("github-copilot-cli")
+      .and_then(|p| p.parent().map(|d| d.exists()))
+      .unwrap_or(false),
+    "goose" => goose_config_path().is_some_and(|p| p.exists()),
+    "mcporter" => h.join(".mcporter").exists(),
+    "opencode" => h.join(".config").join("opencode").exists(),
+    "vscode" => vscode_user_dir().is_some_and(|d| d.exists()),
+    "zed" => zed_config_dir().is_some_and(|d| d.exists()),
+    _ => false,
+  }
+}
+
+/// Transform the donut-browser HTTP server config into the per-agent shape.
+/// All agents speak HTTP except Claude Desktop, which uses a node stdio bridge
+/// (handled by the extension installer in lib.rs).
+fn transform_remote_config(agent_id: &str, url: &str) -> serde_json::Value {
+  use serde_json::json;
+  match agent_id {
+    "zed" => json!({ "source": "custom", "type": "http", "url": url }),
+    "opencode" => json!({ "type": "remote", "url": url, "enabled": true }),
+    "antigravity" => json!({ "serverUrl": url }),
+    "cursor" => json!({ "url": url }),
+    "cline" | "cline-cli" => json!({
+      "url": url,
+      "type": "streamableHttp",
+      "disabled": false,
+    }),
+    "codex" => json!({ "type": "http", "url": url }),
+    "github-copilot-cli" => json!({ "type": "http", "url": url, "tools": ["*"] }),
+    "goose" => json!({
+      "name": SERVER_NAME,
+      "description": "",
+      "type": "streamable_http",
+      "uri": url,
+      "headers": {},
+      "enabled": true,
+      "timeout": 300,
+    }),
+    "vscode" => json!({ "type": "http", "url": url }),
+    // claude-code, claude-desktop, gemini-cli, mcporter — passthrough
+    _ => json!({ "type": "http", "url": url }),
+  }
+}
+
+/// Detect whether a server config object looks like our donut-browser HTTP
+/// endpoint by URL prefix. Matches across the various per-agent key shapes
+/// (`url`, `uri`, `serverUrl`).
+fn config_matches_donut(value: &serde_json::Value) -> bool {
+  for key in ["url", "uri", "serverUrl"] {
+    if let Some(s) = value.get(key).and_then(|v| v.as_str()) {
+      if s.contains("/mcp/")
+        && (s.starts_with("http://127.0.0.1") || s.starts_with("http://localhost"))
+      {
+        return true;
+      }
+    }
+  }
+  false
+}
+
+fn read_value(path: &Path, format: ConfigFormat) -> serde_json::Value {
+  let Ok(content) = fs::read_to_string(path) else {
+    return serde_json::Value::Null;
+  };
+  match format {
+    ConfigFormat::Json => serde_json::from_str(&content).unwrap_or(serde_json::Value::Null),
+    ConfigFormat::Toml => toml::from_str::<toml::Value>(&content)
+      .ok()
+      .and_then(|t| serde_json::to_value(t).ok())
+      .unwrap_or(serde_json::Value::Null),
+    ConfigFormat::Yaml => serde_yaml::from_str::<serde_yaml::Value>(&content)
+      .ok()
+      .and_then(|y| serde_json::to_value(y).ok())
+      .unwrap_or(serde_json::Value::Null),
+  }
+}
+
+fn write_value(path: &Path, value: &serde_json::Value, format: ConfigFormat) -> Result<(), String> {
+  if let Some(parent) = path.parent() {
+    fs::create_dir_all(parent).map_err(|e| format!("Failed to create config dir: {e}"))?;
+  }
+  let content = match format {
+    ConfigFormat::Json => {
+      serde_json::to_string_pretty(value).map_err(|e| format!("Failed to serialize JSON: {e}"))?
+    }
+    ConfigFormat::Toml => {
+      let toml_val: toml::Value = serde_json::from_value(value.clone())
+        .map_err(|e| format!("Failed to convert to TOML: {e}"))?;
+      toml::to_string_pretty(&toml_val).map_err(|e| format!("Failed to serialize TOML: {e}"))?
+    }
+    ConfigFormat::Yaml => {
+      let yaml_val: serde_yaml::Value = serde_yaml::from_str(
+        &serde_json::to_string(value).map_err(|e| format!("Failed to serialize: {e}"))?,
+      )
+      .map_err(|e| format!("Failed to convert to YAML: {e}"))?;
+      serde_yaml::to_string(&yaml_val).map_err(|e| format!("Failed to serialize YAML: {e}"))?
+    }
+  };
+  fs::write(path, content).map_err(|e| format!("Failed to write config: {e}"))?;
+  Ok(())
+}
+
+/// Navigate `config_key` (dot notation), creating object literals at each
+/// missing level. Returns a mutable reference to the bottom container so the
+/// caller can set/remove server entries.
+fn ensure_nested_object<'a>(
+  root: &'a mut serde_json::Value,
+  config_key: &str,
+) -> &'a mut serde_json::Map<String, serde_json::Value> {
+  if !root.is_object() {
+    *root = serde_json::Value::Object(serde_json::Map::new());
+  }
+  let mut current = root.as_object_mut().expect("just set to object");
+  let parts: Vec<&str> = config_key.split('.').collect();
+  for part in &parts {
+    let entry = current
+      .entry(part.to_string())
+      .or_insert_with(|| serde_json::Value::Object(serde_json::Map::new()));
+    if !entry.is_object() {
+      *entry = serde_json::Value::Object(serde_json::Map::new());
+    }
+    current = entry.as_object_mut().expect("just ensured object");
+  }
+  current
+}
+
+fn nested_object<'a>(
+  root: &'a serde_json::Value,
+  config_key: &str,
+) -> Option<&'a serde_json::Map<String, serde_json::Value>> {
+  let mut current = root.as_object()?;
+  for part in config_key.split('.') {
+    current = current.get(part)?.as_object()?;
+  }
+  Some(current)
+}
+
+fn is_generic_agent_connected(agent_id: &str) -> bool {
+  let Some(spec) = spec_for(agent_id) else {
+    return false;
+  };
+  let Some(path) = config_path_for(agent_id) else {
+    return false;
+  };
+  if !path.exists() {
+    return false;
+  }
+  let root = read_value(&path, spec.format);
+  let Some(servers) = nested_object(&root, spec.config_key) else {
+    return false;
+  };
+  if let Some(entry) = servers.get(SERVER_NAME) {
+    return config_matches_donut(entry);
+  }
+  servers.values().any(config_matches_donut)
+}
+
+/// Install or remove the donut-browser entry from a generic agent. Returns
+/// `true` if a write happened. Callers handle higher-level dispatch (Claude
+/// Desktop extension setup, Claude Code CLI invocation).
+pub fn install_generic(agent_id: &str, url: &str) -> Result<(), String> {
+  let spec = spec_for(agent_id).ok_or_else(|| format!("Unknown agent: {agent_id}"))?;
+  let path = config_path_for(agent_id)
+    .ok_or_else(|| format!("Unable to resolve config path for {agent_id}"))?;
+
+  let mut root = if path.exists() {
+    read_value(&path, spec.format)
+  } else {
+    serde_json::Value::Object(serde_json::Map::new())
+  };
+  if !root.is_object() {
+    root = serde_json::Value::Object(serde_json::Map::new());
+  }
+
+  let container = ensure_nested_object(&mut root, spec.config_key);
+  container.insert(
+    SERVER_NAME.to_string(),
+    transform_remote_config(agent_id, url),
+  );
+
+  write_value(&path, &root, spec.format)
+}
+
+pub fn uninstall_generic(agent_id: &str) -> Result<(), String> {
+  let spec = spec_for(agent_id).ok_or_else(|| format!("Unknown agent: {agent_id}"))?;
+  let Some(path) = config_path_for(agent_id) else {
+    return Ok(());
+  };
+  if !path.exists() {
+    return Ok(());
+  }
+
+  let mut root = read_value(&path, spec.format);
+  if !root.is_object() {
+    return Ok(());
+  }
+
+  let container = ensure_nested_object(&mut root, spec.config_key);
+  container.remove(SERVER_NAME);
+
+  write_value(&path, &root, spec.format)
+}
+
+pub fn list_agents_with_status(connected_overrides: &[(&str, bool)]) -> Vec<McpAgentInfo> {
+  AGENT_SPECS
+    .iter()
+    .map(|spec| {
+      let connected = connected_overrides
+        .iter()
+        .find(|(id, _)| *id == spec.id)
+        .map(|(_, c)| *c)
+        .unwrap_or_else(|| is_generic_agent_connected(spec.id));
+      McpAgentInfo {
+        id: spec.id.to_string(),
+        display_name: spec.display_name.to_string(),
+        category: spec.category,
+        connected,
+        detected: detect_agent_directory(spec.id),
+      }
+    })
+    .collect()
+}
+
+pub fn agent_exists(agent_id: &str) -> bool {
+  spec_for(agent_id).is_some()
+}

src-tauri/src/mcp_server.rs

@@ -33,6 +33,48 @@ pub struct McpTool {
   pub input_schema: serde_json::Value,
 }
 
+/// JavaScript executed in the target page to enumerate visible interactive
+/// elements. Returns a JSON string `{elements, count, truncated}` where
+/// `elements` is the newline-joined labeled list. Live references are stashed
+/// on `window.__donut_interactive` so subsequent `click_by_index` /
+/// `type_by_index` calls can resolve `index → Element` without round-tripping
+/// a selector. `__MAX_CHARS__` is substituted at call time.
+const INTERACTIVE_ELEMENTS_JS: &str = r#"(() => {
+  const SELECTORS = 'a, button, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="tab"], [role="menuitem"], [role="combobox"], [role="option"], [contenteditable=""], [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+  const ATTRS = ['type','name','id','role','aria-label','aria-checked','aria-expanded','placeholder','title','value','href','alt'];
+  const MAX_CHARS = __MAX_CHARS__;
+  const interactive = [];
+  const lines = [];
+  let truncated = false;
+  let total = 0;
+  const nodes = document.querySelectorAll(SELECTORS);
+  for (const el of nodes) {
+    if (el.disabled) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) continue;
+    const style = window.getComputedStyle(el);
+    if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') continue;
+    const tag = el.tagName.toLowerCase();
+    const parts = [];
+    for (const a of ATTRS) {
+      const v = el.getAttribute(a);
+      if (v) parts.push(a + '="' + String(v).slice(0,100).replace(/"/g,'\\"') + '"');
+    }
+    let text = '';
+    if (!['INPUT','TEXTAREA','SELECT'].includes(el.tagName)) {
+      text = (el.innerText || el.textContent || '').trim().replace(/\s+/g,' ').slice(0,100);
+    }
+    const idx = interactive.length;
+    const line = '[' + idx + ']<' + tag + (parts.length ? ' ' + parts.join(' ') : '') + '>' + text + '</' + tag + '>';
+    if (total + line.length + 1 > MAX_CHARS) { truncated = true; break; }
+    total += line.length + 1;
+    interactive.push(el);
+    lines.push(line);
+  }
+  window.__donut_interactive = interactive;
+  return JSON.stringify({ elements: lines.join('\n'), count: interactive.length, truncated: truncated });
+})()"#;
+
 #[derive(Debug, Deserialize)]
 #[allow(dead_code)]
 pub struct McpRequest {
@@ -1103,6 +1145,25 @@ impl McpServer {
           "required": ["profile_id"]
         }),
       },
+      // Cookie management tools
+      McpTool {
+        name: "import_profile_cookies".to_string(),
+        description: "Import cookies into a Wayfern or Camoufox profile from a JSON array (Puppeteer / EditThisCookie format) or a Netscape cookies.txt. Format is auto-detected. The browser must not be running.".to_string(),
+        input_schema: serde_json::json!({
+          "type": "object",
+          "properties": {
+            "profile_id": {
+              "type": "string",
+              "description": "The UUID of the target profile"
+            },
+            "content": {
+              "type": "string",
+              "description": "Raw cookie file content (JSON array or Netscape cookies.txt)"
+            }
+          },
+          "required": ["profile_id", "content"]
+        }),
+      },
       // Team lock tools
       McpTool {
         name: "get_team_locks".to_string(),
@@ -1354,6 +1415,76 @@ impl McpServer {
           "required": ["profile_id"]
         }),
       },
+      McpTool {
+        name: "get_interactive_elements".to_string(),
+        description: "Enumerate visible interactive elements on the page (buttons, links, inputs, etc.) as a compact indexed list. The returned indices are stable for the current page and can be used with click_by_index and type_by_index instead of guessing CSS selectors. Call this before click_by_index / type_by_index, and re-call after any navigation or major DOM change. Far cheaper in tokens than get_page_content for agentic browsing.".to_string(),
+        input_schema: serde_json::json!({
+          "type": "object",
+          "properties": {
+            "profile_id": {
+              "type": "string",
+              "description": "The UUID of the running profile"
+            },
+            "max_chars": {
+              "type": "integer",
+              "description": "Cap on the serialized output length (default: 40000). The response carries a `truncated` flag if the list was cut off — narrow the viewport or scroll if you need elements past the cutoff."
+            }
+          },
+          "required": ["profile_id"]
+        }),
+      },
+      McpTool {
+        name: "click_by_index".to_string(),
+        description: "Click the element at the given index from the last get_interactive_elements call. Indices are valid until the next navigation. If the click triggers navigation, waits for the new page to load before returning.".to_string(),
+        input_schema: serde_json::json!({
+          "type": "object",
+          "properties": {
+            "profile_id": {
+              "type": "string",
+              "description": "The UUID of the running profile"
+            },
+            "index": {
+              "type": "integer",
+              "description": "Zero-based index from the last get_interactive_elements response"
+            }
+          },
+          "required": ["profile_id", "index"]
+        }),
+      },
+      McpTool {
+        name: "type_by_index".to_string(),
+        description: "Focus the element at the given index from the last get_interactive_elements call and type text into it. Same human-like-typing defaults as type_text; only set instant=true when you're sure the target lacks bot detection.".to_string(),
+        input_schema: serde_json::json!({
+          "type": "object",
+          "properties": {
+            "profile_id": {
+              "type": "string",
+              "description": "The UUID of the running profile"
+            },
+            "index": {
+              "type": "integer",
+              "description": "Zero-based index from the last get_interactive_elements response"
+            },
+            "text": {
+              "type": "string",
+              "description": "Text to type into the element"
+            },
+            "clear_first": {
+              "type": "boolean",
+              "description": "Clear the input before typing (default: true)"
+            },
+            "instant": {
+              "type": "boolean",
+              "description": "Paste all text at once instead of human typing. WARNING: only use on targets without bot detection."
+            },
+            "wpm": {
+              "type": "number",
+              "description": "Target words per minute for human typing (default: 80)"
+            }
+          },
+          "required": ["profile_id", "index", "text"]
+        }),
+      },
     ]
   }
 
@@ -1562,6 +1693,8 @@ impl McpServer {
           .handle_assign_extension_group_to_profile(arguments)
           .await
       }
+      // Cookie management
+      "import_profile_cookies" => self.handle_import_profile_cookies(arguments).await,
       // Team lock tools
       "get_team_locks" => self.handle_get_team_locks().await,
       "get_team_lock_status" => self.handle_get_team_lock_status(arguments).await,
@@ -1602,6 +1735,18 @@ impl McpServer {
         Self::require_paid_subscription("Browser automation").await?;
         self.handle_get_page_info(arguments).await
       }
+      "get_interactive_elements" => {
+        Self::require_paid_subscription("Browser automation").await?;
+        self.handle_get_interactive_elements(arguments).await
+      }
+      "click_by_index" => {
+        Self::require_paid_subscription("Browser automation").await?;
+        self.handle_click_by_index(arguments).await
+      }
+      "type_by_index" => {
+        Self::require_paid_subscription("Browser automation").await?;
+        self.handle_type_by_index(arguments).await
+      }
       _ => Err(McpError {
         code: -32602,
         message: format!("Unknown tool: {tool_name}"),
@@ -2731,6 +2876,74 @@ impl McpServer {
     }))
   }
 
+  // Cookie management handlers
+  async fn handle_import_profile_cookies(
+    &self,
+    arguments: &serde_json::Value,
+  ) -> Result<serde_json::Value, McpError> {
+    let profile_id = arguments
+      .get("profile_id")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing profile_id".to_string(),
+      })?;
+
+    let content = arguments
+      .get("content")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing content".to_string(),
+      })?;
+
+    let app_handle = {
+      let inner = self.inner.lock().await;
+      inner
+        .app_handle
+        .as_ref()
+        .ok_or_else(|| McpError {
+          code: -32000,
+          message: "MCP server not properly initialized".to_string(),
+        })?
+        .clone()
+    };
+
+    let result =
+      crate::cookie_manager::CookieManager::import_cookies(&app_handle, profile_id, content)
+        .await
+        .map_err(|e| McpError {
+          code: -32000,
+          message: format!("Failed to import cookies: {e}"),
+        })?;
+
+    if let Some(scheduler) = crate::sync::get_global_scheduler() {
+      let profile_manager = crate::profile::manager::ProfileManager::instance();
+      if let Ok(profiles) = profile_manager.list_profiles() {
+        if let Some(profile) = profiles.iter().find(|p| p.id.to_string() == profile_id) {
+          if profile.is_sync_enabled() {
+            let pid = profile_id.to_string();
+            tauri::async_runtime::spawn(async move {
+              scheduler.queue_profile_sync(pid).await;
+            });
+          }
+        }
+      }
+    }
+
+    Ok(serde_json::json!({
+      "content": [{
+        "type": "text",
+        "text": format!(
+          "Import complete: {} imported, {} replaced, {} parse error(s)",
+          result.cookies_imported,
+          result.cookies_replaced,
+          result.errors.len()
+        )
+      }]
+    }))
+  }
+
   // VPN management handlers
   async fn handle_import_vpn(
     &self,
@@ -4263,6 +4476,11 @@ impl McpServer {
       .and_then(|v| v.as_str())
       .unwrap_or("text");
     let selector = arguments.get("selector").and_then(|v| v.as_str());
+    let max_chars = arguments
+      .get("max_chars")
+      .and_then(|v| v.as_u64())
+      .map(|n| n as usize)
+      .unwrap_or(40_000);
 
     let profile = self.get_running_profile(profile_id)?;
     let cdp_port = self.get_cdp_port_for_profile(&profile).await?;
@@ -4310,10 +4528,28 @@ impl McpServer {
       .and_then(|v| v.as_str())
       .unwrap_or("");
 
+    // Cap output so a 500 KB DOM dump doesn't blow out the agent's context.
+    // Slice on character boundaries (chars().take().collect()) rather than
+    // byte indices, since the latter would panic on multi-byte boundaries.
+    let total_chars = content.chars().count();
+    let (text, truncated) = if total_chars > max_chars {
+      (content.chars().take(max_chars).collect::<String>(), true)
+    } else {
+      (content.to_string(), false)
+    };
+
+    let payload = if truncated {
+      format!(
+        "{text}\n\n[truncated: showing {max_chars} of {total_chars} chars — call with a larger max_chars or use get_interactive_elements for an indexed view]"
+      )
+    } else {
+      text
+    };
+
     Ok(serde_json::json!({
       "content": [{
         "type": "text",
-        "text": content
+        "text": payload
       }]
     }))
   }
@@ -4361,6 +4597,267 @@ impl McpServer {
     }))
   }
 
+  async fn handle_get_interactive_elements(
+    &self,
+    arguments: &serde_json::Value,
+  ) -> Result<serde_json::Value, McpError> {
+    let profile_id = arguments
+      .get("profile_id")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing profile_id".to_string(),
+      })?;
+    let max_chars = arguments
+      .get("max_chars")
+      .and_then(|v| v.as_u64())
+      .map(|n| n as usize)
+      .unwrap_or(40_000);
+
+    let profile = self.get_running_profile(profile_id)?;
+    let cdp_port = self.get_cdp_port_for_profile(&profile).await?;
+    let ws_url = self.get_cdp_ws_url(cdp_port).await?;
+
+    // Walk the DOM for visible, non-disabled interactive elements, label them
+    // with a zero-based index, and cache the live references on
+    // `window.__donut_interactive` so click_by_index / type_by_index can
+    // resolve the index → Element without round-tripping a selector.
+    let js = INTERACTIVE_ELEMENTS_JS.replace("__MAX_CHARS__", &max_chars.to_string());
+
+    let result = self
+      .send_cdp(
+        &ws_url,
+        "Runtime.evaluate",
+        serde_json::json!({
+          "expression": js,
+          "returnByValue": true,
+        }),
+      )
+      .await?;
+
+    if let Some(exception) = result.get("exceptionDetails") {
+      let msg = exception
+        .get("exception")
+        .and_then(|e| e.get("description"))
+        .or_else(|| exception.get("text"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("Enumeration failed");
+      return Err(McpError {
+        code: -32000,
+        message: msg.to_string(),
+      });
+    }
+
+    let payload_str = result
+      .get("result")
+      .and_then(|r| r.get("value"))
+      .and_then(|v| v.as_str())
+      .unwrap_or("{}");
+
+    let payload: serde_json::Value =
+      serde_json::from_str(payload_str).unwrap_or(serde_json::json!({}));
+    let elements = payload
+      .get("elements")
+      .and_then(|v| v.as_str())
+      .unwrap_or("");
+    let count = payload.get("count").and_then(|v| v.as_u64()).unwrap_or(0);
+    let truncated = payload
+      .get("truncated")
+      .and_then(|v| v.as_bool())
+      .unwrap_or(false);
+
+    let header = if truncated {
+      format!("{count} interactive elements (truncated at {max_chars} chars — re-call with a larger max_chars or scroll the page):")
+    } else {
+      format!("{count} interactive elements:")
+    };
+
+    Ok(serde_json::json!({
+      "content": [{
+        "type": "text",
+        "text": format!("{header}\n{elements}")
+      }]
+    }))
+  }
+
+  async fn handle_click_by_index(
+    &self,
+    arguments: &serde_json::Value,
+  ) -> Result<serde_json::Value, McpError> {
+    let profile_id = arguments
+      .get("profile_id")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing profile_id".to_string(),
+      })?;
+    let index = arguments
+      .get("index")
+      .and_then(|v| v.as_u64())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing index".to_string(),
+      })?;
+
+    let profile = self.get_running_profile(profile_id)?;
+    let cdp_port = self.get_cdp_port_for_profile(&profile).await?;
+    let ws_url = self.get_cdp_ws_url(cdp_port).await?;
+
+    let js = format!(
+      r#"(() => {{
+        const arr = window.__donut_interactive;
+        if (!arr || !arr[{index}]) throw new Error('No element at index {index}. Call get_interactive_elements first or after navigation.');
+        const el = arr[{index}];
+        el.scrollIntoView({{block: 'center'}});
+        el.click();
+        return true;
+      }})()"#
+    );
+
+    let result = self
+      .send_cdp_and_wait_for_load(
+        &ws_url,
+        "Runtime.evaluate",
+        serde_json::json!({
+          "expression": js,
+          "returnByValue": true,
+        }),
+        10,
+      )
+      .await?;
+
+    if let Some(exception) = result.get("exceptionDetails") {
+      let msg = exception
+        .get("exception")
+        .and_then(|e| e.get("description"))
+        .or_else(|| exception.get("text"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("Click failed");
+      return Err(McpError {
+        code: -32000,
+        message: msg.to_string(),
+      });
+    }
+
+    Ok(serde_json::json!({
+      "content": [{
+        "type": "text",
+        "text": format!("Clicked element at index {index}")
+      }]
+    }))
+  }
+
+  async fn handle_type_by_index(
+    &self,
+    arguments: &serde_json::Value,
+  ) -> Result<serde_json::Value, McpError> {
+    let profile_id = arguments
+      .get("profile_id")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing profile_id".to_string(),
+      })?;
+    let index = arguments
+      .get("index")
+      .and_then(|v| v.as_u64())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing index".to_string(),
+      })?;
+    let text = arguments
+      .get("text")
+      .and_then(|v| v.as_str())
+      .ok_or_else(|| McpError {
+        code: -32602,
+        message: "Missing text".to_string(),
+      })?;
+    let clear_first = arguments
+      .get("clear_first")
+      .and_then(|v| v.as_bool())
+      .unwrap_or(true);
+    let instant = arguments
+      .get("instant")
+      .and_then(|v| v.as_bool())
+      .unwrap_or(false);
+    let wpm = arguments.get("wpm").and_then(|v| v.as_f64());
+
+    let profile = self.get_running_profile(profile_id)?;
+    let cdp_port = self.get_cdp_port_for_profile(&profile).await?;
+    let ws_url = self.get_cdp_ws_url(cdp_port).await?;
+
+    // Mirrors handle_type_text's focus step but resolves the element via the
+    // cached index instead of a CSS selector.
+    let focus_js = if clear_first {
+      format!(
+        r#"(() => {{
+          const arr = window.__donut_interactive;
+          if (!arr || !arr[{index}]) throw new Error('No element at index {index}. Call get_interactive_elements first or after navigation.');
+          const el = arr[{index}];
+          el.scrollIntoView({{block: 'center'}});
+          el.focus();
+          el.value = '';
+          el.dispatchEvent(new Event('input', {{bubbles: true}}));
+          return true;
+        }})()"#
+      )
+    } else {
+      format!(
+        r#"(() => {{
+          const arr = window.__donut_interactive;
+          if (!arr || !arr[{index}]) throw new Error('No element at index {index}. Call get_interactive_elements first or after navigation.');
+          const el = arr[{index}];
+          el.scrollIntoView({{block: 'center'}});
+          el.focus();
+          return true;
+        }})()"#
+      )
+    };
+
+    let focus_result = self
+      .send_cdp(
+        &ws_url,
+        "Runtime.evaluate",
+        serde_json::json!({
+          "expression": focus_js,
+          "returnByValue": true,
+        }),
+      )
+      .await?;
+
+    if let Some(exception) = focus_result.get("exceptionDetails") {
+      let msg = exception
+        .get("exception")
+        .and_then(|e| e.get("description"))
+        .or_else(|| exception.get("text"))
+        .and_then(|v| v.as_str())
+        .unwrap_or("Focus failed");
+      return Err(McpError {
+        code: -32000,
+        message: msg.to_string(),
+      });
+    }
+
+    if instant {
+      self
+        .send_cdp(
+          &ws_url,
+          "Input.insertText",
+          serde_json::json!({ "text": text }),
+        )
+        .await?;
+    } else {
+      self.send_human_keystrokes(&ws_url, text, wpm).await?;
+    }
+
+    Ok(serde_json::json!({
+      "content": [{
+        "type": "text",
+        "text": format!("Typed text into element at index {index}")
+      }]
+    }))
+  }
+
   // --- Synchronizer handlers ---
 
   async fn handle_start_sync_session(
@@ -4560,6 +5057,8 @@ mod tests {
     assert!(tool_names.contains(&"delete_extension"));
     assert!(tool_names.contains(&"delete_extension_group"));
     assert!(tool_names.contains(&"assign_extension_group_to_profile"));
+    // Cookie tools
+    assert!(tool_names.contains(&"import_profile_cookies"));
     // Team lock tools
     assert!(tool_names.contains(&"get_team_locks"));
     assert!(tool_names.contains(&"get_team_lock_status"));

src-tauri/src/profile/manager.rs

@@ -12,6 +12,20 @@ use std::path::{Path, PathBuf};
 use sysinfo::{Pid, ProcessRefreshKind, RefreshKind, System};
 use url::Url;
 
+fn atomic_write(path: &Path, data: &[u8]) -> std::io::Result<()> {
+  let tmp = path.with_extension(match path.extension().and_then(|e| e.to_str()) {
+    Some(ext) => format!("{ext}.tmp"),
+    None => "tmp".to_string(),
+  });
+  {
+    let mut f = fs::File::create(&tmp)?;
+    use std::io::Write;
+    f.write_all(data)?;
+    f.sync_all()?;
+  }
+  fs::rename(&tmp, path)
+}
+
 pub struct ProfileManager {
   camoufox_manager: &'static crate::camoufox_manager::CamoufoxManager,
   wayfern_manager: &'static crate::wayfern_manager::WayfernManager,
@@ -363,9 +377,18 @@ impl ProfileManager {
 
     log::info!("Profile '{name}' created successfully with ID: {profile_id}");
 
-    // Create user.js with common Firefox preferences and apply proxy settings if provided
-    // Skip for ephemeral profiles since the data dir is created at launch time
-    if !ephemeral {
+    // `apply_proxy_settings_to_profile` writes a Firefox-style user.js
+    // with the upstream proxy host. That is wrong for both supported
+    // browser types:
+    // - Camoufox: camoufox_manager rewrites user.js at every launch with
+    //   the local donut-proxy host; writing the upstream here leaves a
+    //   stale, wrong proxy in user.js until the next launch.
+    // - Wayfern: Chromium gets its proxy via `--proxy-pac-url=` at launch
+    //   (see wayfern_manager.rs) and never reads user.js.
+    // So we only call it for any unrecognized browser type that might be
+    // a true Firefox-family target (none currently). Ephemeral profiles
+    // skip regardless because their data dir is created at launch time.
+    if !ephemeral && !matches!(browser, "camoufox" | "wayfern") {
       if let Some(proxy_id_ref) = &proxy_id {
         if let Some(proxy_settings) = PROXY_MANAGER.get_proxy_settings_by_id(proxy_id_ref) {
           self.apply_proxy_settings_to_profile(&profile_data_dir, &proxy_settings, None)?;
@@ -396,7 +419,7 @@ impl ProfileManager {
     create_dir_all(&profile_uuid_dir)?;
 
     let json = serde_json::to_string_pretty(profile)?;
-    fs::write(profile_file, json)?;
+    atomic_write(&profile_file, json.as_bytes())?;
 
     // Update tag suggestions after any save
     let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
@@ -421,8 +444,26 @@ impl ProfileManager {
       if path.is_dir() {
         let metadata_file = path.join("metadata.json");
         if metadata_file.exists() {
-          let content = fs::read_to_string(&metadata_file)?;
-          let mut profile: BrowserProfile = serde_json::from_str(&content)?;
+          let content = match fs::read_to_string(&metadata_file) {
+            Ok(c) => c,
+            Err(e) => {
+              log::warn!(
+                "Skipping profile at {}: failed to read metadata.json: {e}",
+                path.display()
+              );
+              continue;
+            }
+          };
+          let mut profile: BrowserProfile = match serde_json::from_str(&content) {
+            Ok(p) => p,
+            Err(e) => {
+              log::warn!(
+                "Skipping profile at {}: invalid metadata.json: {e}",
+                path.display()
+              );
+              continue;
+            }
+          };
 
           // Backfill host_os from browser config for profiles created before
           // the field existed (or synced without it).
@@ -431,7 +472,7 @@ impl ProfileManager {
             if let Some(os) = inferred_os {
               profile.host_os = Some(os);
               if let Ok(json) = serde_json::to_string_pretty(&profile) {
-                let _ = fs::write(&metadata_file, json);
+                let _ = atomic_write(&metadata_file, json.as_bytes());
               }
             }
           }
@@ -473,6 +514,8 @@ impl ProfileManager {
     // Save profile with new name
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Keep tag suggestions up to date after name change (rebuild from all profiles)
     let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
       let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
@@ -678,6 +721,8 @@ impl ProfileManager {
       profile.group_id = group_id.clone();
       self.save_profile(&profile)?;
 
+      crate::sync::queue_profile_sync_if_eligible(&profile);
+
       // Auto-enable sync for new group if profile has sync enabled
       if profile.is_sync_enabled() {
         if let Some(ref new_group_id) = group_id {
@@ -732,6 +777,8 @@ impl ProfileManager {
     // Save profile
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Update global tag suggestions from all profiles
     let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
       let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
@@ -766,6 +813,8 @@ impl ProfileManager {
     // Save profile
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Emit profile note update event
     if let Err(e) = events::emit_empty("profiles-changed") {
       log::warn!("Warning: Failed to emit profiles-changed event: {e}");
@@ -792,6 +841,8 @@ impl ProfileManager {
 
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     if let Err(e) = events::emit("profile-updated", &profile) {
       log::warn!("Warning: Failed to emit profile update event: {e}");
     }
@@ -821,6 +872,8 @@ impl ProfileManager {
 
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     if let Err(e) = events::emit_empty("profiles-changed") {
       log::warn!("Warning: Failed to emit profiles-changed event: {e}");
     }
@@ -845,6 +898,8 @@ impl ProfileManager {
 
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     if let Err(e) = events::emit_empty("profiles-changed") {
       log::warn!("Warning: Failed to emit profiles-changed event: {e}");
     }
@@ -1060,6 +1115,8 @@ impl ProfileManager {
         format!("Failed to save profile: {e}").into()
       })?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     log::info!(
       "Camoufox configuration updated for profile '{}' (ID: {}).",
       profile.name,
@@ -1120,6 +1177,8 @@ impl ProfileManager {
         format!("Failed to save profile: {e}").into()
       })?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     log::info!(
       "Wayfern configuration updated for profile '{}' (ID: {}).",
       profile.name,
@@ -1174,6 +1233,8 @@ impl ProfileManager {
         format!("Failed to save profile: {e}").into()
       })?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Auto-enable sync for new proxy if profile has sync enabled
     if profile.is_sync_enabled() {
       if let Some(ref new_proxy_id) = proxy_id {
@@ -1184,18 +1245,34 @@ impl ProfileManager {
       }
     }
 
-    // Update on-disk browser profile config immediately
-    if let Some(proxy_id_ref) = &proxy_id {
-      if let Some(proxy_settings) = PROXY_MANAGER.get_proxy_settings_by_id(proxy_id_ref) {
-        let profiles_dir = self.get_profiles_dir();
-        let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-        self
-          .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
-          .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
-            format!("Failed to apply proxy settings: {e}").into()
-          })?;
+    // Update on-disk browser profile config immediately.
+    // Both supported browser types ignore this write (Camoufox rewrites
+    // user.js at launch with the local donut-proxy host, Wayfern takes its
+    // proxy via `--proxy-pac-url=` and never reads user.js), and for
+    // Camoufox specifically writing the upstream host here would leave a
+    // stale, wrong proxy in user.js until the next launch.
+    if !matches!(profile.browser.as_str(), "camoufox" | "wayfern") {
+      if let Some(proxy_id_ref) = &proxy_id {
+        if let Some(proxy_settings) = PROXY_MANAGER.get_proxy_settings_by_id(proxy_id_ref) {
+          let profiles_dir = self.get_profiles_dir();
+          let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
+          self
+            .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
+            .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
+              format!("Failed to apply proxy settings: {e}").into()
+            })?;
+        } else {
+          // Proxy ID provided but proxy not found, disable proxy
+          let profiles_dir = self.get_profiles_dir();
+          let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
+          self
+            .disable_proxy_settings_in_profile(&profile_path)
+            .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
+              format!("Failed to disable proxy settings: {e}").into()
+            })?;
+        }
       } else {
-        // Proxy ID provided but proxy not found, disable proxy
+        // No proxy ID provided, disable proxy
         let profiles_dir = self.get_profiles_dir();
         let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
         self
@@ -1204,15 +1281,6 @@ impl ProfileManager {
             format!("Failed to disable proxy settings: {e}").into()
           })?;
       }
-    } else {
-      // No proxy ID provided, disable proxy
-      let profiles_dir = self.get_profiles_dir();
-      let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-      self
-        .disable_proxy_settings_in_profile(&profile_path)
-        .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
-          format!("Failed to disable proxy settings: {e}").into()
-        })?;
     }
 
     // Emit profile update event so frontend UIs can refresh immediately (e.g. proxy manager)
@@ -1263,6 +1331,8 @@ impl ProfileManager {
         format!("Failed to save profile: {e}").into()
       })?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Auto-enable sync for the new VPN if profile has sync enabled.
     if profile.is_sync_enabled() {
       if let Some(ref new_vpn_id) = vpn_id {
@@ -1300,6 +1370,8 @@ impl ProfileManager {
     profile.extension_group_id = extension_group_id.clone();
     self.save_profile(&profile)?;
 
+    crate::sync::queue_profile_sync_if_eligible(&profile);
+
     // Auto-enable sync for the new extension group if profile has sync
     // enabled. The helper is sync internally; we fire-and-forget through
     // the async runtime so any I/O doesn't block this caller.
@@ -1453,13 +1525,18 @@ impl ProfileManager {
       };
 
       let mut merged = latest_profile.clone();
+      let mut detected_stop = false;
 
       if let Some(pid) = found_pid {
         if merged.process_id != Some(pid) {
+          let old_pid = merged.process_id;
           merged.process_id = Some(pid);
           if let Err(e) = self.save_profile(&merged) {
             log::warn!("Warning: Failed to update profile with new PID: {e}");
           }
+          if let Some(prev) = old_pid {
+            let _ = crate::proxy_manager::PROXY_MANAGER.update_proxy_pid(prev, pid);
+          }
         }
       } else if merged.process_id.is_some() {
         // Clear the PID if no process found
@@ -1467,6 +1544,15 @@ impl ProfileManager {
         if let Err(e) = self.save_profile(&merged) {
           log::warn!("Warning: Failed to clear profile PID: {e}");
         }
+        detected_stop = true;
+      }
+
+      if detected_stop {
+        if let Some(updated) = crate::auto_updater::AutoUpdater::instance()
+          .update_profile_to_latest_installed(&app_handle, &merged)
+        {
+          merged = updated;
+        }
       }
 
       // Emit profile update event to frontend
@@ -1481,7 +1567,7 @@ impl ProfileManager {
   // Check Camoufox status using CamoufoxManager
   async fn check_camoufox_status(
     &self,
-    _app_handle: &tauri::AppHandle,
+    app_handle: &tauri::AppHandle,
     profile: &BrowserProfile,
   ) -> Result<bool, Box<dyn std::error::Error + Send + Sync>> {
     let launcher = self.camoufox_manager;
@@ -1510,10 +1596,14 @@ impl ProfileManager {
           };
 
           if latest.process_id != camoufox_process.processId {
+            let old_pid = latest.process_id;
             latest.process_id = camoufox_process.processId;
             if let Err(e) = self.save_profile(&latest) {
               log::warn!("Warning: Failed to update Camoufox profile with process info: {e}");
             }
+            if let (Some(prev), Some(new)) = (old_pid, camoufox_process.processId) {
+              let _ = crate::proxy_manager::PROXY_MANAGER.update_proxy_pid(prev, new);
+            }
 
             // Emit profile update event to frontend
             if let Err(e) = events::emit("profile-updated", &latest) {
@@ -1555,6 +1645,12 @@ impl ProfileManager {
               log::warn!("Warning: Failed to clear Camoufox profile process info: {e}");
             }
 
+            if let Some(updated) = crate::auto_updater::AutoUpdater::instance()
+              .update_profile_to_latest_installed(app_handle, &latest)
+            {
+              latest = updated;
+            }
+
             if let Err(e) = events::emit("profile-updated", &latest) {
               log::warn!("Warning: Failed to emit profile update event: {e}");
             }
@@ -1591,6 +1687,12 @@ impl ProfileManager {
               );
             }
 
+            if let Some(updated) = crate::auto_updater::AutoUpdater::instance()
+              .update_profile_to_latest_installed(app_handle, &latest)
+            {
+              latest = updated;
+            }
+
             // Emit profile update event to frontend
             if let Err(e3) = events::emit("profile-updated", &latest) {
               log::warn!("Warning: Failed to emit profile update event: {e3}");
@@ -1605,7 +1707,7 @@ impl ProfileManager {
   // Check Wayfern status using WayfernManager
   async fn check_wayfern_status(
     &self,
-    _app_handle: &tauri::AppHandle,
+    app_handle: &tauri::AppHandle,
     profile: &BrowserProfile,
   ) -> Result<bool, Box<dyn std::error::Error + Send + Sync>> {
     let manager = self.wayfern_manager;
@@ -1634,10 +1736,14 @@ impl ProfileManager {
           };
 
           if latest.process_id != wayfern_process.processId {
+            let old_pid = latest.process_id;
             latest.process_id = wayfern_process.processId;
             if let Err(e) = self.save_profile(&latest) {
               log::warn!("Warning: Failed to update Wayfern profile with process info: {e}");
             }
+            if let (Some(prev), Some(new)) = (old_pid, wayfern_process.processId) {
+              let _ = crate::proxy_manager::PROXY_MANAGER.update_proxy_pid(prev, new);
+            }
 
             // Emit profile update event to frontend
             if let Err(e) = events::emit("profile-updated", &latest) {
@@ -1679,6 +1785,12 @@ impl ProfileManager {
               log::warn!("Warning: Failed to clear Wayfern profile process info: {e}");
             }
 
+            if let Some(updated) = crate::auto_updater::AutoUpdater::instance()
+              .update_profile_to_latest_installed(app_handle, &latest)
+            {
+              latest = updated;
+            }
+
             if let Err(e) = events::emit("profile-updated", &latest) {
               log::warn!("Warning: Failed to emit profile update event: {e}");
             }
@@ -1703,10 +1815,17 @@ impl ProfileManager {
       "user_pref(\"startup.homepage_welcome_url\", \"\");".to_string(),
       "user_pref(\"startup.homepage_welcome_url.additional\", \"\");".to_string(),
       "user_pref(\"startup.homepage_override_url\", \"\");".to_string(),
-      // Keep extension updates enabled and allow sideloaded extensions
+      // Keep extension updates enabled and allow sideloaded extensions.
+      // - autoDisableScopes=0: profile-installed extensions are enabled by default.
+      // - startupScanScopes=1: rescan SCOPE_PROFILE on each launch so freshly
+      //   dropped .xpi files in <profile>/extensions/ get registered.
+      // - signatures.required=false: accept unsigned/dev .xpi files. Camoufox
+      //   is built without MOZ_REQUIRE_SIGNING so this is honored.
       "user_pref(\"extensions.update.enabled\", true);".to_string(),
       "user_pref(\"extensions.update.autoUpdateDefault\", true);".to_string(),
       "user_pref(\"extensions.autoDisableScopes\", 0);".to_string(),
+      "user_pref(\"extensions.startupScanScopes\", 1);".to_string(),
+      "user_pref(\"xpinstall.signatures.required\", false);".to_string(),
       // Completely disable browser update checking
       "user_pref(\"app.update.enabled\", false);".to_string(),
       "user_pref(\"app.update.auto\", false);".to_string(),

src-tauri/src/profile/password.rs

@@ -292,10 +292,45 @@ pub async fn set_profile_password(profile_id: String, password: String) -> Resul
     .map_err(err_internal)?;
 
   cache_key(id, key);
+  crate::sync::queue_profile_sync_if_eligible(&profile);
   emit_profiles_changed();
   Ok(())
 }
 
+/// Verify a profile password without unlocking. Used by the Settings UI's
+/// "Validate" button so users can confirm they remember the password without
+/// performing a destructive change. Honors the same lockout schedule as
+/// `unlock_profile` so a brute-force attacker can't bypass rate-limiting by
+/// hammering this command.
+#[tauri::command]
+pub async fn verify_profile_password(profile_id: String, password: String) -> Result<(), String> {
+  let id = parse_uuid(&profile_id)?;
+  let profile = load_profile(&id)?;
+  if !profile.password_protected {
+    return Err(err_code("PROFILE_NOT_PROTECTED"));
+  }
+  if let Err(secs) = check_lockout(&id) {
+    return Err(err_with("LOCKED_OUT", &[("seconds", secs.to_string())]));
+  }
+  let salt = profile
+    .encryption_salt
+    .as_deref()
+    .ok_or_else(|| err_code("PROFILE_MISSING_SALT"))?;
+  let key = derive_profile_key(&password, salt).map_err(err_internal)?;
+  let dir = profile_data_dir(&profile);
+  match verify_key_against_dir(&key, &dir) {
+    Ok(()) => {
+      clear_failed_attempts(&id);
+      Ok(())
+    }
+    Err(crate::profile::encryption::PasswordError::WrongPassword) => {
+      record_failed_attempt(id);
+      Err(err_code("INCORRECT_PASSWORD"))
+    }
+    Err(other) => Err(err_internal(other)),
+  }
+}
+
 #[tauri::command]
 pub async fn unlock_profile(profile_id: String, password: String) -> Result<(), String> {
   let id = parse_uuid(&profile_id)?;
@@ -396,6 +431,7 @@ pub async fn change_profile_password(
 
   drop_cached_key(&id);
   cache_key(id, new_key);
+  crate::sync::queue_profile_sync_if_eligible(&profile);
   emit_profiles_changed();
   Ok(())
 }
@@ -464,6 +500,7 @@ pub async fn remove_profile_password(profile_id: String, password: String) -> Re
     .map_err(err_internal)?;
 
   drop_cached_key(&id);
+  crate::sync::queue_profile_sync_if_eligible(&profile);
   emit_profiles_changed();
   Ok(())
 }
@@ -637,22 +674,31 @@ pub fn complete_after_quit_blocking(
   result
 }
 
-/// Async re-encrypt of a password-protected profile's ephemeral dir back to
-/// disk, called after the browser process exits. Optionally purges the
-/// ephemeral dir + cached key based on the global setting.
-pub fn complete_after_quit(profile: &crate::profile::BrowserProfile) {
+/// Re-encrypt a password-protected profile's ephemeral dir back to the
+/// on-disk encrypted dir after the browser process exits. Optionally purges
+/// the ephemeral dir + cached key based on the global setting. Returns the
+/// number of files re-encrypted (`None` when nothing to do or the profile
+/// isn't protected).
+///
+/// Callers that release a queued sync run after a browser quit MUST await
+/// this future — releasing sync while re-encryption is still in-flight
+/// uploads the stale on-disk snapshot and leaves the fresh ciphertext
+/// orphaned until the next scheduler tick.
+pub async fn complete_after_quit_and_wait(
+  profile: &crate::profile::BrowserProfile,
+) -> Option<usize> {
   if !profile.password_protected {
-    return;
+    return None;
   }
   let keep_decrypted = read_keep_decrypted_setting();
   let profile = profile.clone();
 
-  tauri::async_runtime::spawn(async move {
-    let _ = tokio::task::spawn_blocking(move || {
-      complete_after_quit_blocking(&profile, keep_decrypted);
+  tokio::task::spawn_blocking(move || complete_after_quit_blocking(&profile, keep_decrypted))
+    .await
+    .unwrap_or_else(|e| {
+      log::error!("complete_after_quit_and_wait join error: {e}");
+      None
     })
-    .await;
-  });
 }
 
 #[cfg(test)]

src-tauri/src/proxy_server.rs

@@ -1147,14 +1147,17 @@ pub async fn handle_proxy_connection(
           }
         }
 
-        let _ = handle_connect_from_buffer(
+        if let Err(e) = handle_connect_from_buffer(
           stream,
           full_request,
           upstream_url,
           bypass_matcher,
           blocklist_matcher,
         )
-        .await;
+        .await
+        {
+          log::warn!("CONNECT tunnel ended with error: {e}");
+        }
         return;
       }
 
@@ -1449,6 +1452,13 @@ async fn handle_connect_from_buffer(
     tracker.record_request(&domain, 0, 0);
   }
 
+  log::info!(
+    "CONNECT {}:{} (upstream={})",
+    target_host,
+    target_port,
+    upstream_url.as_deref().unwrap_or("DIRECT")
+  );
+
   // Connect to target (directly or via upstream proxy).
   // Returns a BoxedAsyncStream so all upstream types (plain TCP, SOCKS,
   // Shadowsocks) share the same bidirectional-copy tunnel code below.
@@ -1503,12 +1513,46 @@ async fn handle_connect_from_buffer(
 
           let mut buffer = [0u8; 4096];
           let n = proxy_stream.read(&mut buffer).await?;
-          let response = String::from_utf8_lossy(&buffer[..n]);
+          let response_full = String::from_utf8_lossy(&buffer[..n]).to_string();
+          let status_line = response_full.lines().next().unwrap_or("").to_string();
 
-          if !response.starts_with("HTTP/1.1 200") && !response.starts_with("HTTP/1.0 200") {
-            return Err(format!("Upstream proxy CONNECT failed: {}", response).into());
+          if !response_full.starts_with("HTTP/1.1 200")
+            && !response_full.starts_with("HTTP/1.0 200")
+          {
+            log::warn!(
+              "Upstream CONNECT to {}:{} via {}:{} rejected: {}",
+              target_host,
+              target_port,
+              proxy_host,
+              proxy_port,
+              status_line
+            );
+            return Err(format!("Upstream proxy CONNECT failed: {response_full}").into());
           }
 
+          // Detect the buffer-drop race where the upstream returned the
+          // 200 response coalesced with destination bytes — those bytes
+          // would otherwise be silently discarded and the browser would
+          // see a TLS stream missing its first record.
+          let header_end_in_buffer = response_full.find("\r\n\r\n").map(|i| i + 4);
+          if let Some(end) = header_end_in_buffer {
+            if end < n {
+              log::warn!(
+                "Upstream CONNECT response coalesced {} byte(s) of payload — these would be dropped without forwarding",
+                n - end
+              );
+            }
+          }
+
+          log::info!(
+            "Upstream CONNECT to {}:{} via {}:{} accepted ({})",
+            target_host,
+            target_port,
+            proxy_host,
+            proxy_port,
+            status_line
+          );
+
           Box::new(proxy_stream)
         }
         "socks4" | "socks5" => {

src-tauri/src/settings_manager.rs

@@ -52,7 +52,7 @@ pub struct AppSettings {
   #[serde(default)]
   pub launch_on_login_declined: bool, // User permanently declined the launch-on-login prompt
   #[serde(default)]
-  pub language: Option<String>, // ISO 639-1: "en", "es", "pt", "fr", "zh", "ja", "ru", or None for system default
+  pub language: Option<String>, // ISO 639-1: "en", "es", "pt", "fr", "zh", "ja", "ko", "ru", or None for system default
   #[serde(default)]
   pub window_resize_warning_dismissed: bool,
   #[serde(default)]
@@ -991,6 +991,17 @@ pub async fn save_sync_settings(
   sync_server_url: Option<String>,
   sync_token: Option<String>,
 ) -> Result<SyncSettings, String> {
+  // Cloud login and self-hosted sync share the same sync engine and a
+  // profile can't be sync'd to two backends at once. Block any *write*
+  // (non-null URL or token) while the user is signed into their cloud
+  // account — the clearing path (both `None`) is always allowed so logged-
+  // in users can wipe a stale self-hosted config that pre-dates their
+  // sign-in.
+  let is_setting_self_hosted = sync_server_url.is_some() || sync_token.is_some();
+  if is_setting_self_hosted && crate::cloud_auth::CLOUD_AUTH.is_logged_in().await {
+    return Err(serde_json::json!({ "code": "SELF_HOSTED_REQUIRES_LOGOUT" }).to_string());
+  }
+
   let manager = SettingsManager::instance();
 
   manager

src-tauri/src/sync/encryption.rs

@@ -346,6 +346,14 @@ pub fn check_has_e2e_password() -> bool {
   has_e2e_password()
 }
 
+#[tauri::command]
+pub fn verify_e2e_password(password: String) -> Result<bool, String> {
+  match load_e2e_password()? {
+    Some(stored) => Ok(stored == password),
+    None => Err(serde_json::json!({ "code": "NO_E2E_PASSWORD_SET" }).to_string()),
+  }
+}
+
 #[tauri::command]
 pub async fn delete_e2e_password() -> Result<(), String> {
   enforce_team_owner_for_encryption_change().await?;

src-tauri/src/sync/engine.rs

@@ -10,11 +10,48 @@ use chrono::{DateTime, Utc};
 use std::collections::{HashMap, HashSet};
 use std::fs;
 use std::path::{Path, PathBuf};
-use std::sync::atomic::{AtomicU64, Ordering};
-use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, AtomicU64, Ordering};
+use std::sync::{Arc, Mutex as StdMutex};
 use std::time::Instant;
 use tokio::sync::{Mutex as TokioMutex, Semaphore};
 
+lazy_static::lazy_static! {
+  static ref SYNC_CANCEL_FLAGS: StdMutex<HashMap<String, Arc<AtomicBool>>> =
+    StdMutex::new(HashMap::new());
+}
+
+fn register_sync_cancel(profile_id: &str) -> Arc<AtomicBool> {
+  let mut map = SYNC_CANCEL_FLAGS.lock().unwrap();
+  let flag = Arc::new(AtomicBool::new(false));
+  map.insert(profile_id.to_string(), flag.clone());
+  flag
+}
+
+fn clear_sync_cancel(profile_id: &str) {
+  SYNC_CANCEL_FLAGS.lock().unwrap().remove(profile_id);
+}
+
+pub fn request_sync_cancel(profile_id: &str) -> bool {
+  if let Some(flag) = SYNC_CANCEL_FLAGS.lock().unwrap().get(profile_id) {
+    flag.store(true, Ordering::SeqCst);
+    true
+  } else {
+    false
+  }
+}
+
+struct SyncCancelGuard(String);
+impl Drop for SyncCancelGuard {
+  fn drop(&mut self) {
+    clear_sync_cancel(&self.0);
+  }
+}
+
+#[tauri::command]
+pub async fn cancel_profile_sync(profile_id: String) -> Result<bool, String> {
+  Ok(request_sync_cancel(&profile_id))
+}
+
 /// Upload/download concurrency limit
 const SYNC_CONCURRENCY: usize = 32;
 
@@ -391,6 +428,9 @@ impl SyncEngine {
     let profile_dir = profiles_dir.join(profile.id.to_string());
     let profile_id = profile.id.to_string();
 
+    let cancel_flag = register_sync_cancel(&profile_id);
+    let _cancel_guard = SyncCancelGuard(profile_id.clone());
+
     // Determine team key prefix for team profiles
     let key_prefix = Self::get_team_key_prefix(profile).await;
 
@@ -514,10 +554,16 @@ impl SyncEngine {
           &diff.files_to_upload,
           encryption_key.as_ref(),
           &key_prefix,
+          &cancel_flag,
         )
         .await?;
     }
 
+    if cancel_flag.load(Ordering::Relaxed) {
+      log::info!("Sync cancelled for profile {} after uploads", profile_id);
+      return Err(SyncError::Cancelled);
+    }
+
     // Perform downloads
     if !diff.files_to_download.is_empty() {
       self
@@ -529,10 +575,16 @@ impl SyncEngine {
           &diff.files_to_download,
           encryption_key.as_ref(),
           &key_prefix,
+          &cancel_flag,
         )
         .await?;
     }
 
+    if cancel_flag.load(Ordering::Relaxed) {
+      log::info!("Sync cancelled for profile {} after downloads", profile_id);
+      return Err(SyncError::Cancelled);
+    }
+
     // Delete local files that don't exist remotely (when remote is newer)
     for path in &diff.files_to_delete_local {
       let file_path = profile_dir.join(path);
@@ -823,6 +875,7 @@ impl SyncEngine {
     files: &[super::manifest::ManifestFileEntry],
     encryption_key: Option<&[u8; 32]>,
     key_prefix: &str,
+    cancel_flag: &Arc<AtomicBool>,
   ) -> SyncResult<()> {
     if files.is_empty() {
       return Ok(());
@@ -930,6 +983,13 @@ impl SyncEngine {
     let save_counter = Arc::new(AtomicU64::new(0));
 
     for file in &files_to_process {
+      if cancel_flag.load(Ordering::Relaxed) {
+        log::info!(
+          "Upload cancelled for profile {} before scheduling more files",
+          profile_id_owned
+        );
+        break;
+      }
       let sem = semaphore.clone();
       let file_path = profile_dir.join(&file.path);
       let relative_path = file.path.clone();
@@ -958,6 +1018,7 @@ impl SyncEngine {
       let resume_state = resume_state.clone();
       let save_counter = save_counter.clone();
       let profile_dir_clone = profile_dir.clone();
+      let cancel_flag_task = cancel_flag.clone();
       let content_type = mime_guess::from_path(&file.path)
         .first()
         .map(|m| m.to_string());
@@ -965,6 +1026,10 @@ impl SyncEngine {
       handles.push(tokio::spawn(async move {
         let _permit = sem.acquire().await.unwrap();
 
+        if cancel_flag_task.load(Ordering::Relaxed) {
+          return Err((relative_path, "cancelled".to_string(), false));
+        }
+
         let data = match fs::read(&file_path) {
           Ok(d) => d,
           Err(e) if e.kind() == std::io::ErrorKind::NotFound && !critical => {
@@ -1095,6 +1160,7 @@ impl SyncEngine {
     files: &[super::manifest::ManifestFileEntry],
     encryption_key: Option<&[u8; 32]>,
     key_prefix: &str,
+    cancel_flag: &Arc<AtomicBool>,
   ) -> SyncResult<()> {
     if files.is_empty() {
       return Ok(());
@@ -1194,6 +1260,13 @@ impl SyncEngine {
     let save_counter = Arc::new(AtomicU64::new(0));
 
     for file in &files_to_process {
+      if cancel_flag.load(Ordering::Relaxed) {
+        log::info!(
+          "Download cancelled for profile {} before scheduling more files",
+          profile_id_owned
+        );
+        break;
+      }
       let sem = semaphore.clone();
       let file_path = profile_dir.join(&file.path);
       let relative_path = file.path.clone();
@@ -1222,13 +1295,21 @@ impl SyncEngine {
       let resume_state = resume_state.clone();
       let save_counter = save_counter.clone();
       let profile_dir_clone = profile_dir.clone();
+      let cancel_flag_task = cancel_flag.clone();
 
       handles.push(tokio::spawn(async move {
         let _permit = sem.acquire().await.unwrap();
 
+        if cancel_flag_task.load(Ordering::Relaxed) {
+          return Err((relative_path, "cancelled".to_string(), false));
+        }
+
         // Retry loop for network downloads
         let mut last_err = String::new();
         for attempt in 0..MAX_FILE_RETRIES {
+          if cancel_flag_task.load(Ordering::Relaxed) {
+            return Err((relative_path, "cancelled".to_string(), false));
+          }
           match client.download_bytes(&url).await {
             Ok(data) => {
               let write_data = if let Some(ref key) = enc_key {
@@ -2361,6 +2442,8 @@ impl SyncEngine {
       );
     }
     if !manifest.files.is_empty() {
+      let cancel_flag = register_sync_cancel(profile_id);
+      let _cancel_guard = SyncCancelGuard(profile_id.to_string());
       self
         .download_profile_files(
           app_handle,
@@ -2370,6 +2453,7 @@ impl SyncEngine {
           &manifest.files,
           encryption_key.as_ref(),
           key_prefix,
+          &cancel_flag,
         )
         .await?;
     }
@@ -2506,8 +2590,46 @@ impl SyncEngine {
       profiles_to_check.len()
     );
 
-    // For each remote profile, check if it exists locally and download if missing
+    // For each remote profile, check if it exists locally and download if missing.
+    // Skip any profile that has a tombstone — a leftover manifest under a
+    // tombstoned id means delete_prefix raced or partially failed, and
+    // re-downloading it here is what surfaced the "Browsing keeps re-syncing"
+    // bug after a delete.
     for (profile_id, key_prefix) in &profiles_to_check {
+      let personal_tombstone = format!("tombstones/profiles/{}.json", profile_id);
+      let has_personal_tombstone = matches!(
+        self.client.stat(&personal_tombstone).await,
+        Ok(stat) if stat.exists
+      );
+      let team_tombstone_key = if key_prefix.is_empty() {
+        None
+      } else {
+        Some(format!(
+          "{}tombstones/profiles/{}.json",
+          key_prefix, profile_id
+        ))
+      };
+      let has_team_tombstone = if let Some(ref tk) = team_tombstone_key {
+        matches!(self.client.stat(tk).await, Ok(stat) if stat.exists)
+      } else {
+        false
+      };
+      if has_personal_tombstone || has_team_tombstone {
+        log::info!(
+          "Skipping download of tombstoned profile {} (clearing leftover remote files)",
+          profile_id
+        );
+        let prefix = format!("{}profiles/{}/", key_prefix, profile_id);
+        if let Err(e) = self.client.delete_prefix(&prefix, None).await {
+          log::warn!(
+            "Failed to clear stale remote files for tombstoned profile {}: {}",
+            profile_id,
+            e
+          );
+        }
+        continue;
+      }
+
       match self
         .download_profile_if_missing(app_handle, profile_id, key_prefix)
         .await
@@ -2571,6 +2693,24 @@ impl SyncEngine {
         };
 
         if has_personal_tombstone || has_team_tombstone {
+          // Originator guard: re-read the profile right before deleting. If the
+          // local user disabled sync between the snapshot above and this stat
+          // call, they're the one who wrote this tombstone — keep their local
+          // copy. Tombstones must delete remote-originated changes, never the
+          // sender's own data. (Caused mass local deletion in v0.24.x.)
+          let still_sync_enabled = profile_manager
+            .list_profiles()
+            .unwrap_or_default()
+            .iter()
+            .find(|p| p.id.to_string() == *pid)
+            .is_some_and(|p| p.is_sync_enabled());
+          if !still_sync_enabled {
+            log::info!(
+              "Profile {} has a tombstone but sync is no longer enabled locally — keeping local copy (originating device)",
+              pid
+            );
+            continue;
+          }
           log::info!(
             "Profile {} has remote tombstone, deleting locally (deleted on another device)",
             pid
@@ -2948,6 +3088,11 @@ pub async fn set_profile_sync_mode(
     return Err("Cannot modify sync settings for a cross-OS profile".to_string());
   }
 
+  let enabling_now = new_mode != SyncMode::Disabled;
+  if enabling_now && profile.process_id.is_some() {
+    return Err(serde_json::json!({ "code": "PROFILE_RUNNING" }).to_string());
+  }
+
   if profile.ephemeral {
     return Err("Cannot enable sync for an ephemeral profile".to_string());
   }
@@ -3029,6 +3174,22 @@ pub async fn set_profile_sync_mode(
 
   let _ = events::emit("profiles-changed", ());
 
+  // When (re-)enabling sync, clear any stale tombstone from a previous
+  // disable on this device. Otherwise the next reconcile on another
+  // device — or even a race on this one — would see the tombstone and
+  // delete the freshly re-uploaded data.
+  if enabling {
+    if let Ok(engine) = SyncEngine::create_from_settings(&app_handle).await {
+      let key_prefix = SyncEngine::get_team_key_prefix(&profile).await;
+      let personal_tombstone = format!("tombstones/profiles/{}.json", profile_id);
+      let _ = engine.client.delete(&personal_tombstone, None).await;
+      if !key_prefix.is_empty() {
+        let team_tombstone = format!("{}tombstones/profiles/{}.json", key_prefix, profile_id);
+        let _ = engine.client.delete(&team_tombstone, None).await;
+      }
+    }
+  }
+
   if enabling {
     let is_running = profile.process_id.is_some();
 
@@ -3084,28 +3245,25 @@ pub async fn set_profile_sync_mode(
       log::warn!("Scheduler not initialized, sync will not start");
     }
   } else {
-    // Delete remote data when disabling sync
+    // Delete remote data when disabling sync. Awaited (not spawned) so the
+    // tombstone write completes before this command returns. A previous
+    // tokio::spawn here allowed the tombstone-write to land *after* a fast
+    // user-triggered re-enable's tombstone-clear, re-introducing the
+    // tombstone and tripping the reconcile-pass deletion of a profile the
+    // user had just re-enabled (e.g. Personal (z.ai) on 2026-05-20).
     if old_mode != SyncMode::Disabled {
-      let profile_id_clone = profile_id.clone();
-      let app_handle_clone = app_handle.clone();
-      tokio::spawn(async move {
-        match SyncEngine::create_from_settings(&app_handle_clone).await {
-          Ok(engine) => {
-            if let Err(e) = engine.delete_profile(&profile_id_clone).await {
-              log::warn!(
-                "Failed to delete profile {} from sync: {}",
-                profile_id_clone,
-                e
-              );
-            } else {
-              log::info!("Profile {} deleted from sync service", profile_id_clone);
-            }
-          }
-          Err(e) => {
-            log::debug!("Sync not configured, skipping remote deletion: {}", e);
+      match SyncEngine::create_from_settings(&app_handle).await {
+        Ok(engine) => {
+          if let Err(e) = engine.delete_profile(&profile_id).await {
+            log::warn!("Failed to delete profile {} from sync: {}", profile_id, e);
+          } else {
+            log::info!("Profile {} deleted from sync service", profile_id);
           }
         }
-      });
+        Err(e) => {
+          log::debug!("Sync not configured, skipping remote deletion: {}", e);
+        }
+      }
     }
 
     let _ = events::emit(
@@ -3183,6 +3341,28 @@ pub async fn sync_profile(app_handle: tauri::AppHandle, profile_id: String) -> R
   trigger_sync_for_profile(app_handle, profile_id).await
 }
 
+/// Ensure the device has either a cloud login or a self-hosted server URL + token.
+/// Returns a JSON error code string consumable by the frontend translator.
+async fn ensure_sync_configured(app_handle: &tauri::AppHandle) -> Result<(), String> {
+  let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
+  if cloud_logged_in {
+    return Ok(());
+  }
+  let manager = SettingsManager::instance();
+  let settings = manager.load_settings().map_err(|e| {
+    serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e.to_string() } })
+      .to_string()
+  })?;
+  if settings.sync_server_url.is_none() {
+    return Err(serde_json::json!({ "code": "SYNC_NOT_CONFIGURED" }).to_string());
+  }
+  let token = manager.get_sync_token(app_handle).await.ok().flatten();
+  if token.is_none() {
+    return Err(serde_json::json!({ "code": "SYNC_NOT_CONFIGURED" }).to_string());
+  }
+  Ok(())
+}
+
 pub async fn trigger_sync_for_profile(
   app_handle: tauri::AppHandle,
   profile_id: String,
@@ -3222,43 +3402,29 @@ pub async fn set_proxy_sync_enabled(
   let proxy = proxies
     .iter()
     .find(|p| p.id == proxy_id)
-    .ok_or_else(|| format!("Proxy with ID '{proxy_id}' not found"))?;
+    .ok_or_else(|| serde_json::json!({ "code": "PROXY_NOT_FOUND" }).to_string())?;
 
   // Block modifying sync for cloud-managed proxies
   if proxy.is_cloud_managed {
-    return Err("Cannot modify sync for a cloud-managed proxy".to_string());
+    return Err(serde_json::json!({ "code": "CANNOT_MODIFY_CLOUD_MANAGED_PROXY" }).to_string());
   }
 
   // If disabling, check if proxy is used by any synced profile
   if !enabled && is_proxy_used_by_synced_profile(&proxy_id) {
-    return Err("Sync cannot be disabled while this proxy is used by synced profiles".to_string());
+    return Err(serde_json::json!({ "code": "SYNC_LOCKED_BY_PROFILE" }).to_string());
   }
 
   // If enabling, check that sync settings are configured
   if enabled {
-    let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
-
-    if !cloud_logged_in {
-      let manager = SettingsManager::instance();
-      let settings = manager
-        .load_settings()
-        .map_err(|e| format!("Failed to load settings: {e}"))?;
-
-      if settings.sync_server_url.is_none() {
-        return Err(
-          "Sync server not configured. Please configure sync settings first.".to_string(),
-        );
-      }
-
-      let token = manager.get_sync_token(&app_handle).await.ok().flatten();
-      if token.is_none() {
-        return Err("Sync token not configured. Please configure sync settings first.".to_string());
-      }
-    }
+    ensure_sync_configured(&app_handle).await?;
   }
 
   let new_last_sync = if enabled { proxy.last_sync } else { None };
-  proxy_manager.set_stored_proxy_sync_state(&proxy_id, enabled, new_last_sync)?;
+  proxy_manager
+    .set_stored_proxy_sync_state(&proxy_id, enabled, new_last_sync)
+    .map_err(|e| {
+      serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e } }).to_string()
+    })?;
 
   let _ = events::emit("stored-proxies-changed", ());
 
@@ -3299,36 +3465,18 @@ pub async fn set_group_sync_enabled(
     groups
       .iter()
       .find(|g| g.id == group_id)
-      .ok_or_else(|| format!("Group with ID '{group_id}' not found"))?
+      .ok_or_else(|| serde_json::json!({ "code": "GROUP_NOT_FOUND" }).to_string())?
       .clone()
   };
 
   // If disabling, check if group is used by any synced profile
   if !enabled && is_group_used_by_synced_profile(&group_id) {
-    return Err("Sync cannot be disabled while this group is used by synced profiles".to_string());
+    return Err(serde_json::json!({ "code": "SYNC_LOCKED_BY_PROFILE" }).to_string());
   }
 
   // If enabling, check that sync settings are configured
   if enabled {
-    let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
-
-    if !cloud_logged_in {
-      let manager = SettingsManager::instance();
-      let settings = manager
-        .load_settings()
-        .map_err(|e| format!("Failed to load settings: {e}"))?;
-
-      if settings.sync_server_url.is_none() {
-        return Err(
-          "Sync server not configured. Please configure sync settings first.".to_string(),
-        );
-      }
-
-      let token = manager.get_sync_token(&app_handle).await.ok().flatten();
-      if token.is_none() {
-        return Err("Sync token not configured. Please configure sync settings first.".to_string());
-      }
-    }
+    ensure_sync_configured(&app_handle).await?;
   }
 
   let mut updated_group = group.clone();
@@ -3341,7 +3489,10 @@ pub async fn set_group_sync_enabled(
   {
     let group_manager = crate::group_manager::GROUP_MANAGER.lock().unwrap();
     if let Err(e) = group_manager.update_group_internal(&updated_group) {
-      return Err(format!("Failed to update group: {e}"));
+      return Err(
+        serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e.to_string() } })
+          .to_string(),
+      );
     }
   }
 
@@ -3392,35 +3543,17 @@ pub async fn set_vpn_sync_enabled(
     let storage = crate::vpn::VPN_STORAGE.lock().unwrap();
     storage
       .load_config(&vpn_id)
-      .map_err(|e| format!("VPN with ID '{vpn_id}' not found: {e}"))?
+      .map_err(|_| serde_json::json!({ "code": "VPN_NOT_FOUND" }).to_string())?
   };
 
   // If disabling, check if VPN is used by any synced profile
   if !enabled && is_vpn_used_by_synced_profile(&vpn_id) {
-    return Err("Sync cannot be disabled while this VPN is used by synced profiles".to_string());
+    return Err(serde_json::json!({ "code": "SYNC_LOCKED_BY_PROFILE" }).to_string());
   }
 
   // If enabling, check that sync settings are configured
   if enabled {
-    let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
-
-    if !cloud_logged_in {
-      let manager = SettingsManager::instance();
-      let settings = manager
-        .load_settings()
-        .map_err(|e| format!("Failed to load settings: {e}"))?;
-
-      if settings.sync_server_url.is_none() {
-        return Err(
-          "Sync server not configured. Please configure sync settings first.".to_string(),
-        );
-      }
-
-      let token = manager.get_sync_token(&app_handle).await.ok().flatten();
-      if token.is_none() {
-        return Err("Sync token not configured. Please configure sync settings first.".to_string());
-      }
-    }
+    ensure_sync_configured(&app_handle).await?;
   }
 
   let last_sync = if enabled { vpn.last_sync } else { None };
@@ -3429,7 +3562,10 @@ pub async fn set_vpn_sync_enabled(
     let storage = crate::vpn::VPN_STORAGE.lock().unwrap();
     storage
       .update_sync_fields(&vpn_id, enabled, last_sync)
-      .map_err(|e| format!("Failed to update VPN sync: {e}"))?;
+      .map_err(|e| {
+        serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e.to_string() } })
+          .to_string()
+      })?;
   }
 
   let _ = events::emit("vpn-configs-changed", ());
@@ -3526,6 +3662,11 @@ pub fn get_unsynced_entity_counts() -> Result<UnsyncedEntityCounts, String> {
 
 #[tauri::command]
 pub async fn enable_sync_for_all_entities(app_handle: tauri::AppHandle) -> Result<(), String> {
+  // Intentionally excludes profiles: enabling profile sync uploads the entire
+  // browser data dir per profile, which is destructive if the user expected
+  // an opt-in. Profile sync stays under explicit per-profile control via
+  // set_profile_sync_mode. This command only touches metadata-sized entities.
+
   // Enable sync for all unsynced proxies
   {
     let proxies = crate::proxy_manager::PROXY_MANAGER.get_stored_proxies();
@@ -3621,26 +3762,11 @@ pub async fn set_extension_sync_enabled(
     let manager = crate::extension_manager::EXTENSION_MANAGER.lock().unwrap();
     manager
       .get_extension(&extension_id)
-      .map_err(|e| format!("Extension with ID '{extension_id}' not found: {e}"))?
+      .map_err(|_| serde_json::json!({ "code": "EXTENSION_NOT_FOUND" }).to_string())?
   };
 
   if enabled {
-    let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
-    if !cloud_logged_in {
-      let manager = SettingsManager::instance();
-      let settings = manager
-        .load_settings()
-        .map_err(|e| format!("Failed to load settings: {e}"))?;
-      if settings.sync_server_url.is_none() {
-        return Err(
-          "Sync server not configured. Please configure sync settings first.".to_string(),
-        );
-      }
-      let token = manager.get_sync_token(&app_handle).await.ok().flatten();
-      if token.is_none() {
-        return Err("Sync token not configured. Please configure sync settings first.".to_string());
-      }
-    }
+    ensure_sync_configured(&app_handle).await?;
   }
 
   let mut updated_ext = ext;
@@ -3653,7 +3779,10 @@ pub async fn set_extension_sync_enabled(
     let manager = crate::extension_manager::EXTENSION_MANAGER.lock().unwrap();
     manager
       .update_extension_internal(&updated_ext)
-      .map_err(|e| format!("Failed to update extension sync: {e}"))?;
+      .map_err(|e| {
+        serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e.to_string() } })
+          .to_string()
+      })?;
   }
 
   let _ = events::emit("extensions-changed", ());
@@ -3677,26 +3806,11 @@ pub async fn set_extension_group_sync_enabled(
     let manager = crate::extension_manager::EXTENSION_MANAGER.lock().unwrap();
     manager
       .get_group(&extension_group_id)
-      .map_err(|e| format!("Extension group with ID '{extension_group_id}' not found: {e}"))?
+      .map_err(|_| serde_json::json!({ "code": "EXTENSION_GROUP_NOT_FOUND" }).to_string())?
   };
 
   if enabled {
-    let cloud_logged_in = crate::cloud_auth::CLOUD_AUTH.is_logged_in().await;
-    if !cloud_logged_in {
-      let manager = SettingsManager::instance();
-      let settings = manager
-        .load_settings()
-        .map_err(|e| format!("Failed to load settings: {e}"))?;
-      if settings.sync_server_url.is_none() {
-        return Err(
-          "Sync server not configured. Please configure sync settings first.".to_string(),
-        );
-      }
-      let token = manager.get_sync_token(&app_handle).await.ok().flatten();
-      if token.is_none() {
-        return Err("Sync token not configured. Please configure sync settings first.".to_string());
-      }
-    }
+    ensure_sync_configured(&app_handle).await?;
   }
 
   let mut updated_group = group;
@@ -3707,9 +3821,10 @@ pub async fn set_extension_group_sync_enabled(
 
   {
     let manager = crate::extension_manager::EXTENSION_MANAGER.lock().unwrap();
-    manager
-      .update_group_internal(&updated_group)
-      .map_err(|e| format!("Failed to update extension group sync: {e}"))?;
+    manager.update_group_internal(&updated_group).map_err(|e| {
+      serde_json::json!({ "code": "INTERNAL_ERROR", "params": { "detail": e.to_string() } })
+        .to_string()
+    })?;
   }
 
   let _ = events::emit("extensions-changed", ());

src-tauri/src/sync/manifest.rs

@@ -35,6 +35,16 @@ pub const DEFAULT_EXCLUDE_PATTERNS: &[&str] = &[
   "**/startupCache/**",
   "**/safebrowsing/**",
   "**/storage/temporary/**",
+  "**/storage/default/*/cache/**",
+  "**/datareporting/**",
+  "**/saved-telemetry-pings/**",
+  "**/sessionstore-backups/**",
+  "**/sessions/**",
+  "**/serviceworker.txt",
+  "**/AlternateServices.bin",
+  "**/SiteSecurityServiceState.bin",
+  "**/favicons.sqlite",
+  "**/favicons.sqlite-*",
   "**/crashes/**",
   "**/minidumps/**",
   "*.tmp",
@@ -52,9 +62,9 @@ pub const DEFAULT_EXCLUDE_PATTERNS: &[&str] = &[
   "**/BrowserMetrics*",
   "**/.DS_Store",
   ".donut-sync/**",
-  // Local-only marker recording when Wayfern last refreshed this profile's
-  // fingerprint. Each device decides its own refresh cadence, so syncing
-  // this would cause one device's refresh to silence others.
+  // Orphaned local-only marker from earlier rollover-based fingerprint
+  // regeneration. Keep excluding it so any markers left on disk from
+  // prior builds never get uploaded.
   ".last-fp-refresh",
 ];
 

src-tauri/src/sync/mod.rs

@@ -7,11 +7,13 @@ pub mod subscription;
 pub mod types;
 
 pub use client::SyncClient;
-pub use encryption::{check_has_e2e_password, delete_e2e_password, set_e2e_password};
+pub use encryption::{
+  check_has_e2e_password, delete_e2e_password, set_e2e_password, verify_e2e_password,
+};
 pub use engine::{
-  enable_extension_group_sync_if_needed, enable_group_sync_if_needed, enable_proxy_sync_if_needed,
-  enable_sync_for_all_entities, enable_vpn_sync_if_needed, get_unsynced_entity_counts,
-  is_group_in_use_by_synced_profile, is_group_used_by_synced_profile,
+  cancel_profile_sync, enable_extension_group_sync_if_needed, enable_group_sync_if_needed,
+  enable_proxy_sync_if_needed, enable_sync_for_all_entities, enable_vpn_sync_if_needed,
+  get_unsynced_entity_counts, is_group_in_use_by_synced_profile, is_group_used_by_synced_profile,
   is_proxy_in_use_by_synced_profile, is_proxy_used_by_synced_profile, is_sync_configured,
   is_vpn_in_use_by_synced_profile, is_vpn_used_by_synced_profile, request_profile_sync,
   rollover_encryption_for_all_entities, set_extension_group_sync_enabled,
@@ -22,3 +24,21 @@ pub use manifest::{compute_diff, generate_manifest, HashCache, ManifestDiff, Syn
 pub use scheduler::{get_global_scheduler, set_global_scheduler, SyncScheduler};
 pub use subscription::{SubscriptionManager, SyncWorkItem};
 pub use types::{SyncError, SyncResult};
+
+/// Queue a profile sync if the profile has sync enabled. No-op otherwise.
+///
+/// Called from profile metadata update paths so a rename / tag edit / proxy
+/// reassignment shows up on other devices without waiting for the next
+/// scheduled tick. Spawns the async queue call so this helper is callable
+/// from both sync and async contexts.
+pub fn queue_profile_sync_if_eligible(profile: &crate::profile::BrowserProfile) {
+  if !profile.is_sync_enabled() {
+    return;
+  }
+  let profile_id = profile.id.to_string();
+  tauri::async_runtime::spawn(async move {
+    if let Some(scheduler) = get_global_scheduler() {
+      scheduler.queue_profile_sync(profile_id).await;
+    }
+  });
+}

src-tauri/src/sync/scheduler.rs

@@ -716,16 +716,18 @@ impl SyncScheduler {
       match entity_type.as_str() {
         "profile" => {
           let profile_manager = ProfileManager::instance();
-          let has_profile = {
+          let local_sync_enabled = {
             if let Ok(profiles) = profile_manager.list_profiles() {
               let profile_uuid = uuid::Uuid::parse_str(&entity_id).ok();
-              profile_uuid.is_some_and(|uuid| profiles.iter().any(|p| p.id == uuid))
+              profile_uuid
+                .and_then(|uuid| profiles.into_iter().find(|p| p.id == uuid))
+                .is_some_and(|p| p.is_sync_enabled())
             } else {
               false
             }
           };
 
-          if has_profile {
+          if local_sync_enabled {
             log::info!(
               "Profile {} was deleted remotely, deleting locally",
               entity_id
@@ -733,6 +735,11 @@ impl SyncScheduler {
             if let Err(e) = profile_manager.delete_profile_local_only(&entity_id) {
               log::warn!("Failed to delete tombstoned profile {}: {}", entity_id, e);
             }
+          } else {
+            log::info!(
+              "Profile {} has a tombstone but sync is no longer enabled locally — keeping local copy",
+              entity_id
+            );
           }
         }
         "proxy" => {

src-tauri/src/sync/types.rs

@@ -166,6 +166,7 @@ pub enum SyncError {
   SerializationError(String),
   ConflictError(String),
   InvalidData(String),
+  Cancelled,
 }
 
 impl std::fmt::Display for SyncError {
@@ -178,6 +179,7 @@ impl std::fmt::Display for SyncError {
       SyncError::SerializationError(msg) => write!(f, "Serialization error: {msg}"),
       SyncError::ConflictError(msg) => write!(f, "Conflict error: {msg}"),
       SyncError::InvalidData(msg) => write!(f, "Invalid data: {msg}"),
+      SyncError::Cancelled => write!(f, "Sync cancelled by user"),
     }
   }
 }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Donut",
-  "version": "0.24.0",
+  "version": "0.24.4",
   "identifier": "com.donutbrowser",
   "build": {
     "beforeDevCommand": "pnpm copy-proxy-binary && pnpm dev",

src/app/page.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { AccountPage } from "@/components/account-page";
 import { CamoufoxConfigDialog } from "@/components/camoufox-config-dialog";
 import { CloneProfileDialog } from "@/components/clone-profile-dialog";
+import { CommandPalette } from "@/components/command-palette";
 import { CommercialTrialModal } from "@/components/commercial-trial-modal";
 import { CookieCopyDialog } from "@/components/cookie-copy-dialog";
 import { CookieManagementDialog } from "@/components/cookie-management-dialog";
@@ -34,6 +35,7 @@ import { ProxyAssignmentDialog } from "@/components/proxy-assignment-dialog";
 import { ProxyManagementDialog } from "@/components/proxy-management-dialog";
 import { type AppPage, RailNav } from "@/components/rail-nav";
 import { SettingsDialog } from "@/components/settings-dialog";
+import { ShortcutsPage } from "@/components/shortcuts-page";
 import { SyncAllDialog } from "@/components/sync-all-dialog";
 import { SyncConfigDialog } from "@/components/sync-config-dialog";
 import { SyncFollowerDialog } from "@/components/sync-follower-dialog";
@@ -53,6 +55,12 @@ import { useVersionUpdater } from "@/hooks/use-version-updater";
 import { useVpnEvents } from "@/hooks/use-vpn-events";
 import { useWayfernTerms } from "@/hooks/use-wayfern-terms";
 import { translateBackendError } from "@/lib/backend-errors";
+import {
+  matchesGroupDigit,
+  matchesShortcut,
+  SHORTCUTS,
+  type ShortcutId,
+} from "@/lib/shortcuts";
 import {
   dismissToast,
   showErrorToast,
@@ -149,6 +157,11 @@ export default function Home() {
   const [proxyManagementInitialTab, setProxyManagementInitialTab] = useState<
     "proxies" | "vpns"
   >("proxies");
+  const [extensionManagementInitialTab, setExtensionManagementInitialTab] =
+    useState<"extensions" | "groups">("extensions");
+  const [integrationsInitialTab, setIntegrationsInitialTab] = useState<
+    "api" | "mcp"
+  >("api");
   const [createProfileDialogOpen, setCreateProfileDialogOpen] = useState(false);
   const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
   const [integrationsDialogOpen, setIntegrationsDialogOpen] = useState(false);
@@ -221,6 +234,11 @@ export default function Home() {
   const [profileSyncDialogOpen, setProfileSyncDialogOpen] = useState(false);
   const [currentProfileForSync, setCurrentProfileForSync] =
     useState<BrowserProfile | null>(null);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  // Owned by page.tsx so the command palette can request opening the profile
+  // info dialog. ProfilesDataTable consumes it through controlled props.
+  const [profileInfoDialog, setProfileInfoDialog] =
+    useState<BrowserProfile | null>(null);
   const { isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized } =
     usePermissions();
 
@@ -273,9 +291,134 @@ export default function Home() {
       case "account":
         setAccountDialogOpen(true);
         break;
+      case "shortcuts":
+        // Plain page render — nothing else to open.
+        break;
     }
   }, []);
 
+  const runShortcut = useCallback(
+    (id: ShortcutId) => {
+      switch (id) {
+        case "openPalette":
+          setCommandPaletteOpen(true);
+          break;
+        case "openShortcuts":
+          handleRailNavigate("shortcuts");
+          break;
+        case "importProfile":
+          handleRailNavigate("import");
+          break;
+        case "goProfiles":
+          handleRailNavigate("profiles");
+          break;
+        case "goProxies": {
+          // Mod+N: navigate first time; flip proxies↔vpns on subsequent presses.
+          // handleRailNavigate("proxies"|"vpns") already updates the dialog's
+          // initialTab, so we just pick the right destination.
+          if (currentPage === "proxies") {
+            handleRailNavigate("vpns");
+          } else if (currentPage === "vpns") {
+            handleRailNavigate("proxies");
+          } else {
+            handleRailNavigate(
+              proxyManagementInitialTab === "vpns" ? "vpns" : "proxies",
+            );
+          }
+          break;
+        }
+        case "goExtensions": {
+          // Mod+E: flip extensions↔groups tab inside the dialog when already there.
+          if (currentPage === "extensions") {
+            setExtensionManagementInitialTab((cur) =>
+              cur === "extensions" ? "groups" : "extensions",
+            );
+          } else {
+            handleRailNavigate("extensions");
+          }
+          break;
+        }
+        case "goGroups":
+          handleRailNavigate("groups");
+          break;
+        case "goIntegrations": {
+          // Mod+I: flip api↔mcp tab when already on integrations.
+          if (currentPage === "integrations") {
+            setIntegrationsInitialTab((cur) => (cur === "api" ? "mcp" : "api"));
+          } else {
+            handleRailNavigate("integrations");
+          }
+          break;
+        }
+        case "goAccount":
+          handleRailNavigate("account");
+          break;
+        case "goSettings":
+          handleRailNavigate("settings");
+          break;
+      }
+    },
+    [handleRailNavigate, currentPage, proxyManagementInitialTab],
+  );
+
+  // Ordered list the digit shortcuts and palette consume. "__all__" is index 1
+  // so Mod+1 always lands on the unfiltered view; the user's groups follow.
+  const orderedGroupTargets = useMemo(
+    () => [
+      { id: "__all__", name: t("rail.profiles") },
+      ...groupsData.map((g) => ({ id: g.id, name: g.name })),
+    ],
+    [groupsData, t],
+  );
+
+  const selectGroupByDigit = useCallback(
+    (digit: number) => {
+      const target = orderedGroupTargets[digit - 1];
+      if (!target) return;
+      handleRailNavigate("profiles");
+      handleSelectGroup(target.id);
+    },
+    [orderedGroupTargets, handleRailNavigate, handleSelectGroup],
+  );
+
+  useEffect(() => {
+    // Global keydown — handles Mod+1..9 group jumps first, then falls back to
+    // the static SHORTCUTS table. Skipped while typing in an input, EXCEPT
+    // ⌘K and ⌘/ which are meta-level shortcuts and should always be reachable.
+    const onKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      const tag = target?.tagName;
+      const isTyping =
+        tag === "INPUT" ||
+        tag === "TEXTAREA" ||
+        tag === "SELECT" ||
+        target?.isContentEditable === true;
+
+      const digit = matchesGroupDigit(e);
+      if (digit !== null) {
+        if (isTyping) return;
+        if (digit - 1 >= orderedGroupTargets.length) return;
+        e.preventDefault();
+        selectGroupByDigit(digit);
+        return;
+      }
+
+      for (const s of SHORTCUTS) {
+        if (!matchesShortcut(s, e)) continue;
+        if (isTyping && s.id !== "openPalette" && s.id !== "openShortcuts") {
+          return;
+        }
+        e.preventDefault();
+        runShortcut(s.id);
+        return;
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [runShortcut, selectGroupByDigit, orderedGroupTargets.length]);
+
   // Check for missing binaries and offer to download them
   const checkMissingBinaries = useCallback(async () => {
     try {
@@ -613,7 +756,9 @@ export default function Home() {
             wayfernConfig: profileData.wayfernConfig,
             groupId:
               profileData.groupId ??
-              (selectedGroupId !== "default" ? selectedGroupId : undefined),
+              (selectedGroupId && selectedGroupId !== "__all__"
+                ? selectedGroupId
+                : undefined),
             ephemeral: profileData.ephemeral,
             dnsBlocklist: profileData.dnsBlocklist,
             launchHook: profileData.launchHook,
@@ -1029,7 +1174,7 @@ export default function Home() {
                 failed_count: payload.failed_count ?? 0,
                 phase: payload.phase,
               },
-              { id: toastId },
+              { id: toastId, profileId: payload.profile_id },
             );
           }
         });
@@ -1243,11 +1388,10 @@ export default function Home() {
     let filtered = profiles;
 
     // Filter by group. "__all__" is a virtual filter that shows every
-    // profile regardless of group; "default" shows ungrouped profiles.
-    if (selectedGroupId === "__all__") {
+    // profile (including ungrouped ones). Any other value is a real
+    // group id; ungrouped profiles only show through "All".
+    if (!selectedGroupId || selectedGroupId === "__all__") {
       filtered = profiles;
-    } else if (!selectedGroupId || selectedGroupId === "default") {
-      filtered = profiles.filter((profile) => !profile.group_id);
     } else {
       filtered = profiles.filter(
         (profile) => profile.group_id === selectedGroupId,
@@ -1292,6 +1436,7 @@ export default function Home() {
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
         groups={groupsData}
+        totalProfiles={profiles.length}
         selectedGroupId={selectedGroupId}
         onGroupSelect={handleSelectGroup}
         pageTitle={subPageTitle}
@@ -1304,6 +1449,8 @@ export default function Home() {
               {isLoading && groupsData.length === 0 ? null : null}
               <ProfilesDataTable
                 profiles={filteredProfiles}
+                infoDialogProfile={profileInfoDialog}
+                onInfoDialogProfileChange={setProfileInfoDialog}
                 onLaunchProfile={launchProfile}
                 onKillProfile={handleKillProfile}
                 onCloneProfile={handleCloneProfile}
@@ -1342,6 +1489,10 @@ export default function Home() {
             </div>
           )}
 
+          {currentPage === "shortcuts" && (
+            <ShortcutsPage groupTargets={orderedGroupTargets} />
+          )}
+
           {settingsDialogOpen && (
             <SettingsDialog
               isOpen={settingsDialogOpen}
@@ -1366,6 +1517,7 @@ export default function Home() {
                 setCurrentPage("profiles");
               }}
               subPage={currentPage === "integrations"}
+              initialTab={integrationsInitialTab}
             />
           )}
 
@@ -1402,6 +1554,7 @@ export default function Home() {
               }}
               limitedMode={false}
               subPage={currentPage === "extensions"}
+              initialTab={extensionManagementInitialTab}
             />
           )}
 
@@ -1445,6 +1598,29 @@ export default function Home() {
         crossOsUnlocked={crossOsUnlocked}
       />
 
+      <CommandPalette
+        open={commandPaletteOpen}
+        onOpenChange={setCommandPaletteOpen}
+        onAction={runShortcut}
+        groupTargets={orderedGroupTargets}
+        onSelectGroup={(id) => {
+          handleRailNavigate("profiles");
+          handleSelectGroup(id);
+        }}
+        profiles={profiles}
+        runningProfileIds={runningProfiles}
+        onLaunchProfile={(profile) => {
+          void launchProfile(profile);
+        }}
+        onKillProfile={(profile) => {
+          void handleKillProfile(profile);
+        }}
+        onShowProfileInfo={(profile) => {
+          handleRailNavigate("profiles");
+          setProfileInfoDialog(profile);
+        }}
+      />
+
       {pendingUrls.map((pendingUrl) => (
         <ProfileSelectorDialog
           key={pendingUrl.id}

src/components/account-page.tsx

@@ -1,12 +1,32 @@
 "use client";
 
-import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { LuCloud, LuLogOut, LuRefreshCw, LuUser } from "react-icons/lu";
+import {
+  LuCloud,
+  LuEye,
+  LuEyeOff,
+  LuLogOut,
+  LuRefreshCw,
+  LuUser,
+} from "react-icons/lu";
+import { LoadingButton } from "@/components/loading-button";
+import {
+  AnimatedTabs,
+  AnimatedTabsContent,
+  AnimatedTabsList,
+  AnimatedTabsTrigger,
+} from "@/components/ui/animated-tabs";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { useCloudAuth } from "@/hooks/use-cloud-auth";
+import { translateBackendError } from "@/lib/backend-errors";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
+import type { SyncSettings } from "@/types";
 
 interface AccountPageProps {
   isOpen: boolean;
@@ -15,6 +35,8 @@ interface AccountPageProps {
   onOpenSignIn: () => void;
 }
 
+type ConnectionStatus = "unknown" | "testing" | "connected" | "error";
+
 export function AccountPage({
   isOpen,
   onClose,
@@ -22,8 +44,34 @@ export function AccountPage({
   onOpenSignIn,
 }: AccountPageProps) {
   const { t } = useTranslation();
-  const { user, isLoggedIn, logout, refreshProfile } = useCloudAuth();
+  const {
+    user,
+    isLoggedIn,
+    isLoading: isCloudLoading,
+    logout,
+    refreshProfile,
+  } = useCloudAuth();
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  // Self-hosted server state. Loaded once when the dialog opens and persisted
+  // via `save_sync_settings` so the rest of the app picks up the new URL/token
+  // from `SettingsManager`.
+  const [serverUrl, setServerUrl] = useState("");
+  const [token, setToken] = useState("");
+  const [showToken, setShowToken] = useState(false);
+  const [isSavingSelfHosted, setIsSavingSelfHosted] = useState(false);
+  const [isTestingConnection, setIsTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("unknown");
+
+  const hasConfig = Boolean(serverUrl && token);
+  // Self-hosted and cloud are mutually exclusive — both share the same sync
+  // engine and a profile can't be sync'd to two backends. The tab trigger is
+  // disabled here AND the backend rejects mixed state (see `save_sync_settings`
+  // / `cloud_logout`), so even if someone bypasses the UI we don't end up
+  // with split-brain.
+  const selfHostedDisabled = isLoggedIn || isCloudLoading;
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -38,119 +86,389 @@ export function AccountPage({
   };
 
   const handleLogout = async () => {
+    setIsLoggingOut(true);
     try {
       await logout();
+      // The backend wipes sync URL + token as part of cloud_logout (see
+      // `cloud_auth::cloud_logout`); pull the now-empty settings back into
+      // the form so a user who flips to the Self-hosted tab doesn't see the
+      // pre-logout production URL still sitting there.
+      await loadSelfHostedSettings();
       showSuccessToast(t("account.loggedOut"));
     } catch (e) {
       showErrorToast(String(e));
+    } finally {
+      setIsLoggingOut(false);
     }
   };
 
+  const loadSelfHostedSettings = useCallback(async () => {
+    try {
+      const settings = await invoke<SyncSettings>("get_sync_settings");
+      setServerUrl(settings.sync_server_url ?? "");
+      setToken(settings.sync_token ?? "");
+      setConnectionStatus(
+        settings.sync_server_url && settings.sync_token ? "unknown" : "unknown",
+      );
+    } catch (error) {
+      console.error("Failed to load sync settings:", error);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadSelfHostedSettings();
+    }
+  }, [isOpen, loadSelfHostedSettings]);
+
+  const handleTestConnection = useCallback(async () => {
+    if (!serverUrl) {
+      showErrorToast(t("sync.config.serverUrlRequired"));
+      return;
+    }
+    setIsTestingConnection(true);
+    setConnectionStatus("testing");
+    try {
+      const healthUrl = `${serverUrl.replace(/\/$/, "")}/health`;
+      const response = await fetch(healthUrl);
+      if (response.ok) {
+        setConnectionStatus("connected");
+        showSuccessToast(t("sync.config.connectionSuccess"));
+      } else {
+        setConnectionStatus("error");
+        showErrorToast(t("sync.config.serverError"));
+      }
+    } catch {
+      setConnectionStatus("error");
+      showErrorToast(t("sync.config.connectFailed"));
+    } finally {
+      setIsTestingConnection(false);
+    }
+  }, [serverUrl, t]);
+
+  const handleSaveSelfHosted = useCallback(async () => {
+    setIsSavingSelfHosted(true);
+    try {
+      await invoke<SyncSettings>("save_sync_settings", {
+        syncServerUrl: serverUrl || null,
+        syncToken: token || null,
+      });
+      try {
+        await invoke("restart_sync_service");
+      } catch (e) {
+        console.error("Failed to restart sync service:", e);
+      }
+      showSuccessToast(t("sync.config.settingsSaved"));
+    } catch (error) {
+      console.error("Failed to save sync settings:", error);
+      // Use the structured backend-error translator so the cloud-vs-self-
+      // hosted mutex (`SELF_HOSTED_REQUIRES_LOGOUT`) shows a clear message
+      // instead of the generic "save failed" toast.
+      showErrorToast(translateBackendError(t as never, error));
+    } finally {
+      setIsSavingSelfHosted(false);
+    }
+  }, [serverUrl, token, t]);
+
+  const handleDisconnectSelfHosted = useCallback(async () => {
+    setIsSavingSelfHosted(true);
+    try {
+      await invoke<SyncSettings>("save_sync_settings", {
+        syncServerUrl: null,
+        syncToken: null,
+      });
+      try {
+        await invoke("restart_sync_service");
+      } catch (e) {
+        console.error("Failed to restart sync service:", e);
+      }
+      setServerUrl("");
+      setToken("");
+      setConnectionStatus("unknown");
+      showSuccessToast(t("sync.config.disconnected"));
+    } catch (error) {
+      console.error("Failed to disconnect:", error);
+      showErrorToast(t("sync.config.disconnectFailed"));
+    } finally {
+      setIsSavingSelfHosted(false);
+    }
+  }, [t]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
       <DialogContent className="max-w-2xl flex flex-col">
         <div className="flex flex-col gap-4 p-4">
-          <div className="flex items-center gap-3">
-            <div className="grid place-items-center w-12 h-12 rounded-full bg-accent text-foreground shrink-0">
-              <LuUser className="w-6 h-6" />
-            </div>
-            <div className="min-w-0 flex-1">
-              {isLoggedIn && user ? (
-                <>
-                  <h2 className="text-base font-semibold truncate">
-                    {user.email}
-                  </h2>
-                  <p className="text-xs text-muted-foreground mt-0.5">
-                    {t("account.plan", {
-                      plan: user.plan,
-                      period: user.planPeriod ?? "—",
-                    })}
-                  </p>
-                </>
-              ) : (
-                <>
-                  <h2 className="text-base font-semibold">
-                    {t("account.signedOut")}
-                  </h2>
-                  <p className="text-xs text-muted-foreground mt-0.5">
-                    {t("account.signedOutDescription")}
-                  </p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {isLoggedIn && user && (
-            <div className="grid grid-cols-2 gap-2 text-xs">
-              <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                  {t("account.fields.plan")}
-                </p>
-                <p className="mt-0.5 font-medium uppercase">{user.plan}</p>
-              </div>
-              <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                  {t("account.fields.status")}
-                </p>
-                <p className="mt-0.5">{user.subscriptionStatus ?? "—"}</p>
-              </div>
-              {user.teamRole && (
-                <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                    {t("account.fields.teamRole")}
-                  </p>
-                  <p className="mt-0.5">{user.teamRole}</p>
-                </div>
-              )}
-              {user.planPeriod && (
-                <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
-                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                    {t("account.fields.period")}
-                  </p>
-                  <p className="mt-0.5">{user.planPeriod}</p>
-                </div>
-              )}
-            </div>
-          )}
-
-          <div className="flex flex-wrap gap-2 mt-2">
-            {isLoggedIn ? (
-              <>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => {
-                    void handleRefresh();
-                  }}
-                  disabled={isRefreshing}
-                  className="h-8 text-xs gap-1.5"
-                >
-                  <LuRefreshCw className="w-3 h-3" />
-                  {t("account.refresh")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant="destructive"
-                  onClick={() => {
-                    void handleLogout();
-                  }}
-                  className="h-8 text-xs gap-1.5"
-                >
-                  <LuLogOut className="w-3 h-3" />
-                  {t("account.logout")}
-                </Button>
-              </>
-            ) : (
-              <Button
-                size="sm"
-                onClick={onOpenSignIn}
-                className="h-8 text-xs gap-1.5"
+          <AnimatedTabs defaultValue="account">
+            <AnimatedTabsList>
+              <AnimatedTabsTrigger value="account">
+                {t("account.tabs.account")}
+              </AnimatedTabsTrigger>
+              <AnimatedTabsTrigger
+                value="self-hosted"
+                disabled={selfHostedDisabled}
+                title={
+                  selfHostedDisabled
+                    ? t("account.selfHosted.disabledWhileLoggedIn")
+                    : undefined
+                }
               >
-                <LuCloud className="w-3 h-3" />
-                {t("account.signIn")}
-              </Button>
-            )}
-          </div>
+                {t("account.tabs.selfHosted")}
+              </AnimatedTabsTrigger>
+            </AnimatedTabsList>
+
+            <AnimatedTabsContent value="account" className="mt-4">
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="grid place-items-center size-12 rounded-full bg-accent text-foreground shrink-0">
+                    <LuUser className="size-6" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    {isLoggedIn && user ? (
+                      <>
+                        <h2 className="text-base font-semibold truncate">
+                          {user.email}
+                        </h2>
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          {t("account.plan", {
+                            plan: user.plan,
+                            period: user.planPeriod ?? "—",
+                          })}
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <h2 className="text-base font-semibold">
+                          {t("account.signedOut")}
+                        </h2>
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          {t("account.signedOutDescription")}
+                        </p>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {isLoggedIn && user && (
+                  <div className="grid grid-cols-2 gap-2 text-xs">
+                    <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
+                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {t("account.fields.plan")}
+                      </p>
+                      <p className="mt-0.5 font-medium uppercase">
+                        {user.plan}
+                      </p>
+                    </div>
+                    <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
+                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {t("account.fields.status")}
+                      </p>
+                      <p className="mt-0.5">{user.subscriptionStatus ?? "—"}</p>
+                    </div>
+                    {user.teamRole && (
+                      <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
+                        <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {t("account.fields.teamRole")}
+                        </p>
+                        <p className="mt-0.5">{user.teamRole}</p>
+                      </div>
+                    )}
+                    {user.planPeriod && (
+                      <div className="rounded-md bg-muted/40 border border-border px-3 py-2">
+                        <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {t("account.fields.period")}
+                        </p>
+                        <p className="mt-0.5">{user.planPeriod}</p>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {isLoggedIn ? (
+                    <>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          void handleRefresh();
+                        }}
+                        disabled={isRefreshing}
+                        className="h-8 text-xs gap-1.5"
+                      >
+                        <LuRefreshCw className="size-3" />
+                        {t("account.refresh")}
+                      </Button>
+                      <LoadingButton
+                        size="sm"
+                        variant="destructive"
+                        isLoading={isLoggingOut}
+                        disabled={isRefreshing}
+                        onClick={() => {
+                          void handleLogout();
+                        }}
+                        className="h-8 text-xs gap-1.5"
+                      >
+                        <LuLogOut className="size-3" />
+                        {t("account.logout")}
+                      </LoadingButton>
+                    </>
+                  ) : (
+                    <Button
+                      size="sm"
+                      onClick={onOpenSignIn}
+                      className="h-8 text-xs gap-1.5"
+                    >
+                      <LuCloud className="size-3" />
+                      {t("account.signIn")}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </AnimatedTabsContent>
+
+            <AnimatedTabsContent value="self-hosted" className="mt-4">
+              {selfHostedDisabled ? (
+                // Defensive: the tab trigger is disabled while the user is
+                // logged in, so this branch shouldn't be reachable via UI —
+                // but if state flips mid-render (e.g. a cloud login finishes
+                // while the tab is open), show the explanation instead of
+                // a silent empty card.
+                <p className="text-sm text-muted-foreground">
+                  {t("account.selfHosted.disabledWhileLoggedIn")}
+                </p>
+              ) : (
+                <div className="flex flex-col gap-4">
+                  <div>
+                    <p className="text-sm font-medium">
+                      {t("account.selfHosted.title")}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {t("account.selfHosted.description")}
+                    </p>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="self-hosted-server-url" className="text-xs">
+                      {t("sync.serverUrl")}
+                    </Label>
+                    <Input
+                      id="self-hosted-server-url"
+                      type="url"
+                      placeholder={t("sync.serverUrlPlaceholder")}
+                      value={serverUrl}
+                      onChange={(e) => {
+                        setServerUrl(e.target.value);
+                        setConnectionStatus("unknown");
+                      }}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="self-hosted-token" className="text-xs">
+                      {t("sync.token")}
+                    </Label>
+                    <div className="relative">
+                      <Input
+                        id="self-hosted-token"
+                        type={showToken ? "text" : "password"}
+                        placeholder={t("sync.tokenPlaceholder")}
+                        value={token}
+                        onChange={(e) => {
+                          setToken(e.target.value);
+                          setConnectionStatus("unknown");
+                        }}
+                        autoComplete="off"
+                        spellCheck={false}
+                        className="pr-9"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setShowToken((v) => !v);
+                        }}
+                        aria-label={
+                          showToken
+                            ? t("common.aria.hideToken")
+                            : t("common.aria.showToken")
+                        }
+                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+                      >
+                        {showToken ? (
+                          <LuEyeOff className="size-3.5" />
+                        ) : (
+                          <LuEye className="size-3.5" />
+                        )}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2 text-xs">
+                    <span className="text-muted-foreground">
+                      {t("account.selfHosted.connectionStatus")}
+                    </span>
+                    {connectionStatus === "connected" && (
+                      <Badge
+                        variant="default"
+                        className="text-success-foreground bg-success"
+                      >
+                        {t("sync.status.connected")}
+                      </Badge>
+                    )}
+                    {connectionStatus === "error" && (
+                      <Badge variant="destructive">
+                        {t("sync.status.error")}
+                      </Badge>
+                    )}
+                    {connectionStatus === "testing" && (
+                      <Badge variant="secondary">
+                        {t("sync.status.syncing")}
+                      </Badge>
+                    )}
+                    {connectionStatus === "unknown" && (
+                      <Badge variant="secondary">
+                        {t("account.selfHosted.statusUnknown")}
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    <LoadingButton
+                      size="sm"
+                      variant="outline"
+                      isLoading={isTestingConnection}
+                      disabled={!serverUrl || isSavingSelfHosted}
+                      onClick={() => void handleTestConnection()}
+                      className="h-8 text-xs"
+                    >
+                      {t("account.selfHosted.testConnection")}
+                    </LoadingButton>
+                    <LoadingButton
+                      size="sm"
+                      isLoading={isSavingSelfHosted}
+                      disabled={!serverUrl || !token || isTestingConnection}
+                      onClick={() => void handleSaveSelfHosted()}
+                      className="h-8 text-xs"
+                    >
+                      {t("common.buttons.save")}
+                    </LoadingButton>
+                    {hasConfig && (
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        disabled={isSavingSelfHosted || isTestingConnection}
+                        onClick={() => void handleDisconnectSelfHosted()}
+                        className="h-8 text-xs"
+                      >
+                        {t("account.selfHosted.disconnect")}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </AnimatedTabsContent>
+          </AnimatedTabs>
         </div>
       </DialogContent>
     </Dialog>

src/components/app-update-toast.tsx

@@ -37,7 +37,7 @@ export function AppUpdateToast({
   return (
     <div className="flex items-start p-4 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground">
       <div className="mr-3 mt-0.5">
-        <LuCheckCheck className="flex-shrink-0 w-5 h-5" />
+        <LuCheckCheck className="flex-shrink-0 size-5" />
       </div>
 
       <div className="flex-1 min-w-0">
@@ -59,9 +59,9 @@ export function AppUpdateToast({
             variant="ghost"
             size="sm"
             onClick={onDismiss}
-            className="p-0 w-6 h-6 shrink-0"
+            className="p-0 size-6 shrink-0"
           >
-            <FaTimes className="w-3 h-3" />
+            <FaTimes className="size-3" />
           </Button>
         </div>
 
@@ -72,7 +72,7 @@ export function AppUpdateToast({
               size="sm"
               className="flex gap-2 items-center text-xs"
             >
-              <LuCheckCheck className="w-3 h-3" />
+              <LuCheckCheck className="size-3" />
               {t("appUpdate.toast.restartNow")}
             </RippleButton>
           ) : (
@@ -83,7 +83,7 @@ export function AppUpdateToast({
                 size="sm"
                 className="flex gap-2 items-center text-xs"
               >
-                <FaExternalLinkAlt className="w-3 h-3" />
+                <FaExternalLinkAlt className="size-3" />
                 {t("appUpdate.toast.viewRelease")}
               </RippleButton>
             )

src/components/clone-profile-dialog.tsx

@@ -36,16 +36,18 @@ export function CloneProfileDialog({
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
-    if (isOpen && profile) {
-      const defaultName = `${profile.name} (Copy)`;
-      setName(defaultName);
-      setTimeout(() => {
-        inputRef.current?.focus();
-        inputRef.current?.select();
-      }, 0);
-    } else {
+    if (!(isOpen && profile)) {
       setIsLoading(false);
+      return;
     }
+    setName(`${profile.name} (Copy)`);
+    const handle = window.setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 0);
+    return () => {
+      window.clearTimeout(handle);
+    };
   }, [isOpen, profile]);
 
   if (!profile) return null;

src/components/command-palette.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { FaDownload } from "react-icons/fa";
+import { FiWifi } from "react-icons/fi";
+import { GoGear } from "react-icons/go";
+import {
+  LuCircleStop,
+  LuCloud,
+  LuInfo,
+  LuKeyboard,
+  LuPlay,
+  LuPlug,
+  LuPuzzle,
+  LuUser,
+  LuUsers,
+} from "react-icons/lu";
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  formatGroupShortcut,
+  formatShortcut,
+  SHORTCUTS,
+  type ShortcutDef,
+  type ShortcutId,
+} from "@/lib/shortcuts";
+import type { BrowserProfile } from "@/types";
+
+interface GroupTarget {
+  id: string;
+  name: string;
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAction: (id: ShortcutId) => void;
+  /** Ordered list of groups for Mod+1..9. Index 0 is the catch-all entry. */
+  groupTargets: GroupTarget[];
+  onSelectGroup: (id: string) => void;
+  /** All profiles for launch/stop/info entries. */
+  profiles: BrowserProfile[];
+  runningProfileIds: Set<string>;
+  onLaunchProfile: (profile: BrowserProfile) => void;
+  onKillProfile: (profile: BrowserProfile) => void;
+  onShowProfileInfo: (profile: BrowserProfile) => void;
+}
+
+const ICONS: Record<ShortcutId, React.ComponentType<{ className?: string }>> = {
+  openPalette: LuKeyboard,
+  openShortcuts: LuKeyboard,
+  importProfile: FaDownload,
+  goProfiles: LuUser,
+  goProxies: FiWifi,
+  goExtensions: LuPuzzle,
+  goGroups: LuUsers,
+  goIntegrations: LuPlug,
+  goAccount: LuCloud,
+  goSettings: GoGear,
+};
+
+function Tokens({ tokens }: { tokens: string[] }) {
+  return (
+    <CommandShortcut className="flex items-center gap-0.5">
+      {tokens.map((tok, i) => (
+        <kbd
+          key={i}
+          className="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded border border-border bg-muted text-[10px] font-medium text-muted-foreground"
+        >
+          {tok}
+        </kbd>
+      ))}
+    </CommandShortcut>
+  );
+}
+
+function ShortcutTokens({ shortcut }: { shortcut: ShortcutDef }) {
+  return <Tokens tokens={formatShortcut(shortcut)} />;
+}
+
+/**
+ * Token-AND fuzzy filter. Every whitespace-separated token in the query has
+ * to appear as a substring somewhere in the item's value or its keywords; the
+ * score is reduced when tokens appear later in the haystack so a closer match
+ * sorts higher. "ctest info" matches "Info — ctest" — the default cmdk filter
+ * requires tokens in document order so it would otherwise return zero.
+ */
+function fuzzyFilter(
+  value: string,
+  search: string,
+  keywords?: string[],
+): number {
+  if (!search.trim()) return 1;
+  const haystack = [value, ...(keywords ?? [])].join(" ").toLowerCase();
+  const tokens = search.toLowerCase().split(/\s+/).filter(Boolean);
+  let score = 0;
+  for (const tok of tokens) {
+    const idx = haystack.indexOf(tok);
+    if (idx === -1) return 0;
+    score += 1 / (1 + idx);
+  }
+  return score / tokens.length;
+}
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+  onAction,
+  groupTargets,
+  onSelectGroup,
+  profiles,
+  runningProfileIds,
+  onLaunchProfile,
+  onKillProfile,
+  onShowProfileInfo,
+}: CommandPaletteProps) {
+  const { t } = useTranslation();
+
+  // `cmdk` calls onSelect BEFORE the dialog closes. Close first, then dispatch
+  // on the next tick so an action that opens another dialog doesn't race
+  // this one's close animation.
+  const dispatch = (fn: () => void) => {
+    onOpenChange(false);
+    setTimeout(fn, 0);
+  };
+
+  const byGroup = (group: ShortcutDef["group"]) =>
+    SHORTCUTS.filter((s) => s.group === group);
+
+  // Limit to 9 — only the first 9 group targets have a Mod+digit binding.
+  // We still display more in the palette (without a shortcut hint) so the
+  // user can search/jump to any of them.
+  const renderGroup = (target: GroupTarget, index: number) => (
+    <CommandItem
+      key={target.id}
+      onSelect={() => {
+        dispatch(() => {
+          onSelectGroup(target.id);
+        });
+      }}
+    >
+      <LuUsers />
+      <span>{target.name}</span>
+      {index < 9 ? <Tokens tokens={formatGroupShortcut(index + 1)} /> : null}
+    </CommandItem>
+  );
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange} filter={fuzzyFilter}>
+      <CommandInput placeholder={t("commandPalette.placeholder")} />
+      <CommandList>
+        <CommandEmpty>{t("commandPalette.empty")}</CommandEmpty>
+
+        <CommandGroup heading={t("commandPalette.groups.navigation")}>
+          {byGroup("navigation").map((s) => {
+            const Icon = ICONS[s.id];
+            return (
+              <CommandItem
+                key={s.id}
+                onSelect={() => {
+                  dispatch(() => {
+                    onAction(s.id);
+                  });
+                }}
+              >
+                <Icon />
+                <span>{t(s.labelKey)}</span>
+                <ShortcutTokens shortcut={s} />
+              </CommandItem>
+            );
+          })}
+        </CommandGroup>
+
+        {groupTargets.length > 0 ? (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading={t("commandPalette.groups.profileGroups")}>
+              {groupTargets.map((target, i) => renderGroup(target, i))}
+            </CommandGroup>
+          </>
+        ) : null}
+
+        {profiles.length > 0 ? (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading={t("commandPalette.groups.profiles")}>
+              {profiles.map((p) => {
+                const running = runningProfileIds.has(p.id);
+                return running ? (
+                  <CommandItem
+                    key={`run-${p.id}`}
+                    onSelect={() => {
+                      dispatch(() => {
+                        onKillProfile(p);
+                      });
+                    }}
+                  >
+                    <LuCircleStop />
+                    <span>
+                      {t("commandPalette.actions.stopProfile", {
+                        name: p.name,
+                      })}
+                    </span>
+                  </CommandItem>
+                ) : (
+                  <CommandItem
+                    key={`run-${p.id}`}
+                    onSelect={() => {
+                      dispatch(() => {
+                        onLaunchProfile(p);
+                      });
+                    }}
+                  >
+                    <LuPlay />
+                    <span>
+                      {t("commandPalette.actions.launchProfile", {
+                        name: p.name,
+                      })}
+                    </span>
+                  </CommandItem>
+                );
+              })}
+              {profiles.map((p) => (
+                <CommandItem
+                  key={`info-${p.id}`}
+                  onSelect={() => {
+                    dispatch(() => {
+                      onShowProfileInfo(p);
+                    });
+                  }}
+                >
+                  <LuInfo />
+                  <span>
+                    {t("commandPalette.actions.profileInfo", { name: p.name })}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </>
+        ) : null}
+
+        <CommandSeparator />
+
+        <CommandGroup heading={t("commandPalette.groups.actions")}>
+          {byGroup("actions").map((s) => {
+            const Icon = ICONS[s.id];
+            return (
+              <CommandItem
+                key={s.id}
+                onSelect={() => {
+                  dispatch(() => {
+                    onAction(s.id);
+                  });
+                }}
+              >
+                <Icon />
+                <span>{t(s.labelKey)}</span>
+                <ShortcutTokens shortcut={s} />
+              </CommandItem>
+            );
+          })}
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}

src/components/cookie-copy-dialog.tsx

@@ -335,7 +335,7 @@ export function CookieCopyDialog({
       <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <LuCookie className="w-5 h-5" />
+            <LuCookie className="size-5" />
             {t("cookies.copy.title")}
           </DialogTitle>
           <DialogDescription>
@@ -372,7 +372,7 @@ export function CookieCopyDialog({
                       disabled={isRunning}
                     >
                       <div className="flex items-center gap-2">
-                        {IconComponent && <IconComponent className="w-4 h-4" />}
+                        {IconComponent && <IconComponent className="size-4" />}
                         <span>{profile.name}</span>
                         {isRunning && (
                           <span className="text-xs text-muted-foreground">
@@ -437,7 +437,7 @@ export function CookieCopyDialog({
               </div>
 
               <div className="relative">
-                <LuSearch className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <LuSearch className="absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                 <Input
                   placeholder={t("cookies.copy.searchPlaceholder")}
                   value={searchQuery}
@@ -450,7 +450,7 @@ export function CookieCopyDialog({
 
               {isLoadingCookies ? (
                 <div className="flex items-center justify-center h-40">
-                  <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+                  <div className="animate-spin size-6 border-2 border-primary border-t-transparent rounded-full" />
                 </div>
               ) : error ? (
                 <div className="p-4 text-center text-destructive bg-destructive/10 rounded-md">
@@ -565,9 +565,9 @@ function DomainRow({
           }}
         >
           {isExpanded ? (
-            <LuChevronDown className="w-4 h-4" />
+            <LuChevronDown className="size-4" />
           ) : (
-            <LuChevronRight className="w-4 h-4" />
+            <LuChevronRight className="size-4" />
           )}
           <span className="font-medium">{domain.domain}</span>
           <span className="text-xs text-muted-foreground">

src/components/cookie-management-dialog.tsx

@@ -15,9 +15,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { FadingScrollArea } from "@/components/ui/fading-scroll-area";
 import { Label } from "@/components/ui/label";
 import { RippleButton } from "@/components/ui/ripple";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -429,7 +429,7 @@ export function CookieManagementDialog({
                     }
                   }}
                 >
-                  <LuUpload className="w-10 h-10 text-muted-foreground mb-4" />
+                  <LuUpload className="size-10 text-muted-foreground mb-4" />
                   <p className="text-sm text-muted-foreground text-center">
                     {t("cookies.management.dropPrompt")}
                     <br />
@@ -556,14 +556,14 @@ export function CookieManagementDialog({
 
               {isLoadingExportCookies ? (
                 <div className="flex items-center justify-center h-24">
-                  <div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full" />
+                  <div className="animate-spin size-5 border-2 border-primary border-t-transparent rounded-full" />
                 </div>
               ) : !exportCookieData || exportCookieData.domains.length === 0 ? (
                 <div className="p-4 text-center text-sm text-muted-foreground border rounded-md">
                   {t("cookies.management.noCookies")}
                 </div>
               ) : (
-                <ScrollArea className="h-[200px] border rounded-md">
+                <FadingScrollArea className="h-[200px]">
                   <div className="p-2 space-y-1">
                     {exportCookieData.domains.map((domain) => (
                       <ExportDomainRow
@@ -577,7 +577,7 @@ export function CookieManagementDialog({
                       />
                     ))}
                   </div>
-                </ScrollArea>
+                </FadingScrollArea>
               )}
             </div>
 
@@ -645,9 +645,9 @@ function ExportDomainRow({
           }}
         >
           {isExpanded ? (
-            <LuChevronDown className="w-3.5 h-3.5" />
+            <LuChevronDown className="size-3.5" />
           ) : (
-            <LuChevronRight className="w-3.5 h-3.5" />
+            <LuChevronRight className="size-3.5" />
           )}
           <span className="font-medium truncate">{domain.domain}</span>
           <span className="text-xs text-muted-foreground shrink-0">

src/components/create-profile-dialog.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { GoPlus } from "react-icons/go";
 import { LuCheck, LuChevronsUpDown } from "react-icons/lu";
@@ -116,6 +123,8 @@ export function CreateProfileDialog({
   crossOsUnlocked = false,
 }: CreateProfileDialogProps) {
   const { t } = useTranslation();
+  const proxyListboxIdAntiDetect = useId();
+  const proxyListboxIdRegular = useId();
   const [profileName, setProfileName] = useState("");
   const [currentStep, setCurrentStep] = useState<
     "browser-selection" | "browser-config"
@@ -422,7 +431,9 @@ export function CreateProfileDialog({
             vpnId: resolvedVpnId,
             wayfernConfig: finalWayfernConfig,
             groupId:
-              selectedGroupId !== "default" ? selectedGroupId : undefined,
+              selectedGroupId && selectedGroupId !== "__all__"
+                ? selectedGroupId
+                : undefined,
             extensionGroupId: selectedExtensionGroupId,
             ephemeral,
             dnsBlocklist: dnsBlocklist || undefined,
@@ -450,7 +461,9 @@ export function CreateProfileDialog({
             vpnId: resolvedVpnId,
             camoufoxConfig: finalCamoufoxConfig,
             groupId:
-              selectedGroupId !== "default" ? selectedGroupId : undefined,
+              selectedGroupId && selectedGroupId !== "__all__"
+                ? selectedGroupId
+                : undefined,
             extensionGroupId: selectedExtensionGroupId,
             ephemeral,
             dnsBlocklist: dnsBlocklist || undefined,
@@ -478,7 +491,10 @@ export function CreateProfileDialog({
           version: bestVersion.version,
           releaseType: bestVersion.releaseType,
           proxyId: selectedProxyId,
-          groupId: selectedGroupId !== "default" ? selectedGroupId : undefined,
+          groupId:
+            selectedGroupId && selectedGroupId !== "__all__"
+              ? selectedGroupId
+              : undefined,
           dnsBlocklist: dnsBlocklist || undefined,
           launchHook: launchHook.trim() || undefined,
           password: passwordToSet,
@@ -605,11 +621,11 @@ export function CreateProfileDialog({
                           className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
                           variant="outline"
                         >
-                          <div className="flex justify-center items-center w-8 h-8">
+                          <div className="flex justify-center items-center size-8">
                             {(() => {
                               const IconComponent = getBrowserIcon("wayfern");
                               return IconComponent ? (
-                                <IconComponent className="w-6 h-6" />
+                                <IconComponent className="size-6" />
                               ) : null;
                             })()}
                           </div>
@@ -631,11 +647,11 @@ export function CreateProfileDialog({
                           className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
                           variant="outline"
                         >
-                          <div className="flex justify-center items-center w-8 h-8">
+                          <div className="flex justify-center items-center size-8">
                             {(() => {
                               const IconComponent = getBrowserIcon("camoufox");
                               return IconComponent ? (
-                                <IconComponent className="w-6 h-6" />
+                                <IconComponent className="size-6" />
                               ) : null;
                             })()}
                           </div>
@@ -676,9 +692,9 @@ export function CreateProfileDialog({
                                 className="flex gap-3 justify-start items-center p-4 w-full h-16 border-2 transition-colors hover:border-primary/50"
                                 variant="outline"
                               >
-                                <div className="flex justify-center items-center w-8 h-8">
+                                <div className="flex justify-center items-center size-8">
                                   {IconComponent && (
-                                    <IconComponent className="w-6 h-6" />
+                                    <IconComponent className="size-6" />
                                   )}
                                 </div>
                                 <div className="text-left">
@@ -729,7 +745,7 @@ export function CreateProfileDialog({
 
                         {/* Ephemeral Option */}
                         <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
-                          <div className="flex items-center space-x-2">
+                          <div className="flex items-center gap-x-2">
                             <Checkbox
                               id="ephemeral"
                               checked={ephemeral}
@@ -749,7 +765,7 @@ export function CreateProfileDialog({
                         {/* Password Option */}
                         {!ephemeral && (
                           <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
-                            <div className="flex items-center space-x-2">
+                            <div className="flex items-center gap-x-2">
                               <Checkbox
                                 id="enable-password"
                                 checked={enablePassword}
@@ -814,7 +830,7 @@ export function CreateProfileDialog({
                             {/* Wayfern Download Status */}
                             {isLoadingReleaseTypes && (
                               <div className="flex gap-3 items-center p-3 rounded-md border">
-                                <div className="w-4 h-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
                                 <p className="text-sm text-muted-foreground">
                                   {t("createProfile.version.fetching")}
                                 </p>
@@ -922,7 +938,7 @@ export function CreateProfileDialog({
                             {/* Camoufox Download Status */}
                             {isLoadingReleaseTypes && (
                               <div className="flex gap-3 items-center p-3 rounded-md border">
-                                <div className="w-4 h-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
                                 <p className="text-sm text-muted-foreground">
                                   {t("createProfile.version.fetching")}
                                 </p>
@@ -1041,7 +1057,7 @@ export function CreateProfileDialog({
                               <div className="space-y-3">
                                 {isLoadingReleaseTypes && (
                                   <div className="flex gap-3 items-center">
-                                    <div className="w-4 h-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                    <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
                                     <p className="text-sm text-muted-foreground">
                                       {t("createProfile.version.fetching")}
                                     </p>
@@ -1154,7 +1170,7 @@ export function CreateProfileDialog({
                               }}
                               className="px-2 h-7 text-xs"
                             >
-                              <GoPlus className="mr-1 w-3 h-3" />{" "}
+                              <GoPlus className="mr-1 size-3" />{" "}
                               {t("createProfile.proxy.addProxy")}
                             </RippleButton>
                           </div>
@@ -1168,6 +1184,7 @@ export function CreateProfileDialog({
                                   variant="outline"
                                   role="combobox"
                                   aria-expanded={proxyPopoverOpen}
+                                  aria-controls={proxyListboxIdAntiDetect}
                                   className="w-full justify-between font-normal"
                                 >
                                   {(() => {
@@ -1190,10 +1207,11 @@ export function CreateProfileDialog({
                                       t("createProfile.proxy.noProxy")
                                     );
                                   })()}
-                                  <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                  <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                                 </Button>
                               </PopoverTrigger>
                               <PopoverContent
+                                id={proxyListboxIdAntiDetect}
                                 className="w-[240px] p-0"
                                 sideOffset={8}
                               >
@@ -1217,7 +1235,7 @@ export function CreateProfileDialog({
                                       >
                                         <LuCheck
                                           className={cn(
-                                            "mr-2 h-4 w-4",
+                                            "mr-2 size-4",
                                             !selectedProxyId
                                               ? "opacity-100"
                                               : "opacity-0",
@@ -1236,7 +1254,7 @@ export function CreateProfileDialog({
                                         >
                                           <LuCheck
                                             className={cn(
-                                              "mr-2 h-4 w-4",
+                                              "mr-2 size-4",
                                               selectedProxyId === proxy.id
                                                 ? "opacity-100"
                                                 : "opacity-0",
@@ -1261,7 +1279,7 @@ export function CreateProfileDialog({
                                           >
                                             <LuCheck
                                               className={cn(
-                                                "mr-2 h-4 w-4",
+                                                "mr-2 size-4",
                                                 selectedProxyId ===
                                                   `vpn-${vpn.id}`
                                                   ? "opacity-100"
@@ -1412,7 +1430,7 @@ export function CreateProfileDialog({
                             <div className="space-y-3">
                               {isLoadingReleaseTypes && (
                                 <div className="flex gap-3 items-center">
-                                  <div className="w-4 h-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+                                  <div className="size-4 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
                                   <p className="text-sm text-muted-foreground">
                                     Fetching available versions...
                                   </p>
@@ -1520,7 +1538,7 @@ export function CreateProfileDialog({
                               }}
                               className="px-2 h-7 text-xs"
                             >
-                              <GoPlus className="mr-1 w-3 h-3" />{" "}
+                              <GoPlus className="mr-1 size-3" />{" "}
                               {t("createProfile.proxy.addProxy")}
                             </RippleButton>
                           </div>
@@ -1534,6 +1552,7 @@ export function CreateProfileDialog({
                                   variant="outline"
                                   role="combobox"
                                   aria-expanded={proxyPopoverOpen}
+                                  aria-controls={proxyListboxIdRegular}
                                   className="w-full justify-between font-normal"
                                 >
                                   {(() => {
@@ -1556,10 +1575,11 @@ export function CreateProfileDialog({
                                       t("createProfile.proxy.noProxy")
                                     );
                                   })()}
-                                  <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                  <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                                 </Button>
                               </PopoverTrigger>
                               <PopoverContent
+                                id={proxyListboxIdRegular}
                                 className="w-[240px] p-0"
                                 sideOffset={8}
                               >
@@ -1583,7 +1603,7 @@ export function CreateProfileDialog({
                                       >
                                         <LuCheck
                                           className={cn(
-                                            "mr-2 h-4 w-4",
+                                            "mr-2 size-4",
                                             !selectedProxyId
                                               ? "opacity-100"
                                               : "opacity-0",
@@ -1602,7 +1622,7 @@ export function CreateProfileDialog({
                                         >
                                           <LuCheck
                                             className={cn(
-                                              "mr-2 h-4 w-4",
+                                              "mr-2 size-4",
                                               selectedProxyId === proxy.id
                                                 ? "opacity-100"
                                                 : "opacity-0",
@@ -1627,7 +1647,7 @@ export function CreateProfileDialog({
                                           >
                                             <LuCheck
                                               className={cn(
-                                                "mr-2 h-4 w-4",
+                                                "mr-2 size-4",
                                                 selectedProxyId ===
                                                   `vpn-${vpn.id}`
                                                   ? "opacity-100"

src/components/custom-toast.tsx

@@ -174,42 +174,42 @@ function formatEtaCompact(seconds: number): string {
 function getToastIcon(type: ToastProps["type"], stage?: string) {
   switch (type) {
     case "success":
-      return <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-foreground" />;
+      return <LuCheckCheck className="flex-shrink-0 size-4 text-foreground" />;
     case "error":
       return (
-        <LuTriangleAlert className="flex-shrink-0 w-4 h-4 text-foreground" />
+        <LuTriangleAlert className="flex-shrink-0 size-4 text-foreground" />
       );
     case "download":
       if (stage === "completed") {
         return (
-          <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-foreground" />
+          <LuCheckCheck className="flex-shrink-0 size-4 text-foreground" />
         );
       }
-      return <LuDownload className="flex-shrink-0 w-4 h-4 text-foreground" />;
+      return <LuDownload className="flex-shrink-0 size-4 text-foreground" />;
 
     case "version-update":
       return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
+        <LuRefreshCw className="flex-shrink-0 size-4 animate-spin text-foreground" />
       );
     case "fetching":
       return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
+        <LuRefreshCw className="flex-shrink-0 size-4 animate-spin text-foreground" />
       );
     case "twilight-update":
       return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
+        <LuRefreshCw className="flex-shrink-0 size-4 animate-spin text-foreground" />
       );
     case "sync-progress":
       return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
+        <LuRefreshCw className="flex-shrink-0 size-4 animate-spin text-foreground" />
       );
     case "loading":
       return (
-        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
+        <div className="flex-shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
       );
     default:
       return (
-        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
+        <div className="flex-shrink-0 size-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
       );
   }
 }
@@ -235,7 +235,7 @@ export function UnifiedToast(props: ToastProps) {
               className="ml-2 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
               aria-label={t("common.buttons.cancel")}
             >
-              <LuX className="w-3 h-3" />
+              <LuX className="size-3" />
             </button>
           )}
         </div>
@@ -272,7 +272,7 @@ export function UnifiedToast(props: ToastProps) {
                   <>Looking for updates for {progress.current_browser}</>
                 )}
               </p>
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-x-2">
                 <div className="flex-1 bg-muted rounded-full h-1.5 min-w-0">
                   <div
                     className="bg-foreground h-1.5 rounded-full transition-all duration-150"

src/components/data-table-action-bar.tsx

@@ -106,7 +106,7 @@ function DataTableActionBarAction({
       {...props}
     >
       {isPending ? (
-        <div className="w-3.5 h-3.5 rounded-full border border-current animate-spin border-t-transparent" />
+        <div className="size-3.5 rounded-full border border-current animate-spin border-t-transparent" />
       ) : (
         children
       )}

src/components/delete-confirmation-dialog.tsx

@@ -42,7 +42,7 @@ export function DeleteConfirmationDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent>
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>

src/components/delete-group-dialog.tsx

@@ -155,13 +155,13 @@ export function DeleteGroupDialog({
                         setDeleteAction(value as "move" | "delete");
                       }}
                     >
-                      <div className="flex items-center space-x-2">
+                      <div className="flex items-center gap-x-2">
                         <RadioGroupItem value="move" id="move" />
                         <Label htmlFor="move" className="text-sm">
                           {t("groups.moveToDefault")}
                         </Label>
                       </div>
-                      <div className="flex items-center space-x-2">
+                      <div className="flex items-center gap-x-2">
                         <RadioGroupItem value="delete" id="delete" />
                         <Label
                           htmlFor="delete"

src/components/device-code-verify-dialog.tsx

@@ -105,7 +105,7 @@ export function DeviceCodeVerifyDialog({
             disabled={isOpeningLogin}
             className="w-full gap-1.5"
           >
-            <LuExternalLink className="w-3.5 h-3.5" />
+            <LuExternalLink className="size-3.5" />
             {t("sync.cloud.openLogin")}
           </Button>
           <div className="space-y-2">

src/components/dns-blocklist-dialog.tsx

@@ -137,7 +137,7 @@ export function DnsBlocklistDialog({
           className="w-full"
         >
           <LuRefreshCw
-            className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+            className={`mr-2 size-4 ${isRefreshing ? "animate-spin" : ""}`}
           />
           {t("dnsBlocklist.refreshAll")}
         </Button>

src/components/group-assignment-dialog.tsx

@@ -77,7 +77,7 @@ export function GroupAssignmentDialog({
       const groupName = selectedGroupId
         ? groups.find((g) => g.id === selectedGroupId)?.name ||
           t("groups.unknownGroup")
-        : t("groups.defaultGroup");
+        : t("groups.noGroup");
 
       toast.success(
         t("groups.assignSuccess", {
@@ -165,7 +165,7 @@ export function GroupAssignmentDialog({
                   setCreateDialogOpen(true);
                 }}
               >
-                <GoPlus className="mr-1 w-3 h-3" />{" "}
+                <GoPlus className="mr-1 size-3" />{" "}
                 {t("groupManagement.createGroup")}
               </RippleButton>
             </div>
@@ -175,17 +175,17 @@ export function GroupAssignmentDialog({
               </div>
             ) : (
               <Select
-                value={selectedGroupId ?? "default"}
+                value={selectedGroupId ?? "__none__"}
                 onValueChange={(value) => {
-                  setSelectedGroupId(value === "default" ? null : value);
+                  setSelectedGroupId(value === "__none__" ? null : value);
                 }}
               >
                 <SelectTrigger>
                   <SelectValue placeholder={t("groupAssignment.placeholder")} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="default">
-                    {t("groups.defaultGroupNoGroup")}
+                  <SelectItem value="__none__">
+                    {t("groups.noGroup")}
                   </SelectItem>
                   {groups.map((group) => (
                     <SelectItem key={group.id} value={group.id}>

src/components/group-badges.tsx

@@ -183,9 +183,7 @@ export function GroupBadges({
               }
             }}
           >
-            <span>
-              {group.id === "default" ? t("groups.defaultGroup") : group.name}
-            </span>
+            <span>{group.name}</span>
             <span className="bg-background/20 text-xs px-1.5 py-0.5 rounded-sm">
               {group.count}
             </span>

src/components/group-management-dialog.tsx

@@ -1,14 +1,37 @@
 "use client";
 
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type RowSelectionState,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GoPlus } from "react-icons/go";
-import { LuPencil, LuTrash2 } from "react-icons/lu";
+import {
+  LuChevronDown,
+  LuChevronUp,
+  LuFolder,
+  LuPencil,
+  LuRefreshCw,
+  LuTrash2,
+} from "react-icons/lu";
 import { CreateGroupDialog } from "@/components/create-group-dialog";
+import {
+  DataTableActionBar,
+  DataTableActionBarAction,
+  DataTableActionBarSelection,
+} from "@/components/data-table-action-bar";
+import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
 import { DeleteGroupDialog } from "@/components/delete-group-dialog";
 import { EditGroupDialog } from "@/components/edit-group-dialog";
+import { AnimatedSwitch } from "@/components/ui/animated-switch";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -20,8 +43,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { FadingScrollArea } from "@/components/ui/fading-scroll-area";
 import {
   Table,
   TableBody,
@@ -35,6 +57,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { parseBackendError, translateBackendError } from "@/lib/backend-errors";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import type { GroupWithCount, ProfileGroup } from "@/types";
 import { RippleButton } from "./ui/ripple";
@@ -111,6 +134,8 @@ export function GroupManagementDialog({
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState<GroupWithCount | null>(
     null,
   );
@@ -125,6 +150,12 @@ export function GroupManagementDialog({
     {},
   );
 
+  // Table state
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "name", desc: false },
+  ]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
   // Listen for group sync status events
   useEffect(() => {
     let unlisten: (() => void) | undefined;
@@ -232,8 +263,8 @@ export function GroupManagementDialog({
       } catch (error) {
         console.error("Failed to toggle sync:", error);
         showErrorToast(
-          error instanceof Error
-            ? error.message
+          parseBackendError(error)
+            ? translateBackendError(t, error)
             : t("proxies.management.updateSyncFailed"),
         );
       } finally {
@@ -246,9 +277,278 @@ export function GroupManagementDialog({
   useEffect(() => {
     if (isOpen) {
       void loadGroups();
+    } else {
+      // Drop any selection when the dialog closes so the floating
+      // action bar (portaled to body) doesn't linger on the page.
+      setRowSelection({});
     }
   }, [isOpen, loadGroups]);
 
+  const columns = useMemo<ColumnDef<GroupWithCount>[]>(
+    () => [
+      {
+        id: "select",
+        size: 36,
+        enableSorting: false,
+        header: ({ table }) => (
+          <Checkbox
+            checked={
+              table.getIsAllRowsSelected()
+                ? true
+                : table.getIsSomeRowsSelected()
+                  ? "indeterminate"
+                  : false
+            }
+            onCheckedChange={(value) => {
+              table.toggleAllRowsSelected(!!value);
+            }}
+            aria-label={t("common.aria.selectAll")}
+            disabled={table.getRowModel().rows.length === 0}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => {
+              row.toggleSelected(!!value);
+            }}
+            aria-label={t("common.aria.selectRow")}
+          />
+        ),
+      },
+      {
+        accessorKey: "name",
+        enableSorting: true,
+        sortingFn: "alphanumeric",
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === "asc");
+            }}
+            className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
+          >
+            {t("common.labels.name")}
+            {column.getIsSorted() === "asc" ? (
+              <LuChevronUp className="ml-2 size-4" />
+            ) : column.getIsSorted() === "desc" ? (
+              <LuChevronDown className="ml-2 size-4" />
+            ) : null}
+          </Button>
+        ),
+        cell: ({ row }) => {
+          const group = row.original;
+          const syncDot = getSyncStatusDot(
+            group,
+            groupSyncStatus[group.id],
+            t,
+            groupSyncErrors[group.id],
+          );
+          return (
+            <div className="flex items-center gap-2 font-medium">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className={`size-2 rounded-full shrink-0 ${syncDot.color} ${
+                      syncDot.animate ? "animate-pulse" : ""
+                    }`}
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{syncDot.tooltip}</p>
+                </TooltipContent>
+              </Tooltip>
+              <LuFolder className="size-4 text-muted-foreground" />
+              {group.name}
+            </div>
+          );
+        },
+      },
+      {
+        id: "count",
+        size: 80,
+        enableSorting: false,
+        header: () => t("groupManagement.profilesCol"),
+        cell: ({ row }) => (
+          <Badge variant="secondary">{row.original.count}</Badge>
+        ),
+      },
+      {
+        id: "sync",
+        size: 96,
+        enableSorting: false,
+        header: () => t("proxies.management.syncCol"),
+        cell: ({ row }) => {
+          const group = row.original;
+          const locked = groupInUse[group.id];
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="inline-flex items-center">
+                  <AnimatedSwitch
+                    checked={group.sync_enabled}
+                    onCheckedChange={() => handleToggleSync(group)}
+                    disabled={isTogglingSync[group.id] || locked}
+                  />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {locked ? (
+                  <p>{t("syncTooltips.lockedInUse")}</p>
+                ) : (
+                  <p>
+                    {group.sync_enabled
+                      ? t("syncTooltips.disable")
+                      : t("syncTooltips.enable")}
+                  </p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          );
+        },
+      },
+      {
+        id: "actions",
+        size: 96,
+        enableSorting: false,
+        header: () => t("common.labels.actions"),
+        cell: ({ row }) => {
+          const group = row.original;
+          return (
+            <div className="flex gap-1">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      handleEditGroup(group);
+                    }}
+                  >
+                    <LuPencil className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("groupManagement.editGroupTooltip")}</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      handleDeleteGroup(group);
+                    }}
+                  >
+                    <LuTrash2 className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("groupManagement.deleteGroupTooltip")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        },
+      },
+    ],
+    [
+      t,
+      groupSyncStatus,
+      groupSyncErrors,
+      groupInUse,
+      isTogglingSync,
+      handleToggleSync,
+      handleEditGroup,
+      handleDeleteGroup,
+    ],
+  );
+
+  const table = useReactTable({
+    data: groups,
+    columns,
+    state: { sorting, rowSelection },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  });
+
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+  const selectedGroupsForBulk = useMemo(
+    () => selectedRows.map((row) => row.original),
+    [selectedRows],
+  );
+  const selectedNames = useMemo(
+    () => selectedGroupsForBulk.map((g) => g.name).join(", "),
+    [selectedGroupsForBulk],
+  );
+
+  const handleBulkDelete = useCallback(async () => {
+    if (selectedGroupsForBulk.length === 0) return;
+    setIsBulkDeleting(true);
+    try {
+      const ids = selectedGroupsForBulk.map((g) => g.id);
+      const results = await Promise.allSettled(
+        ids.map((groupId) => invoke("delete_profile_group", { groupId })),
+      );
+      const failed = results.filter((r) => r.status === "rejected");
+      if (failed.length > 0) {
+        showErrorToast(t("groups.deleteFailed"));
+      } else {
+        showSuccessToast(t("groups.deleteSuccess"));
+      }
+      table.toggleAllRowsSelected(false);
+      setBulkDeleteOpen(false);
+      await loadGroups();
+      onGroupManagementComplete();
+    } catch (err) {
+      console.error("Bulk group delete failed:", err);
+      showErrorToast(
+        err instanceof Error ? err.message : t("groups.deleteFailed"),
+      );
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  }, [selectedGroupsForBulk, table, loadGroups, onGroupManagementComplete, t]);
+
+  const handleBulkToggleSync = useCallback(async () => {
+    if (selectedGroupsForBulk.length === 0) return;
+    const allOn = selectedGroupsForBulk.every((g) => g.sync_enabled);
+    const targetEnabled = !allOn;
+    const targets = selectedGroupsForBulk.filter((g) =>
+      targetEnabled ? !g.sync_enabled : g.sync_enabled && !groupInUse[g.id],
+    );
+    if (targets.length === 0) return;
+    const results = await Promise.allSettled(
+      targets.map((group) =>
+        invoke("set_group_sync_enabled", {
+          groupId: group.id,
+          enabled: targetEnabled,
+        }),
+      ),
+    );
+    const firstRejection = results.find((r) => r.status === "rejected") as
+      | PromiseRejectedResult
+      | undefined;
+    if (firstRejection) {
+      showErrorToast(
+        parseBackendError(firstRejection.reason)
+          ? translateBackendError(t, firstRejection.reason)
+          : t("proxies.management.updateSyncFailed"),
+      );
+    } else {
+      showSuccessToast(
+        targetEnabled
+          ? t("proxies.management.syncEnabled")
+          : t("proxies.management.syncDisabled"),
+      );
+    }
+    await loadGroups();
+  }, [selectedGroupsForBulk, groupInUse, loadGroups, t]);
+
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose} subPage={subPage}>
@@ -262,18 +562,24 @@ export function GroupManagementDialog({
             </DialogHeader>
           )}
 
-          <div className="space-y-4">
-            {/* Create new group button */}
-            <div className="flex justify-between items-center">
-              <Label>{t("groupManagement.groupsLabel")}</Label>
+          <div className="flex flex-col gap-4 flex-1 min-h-0">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex flex-col gap-1">
+                <h2 className="text-base font-semibold">
+                  {t("groups.pageTitle")}
+                </h2>
+                <p className="text-xs text-muted-foreground">
+                  {t("groups.pageDescription")}
+                </p>
+              </div>
               <RippleButton
                 size="sm"
                 onClick={() => {
                   setCreateDialogOpen(true);
                 }}
-                className="flex gap-2 items-center"
+                className="flex gap-2 items-center shrink-0"
               >
-                <GoPlus className="w-4 h-4" />
+                <GoPlus className="size-4" />
                 {t("proxies.management.create")}
               </RippleButton>
             </div>
@@ -294,131 +600,64 @@ export function GroupManagementDialog({
                 {t("groups.noGroupsDescription")}
               </div>
             ) : (
-              <div className="border rounded-md">
-                <ScrollArea className="h-[240px]">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>{t("common.labels.name")}</TableHead>
-                        <TableHead className="w-20">
-                          {t("groupManagement.profilesCol")}
-                        </TableHead>
-                        <TableHead className="w-24">
-                          {t("proxies.management.syncCol")}
-                        </TableHead>
-                        <TableHead className="w-24">
-                          {t("common.labels.actions")}
-                        </TableHead>
+              <FadingScrollArea
+                className="flex-1 min-h-0"
+                style={
+                  {
+                    "--scroll-fade-top-offset": "32px",
+                  } as React.CSSProperties
+                }
+              >
+                <Table>
+                  <TableHeader className="sticky top-0 z-10 bg-background">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            key={header.id}
+                            style={{
+                              width: header.column.columnDef.size
+                                ? `${header.column.getSize()}px`
+                                : undefined,
+                            }}
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                          </TableHead>
+                        ))}
                       </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {groups.map((group) => {
-                        const syncDot = getSyncStatusDot(
-                          group,
-                          groupSyncStatus[group.id],
-                          t,
-                          groupSyncErrors[group.id],
-                        );
-                        return (
-                          <TableRow key={group.id}>
-                            <TableCell className="font-medium">
-                              <div className="flex items-center gap-2">
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <div
-                                      className={`w-2 h-2 rounded-full shrink-0 ${syncDot.color} ${
-                                        syncDot.animate ? "animate-pulse" : ""
-                                      }`}
-                                    />
-                                  </TooltipTrigger>
-                                  <TooltipContent>
-                                    <p>{syncDot.tooltip}</p>
-                                  </TooltipContent>
-                                </Tooltip>
-                                {group.name}
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <Badge variant="secondary">{group.count}</Badge>
-                            </TableCell>
-                            <TableCell>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <div className="flex items-center">
-                                    <Checkbox
-                                      checked={group.sync_enabled}
-                                      onCheckedChange={() =>
-                                        handleToggleSync(group)
-                                      }
-                                      disabled={
-                                        isTogglingSync[group.id] ||
-                                        groupInUse[group.id]
-                                      }
-                                    />
-                                  </div>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                  {groupInUse[group.id] ? (
-                                    <p>
-                                      {t("groupManagement.syncCannotDisable")}
-                                    </p>
-                                  ) : (
-                                    <p>
-                                      {group.sync_enabled
-                                        ? t("proxies.management.disableSync")
-                                        : t("proxies.management.enableSync")}
-                                    </p>
-                                  )}
-                                </TooltipContent>
-                              </Tooltip>
-                            </TableCell>
-                            <TableCell>
-                              <div className="flex gap-1">
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      onClick={() => {
-                                        handleEditGroup(group);
-                                      }}
-                                    >
-                                      <LuPencil className="w-4 h-4" />
-                                    </Button>
-                                  </TooltipTrigger>
-                                  <TooltipContent>
-                                    <p>
-                                      {t("groupManagement.editGroupTooltip")}
-                                    </p>
-                                  </TooltipContent>
-                                </Tooltip>
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      onClick={() => {
-                                        handleDeleteGroup(group);
-                                      }}
-                                    >
-                                      <LuTrash2 className="w-4 h-4" />
-                                    </Button>
-                                  </TooltipTrigger>
-                                  <TooltipContent>
-                                    <p>
-                                      {t("groupManagement.deleteGroupTooltip")}
-                                    </p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </div>
-                            </TableCell>
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                </ScrollArea>
-              </div>
+                    ))}
+                  </TableHeader>
+                  <TableBody>
+                    {table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell
+                            key={cell.id}
+                            style={{
+                              width: cell.column.columnDef.size
+                                ? `${cell.column.getSize()}px`
+                                : undefined,
+                            }}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </FadingScrollArea>
             )}
           </div>
 
@@ -432,6 +671,45 @@ export function GroupManagementDialog({
         </DialogContent>
       </Dialog>
 
+      {isOpen && (
+        <DataTableActionBar table={table}>
+          <DataTableActionBarSelection table={table} />
+          <DataTableActionBarAction
+            tooltip={t("syncTooltips.bulkToggle")}
+            onClick={() => {
+              void handleBulkToggleSync();
+            }}
+            size="icon"
+          >
+            <LuRefreshCw />
+          </DataTableActionBarAction>
+          <DataTableActionBarAction
+            tooltip={t("common.buttons.delete")}
+            onClick={() => setBulkDeleteOpen(true)}
+            size="icon"
+            variant="destructive"
+            className="border-destructive bg-destructive/50 hover:bg-destructive/70"
+          >
+            <LuTrash2 />
+          </DataTableActionBarAction>
+        </DataTableActionBar>
+      )}
+
+      <DeleteConfirmationDialog
+        isOpen={bulkDeleteOpen}
+        onClose={() => {
+          if (!isBulkDeleting) setBulkDeleteOpen(false);
+        }}
+        onConfirm={handleBulkDelete}
+        title={t("groupManagement.bulkDelete.title")}
+        description={t("groupManagement.bulkDelete.description", {
+          count: selectedGroupsForBulk.length,
+          names: selectedNames,
+        })}
+        confirmButtonText={t("groupManagement.bulkDelete.confirmButton")}
+        isLoading={isBulkDeleting}
+      />
+
       <CreateGroupDialog
         isOpen={createDialogOpen}
         onClose={() => {

src/components/home-header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GoPlus } from "react-icons/go";
 import { LuChevronLeft, LuChevronRight, LuSearch, LuX } from "react-icons/lu";
@@ -30,6 +30,7 @@ interface Props {
   searchQuery: string;
   onSearchQueryChange: (query: string) => void;
   groups: GroupWithCount[];
+  totalProfiles: number;
   selectedGroupId: string | null;
   onGroupSelect: (groupId: string) => void;
   pageTitle?: string;
@@ -40,6 +41,7 @@ const HomeHeader = ({
   searchQuery,
   onSearchQueryChange,
   groups,
+  totalProfiles,
   selectedGroupId,
   onGroupSelect,
   pageTitle,
@@ -54,11 +56,6 @@ const HomeHeader = ({
   const isMacOS = platform === "macos";
   const showProfileToolbar = !pageTitle;
 
-  const totalProfiles = useMemo(
-    () => groups.reduce((sum, g) => sum + g.count, 0),
-    [groups],
-  );
-
   // Press-and-hold drag: any pixel of the sys-bar becomes a drag handle after
   // HOLD_MS, but quick clicks still reach buttons/inputs underneath.
   const holdTimeoutRef = useRef<number | null>(null);
@@ -156,6 +153,8 @@ const HomeHeader = ({
     };
   }, []);
 
+  const isWindows = platform === "windows";
+
   return (
     <div
       ref={dragRootRef}
@@ -163,7 +162,15 @@ const HomeHeader = ({
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerEnd}
       onPointerCancel={handlePointerEnd}
-      className="flex items-center gap-2 h-11 px-3 border-b border-border bg-card select-none"
+      className={cn(
+        "flex items-center gap-2 h-11 pl-3 border-b border-border bg-card select-none",
+        // Windows: WindowDragArea renders two 44px native-style controls
+        // (minimize + close) fixed at top-right with z-50, total 88px wide.
+        // Reserve 100px on the right edge so the "+ New" button and search
+        // input clear them with a few pixels of breathing room — issues
+        // #358, #361, #362 all reported the same overlap before this fix.
+        isWindows ? "pr-[100px]" : "pr-3",
+      )}
     >
       {isMacOS && (
         <div
@@ -198,9 +205,9 @@ const HomeHeader = ({
                     behavior: "smooth",
                   });
               }}
-              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-5 h-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
+              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
             >
-              <LuChevronLeft className="w-3 h-3" />
+              <LuChevronLeft className="size-3" />
             </button>
           )}
           <div
@@ -237,8 +244,6 @@ const HomeHeader = ({
             })()}
             {groups.map((group) => {
               const active = selectedGroupId === group.id;
-              const label =
-                group.id === "default" ? t("groups.defaultGroup") : group.name;
               return (
                 <button
                   key={group.id}
@@ -253,7 +258,7 @@ const HomeHeader = ({
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
-                  <span>{label}</span>
+                  <span>{group.name}</span>
                   <span className="text-[11px] text-muted-foreground tabular-nums">
                     {group.count}
                   </span>
@@ -273,9 +278,9 @@ const HomeHeader = ({
                     behavior: "smooth",
                   });
               }}
-              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-5 h-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
+              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 grid place-items-center size-5 rounded-full bg-card/90 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors shadow-sm"
             >
-              <LuChevronRight className="w-3 h-3" />
+              <LuChevronRight className="size-3" />
             </button>
           )}
         </div>
@@ -294,7 +299,7 @@ const HomeHeader = ({
             }}
             className="pr-7 pl-8 w-52 h-7 text-xs"
           />
-          <LuSearch className="absolute left-2.5 top-1/2 w-3.5 h-3.5 transform -translate-y-1/2 text-muted-foreground pointer-events-none" />
+          <LuSearch className="absolute left-2.5 top-1/2 size-3.5 transform -translate-y-1/2 text-muted-foreground pointer-events-none" />
           {searchQuery ? (
             <button
               type="button"
@@ -304,7 +309,7 @@ const HomeHeader = ({
               className="absolute right-1.5 top-1/2 p-0.5 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent"
               aria-label={t("header.clearSearch")}
             >
-              <LuX className="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
+              <LuX className="size-3.5 text-muted-foreground hover:text-foreground" />
             </button>
           ) : null}
         </div>
@@ -321,7 +326,7 @@ const HomeHeader = ({
                 }}
                 className="flex gap-1.5 items-center h-7 px-2.5 text-xs"
               >
-                <GoPlus className="w-3.5 h-3.5" />
+                <GoPlus className="size-3.5" />
                 {t("header.newProfile")}
               </Button>
             </span>

src/components/import-profile-dialog.tsx

@@ -9,6 +9,12 @@ import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
 import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  AnimatedTabs,
+  AnimatedTabsContent,
+  AnimatedTabsList,
+  AnimatedTabsTrigger,
+} from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -304,31 +310,23 @@ export function ImportProfileDialog({
 
         <div className="overflow-y-auto flex-1 space-y-6 min-h-0">
           {currentStep === "select" && (
-            <>
-              <div className="flex gap-2">
-                <RippleButton
-                  variant={importMode === "auto-detect" ? "default" : "outline"}
-                  onClick={() => {
-                    setImportMode("auto-detect");
-                  }}
-                  className="flex-1"
-                  disabled={isLoading}
-                >
+            <AnimatedTabs
+              value={importMode}
+              onValueChange={(v) =>
+                setImportMode(v as "auto-detect" | "manual")
+              }
+              className="flex flex-col gap-6"
+            >
+              <AnimatedTabsList>
+                <AnimatedTabsTrigger value="auto-detect" disabled={isLoading}>
                   {t("importProfile.autoDetect")}
-                </RippleButton>
-                <RippleButton
-                  variant={importMode === "manual" ? "default" : "outline"}
-                  onClick={() => {
-                    setImportMode("manual");
-                  }}
-                  className="flex-1"
-                  disabled={isLoading}
-                >
+                </AnimatedTabsTrigger>
+                <AnimatedTabsTrigger value="manual" disabled={isLoading}>
                   {t("importProfile.manualImport")}
-                </RippleButton>
-              </div>
+                </AnimatedTabsTrigger>
+              </AnimatedTabsList>
 
-              {importMode === "auto-detect" && (
+              <AnimatedTabsContent value="auto-detect">
                 <div className="space-y-4">
                   <h3 className="text-lg font-medium">
                     {t("importProfile.detectedProfilesTitle")}
@@ -383,7 +381,7 @@ export function ImportProfileDialog({
                                 >
                                   <div className="flex gap-2 items-center">
                                     {IconComponent && (
-                                      <IconComponent className="w-4 h-4" />
+                                      <IconComponent className="size-4" />
                                     )}
                                     <div className="flex flex-col">
                                       <span className="font-medium">
@@ -439,9 +437,9 @@ export function ImportProfileDialog({
                     </div>
                   )}
                 </div>
-              )}
+              </AnimatedTabsContent>
 
-              {importMode === "manual" && (
+              <AnimatedTabsContent value="manual">
                 <div className="space-y-4">
                   <h3 className="text-lg font-medium">
                     {t("importProfile.manualTitle")}
@@ -475,7 +473,7 @@ export function ImportProfileDialog({
                               <SelectItem key={browser} value={browser}>
                                 <div className="flex gap-2 items-center">
                                   {IconComponent && (
-                                    <IconComponent className="w-4 h-4" />
+                                    <IconComponent className="size-4" />
                                   )}
                                   <span>{getBrowserDisplayName(browser)}</span>
                                 </div>
@@ -507,7 +505,7 @@ export function ImportProfileDialog({
                           onClick={() => void handleBrowseFolder()}
                           title={t("importProfile.browseFolderTitle")}
                         >
-                          <FaFolder className="w-4 h-4" />
+                          <FaFolder className="size-4" />
                         </Button>
                       </div>
                       <p className="mt-2 text-xs text-muted-foreground">
@@ -539,8 +537,8 @@ export function ImportProfileDialog({
                     </div>
                   </div>
                 </div>
-              )}
-            </>
+              </AnimatedTabsContent>
+            </AnimatedTabs>
           )}
 
           {currentStep === "configure" && currentMappedBrowser && (

src/components/integrations-dialog.tsx

@@ -4,8 +4,23 @@ import { invoke } from "@tauri-apps/api/core";
 import { Eye, EyeOff } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import {
+  LuAppWindow,
+  LuCheck,
+  LuCodeXml,
+  LuPlug,
+  LuTerminal,
+  LuTrash2,
+  LuZap,
+} from "react-icons/lu";
+import { AnimatedSwitch } from "@/components/ui/animated-switch";
+import {
+  AnimatedTabs,
+  AnimatedTabsContent,
+  AnimatedTabsList,
+  AnimatedTabsTrigger,
+} from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -14,8 +29,8 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useWayfernTerms } from "@/hooks/use-wayfern-terms";
+import { translateBackendError } from "@/lib/backend-errors";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import { CopyToClipboard } from "./ui/copy-to-clipboard";
 
@@ -33,16 +48,59 @@ interface McpConfig {
   token: string;
 }
 
+type AgentCategory = "desktop-app" | "cli" | "editor" | "editor-ext";
+
+interface McpAgentInfo {
+  id: string;
+  display_name: string;
+  category: AgentCategory;
+  connected: boolean;
+  detected: boolean;
+}
+
 interface IntegrationsDialogProps {
   isOpen: boolean;
   onClose: () => void;
   subPage?: boolean;
+  /** Which tab is displayed when the dialog mounts; defaults to "api". */
+  initialTab?: "api" | "mcp";
+}
+
+function AgentIcon({ category }: { category: AgentCategory }) {
+  const className = "size-4 text-muted-foreground";
+  switch (category) {
+    case "desktop-app":
+      return <LuAppWindow className={className} />;
+    case "editor":
+      return <LuCodeXml className={className} />;
+    case "editor-ext":
+      return <LuPlug className={className} />;
+    case "cli":
+      return <LuTerminal className={className} />;
+  }
+}
+
+function categoryLabel(
+  t: (k: string) => string,
+  category: AgentCategory,
+): string {
+  switch (category) {
+    case "desktop-app":
+      return t("integrations.mcp.category.desktopApp");
+    case "editor":
+      return t("integrations.mcp.category.editor");
+    case "editor-ext":
+      return t("integrations.mcp.category.editorExt");
+    case "cli":
+      return t("integrations.mcp.category.cli");
+  }
 }
 
 export function IntegrationsDialog({
   isOpen,
   onClose,
   subPage,
+  initialTab = "api",
 }: IntegrationsDialogProps) {
   const { t } = useTranslation();
   const [settings, setSettings] = useState<AppSettings>({
@@ -57,11 +115,12 @@ export function IntegrationsDialog({
   const [mcpConfig, setMcpConfig] = useState<McpConfig | null>(null);
   const [, setMcpRunning] = useState(false);
   const [showApiToken, setShowApiToken] = useState(false);
-  const [showMcpToken, setShowMcpToken] = useState(false);
+  const [showMcpUrl, setShowMcpUrl] = useState(false);
   const [isApiStarting, setIsApiStarting] = useState(false);
   const [isMcpStarting, setIsMcpStarting] = useState(false);
-  const [mcpInClaudeDesktop, setMcpInClaudeDesktop] = useState(false);
-  const [mcpInClaudeCode, setMcpInClaudeCode] = useState(false);
+  const [agents, setAgents] = useState<McpAgentInfo[]>([]);
+  const [busyAgentIds, setBusyAgentIds] = useState<Set<string>>(new Set());
+  const [apiPortDraft, setApiPortDraft] = useState<string>("10108");
 
   const { termsAccepted } = useWayfernTerms();
 
@@ -69,6 +128,7 @@ export function IntegrationsDialog({
     try {
       const loaded = await invoke<AppSettings>("get_app_settings");
       setSettings(loaded);
+      setApiPortDraft(String(loaded.api_port ?? ""));
     } catch (e) {
       console.error("Failed to load settings:", e);
     }
@@ -101,21 +161,12 @@ export function IntegrationsDialog({
     }
   }, []);
 
-  const loadClaudeDesktopStatus = useCallback(async () => {
+  const loadAgents = useCallback(async () => {
     try {
-      const exists = await invoke<boolean>("is_mcp_in_claude_desktop");
-      setMcpInClaudeDesktop(exists);
-    } catch {
-      // Not critical
-    }
-  }, []);
-
-  const loadClaudeCodeStatus = useCallback(async () => {
-    try {
-      const exists = await invoke<boolean>("is_mcp_in_claude_code");
-      setMcpInClaudeCode(exists);
-    } catch {
-      // Claude CLI may not be installed
+      const list = await invoke<McpAgentInfo[]>("list_mcp_agents");
+      setAgents(list);
+    } catch (e) {
+      console.error("Failed to list MCP agents:", e);
     }
   }, []);
 
@@ -125,8 +176,7 @@ export function IntegrationsDialog({
       void loadApiServerStatus();
       void loadMcpConfig();
       void loadMcpServerStatus();
-      void loadClaudeDesktopStatus();
-      void loadClaudeCodeStatus();
+      void loadAgents();
     }
   }, [
     isOpen,
@@ -134,8 +184,7 @@ export function IntegrationsDialog({
     loadApiServerStatus,
     loadMcpConfig,
     loadMcpServerStatus,
-    loadClaudeDesktopStatus,
-    loadClaudeCodeStatus,
+    loadAgents,
   ]);
 
   const handleApiToggle = async (enabled: boolean) => {
@@ -181,6 +230,7 @@ export function IntegrationsDialog({
         });
         setSettings(next);
         void loadMcpConfig();
+        void loadAgents();
         showSuccessToast(t("integrations.mcpStarted", { port }));
       } else {
         await invoke("stop_mcp_server");
@@ -202,6 +252,53 @@ export function IntegrationsDialog({
     }
   };
 
+  const markAgentBusy = (id: string, busy: boolean) => {
+    setBusyAgentIds((prev) => {
+      const next = new Set(prev);
+      if (busy) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  };
+
+  const handleAddAgent = async (agent: McpAgentInfo) => {
+    markAgentBusy(agent.id, true);
+    try {
+      await invoke("add_mcp_to_agent", { agentId: agent.id });
+      showSuccessToast(
+        t("integrations.mcp.addedToClient", { name: agent.display_name }),
+      );
+      void loadAgents();
+    } catch (e) {
+      showErrorToast(translateBackendError(t, e), {
+        description: agent.display_name,
+      });
+    } finally {
+      markAgentBusy(agent.id, false);
+    }
+  };
+
+  const handleRemoveAgent = async (agent: McpAgentInfo) => {
+    markAgentBusy(agent.id, true);
+    try {
+      await invoke("remove_mcp_from_agent", { agentId: agent.id });
+      showSuccessToast(
+        t("integrations.mcp.removedFromClient", { name: agent.display_name }),
+      );
+      void loadAgents();
+    } catch (e) {
+      showErrorToast(translateBackendError(t, e), {
+        description: agent.display_name,
+      });
+    } finally {
+      markAgentBusy(agent.id, false);
+    }
+  };
+
+  const mcpUrl = mcpConfig
+    ? `http://127.0.0.1:${mcpConfig.port}/mcp/${mcpConfig.token}`
+    : "";
+
   return (
     <Dialog
       open={isOpen}
@@ -210,7 +307,7 @@ export function IntegrationsDialog({
       }}
       subPage={subPage}
     >
-      <DialogContent className="max-w-xl max-h-[80vh] my-8 flex flex-col">
+      <DialogContent className="max-w-3xl max-h-[85vh] my-8 flex flex-col">
         {!subPage && (
           <DialogHeader className="shrink-0">
             <DialogTitle>{t("integrations.title")}</DialogTitle>
@@ -218,200 +315,246 @@ export function IntegrationsDialog({
         )}
 
         <div className="overflow-y-auto flex-1 min-h-0">
-          <Tabs defaultValue="api" className="w-full">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="api">{t("integrations.tabApi")}</TabsTrigger>
-              <TabsTrigger value="mcp">{t("integrations.tabMcp")}</TabsTrigger>
-            </TabsList>
+          <AnimatedTabs key={initialTab} defaultValue={initialTab}>
+            <AnimatedTabsList>
+              <AnimatedTabsTrigger value="api">
+                {t("integrations.tabApi")}
+              </AnimatedTabsTrigger>
+              <AnimatedTabsTrigger value="mcp">
+                {t("integrations.tabMcp")}
+              </AnimatedTabsTrigger>
+            </AnimatedTabsList>
 
-            <TabsContent value="api" className="space-y-4 mt-4">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="api-enabled"
-                  checked={apiServerPort !== null}
-                  disabled={isApiStarting}
-                  onCheckedChange={(checked) => void handleApiToggle(!!checked)}
-                />
-                <div className="grid gap-1.5 leading-none">
-                  <Label
-                    htmlFor="api-enabled"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    {t("integrations.apiEnableLabel")}
-                  </Label>
-                  <p className="text-xs text-muted-foreground">
-                    {t("integrations.apiEnableDescription")}
-                  </p>
+            <AnimatedTabsContent
+              value="api"
+              className="mt-4 flex flex-col gap-4"
+            >
+              <div className="rounded-md border bg-card p-4 flex flex-col gap-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-start gap-3">
+                    <LuPlug className="size-5 mt-0.5 text-muted-foreground" />
+                    <div className="flex flex-col gap-1">
+                      <Label className="text-sm font-medium">
+                        {t("integrations.apiEnableLabel")}
+                      </Label>
+                      <p className="text-xs text-muted-foreground">
+                        {t("integrations.apiEnableDescription")}
+                      </p>
+                    </div>
+                  </div>
+                  <AnimatedSwitch
+                    checked={apiServerPort !== null}
+                    disabled={isApiStarting}
+                    onCheckedChange={(checked) => void handleApiToggle(checked)}
+                  />
                 </div>
+
+                {apiServerPort && (
+                  <div className="flex items-center gap-2 text-xs">
+                    <span className="size-1.5 rounded-full bg-success" />
+                    <span className="text-muted-foreground">
+                      {t("integrations.apiRunningOn")}
+                    </span>
+                    <code className="rounded bg-muted px-2 py-1 font-mono text-[11px]">
+                      http://127.0.0.1:{apiServerPort}
+                    </code>
+                  </div>
+                )}
               </div>
 
               {settings.api_enabled && (
-                <div className="space-y-4 p-4 rounded-md border bg-muted/40">
-                  <div className="space-y-2">
-                    <Label className="text-sm font-medium">
-                      {t("integrations.apiPortLabel")}
-                    </Label>
-                    <div className="flex items-center space-x-2">
-                      <Button
-                        size="sm"
-                        disabled={
-                          isApiStarting || apiServerPort === settings.api_port
-                        }
-                        onClick={async () => {
-                          const port = settings.api_port;
-                          if (port < 1 || port > 65535) {
-                            showErrorToast(t("integrations.apiInvalidPort"), {
-                              description: t(
-                                "integrations.apiInvalidPortDescription",
-                              ),
-                            });
-                            return;
-                          }
-                          setIsApiStarting(true);
-                          try {
-                            await invoke("stop_api_server");
-                            const next = await invoke<AppSettings>(
-                              "save_app_settings",
-                              { settings },
-                            );
-                            setSettings(next);
-                            const actualPort = await invoke<number>(
-                              "start_api_server",
-                              { port },
-                            );
-                            setApiServerPort(actualPort);
-                            if (actualPort !== port) {
-                              showErrorToast(
-                                t("integrations.apiPortInUse", { port }),
-                                {
-                                  description: t(
-                                    "integrations.apiFallbackPort",
-                                    { port: actualPort },
-                                  ),
-                                },
-                              );
-                            } else {
-                              showSuccessToast(
-                                t("integrations.apiRunning", {
-                                  port: actualPort,
-                                }),
-                              );
-                            }
-                          } catch (e) {
-                            showErrorToast(t("integrations.apiStartFailed"), {
-                              description:
-                                e instanceof Error
-                                  ? e.message
-                                  : t("integrations.apiUnknownError"),
-                            });
-                          } finally {
-                            setIsApiStarting(false);
-                          }
-                        }}
-                      >
-                        {t("common.buttons.save")}
-                      </Button>
-                      <Input
-                        type="number"
-                        value={settings.api_port}
-                        onChange={(e) => {
-                          const val = Number.parseInt(e.target.value, 10);
-                          if (!Number.isNaN(val)) {
-                            setSettings({ ...settings, api_port: val });
-                          }
-                        }}
-                        className="w-24 font-mono"
-                        min={1}
-                        max={65535}
-                      />
-                      {apiServerPort && (
-                        <span className="text-xs text-muted-foreground">
-                          {t("common.status.running")}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label className="text-sm font-medium">
-                      {t("integrations.apiTokenLabel")}
-                    </Label>
-                    <div className="flex items-center space-x-2">
-                      <div className="relative flex-1">
+                <>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                      <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {t("integrations.apiPortLabel")}
+                      </Label>
+                      <div className="flex items-center gap-2">
                         <Input
-                          type={showApiToken ? "text" : "password"}
-                          value={settings.api_token ?? ""}
-                          readOnly
-                          className="font-mono pr-10"
+                          type="number"
+                          value={apiPortDraft}
+                          onChange={(e) => {
+                            setApiPortDraft(e.target.value);
+                            const val = Number.parseInt(e.target.value, 10);
+                            if (
+                              !Number.isNaN(val) &&
+                              val >= 1 &&
+                              val <= 65535
+                            ) {
+                              setSettings({ ...settings, api_port: val });
+                            }
+                          }}
+                          onBlur={() => {
+                            const val = Number.parseInt(apiPortDraft, 10);
+                            if (Number.isNaN(val) || val < 1 || val > 65535) {
+                              setApiPortDraft(String(settings.api_port));
+                            }
+                          }}
+                          className="w-24 font-mono"
+                          min={1}
+                          max={65535}
                         />
                         <Button
-                          type="button"
-                          variant="ghost"
                           size="sm"
-                          className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
-                          onClick={() => {
-                            setShowApiToken(!showApiToken);
+                          variant="outline"
+                          disabled={
+                            isApiStarting || apiServerPort === settings.api_port
+                          }
+                          onClick={async () => {
+                            const port = settings.api_port;
+                            if (port < 1 || port > 65535) {
+                              showErrorToast(t("integrations.apiInvalidPort"), {
+                                description: t(
+                                  "integrations.apiInvalidPortDescription",
+                                ),
+                              });
+                              return;
+                            }
+                            setIsApiStarting(true);
+                            try {
+                              await invoke("stop_api_server");
+                              const next = await invoke<AppSettings>(
+                                "save_app_settings",
+                                { settings },
+                              );
+                              setSettings(next);
+                              const actualPort = await invoke<number>(
+                                "start_api_server",
+                                { port },
+                              );
+                              setApiServerPort(actualPort);
+                              if (actualPort !== port) {
+                                showErrorToast(
+                                  t("integrations.apiPortInUse", { port }),
+                                  {
+                                    description: t(
+                                      "integrations.apiFallbackPort",
+                                      { port: actualPort },
+                                    ),
+                                  },
+                                );
+                              } else {
+                                showSuccessToast(
+                                  t("integrations.apiRunning", {
+                                    port: actualPort,
+                                  }),
+                                );
+                              }
+                            } catch (e) {
+                              showErrorToast(t("integrations.apiStartFailed"), {
+                                description:
+                                  e instanceof Error
+                                    ? e.message
+                                    : t("integrations.apiUnknownError"),
+                              });
+                            } finally {
+                              setIsApiStarting(false);
+                            }
                           }}
                         >
-                          {showApiToken ? (
-                            <EyeOff className="h-4 w-4" />
-                          ) : (
-                            <Eye className="h-4 w-4" />
-                          )}
+                          {t("common.buttons.save")}
                         </Button>
                       </div>
+                    </div>
+
+                    <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                      <div className="flex items-center justify-between">
+                        <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {t("integrations.apiTokenLabel")}
+                        </Label>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="relative flex-1">
+                          <Input
+                            type={showApiToken ? "text" : "password"}
+                            value={settings.api_token ?? ""}
+                            readOnly
+                            className="font-mono pr-10"
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                            onClick={() => {
+                              setShowApiToken(!showApiToken);
+                            }}
+                          >
+                            {showApiToken ? (
+                              <EyeOff className="size-4" />
+                            ) : (
+                              <Eye className="size-4" />
+                            )}
+                          </Button>
+                        </div>
+                        <CopyToClipboard
+                          text={settings.api_token ?? ""}
+                          successMessage={t("integrations.tokenCopied")}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        {t("integrations.apiExampleRequest")}
+                      </Label>
                       <CopyToClipboard
-                        text={settings.api_token ?? ""}
-                        successMessage={t("integrations.tokenCopied")}
+                        text={`curl -H "Authorization: Bearer ${settings.api_token ?? "${TOKEN}"}" \\\n     http://127.0.0.1:${apiServerPort ?? settings.api_port}/v1/profiles`}
+                        successMessage={t("common.buttons.copied")}
                       />
                     </div>
-                    <p className="text-xs text-muted-foreground">
-                      {t("integrations.apiTokenHint", {
-                        tokenSlot: "<token>",
-                      })}
-                    </p>
+                    <pre className="font-mono text-[11px] whitespace-pre overflow-x-auto bg-background rounded p-3">
+                      {`curl -H "Authorization: Bearer \${TOKEN}" \\
+     http://127.0.0.1:${apiServerPort ?? settings.api_port}/v1/profiles`}
+                    </pre>
                   </div>
-                </div>
+                </>
               )}
-            </TabsContent>
+            </AnimatedTabsContent>
 
-            <TabsContent value="mcp" className="space-y-4 mt-4">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="mcp-enabled"
-                  checked={settings.mcp_enabled && mcpConfig !== null}
-                  disabled={!termsAccepted || isMcpStarting}
-                  onCheckedChange={(checked) => void handleMcpToggle(!!checked)}
-                />
-                <div className="grid gap-1.5 leading-none">
-                  <Label
-                    htmlFor="mcp-enabled"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    {t("integrations.mcpEnableLabel")}
-                  </Label>
-                  <p className="text-xs text-muted-foreground">
-                    {t("integrations.mcpEnableDescription")}
-                    {!termsAccepted && (
-                      <span className="ml-1 text-warning">
-                        {t("integrations.mcpAcceptTermsFirst")}
-                      </span>
-                    )}
-                  </p>
+            <AnimatedTabsContent
+              value="mcp"
+              className="mt-4 flex flex-col gap-5"
+            >
+              <div className="rounded-md border bg-card p-4 flex flex-col gap-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-start gap-3">
+                    <LuZap className="size-5 mt-0.5 text-muted-foreground" />
+                    <div className="flex flex-col gap-1">
+                      <Label className="text-sm font-medium">
+                        {t("integrations.mcpEnableLabel")}
+                      </Label>
+                      <p className="text-xs text-muted-foreground">
+                        {t("integrations.mcpEnableDescription")}
+                        {!termsAccepted && (
+                          <span className="ml-1 text-warning">
+                            {t("integrations.mcpAcceptTermsFirst")}
+                          </span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                  <AnimatedSwitch
+                    checked={settings.mcp_enabled && mcpConfig !== null}
+                    disabled={!termsAccepted || isMcpStarting}
+                    onCheckedChange={(checked) => void handleMcpToggle(checked)}
+                  />
                 </div>
               </div>
 
               {mcpConfig && (
-                <div className="space-y-4 p-4 rounded-md border bg-muted/40">
-                  <div className="space-y-2">
-                    <Label className="text-sm font-medium">
+                <>
+                  <div className="rounded-md border bg-card p-4 flex flex-col gap-2">
+                    <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
                       {t("integrations.mcp.url")}
                     </Label>
-                    <div className="flex items-center space-x-2">
+                    <div className="flex items-center gap-x-2">
                       <div className="relative flex-1">
                         <Input
-                          type={showMcpToken ? "text" : "password"}
-                          value={`http://127.0.0.1:${mcpConfig.port}/mcp/${mcpConfig.token}`}
+                          type={showMcpUrl ? "text" : "password"}
+                          value={mcpUrl}
                           readOnly
                           className="font-mono text-xs pr-10"
                         />
@@ -421,116 +564,88 @@ export function IntegrationsDialog({
                           size="sm"
                           className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
                           onClick={() => {
-                            setShowMcpToken(!showMcpToken);
+                            setShowMcpUrl(!showMcpUrl);
                           }}
                         >
-                          {showMcpToken ? (
-                            <EyeOff className="h-4 w-4" />
+                          {showMcpUrl ? (
+                            <EyeOff className="size-4" />
                           ) : (
-                            <Eye className="h-4 w-4" />
+                            <Eye className="size-4" />
                           )}
                         </Button>
                       </div>
                       <CopyToClipboard
-                        text={`http://127.0.0.1:${mcpConfig.port}/mcp/${mcpConfig.token}`}
+                        text={mcpUrl}
                         successMessage={t("integrations.mcp.urlCopied")}
                       />
                     </div>
                   </div>
 
-                  <div className="space-y-2 pt-1 border-t">
-                    <p className="text-xs font-medium text-muted-foreground">
-                      {t("integrations.mcp.claudeDesktopTitle")}
-                    </p>
-                    {mcpInClaudeDesktop ? (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full"
-                        onClick={async () => {
-                          try {
-                            await invoke("remove_mcp_from_claude_desktop");
-                            setMcpInClaudeDesktop(false);
-                            showSuccessToast(
-                              t("integrations.mcp.removedFromClaudeDesktop"),
-                            );
-                          } catch (e) {
-                            showErrorToast(String(e));
-                          }
-                        }}
-                      >
-                        {t("integrations.mcp.removeFromClaudeDesktop")}
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full"
-                        onClick={async () => {
-                          try {
-                            await invoke("add_mcp_to_claude_desktop");
-                            setMcpInClaudeDesktop(true);
-                            showSuccessToast(
-                              t("integrations.mcp.addedToClaudeDesktop"),
-                            );
-                          } catch (e) {
-                            showErrorToast(String(e));
-                          }
-                        }}
-                      >
-                        {t("integrations.mcp.addToClaudeDesktop")}
-                      </Button>
-                    )}
+                  <div className="flex flex-col gap-3">
+                    <Label className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      {t("integrations.mcp.clientsLabel")}
+                    </Label>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                      {agents.map((agent) => {
+                        const busy = busyAgentIds.has(agent.id);
+                        return (
+                          <div
+                            key={agent.id}
+                            className="rounded-md border bg-card px-3 py-2.5 flex items-center gap-3"
+                          >
+                            <div className="grid place-items-center size-8 rounded-md bg-muted shrink-0">
+                              <AgentIcon category={agent.category} />
+                            </div>
+                            <div className="min-w-0 flex-1">
+                              <p className="text-sm font-medium truncate">
+                                {agent.display_name}
+                              </p>
+                              <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                                {categoryLabel(t, agent.category)}
+                              </p>
+                            </div>
+                            {agent.connected ? (
+                              <div className="flex items-center gap-1">
+                                <span className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-foreground">
+                                  <LuCheck className="size-3" />
+                                  {t("integrations.mcp.connected")}
+                                </span>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-8 text-muted-foreground hover:text-destructive"
+                                  disabled={busy}
+                                  onClick={() => void handleRemoveAgent(agent)}
+                                  aria-label={t(
+                                    "integrations.mcp.removeAriaLabel",
+                                    {
+                                      name: agent.display_name,
+                                    },
+                                  )}
+                                >
+                                  <LuTrash2 className="size-4" />
+                                </Button>
+                              </div>
+                            ) : (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                disabled={busy}
+                                onClick={() => void handleAddAgent(agent)}
+                              >
+                                {t("integrations.mcp.add")}
+                              </Button>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
                   </div>
-
-                  <div className="space-y-2 pt-1 border-t">
-                    <p className="text-xs font-medium text-muted-foreground">
-                      {t("integrations.mcp.claudeCodeTitle")}
-                    </p>
-                    {mcpInClaudeCode ? (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full"
-                        onClick={async () => {
-                          try {
-                            await invoke("remove_mcp_from_claude_code");
-                            setMcpInClaudeCode(false);
-                            showSuccessToast(
-                              t("integrations.mcp.removedFromClaudeCode"),
-                            );
-                          } catch (e) {
-                            showErrorToast(String(e));
-                          }
-                        }}
-                      >
-                        {t("integrations.mcp.removeFromClaudeCode")}
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full"
-                        onClick={async () => {
-                          try {
-                            await invoke("add_mcp_to_claude_code");
-                            setMcpInClaudeCode(true);
-                            showSuccessToast(
-                              t("integrations.mcp.addedToClaudeCode"),
-                            );
-                          } catch (e) {
-                            showErrorToast(String(e));
-                          }
-                        }}
-                      >
-                        {t("integrations.mcp.addToClaudeCode")}
-                      </Button>
-                    )}
-                  </div>
-                </div>
+                </>
               )}
-            </TabsContent>
-          </Tabs>
+            </AnimatedTabsContent>
+          </AnimatedTabs>
         </div>
       </DialogContent>
     </Dialog>

src/components/loading-button.tsx

@@ -12,12 +12,12 @@ type Props = ButtonProps & {
 export const LoadingButton = ({ isLoading, className, ...props }: Props) => {
   return (
     <UIButton
-      className={cn("grid place-items-center", className)}
+      className={cn("inline-flex items-center justify-center", className)}
       {...props}
       disabled={props.disabled || isLoading}
     >
       {isLoading ? (
-        <LuLoaderCircle className="h-4 w-4 animate-spin" />
+        <LuLoaderCircle className="size-4 animate-spin" />
       ) : (
         props.children
       )}

src/components/location-proxy-dialog.tsx

@@ -26,6 +26,10 @@ interface LocationProxyDialogProps {
   onClose: () => void;
 }
 
+function LoadingSpinner() {
+  return <Loader2 className="size-4 animate-spin text-muted-foreground" />;
+}
+
 export function LocationProxyDialog({
   isOpen,
   onClose,
@@ -219,10 +223,6 @@ export function LocationProxyDialog({
   const cityOptions = cities.map((c) => ({ value: c.code, label: c.name }));
   const ispOptions = isps.map((i) => ({ value: i.code, label: i.name }));
 
-  const LoadingSpinner = () => (
-    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-  );
-
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="max-w-md">

src/components/multiple-selector.tsx

@@ -434,7 +434,7 @@ const MultipleSelector = React.forwardRef<
                       handleUnselect(option);
                     }}
                   >
-                    <LuX className="w-3 h-3 text-muted-foreground hover:text-foreground" />
+                    <LuX className="size-3 text-muted-foreground hover:text-foreground" />
                   </button>
                 </Badge>
               );

src/components/permission-dialog.tsx

@@ -131,9 +131,9 @@ export function PermissionDialog({
   const getPermissionIcon = (type: PermissionType) => {
     switch (type) {
       case "microphone":
-        return <BsMic className="w-8 h-8" />;
+        return <BsMic className="size-8" />;
       case "camera":
-        return <BsCamera className="w-8 h-8" />;
+        return <BsCamera className="size-8" />;
     }
   };
 
@@ -195,7 +195,7 @@ export function PermissionDialog({
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-md">
         <DialogHeader className="text-center">
-          <div className="flex justify-center items-center mx-auto mb-4 w-16 h-16 bg-primary/15 rounded-full">
+          <div className="flex justify-center items-center mx-auto mb-4 size-16 bg-primary/15 rounded-full">
             {getPermissionIcon(permissionType)}
           </div>
           <DialogTitle className="text-xl">

src/components/profile-data-table.tsx

@@ -350,11 +350,11 @@ function ExtCell({
           disabled={isSaving}
           className="flex items-center gap-1.5 h-7 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded transition-colors duration-100 w-full text-left disabled:opacity-50"
         >
-          <LuPuzzle className="w-3 h-3 shrink-0" />
+          <LuPuzzle className="size-3 shrink-0" />
           <span className="truncate flex-1" title={label}>
             {label}
           </span>
-          <LuChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
+          <LuChevronDown className="size-3 shrink-0 text-muted-foreground" />
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-56 p-0" align="start">
@@ -369,7 +369,7 @@ function ExtCell({
                   void onPick(null);
                 }}
               >
-                {groupId === null && <LuCheck className="mr-2 w-3.5 h-3.5" />}
+                {groupId === null && <LuCheck className="mr-2 size-3.5" />}
                 <span className={groupId === null ? "" : "ml-5"}>
                   {meta.t("profiles.table.extDefault")}
                 </span>
@@ -382,7 +382,7 @@ function ExtCell({
                     void onPick(g.id);
                   }}
                 >
-                  {groupId === g.id && <LuCheck className="mr-2 w-3.5 h-3.5" />}
+                  {groupId === g.id && <LuCheck className="mr-2 size-3.5" />}
                   <span className={groupId === g.id ? "" : "ml-5"}>
                     {g.name}
                   </span>
@@ -416,13 +416,17 @@ function DnsCell({
     { value: "pro_plus", labelKey: "dnsBlocklist.proPlus" },
     { value: "ultimate", labelKey: "dnsBlocklist.ultimate" },
   ];
+  const currentLabel =
+    level === null
+      ? null
+      : (LEVELS.find((l) => l.value === level)?.labelKey ?? null);
 
   const onPick = async (nextLevel: string | null) => {
     setIsSaving(true);
     try {
       await invoke("update_profile_dns_blocklist", {
         profileId: profile.id,
-        level: nextLevel,
+        dnsBlocklist: nextLevel,
       });
     } catch (err) {
       console.error("Failed to update DNS blocklist:", err);
@@ -445,11 +449,11 @@ function DnsCell({
               : meta.t("dnsBlocklist.none")
           }
         >
-          <FiWifi className="w-3 h-3 shrink-0" />
-          <span className="flex-1 truncate uppercase text-[10px] font-mono tracking-wide">
-            {level ?? "—"}
+          <FiWifi className="size-3 shrink-0" />
+          <span className="flex-1 truncate text-[11px] tracking-wide">
+            {currentLabel ? meta.t(currentLabel) : "—"}
           </span>
-          <LuChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
+          <LuChevronDown className="size-3 shrink-0 text-muted-foreground" />
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-48 p-0" align="start">
@@ -462,7 +466,7 @@ function DnsCell({
                   void onPick(null);
                 }}
               >
-                {level === null && <LuCheck className="mr-2 w-3.5 h-3.5" />}
+                {level === null && <LuCheck className="mr-2 size-3.5" />}
                 <span className={level === null ? "" : "ml-5"}>
                   {meta.t("dnsBlocklist.none")}
                 </span>
@@ -475,9 +479,7 @@ function DnsCell({
                     void onPick(l.value);
                   }}
                 >
-                  {level === l.value && (
-                    <LuCheck className="mr-2 w-3.5 h-3.5" />
-                  )}
+                  {level === l.value && <LuCheck className="mr-2 size-3.5" />}
                   <span className={level === l.value ? "" : "ml-5"}>
                     {meta.t(l.labelKey)}
                   </span>
@@ -689,7 +691,7 @@ const TagsCell = React.memo<{
       );
 
       return (
-        <div className="w-40 h-6 cursor-pointer">
+        <div className="w-full h-6 cursor-pointer">
           <Tooltip>
             <TooltipTrigger asChild>{ButtonContent}</TooltipTrigger>
             {hiddenCount > 0 && (
@@ -715,7 +717,7 @@ const TagsCell = React.memo<{
     return (
       <div
         className={cn(
-          "w-40 h-6 relative",
+          "w-full h-6 relative",
           isDisabled && "opacity-60 pointer-events-none",
         )}
       >
@@ -923,19 +925,17 @@ const NoteCell = React.memo<{
     }, [openNoteEditorFor, profile.id]);
 
     const displayNote = effectiveNote ?? "";
-    const trimmedNote =
-      displayNote.length > 12 ? `${displayNote.slice(0, 12)}...` : displayNote;
-    const showTooltip = displayNote.length > 12 || displayNote.length > 0;
+    const showTooltip = displayNote.length > 0;
 
     if (openNoteEditorFor !== profile.id) {
       return (
-        <div className="w-24 min-h-6">
+        <div className="w-full min-h-6">
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 type="button"
                 className={cn(
-                  "flex items-start px-2 py-1 min-h-6 w-full bg-transparent rounded border-none text-left",
+                  "flex items-center px-2 py-1 min-h-6 w-full min-w-0 bg-transparent rounded border-none text-left",
                   isDisabled
                     ? "opacity-60 cursor-not-allowed"
                     : "cursor-pointer hover:bg-accent/50",
@@ -949,11 +949,11 @@ const NoteCell = React.memo<{
               >
                 <span
                   className={cn(
-                    "text-sm wrap-break-word",
+                    "text-sm truncate block w-full",
                     !effectiveNote && "text-muted-foreground",
                   )}
                 >
-                  {effectiveNote ? trimmedNote : t("profiles.note.empty")}
+                  {effectiveNote ? displayNote : t("profiles.note.empty")}
                 </span>
               </button>
             </TooltipTrigger>
@@ -972,7 +972,7 @@ const NoteCell = React.memo<{
     return (
       <div
         className={cn(
-          "w-24 relative",
+          "w-full relative",
           isDisabled && "opacity-60 pointer-events-none",
         )}
       >
@@ -1050,6 +1050,13 @@ interface ProfilesDataTableProps {
   onSetPassword?: (profile: BrowserProfile) => void;
   onChangePassword?: (profile: BrowserProfile) => void;
   onRemovePassword?: (profile: BrowserProfile) => void;
+  /**
+   * When provided, the info dialog is controlled by the parent. Allows the
+   * command palette in page.tsx to open the dialog directly without lifting
+   * every other piece of internal table state.
+   */
+  infoDialogProfile?: BrowserProfile | null;
+  onInfoDialogProfileChange?: (profile: BrowserProfile | null) => void;
 }
 
 export function ProfilesDataTable({
@@ -1082,6 +1089,8 @@ export function ProfilesDataTable({
   onSetPassword,
   onChangePassword,
   onRemovePassword,
+  infoDialogProfile,
+  onInfoDialogProfileChange,
 }: ProfilesDataTableProps) {
   const { t } = useTranslation();
   const { getTableSorting, updateSorting, isLoaded } = useTableSorting();
@@ -1153,8 +1162,22 @@ export function ProfilesDataTable({
   const [profileToDelete, setProfileToDelete] =
     React.useState<BrowserProfile | null>(null);
   const [isDeleting, setIsDeleting] = React.useState(false);
-  const [profileForInfoDialog, setProfileForInfoDialog] =
+  const [internalInfoDialogProfile, setInternalInfoDialogProfile] =
     React.useState<BrowserProfile | null>(null);
+  const isInfoDialogControlled = onInfoDialogProfileChange !== undefined;
+  const profileForInfoDialog = isInfoDialogControlled
+    ? (infoDialogProfile ?? null)
+    : internalInfoDialogProfile;
+  const setProfileForInfoDialog = React.useCallback(
+    (p: BrowserProfile | null) => {
+      if (isInfoDialogControlled) {
+        onInfoDialogProfileChange?.(p);
+      } else {
+        setInternalInfoDialogProfile(p);
+      }
+    },
+    [isInfoDialogControlled, onInfoDialogProfileChange],
+  );
   const [bypassRulesProfile, setBypassRulesProfile] =
     React.useState<BrowserProfile | null>(null);
   const [dnsBlocklistProfile, setDnsBlocklistProfile] =
@@ -1960,7 +1983,7 @@ export function ProfilesDataTable({
             return (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex justify-center items-center w-4 h-4">
+                  <span className="flex justify-center items-center size-4">
                     <button
                       type="button"
                       className="flex justify-center items-center p-0 border-none cursor-pointer"
@@ -1969,9 +1992,9 @@ export function ProfilesDataTable({
                       }}
                       aria-label={t("common.aria.selectProfile")}
                     >
-                      <span className="w-4 h-4 group">
-                        <OsIcon className="w-4 h-4 text-muted-foreground group-hover:hidden" />
-                        <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
+                      <span className="size-4 group">
+                        <OsIcon className="size-4 text-muted-foreground group-hover:hidden" />
+                        <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
                       </span>
                     </button>
                   </span>
@@ -1999,14 +2022,14 @@ export function ProfilesDataTable({
                 sideOffset={4}
                 horizontalOffset={8}
               >
-                <span className="flex justify-center items-center w-4 h-4">
+                <span className="flex justify-center items-center size-4">
                   <Checkbox
                     checked={isSelected}
                     onCheckedChange={(value) => {
                       meta.handleCheckboxChange(profile.id, !!value);
                     }}
                     aria-label={t("common.aria.selectRow")}
-                    className="w-4 h-4"
+                    className="size-4"
                   />
                 </span>
               </NonHoverableTooltip>
@@ -2025,9 +2048,9 @@ export function ProfilesDataTable({
             return (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex justify-center items-center w-4 h-4 cursor-not-allowed">
+                  <span className="flex justify-center items-center size-4 cursor-not-allowed">
                     {IconComponent && (
-                      <IconComponent className="w-4 h-4 opacity-50" />
+                      <IconComponent className="size-4 opacity-50" />
                     )}
                   </span>
                 </TooltipTrigger>
@@ -2047,14 +2070,14 @@ export function ProfilesDataTable({
                 sideOffset={4}
                 horizontalOffset={8}
               >
-                <span className="flex justify-center items-center w-4 h-4">
+                <span className="flex justify-center items-center size-4">
                   <Checkbox
                     checked={isSelected}
                     onCheckedChange={(value) => {
                       meta.handleCheckboxChange(profile.id, !!value);
                     }}
                     aria-label={t("common.aria.selectRow")}
-                    className="w-4 h-4"
+                    className="size-4"
                   />
                 </span>
               </NonHoverableTooltip>
@@ -2067,7 +2090,7 @@ export function ProfilesDataTable({
               sideOffset={4}
               horizontalOffset={8}
             >
-              <span className="flex relative justify-center items-center w-4 h-4">
+              <span className="flex relative justify-center items-center size-4">
                 <button
                   type="button"
                   className="flex justify-center items-center p-0 border-none cursor-pointer"
@@ -2076,11 +2099,11 @@ export function ProfilesDataTable({
                   }}
                   aria-label={t("common.aria.selectProfile")}
                 >
-                  <span className="w-4 h-4 group">
+                  <span className="size-4 group">
                     {IconComponent && (
-                      <IconComponent className="w-4 h-4 group-hover:hidden" />
+                      <IconComponent className="size-4 group-hover:hidden" />
                     )}
-                    <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
+                    <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none size-4 hidden group-hover:block pointer-events-none items-center justify-center duration-150" />
                   </span>
                 </button>
               </span>
@@ -2194,7 +2217,7 @@ export function ProfilesDataTable({
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span>
-                      <LuTriangleAlert className="w-4 h-4 text-warning" />
+                      <LuTriangleAlert className="size-4 text-warning" />
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -2217,7 +2240,7 @@ export function ProfilesDataTable({
                           : meta.t("profiles.actions.launch")
                       }
                       className={cn(
-                        "h-7 w-7 p-0 grid place-items-center",
+                        "size-7 p-0 grid place-items-center",
                         !canLaunch && "opacity-50 cursor-not-allowed",
                         canLaunch && "cursor-pointer",
                         isFollower && "border-accent",
@@ -2231,11 +2254,11 @@ export function ProfilesDataTable({
                       }
                     >
                       {isLaunching || isStopping ? (
-                        <div className="w-3 h-3 rounded-full border border-current animate-spin border-t-transparent" />
+                        <div className="size-3 rounded-full border border-current animate-spin border-t-transparent" />
                       ) : isRunning ? (
-                        <LuSquare className="w-3.5 h-3.5 fill-current" />
+                        <LuSquare className="size-3.5 fill-current" />
                       ) : (
-                        <LuPlay className="w-3.5 h-3.5 fill-current" />
+                        <LuPlay className="size-3.5 fill-current" />
                       )}
                     </RippleButton>
                   </span>
@@ -2265,9 +2288,9 @@ export function ProfilesDataTable({
             >
               {meta.t("common.labels.name")}
               {column.getIsSorted() === "asc" ? (
-                <LuChevronUp className="ml-2 w-4 h-4" />
+                <LuChevronUp className="ml-2 size-4" />
               ) : column.getIsSorted() === "desc" ? (
-                <LuChevronDown className="ml-2 w-4 h-4" />
+                <LuChevronDown className="ml-2 size-4" />
               ) : null}
             </Button>
           );
@@ -2382,7 +2405,7 @@ export function ProfilesDataTable({
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span>
-                      <LuLock className="w-3 h-3 text-muted-foreground" />
+                      <LuLock className="size-3 text-muted-foreground" />
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -2606,7 +2629,7 @@ export function ProfilesDataTable({
                           >
                             <LuCheck
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2 size-4",
                                 selectedId === null
                                   ? "opacity-100"
                                   : "opacity-0",
@@ -2633,7 +2656,7 @@ export function ProfilesDataTable({
                               >
                                 <LuCheck
                                   className={cn(
-                                    "mr-2 h-4 w-4",
+                                    "mr-2 size-4",
                                     effectiveProxyId === proxy.id &&
                                       !effectiveVpn
                                       ? "opacity-100"
@@ -2659,7 +2682,7 @@ export function ProfilesDataTable({
                               >
                                 <LuCheck
                                   className={cn(
-                                    "mr-2 h-4 w-4",
+                                    "mr-2 size-4",
                                     effectiveVpnId === vpn.id
                                       ? "opacity-100"
                                       : "opacity-0",
@@ -2701,7 +2724,7 @@ export function ProfilesDataTable({
                                       )
                                     }
                                   >
-                                    <span className="mr-2 h-4 w-4" />+{" "}
+                                    <span className="mr-2 size-4" />+{" "}
                                     {country.name}
                                   </CommandItem>
                                 ))}
@@ -2793,11 +2816,11 @@ export function ProfilesDataTable({
                 <span className="flex justify-center items-center h-9 w-full">
                   {dot.encrypted ? (
                     <LuLock
-                      className={`w-3 h-3 ${dot.color.replace("bg-", "text-")}${dot.animate ? " animate-pulse" : ""}`}
+                      className={`size-3 ${dot.color.replace("bg-", "text-")}${dot.animate ? " animate-pulse" : ""}`}
                     />
                   ) : (
                     <span
-                      className={`w-2 h-2 rounded-full ${dot.color}${dot.animate ? " animate-pulse" : ""}`}
+                      className={`size-2 rounded-full ${dot.color}${dot.animate ? " animate-pulse" : ""}`}
                     />
                   )}
                 </span>
@@ -2818,7 +2841,7 @@ export function ProfilesDataTable({
             <div className="flex justify-end items-center h-9 w-full">
               <Button
                 variant="ghost"
-                className="p-0 w-7 h-7"
+                className="p-0 size-7"
                 disabled={!meta.isClient}
                 onClick={() => {
                   setProfileForInfoDialog(profile);
@@ -2827,14 +2850,14 @@ export function ProfilesDataTable({
                 <span className="sr-only">
                   {t("profiles.aria.profileInfo")}
                 </span>
-                <LuInfo className="w-4 h-4" />
+                <LuInfo className="size-4" />
               </Button>
             </div>
           );
         },
       },
     ],
-    [t],
+    [t, setProfileForInfoDialog],
   );
 
   const table = useReactTable({
@@ -2889,6 +2912,14 @@ export function ProfilesDataTable({
         <div
           ref={scrollParentRef}
           className="overflow-auto relative flex-1 min-h-0 scroll-fade"
+          style={
+            {
+              // Sticky table header is 32px tall (h-8); shift the top
+              // fade band below it so the header stays fully opaque and
+              // only body rows fade as they scroll past.
+              "--scroll-fade-top-offset": "32px",
+            } as React.CSSProperties
+          }
         >
           <Table className="table-fixed">
             <TableHeader className="overflow-visible sticky top-0 z-10 bg-background [&_tr]:border-0">
@@ -3005,7 +3036,9 @@ export function ProfilesDataTable({
       />
       {profileForInfoDialog &&
         (() => {
-          const infoProfile = profileForInfoDialog;
+          const infoProfile =
+            profiles.find((p) => p.id === profileForInfoDialog.id) ??
+            profileForInfoDialog;
           const infoIsRunning =
             browserState.isClient && runningProfiles.has(infoProfile.id);
           const infoIsLaunching = launchingProfiles.has(infoProfile.id);

src/components/profile-info-dialog.tsx

@@ -16,7 +16,6 @@ import {
   LuGroup,
   LuKey,
   LuLink,
-  LuLock,
   LuLockOpen,
   LuPlus,
   LuPuzzle,
@@ -25,6 +24,7 @@ import {
   LuShield,
   LuShieldCheck,
   LuTrash2,
+  LuUpload,
   LuUsers,
   LuX,
 } from "react-icons/lu";
@@ -33,6 +33,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -48,13 +49,9 @@ import {
 } from "@/components/ui/select";
 import { WayfernConfigForm } from "@/components/wayfern-config-form";
 import { translateBackendError } from "@/lib/backend-errors";
-import {
-  getBrowserDisplayName,
-  getOSDisplayName,
-  getProfileIcon,
-  isCrossOsProfile,
-} from "@/lib/browser-utils";
+import { getProfileIcon } from "@/lib/browser-utils";
 import { formatRelativeTime } from "@/lib/flag-utils";
+import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import { cn } from "@/lib/utils";
 import type {
   BrowserProfile,
@@ -94,14 +91,14 @@ interface ProfileInfoDialogProps {
   syncStatuses: Record<string, { status: string; error?: string }>;
 }
 
-function OSIcon({ os }: { os: string }) {
+function _OSIcon({ os }: { os: string }) {
   switch (os) {
     case "macos":
-      return <FaApple className="w-3.5 h-3.5" />;
+      return <FaApple className="size-3.5" />;
     case "windows":
-      return <FaWindows className="w-3.5 h-3.5" />;
+      return <FaWindows className="size-3.5" />;
     case "linux":
-      return <FaLinux className="w-3.5 h-3.5" />;
+      return <FaLinux className="size-3.5" />;
     default:
       return null;
   }
@@ -290,12 +287,8 @@ export function ProfileInfoDialog({
     action();
   };
 
-  const releaseLabel =
-    profile.release_type.charAt(0).toUpperCase() +
-    profile.release_type.slice(1);
   const hasTags = profile.tags && profile.tags.length > 0;
   const hasNote = !!profile.note;
-  const showCrossOs = isCrossOsProfile(profile);
 
   // Items in the settings tab `actions` list MUST only open another dialog
   // (or trigger a navigation/action that closes this one). Do NOT put inline
@@ -317,7 +310,7 @@ export function ProfileInfoDialog({
 
   const actions: ActionItem[] = [
     {
-      icon: <LuGlobe className="w-4 h-4" />,
+      icon: <LuGlobe className="size-4" />,
       label: t("profiles.actions.viewNetwork"),
       onClick: () => {
         handleAction(() => onOpenTrafficDialog?.(profile.id));
@@ -325,7 +318,7 @@ export function ProfileInfoDialog({
       disabled: isCrossOs,
     },
     {
-      icon: <LuRefreshCw className="w-4 h-4" />,
+      icon: <LuRefreshCw className="size-4" />,
       label: t("profiles.actions.syncSettings"),
       onClick: () => {
         handleAction(() => onOpenProfileSyncDialog?.(profile));
@@ -334,7 +327,7 @@ export function ProfileInfoDialog({
       hidden: profile.ephemeral === true,
     },
     {
-      icon: <LuGroup className="w-4 h-4" />,
+      icon: <LuGroup className="size-4" />,
       label: t("profiles.actions.assignToGroup"),
       onClick: () => {
         handleAction(() => onAssignProfilesToGroup?.([profile.id]));
@@ -343,7 +336,7 @@ export function ProfileInfoDialog({
       runningBadge: isRunning,
     },
     {
-      icon: <LuFingerprint className="w-4 h-4" />,
+      icon: <LuFingerprint className="size-4" />,
       label: t("profiles.actions.changeFingerprint"),
       onClick: () => {
         handleAction(() => onConfigureCamoufox?.(profile));
@@ -353,7 +346,7 @@ export function ProfileInfoDialog({
       hidden: !isCamoufoxOrWayfern || !onConfigureCamoufox,
     },
     {
-      icon: <LuUsers className="w-4 h-4" />,
+      icon: <LuUsers className="size-4" />,
       label: t("profiles.synchronizer.launchWithSync"),
       onClick: () => {
         handleAction(() => onLaunchWithSync?.(profile));
@@ -363,7 +356,7 @@ export function ProfileInfoDialog({
       hidden: profile.browser !== "wayfern" || !onLaunchWithSync,
     },
     {
-      icon: <LuCopy className="w-4 h-4" />,
+      icon: <LuCopy className="size-4" />,
       label: t("profiles.actions.copyCookiesToProfile"),
       onClick: () => {
         handleAction(() => onCopyCookiesToProfile?.(profile));
@@ -376,7 +369,7 @@ export function ProfileInfoDialog({
         !onCopyCookiesToProfile,
     },
     {
-      icon: <LuCookie className="w-4 h-4" />,
+      icon: <LuCookie className="size-4" />,
       label: t("profileInfo.actions.manageCookies"),
       onClick: () => {
         handleAction(() => onOpenCookieManagement?.(profile));
@@ -389,7 +382,7 @@ export function ProfileInfoDialog({
         !onOpenCookieManagement,
     },
     {
-      icon: <LuSettings className="w-4 h-4" />,
+      icon: <LuSettings className="size-4" />,
       label: t("profiles.actions.clone"),
       onClick: () => {
         handleAction(() => onCloneProfile?.(profile));
@@ -399,7 +392,7 @@ export function ProfileInfoDialog({
       hidden: profile.ephemeral === true,
     },
     {
-      icon: <LuPuzzle className="w-4 h-4" />,
+      icon: <LuPuzzle className="size-4" />,
       label: t("profileInfo.actions.assignExtensionGroup"),
       onClick: () => {
         handleAction(() => onAssignExtensionGroup?.([profile.id]));
@@ -409,21 +402,21 @@ export function ProfileInfoDialog({
       hidden: profile.ephemeral === true,
     },
     {
-      icon: <LuShieldCheck className="w-4 h-4" />,
+      icon: <LuShieldCheck className="size-4" />,
       label: t("profileInfo.network.bypassRulesTitle"),
       onClick: () => {
         handleAction(() => onOpenBypassRules?.(profile));
       },
     },
     {
-      icon: <LuShield className="w-4 h-4" />,
+      icon: <LuShield className="size-4" />,
       label: t("dnsBlocklist.title"),
       onClick: () => {
         handleAction(() => onOpenDnsBlocklist?.(profile));
       },
     },
     {
-      icon: <LuLink className="w-4 h-4" />,
+      icon: <LuLink className="size-4" />,
       label: t("profiles.actions.launchHook"),
       onClick: () => {
         handleAction(() => onOpenLaunchHook?.(profile));
@@ -431,7 +424,7 @@ export function ProfileInfoDialog({
       hidden: !onOpenLaunchHook,
     },
     {
-      icon: <LuKey className="w-4 h-4" />,
+      icon: <LuKey className="size-4" />,
       label: t("profiles.actions.setPassword"),
       onClick: () => {
         handleAction(() => onSetPassword?.(profile));
@@ -444,7 +437,7 @@ export function ProfileInfoDialog({
         !onSetPassword,
     },
     {
-      icon: <LuKey className="w-4 h-4" />,
+      icon: <LuKey className="size-4" />,
       label: t("profiles.actions.changePassword"),
       onClick: () => {
         handleAction(() => onChangePassword?.(profile));
@@ -454,7 +447,7 @@ export function ProfileInfoDialog({
       hidden: profile.password_protected !== true || !onChangePassword,
     },
     {
-      icon: <LuLockOpen className="w-4 h-4" />,
+      icon: <LuLockOpen className="size-4" />,
       label: t("profiles.actions.removePassword"),
       onClick: () => {
         handleAction(() => onRemovePassword?.(profile));
@@ -465,7 +458,7 @@ export function ProfileInfoDialog({
       destructive: true,
     },
     {
-      icon: <LuTrash2 className="w-4 h-4" />,
+      icon: <LuTrash2 className="size-4" />,
       label: t("profiles.actions.delete"),
       onClick: () => {
         handleAction(() => onDeleteProfile?.(profile));
@@ -491,10 +484,8 @@ export function ProfileInfoDialog({
         <ProfileInfoLayout
           profile={profile}
           ProfileIcon={ProfileIcon}
-          releaseLabel={releaseLabel}
           isRunning={isRunning}
           isDisabled={isDisabled}
-          showCrossOs={showCrossOs}
           networkLabel={networkLabel}
           groupName={groupName}
           extensionGroupName={extensionGroupName}
@@ -520,10 +511,8 @@ export function ProfileInfoDialog({
 interface ProfileInfoLayoutProps {
   profile: BrowserProfile;
   ProfileIcon: React.ComponentType<{ className?: string }>;
-  releaseLabel: string;
   isRunning: boolean;
   isDisabled: boolean;
-  showCrossOs: boolean;
   networkLabel: string;
   groupName: string | null;
   extensionGroupName: string | null;
@@ -564,10 +553,8 @@ type ProfileSection =
 function ProfileInfoLayout({
   profile,
   ProfileIcon,
-  releaseLabel,
   isRunning,
   isDisabled,
-  showCrossOs,
   networkLabel,
   groupName,
   extensionGroupName,
@@ -596,8 +583,9 @@ function ProfileInfoLayout({
 
   const deleteAction = findAction("delete");
   const fingerprintAction = findAction("fingerprint");
-  const cookiesAction =
-    findAction("manage cookies") ?? findAction("copy cookies");
+  const cookiesManageAction = findAction("manage cookies");
+  const cookiesCopyAction = findAction("copy cookies");
+  const cookiesAction = cookiesManageAction ?? cookiesCopyAction;
   const extensionAction = findAction("extension");
   const syncAction = findAction("sync");
   const _launchHookAction = findAction("hook") ?? findAction("launch hook");
@@ -646,12 +634,12 @@ function ProfileInfoLayout({
   }[] = [
     {
       id: "overview",
-      icon: <LuClipboard className="w-3.5 h-3.5" />,
+      icon: <LuClipboard className="size-3.5" />,
       label: t("profileInfo.sections.overview"),
     },
     {
       id: "fingerprint",
-      icon: <LuFingerprint className="w-3.5 h-3.5" />,
+      icon: <LuFingerprint className="size-3.5" />,
       label: t("profileInfo.sections.fingerprint"),
       badge: profile.password_protected
         ? t("profileInfo.badges.locked")
@@ -660,13 +648,13 @@ function ProfileInfoLayout({
     },
     {
       id: "network",
-      icon: <LuGlobe className="w-3.5 h-3.5" />,
+      icon: <LuGlobe className="size-3.5" />,
       label: t("profileInfo.sections.network"),
       badge: profile.proxy_id || profile.vpn_id ? networkLabel : undefined,
     },
     {
       id: "cookies",
-      icon: <LuCookie className="w-3.5 h-3.5" />,
+      icon: <LuCookie className="size-3.5" />,
       label: t("profileInfo.sections.cookies"),
       badge:
         cookieCount !== null && cookieCount > 0
@@ -676,26 +664,26 @@ function ProfileInfoLayout({
     },
     {
       id: "extensions",
-      icon: <LuPuzzle className="w-3.5 h-3.5" />,
+      icon: <LuPuzzle className="size-3.5" />,
       label: t("profileInfo.sections.extensions"),
       badge: extensionGroupName ?? undefined,
       hidden: !extensionAction,
     },
     {
       id: "sync",
-      icon: <LuRefreshCw className="w-3.5 h-3.5" />,
+      icon: <LuRefreshCw className="size-3.5" />,
       label: t("profileInfo.sections.sync"),
       hidden: !syncAction,
     },
     {
       id: "automation",
-      icon: <LuLink className="w-3.5 h-3.5" />,
+      icon: <LuLink className="size-3.5" />,
       label: t("profileInfo.sections.launchHook"),
       badge: profile.launch_hook ? t("profileInfo.badges.active") : undefined,
     },
     {
       id: "security",
-      icon: <LuKey className="w-3.5 h-3.5" />,
+      icon: <LuKey className="size-3.5" />,
       label: t("profileInfo.sections.security"),
     },
   ];
@@ -704,7 +692,7 @@ function ProfileInfoLayout({
     <>
       {/* Top bar */}
       <div className="flex items-center gap-2 h-11 px-3 border-b border-border shrink-0">
-        <LuUsers className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+        <LuUsers className="size-3.5 text-muted-foreground shrink-0" />
         <div className="flex items-center gap-1.5 text-xs min-w-0 flex-1">
           <span className="font-semibold">
             {t("profileInfo.breadcrumbRoot")}
@@ -720,7 +708,7 @@ function ProfileInfoLayout({
             disabled={isDisabled}
             onClick={() => onCloneProfile(profile)}
           >
-            <LuCopy className="w-3 h-3" />
+            <LuCopy className="size-3" />
             {t("profileInfo.duplicate")}
           </Button>
         )}
@@ -728,9 +716,9 @@ function ProfileInfoLayout({
           type="button"
           aria-label={t("common.buttons.close")}
           onClick={onClose}
-          className="grid place-items-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors duration-100"
+          className="grid place-items-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors duration-100"
         >
-          <LuX className="w-3.5 h-3.5" />
+          <LuX className="size-3.5" />
         </button>
       </div>
 
@@ -773,7 +761,7 @@ function ProfileInfoLayout({
                 disabled={deleteAction.disabled}
                 className="flex items-center gap-2 h-7 px-2 rounded-md text-xs transition-colors duration-100 text-destructive hover:bg-destructive/10 disabled:opacity-50 disabled:pointer-events-none"
               >
-                <LuTrash2 className="w-3.5 h-3.5 shrink-0" />
+                <LuTrash2 className="size-3.5 shrink-0" />
                 <span className="flex-1 text-left">
                   {t("profileInfo.sections.delete")}
                 </span>
@@ -789,7 +777,7 @@ function ProfileInfoLayout({
               {/* Hero */}
               <div className="flex items-center gap-3">
                 <div className="rounded-lg bg-muted p-2.5 shrink-0">
-                  <ProfileIcon className="w-7 h-7 text-foreground" />
+                  <ProfileIcon className="size-7 text-foreground" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-1.5">
@@ -798,63 +786,8 @@ function ProfileInfoLayout({
                     </h3>
                   </div>
                   <div className="flex flex-wrap items-center gap-1.5 mt-1 text-[11px]">
-                    <span className="font-mono uppercase text-muted-foreground">
-                      {getBrowserDisplayName(profile.browser)}
-                    </span>
-                    <span className="text-muted-foreground">·</span>
-                    <span className="text-muted-foreground">
-                      {groupName ?? t("profileInfo.values.none")}
-                    </span>
-                    {isRunning && (
-                      <>
-                        <span className="text-muted-foreground">·</span>
-                        <span className="inline-flex items-center gap-1 text-success">
-                          <span className="w-1.5 h-1.5 rounded-full bg-success" />
-                          {t("common.status.running")}
-                        </span>
-                      </>
-                    )}
-                    {profile.ephemeral && (
-                      <>
-                        <span className="text-muted-foreground">·</span>
-                        <span className="text-muted-foreground uppercase">
-                          {t("profiles.ephemeralBadge")}
-                        </span>
-                      </>
-                    )}
-                    {profile.password_protected && (
-                      <>
-                        <span className="text-muted-foreground">·</span>
-                        <span className="inline-flex items-center gap-1 text-muted-foreground">
-                          <LuLock className="w-3 h-3" />
-                          {t("profiles.passwordProtectedBadge")}
-                        </span>
-                      </>
-                    )}
-                    {showCrossOs && (
-                      <>
-                        <span className="text-muted-foreground">·</span>
-                        <span className="inline-flex items-center gap-1 text-muted-foreground">
-                          <OSIcon
-                            os={
-                              profile.host_os ||
-                              profile.camoufox_config?.os ||
-                              profile.wayfern_config?.os ||
-                              ""
-                            }
-                          />
-                          {getOSDisplayName(
-                            profile.host_os ||
-                              profile.camoufox_config?.os ||
-                              profile.wayfern_config?.os ||
-                              "",
-                          )}
-                        </span>
-                      </>
-                    )}
-                    <span className="text-muted-foreground">·</span>
-                    <span className="text-muted-foreground">
-                      {releaseLabel}
+                    <span className="font-mono text-muted-foreground">
+                      {profile.version}
                     </span>
                   </div>
                 </div>
@@ -875,9 +808,9 @@ function ProfileInfoLayout({
                   aria-label={t("common.buttons.copy")}
                 >
                   {copied ? (
-                    <LuClipboardCheck className="w-3.5 h-3.5" />
+                    <LuClipboardCheck className="size-3.5" />
                   ) : (
-                    <LuClipboard className="w-3.5 h-3.5" />
+                    <LuClipboard className="size-3.5" />
                   )}
                 </button>
               </div>
@@ -974,6 +907,8 @@ function ProfileInfoLayout({
               profile={profile}
               isRunning={isRunning}
               isDisabled={isDisabled}
+              onCopyCookies={cookiesCopyAction?.onClick}
+              onImportCookies={cookiesManageAction?.onClick}
               t={t}
             />
           )}
@@ -1082,7 +1017,7 @@ function _SectionAction({
     >
       {icon}
       <span className="flex-1">{label}</span>
-      <LuChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+      <LuChevronRight className="size-3.5 text-muted-foreground" />
     </button>
   );
 }
@@ -1132,7 +1067,7 @@ function LaunchHookEditor({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuLink className="w-4 h-4" />
+        <LuLink className="size-4" />
         {t("profileInfo.sections.launchHook")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1216,7 +1151,7 @@ function SyncSectionInline({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuRefreshCw className="w-4 h-4" />
+        <LuRefreshCw className="size-4" />
         {t("profileInfo.sections.sync")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1331,7 +1266,7 @@ function NetworkSectionInline({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuGlobe className="w-4 h-4" />
+        <LuGlobe className="size-4" />
         {t("profileInfo.sections.network")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1464,7 +1399,7 @@ function ExtensionsSectionInline({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuPuzzle className="w-4 h-4" />
+        <LuPuzzle className="size-4" />
         {t("profileInfo.sections.extensions")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1504,11 +1439,16 @@ function ExtensionsSectionInline({
 function CookiesSectionInline({
   profile,
   isRunning,
+  isDisabled,
+  onCopyCookies,
+  onImportCookies,
   t,
 }: {
   profile: BrowserProfile;
   isRunning: boolean;
   isDisabled: boolean;
+  onCopyCookies?: () => void;
+  onImportCookies?: () => void;
   t: (key: string, options?: Record<string, unknown>) => string;
 }) {
   type CookieStats = {
@@ -1552,9 +1492,37 @@ function CookiesSectionInline({
 
   return (
     <div className="flex flex-col gap-3 min-h-0 flex-1">
-      <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuCookie className="w-4 h-4" />
-        {t("profileInfo.sections.cookies")}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 text-sm font-semibold">
+          <LuCookie className="size-4" />
+          {t("profileInfo.sections.cookies")}
+        </div>
+        <div className="flex items-center gap-2">
+          {onImportCookies && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1.5"
+              disabled={isDisabled || isRunning}
+              onClick={onImportCookies}
+            >
+              <LuUpload className="size-3.5" />
+              {t("cookies.import.title")}
+            </Button>
+          )}
+          {onCopyCookies && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1.5"
+              disabled={isDisabled}
+              onClick={onCopyCookies}
+            >
+              <LuCopy className="size-3.5" />
+              {t("profiles.actions.copyCookies")}
+            </Button>
+          )}
+        </div>
       </div>
       <p className="text-xs text-muted-foreground">
         {t("profileInfo.sectionDesc.cookies")}
@@ -1651,7 +1619,7 @@ function FingerprintSectionInline({
     return (
       <div className="flex flex-col gap-3">
         <div className="flex items-center gap-2 text-sm font-semibold">
-          <LuFingerprint className="w-4 h-4" />
+          <LuFingerprint className="size-4" />
           {t("profileInfo.sections.fingerprint")}
         </div>
         <p className="text-xs text-muted-foreground">
@@ -1705,7 +1673,7 @@ function FingerprintSectionInline({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuFingerprint className="w-4 h-4" />
+        <LuFingerprint className="size-4" />
         {t("profileInfo.sections.fingerprint")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1716,7 +1684,7 @@ function FingerprintSectionInline({
         <SharedCamoufoxConfigForm
           config={camoufoxConfig}
           onConfigChange={onCamoufoxChange}
-          forceAdvanced={false}
+          forceAdvanced={true}
           readOnly={isDisabled}
           browserType="camoufox"
           crossOsUnlocked={crossOsUnlocked}
@@ -1729,6 +1697,7 @@ function FingerprintSectionInline({
         <WayfernConfigForm
           config={wayfernConfig}
           onConfigChange={onWayfernChange}
+          forceAdvanced={true}
           readOnly={isDisabled}
           crossOsUnlocked={crossOsUnlocked}
           profileVersion={profile.version}
@@ -1739,7 +1708,7 @@ function FingerprintSectionInline({
       {error && <p className="text-xs text-destructive">{error}</p>}
       {success && !error && <p className="text-xs text-success">{success}</p>}
 
-      <div className="flex items-center gap-2 sticky bottom-0 bg-background pt-2 -mx-3 px-3 -mb-3 pb-3 border-t border-border">
+      <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border">
         <Button
           size="sm"
           className="h-7 text-xs"
@@ -1790,6 +1759,30 @@ function SecuritySectionInline({
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [success, setSuccess] = React.useState<string | null>(null);
+  const [isVerifyOpen, setIsVerifyOpen] = React.useState(false);
+  const [verifyPassword, setVerifyPassword] = React.useState("");
+  const [isVerifying, setIsVerifying] = React.useState(false);
+
+  const onVerify = async () => {
+    setIsVerifying(true);
+    try {
+      await invoke("verify_profile_password", {
+        profileId: profile.id,
+        password: verifyPassword,
+      });
+      showSuccessToast(t("profilePassword.verifyDialog.matchToast"));
+      setIsVerifyOpen(false);
+      setVerifyPassword("");
+    } catch (e) {
+      const message = translateBackendError(
+        t as unknown as Parameters<typeof translateBackendError>[0],
+        e,
+      );
+      showErrorToast(message);
+    } finally {
+      setIsVerifying(false);
+    }
+  };
 
   // Reset the form whenever the underlying profile state changes (e.g. the
   // user just set a password — flip to "change" mode and clear fields).
@@ -1837,24 +1830,29 @@ function SecuritySectionInline({
           profileId: profile.id,
           password,
         });
-        setSuccess(t("profilePassword.toasts.set"));
+        showSuccessToast(t("profilePassword.toasts.set"));
       } else if (mode === "change") {
         await invoke("change_profile_password", {
           profileId: profile.id,
           oldPassword,
           newPassword: password,
         });
-        setSuccess(t("profilePassword.toasts.changed"));
+        showSuccessToast(t("profilePassword.toasts.changed"));
       } else {
         await invoke("remove_profile_password", {
           profileId: profile.id,
           password: oldPassword,
         });
-        setSuccess(t("profilePassword.toasts.removed"));
+        showSuccessToast(t("profilePassword.toasts.removed"));
       }
       reset();
     } catch (e) {
-      setError(String(e));
+      const message = translateBackendError(
+        t as unknown as Parameters<typeof translateBackendError>[0],
+        e,
+      );
+      setError(message);
+      showErrorToast(message);
     } finally {
       setIsSubmitting(false);
     }
@@ -1863,7 +1861,7 @@ function SecuritySectionInline({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <LuKey className="w-4 h-4" />
+        <LuKey className="size-4" />
         {t("profileInfo.sections.security")}
       </div>
       <p className="text-xs text-muted-foreground">
@@ -1874,6 +1872,19 @@ function SecuritySectionInline({
 
       {profile.password_protected && (
         <div className="flex gap-1.5">
+          <button
+            type="button"
+            onClick={() => {
+              setVerifyPassword("");
+              setIsVerifyOpen(true);
+            }}
+            className={cn(
+              "flex-1 h-7 px-2 text-xs rounded-md border transition-colors",
+              "border-border text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            )}
+          >
+            {t("profilePassword.modes.validate")}
+          </button>
           <button
             type="button"
             onClick={() => {
@@ -1973,6 +1984,58 @@ function SecuritySectionInline({
             ? t("profilePassword.modes.change")
             : t("profilePassword.modes.remove")}
       </Button>
+
+      <Dialog
+        open={isVerifyOpen}
+        onOpenChange={(open) => {
+          if (!isVerifying) {
+            setIsVerifyOpen(open);
+            if (!open) setVerifyPassword("");
+          }
+        }}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t("profilePassword.verifyDialog.title")}</DialogTitle>
+            <DialogDescription>
+              {t("profilePassword.verifyDialog.description")}
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            type="password"
+            placeholder={t("profilePassword.fields.currentPassword")}
+            value={verifyPassword}
+            autoFocus
+            onChange={(e) => setVerifyPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && verifyPassword.length > 0) {
+                e.preventDefault();
+                void onVerify();
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button
+              variant="outline"
+              disabled={isVerifying}
+              onClick={() => {
+                setIsVerifyOpen(false);
+                setVerifyPassword("");
+              }}
+            >
+              {t("common.buttons.cancel")}
+            </Button>
+            <Button
+              disabled={isVerifying || verifyPassword.length === 0}
+              onClick={() => void onVerify()}
+            >
+              {isVerifying
+                ? t("common.buttons.loading")
+                : t("profilePassword.verifyDialog.submit")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
@@ -2226,7 +2289,7 @@ export function ProfileBypassRulesDialog({
                 onClick={handleAddRule}
                 disabled={!newRule.trim()}
               >
-                <LuPlus className="w-4 h-4 mr-1" />
+                <LuPlus className="size-4 mr-1" />
                 {t("profileInfo.network.addRule")}
               </Button>
             </div>
@@ -2249,7 +2312,7 @@ export function ProfileBypassRulesDialog({
                       }}
                       className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
                     >
-                      <LuX className="w-3.5 h-3.5" />
+                      <LuX className="size-3.5" />
                     </button>
                   </div>
                 ))}

src/components/profile-password-dialog.tsx

@@ -53,14 +53,16 @@ export function ProfilePasswordDialog({
   const firstInputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
-    if (isOpen) {
-      setOldPassword("");
-      setPassword("");
-      setConfirm("");
-      setIsSubmitting(false);
-      setLockoutSecondsRemaining(null);
-      setTimeout(() => firstInputRef.current?.focus(), 0);
-    }
+    if (!isOpen) return;
+    setOldPassword("");
+    setPassword("");
+    setConfirm("");
+    setIsSubmitting(false);
+    setLockoutSecondsRemaining(null);
+    const handle = window.setTimeout(() => firstInputRef.current?.focus(), 0);
+    return () => {
+      window.clearTimeout(handle);
+    };
   }, [isOpen]);
 
   // Tick down the lockout timer

src/components/profile-selector-dialog.tsx

@@ -237,7 +237,7 @@ export function ProfileSelectorDialog({
                                         profile.browser,
                                       );
                                       return IconComponent ? (
-                                        <IconComponent className="w-4 h-4" />
+                                        <IconComponent className="size-4" />
                                       ) : null;
                                     })()}
                                   </div>

src/components/profile-sync-dialog.tsx

@@ -188,7 +188,7 @@ export function ProfileSyncDialog({
 
         {isCheckingConfig ? (
           <div className="flex justify-center py-8">
-            <div className="w-6 h-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+            <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
           </div>
         ) : (
           <div className="grid gap-4 py-4">
@@ -216,7 +216,7 @@ export function ProfileSyncDialog({
                   disabled={isSaving}
                   className="grid gap-3"
                 >
-                  <div className="flex items-start space-x-3">
+                  <div className="flex items-start gap-x-3">
                     <RadioGroupItem value="Disabled" id="sync-disabled" />
                     <Label htmlFor="sync-disabled" className="cursor-pointer">
                       <span className="font-medium">
@@ -228,7 +228,7 @@ export function ProfileSyncDialog({
                     </Label>
                   </div>
 
-                  <div className="flex items-start space-x-3">
+                  <div className="flex items-start gap-x-3">
                     <RadioGroupItem value="Regular" id="sync-regular" />
                     <Label htmlFor="sync-regular" className="cursor-pointer">
                       <span className="font-medium">
@@ -240,7 +240,7 @@ export function ProfileSyncDialog({
                     </Label>
                   </div>
 
-                  <div className="flex items-start space-x-3">
+                  <div className="flex items-start gap-x-3">
                     <RadioGroupItem
                       value="Encrypted"
                       id="sync-encrypted"

src/components/proxy-assignment-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { invoke } from "@tauri-apps/api/core";
 import { emit } from "@tauri-apps/api/event";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { LuCheck, LuChevronsUpDown } from "react-icons/lu";
 import { toast } from "sonner";
@@ -55,6 +55,7 @@ export function ProxyAssignmentDialog({
   vpnConfigs = [],
 }: ProxyAssignmentDialogProps) {
   const { t } = useTranslation();
+  const proxyListboxId = useId();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [selectionType, setSelectionType] = useState<"none" | "proxy" | "vpn">(
     "none",
@@ -183,6 +184,7 @@ export function ProxyAssignmentDialog({
                   variant="outline"
                   role="combobox"
                   aria-expanded={proxyPopoverOpen}
+                  aria-controls={proxyListboxId}
                   className="w-full justify-between font-normal"
                 >
                   {(() => {
@@ -199,10 +201,14 @@ export function ProxyAssignmentDialog({
                     );
                     return proxy ? proxy.name : t("proxyAssignment.noneOption");
                   })()}
-                  <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-[240px] p-0" sideOffset={8}>
+              <PopoverContent
+                id={proxyListboxId}
+                className="w-[240px] p-0"
+                sideOffset={8}
+              >
                 <Command>
                   <CommandInput
                     placeholder={t("proxyAssignment.searchPlaceholder")}
@@ -219,7 +225,7 @@ export function ProxyAssignmentDialog({
                       >
                         <LuCheck
                           className={cn(
-                            "mr-2 h-4 w-4",
+                            "mr-2 size-4",
                             selectionType === "none"
                               ? "opacity-100"
                               : "opacity-0",
@@ -243,7 +249,7 @@ export function ProxyAssignmentDialog({
                           >
                             <LuCheck
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2 size-4",
                                 selectionType === "proxy" &&
                                   selectedId === proxy.id
                                   ? "opacity-100"
@@ -269,7 +275,7 @@ export function ProxyAssignmentDialog({
                           >
                             <LuCheck
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2 size-4",
                                 selectionType === "vpn" && selectedId === vpn.id
                                   ? "opacity-100"
                                   : "opacity-0",

src/components/proxy-check-button.tsx

@@ -118,12 +118,12 @@ export function ProxyCheckButton({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 w-7 p-0"
+          className="size-7 p-0"
           onClick={handleCheck}
           disabled={isCurrentlyChecking || disabled}
         >
           {isCurrentlyChecking ? (
-            <div className="w-3 h-3 rounded-full border border-current animate-spin border-t-transparent" />
+            <div className="size-3 rounded-full border border-current animate-spin border-t-transparent" />
           ) : result?.is_valid && result.country_code ? (
             <span className="relative inline-flex items-center justify-center">
               <FlagIcon countryCode={result.country_code} className="h-2.5" />
@@ -132,7 +132,7 @@ export function ProxyCheckButton({
           ) : result && !result.is_valid ? (
             <span className="text-destructive text-sm">✕</span>
           ) : (
-            <FiCheck className="w-3 h-3" />
+            <FiCheck className="size-3" />
           )}
         </Button>
       </TooltipTrigger>

src/components/proxy-export-dialog.tsx

@@ -108,13 +108,13 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
               }}
               className="flex gap-4"
             >
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-x-2">
                 <RadioGroupItem value="json" id="format-json" />
                 <Label htmlFor="format-json" className="cursor-pointer">
                   {t("proxies.exportDialog.json")}
                 </Label>
               </div>
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-x-2">
                 <RadioGroupItem value="txt" id="format-txt" />
                 <Label htmlFor="format-txt" className="cursor-pointer">
                   {t("proxies.exportDialog.txt")}
@@ -154,9 +154,9 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
             className="flex gap-2 items-center"
           >
             {copied ? (
-              <LuCheck className="w-4 h-4" />
+              <LuCheck className="size-4" />
             ) : (
-              <LuCopy className="w-4 h-4" />
+              <LuCopy className="size-4" />
             )}
             {copied
               ? t("proxies.exportDialog.copied")
@@ -167,7 +167,7 @@ export function ProxyExportDialog({ isOpen, onClose }: ProxyExportDialogProps) {
             disabled={!exportContent || isLoading}
             className="flex gap-2 items-center"
           >
-            <LuDownload className="w-4 h-4" />
+            <LuDownload className="size-4" />
             {t("common.buttons.download")}
           </RippleButton>
         </DialogFooter>

src/components/proxy-import-dialog.tsx

@@ -315,7 +315,7 @@ export function ProxyImportDialog({ isOpen, onClose }: ProxyImportDialogProps) {
                 }
               }}
             >
-              <LuUpload className="w-10 h-10 text-muted-foreground mb-4" />
+              <LuUpload className="size-10 text-muted-foreground mb-4" />
               <p className="text-sm text-muted-foreground text-center">
                 {t("proxies.importDialog.dropzonePrompt")}
                 <br />

src/components/rail-nav.tsx

@@ -5,7 +5,14 @@ import { useTranslation } from "react-i18next";
 import { FaDownload } from "react-icons/fa";
 import { FiWifi } from "react-icons/fi";
 import { GoGear, GoKebabHorizontal } from "react-icons/go";
-import { LuCloud, LuPlug, LuPuzzle, LuUser, LuUsers } from "react-icons/lu";
+import {
+  LuCloud,
+  LuKeyboard,
+  LuPlug,
+  LuPuzzle,
+  LuUser,
+  LuUsers,
+} from "react-icons/lu";
 import { cn } from "@/lib/utils";
 import { Logo } from "./icons/logo";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
@@ -19,7 +26,8 @@ export type AppPage =
   | "settings"
   | "integrations"
   | "account"
-  | "import";
+  | "import"
+  | "shortcuts";
 
 const CLICK_THRESHOLD = 5;
 const CLICK_WINDOW_MS = 2000;
@@ -236,9 +244,11 @@ interface RailItem {
 
 const TOP_ITEMS: RailItem[] = [
   { page: "profiles", Icon: LuUser, labelKey: "rail.profiles" },
-  { page: "proxies", Icon: FiWifi, labelKey: "rail.proxies" },
+  { page: "proxies", Icon: FiWifi, labelKey: "rail.network" },
   { page: "extensions", Icon: LuPuzzle, labelKey: "rail.extensions" },
   { page: "groups", Icon: LuUsers, labelKey: "rail.groups" },
+  { page: "integrations", Icon: LuPlug, labelKey: "rail.integrations" },
+  { page: "account", Icon: LuCloud, labelKey: "rail.account" },
 ];
 
 interface MoreMenuItem {
@@ -256,16 +266,10 @@ const MORE_ITEMS: MoreMenuItem[] = [
     hintKey: "rail.more.importProfileHint",
   },
   {
-    page: "integrations",
-    Icon: LuPlug,
-    labelKey: "rail.more.integrations",
-    hintKey: "rail.more.integrationsHint",
-  },
-  {
-    page: "account",
-    Icon: LuCloud,
-    labelKey: "rail.more.account",
-    hintKey: "rail.more.accountHint",
+    page: "shortcuts",
+    Icon: LuKeyboard,
+    labelKey: "rail.more.keyboardShortcuts",
+    hintKey: "rail.more.keyboardShortcutsHint",
   },
 ];
 
@@ -290,7 +294,7 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
           ref={logoRef}
           type="button"
           aria-label={t("header.donutLogo")}
-          className="grid place-items-center w-7 h-7 rounded-md cursor-pointer select-none text-foreground bg-transparent"
+          className="grid place-items-center size-7 rounded-md cursor-pointer select-none text-foreground bg-transparent"
           onClick={handleClick}
           onPointerDown={() => {
             setIsPressed(true);
@@ -322,12 +326,12 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                   "animate-[wiggle_0.3s_ease-in-out]",
               )}
             >
-              <Logo className="w-5 h-5 will-change-transform" />
+              <Logo className="size-5 will-change-transform" />
             </span>
           </span>
         </button>
       ) : (
-        <div className="w-7 h-7" />
+        <div className="size-7" />
       )}
 
       <div className="w-5 h-px bg-border my-1" />
@@ -345,7 +349,7 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                 aria-label={t(labelKey)}
                 aria-current={active ? "page" : undefined}
                 className={cn(
-                  "relative grid place-items-center w-7 h-7 rounded-md transition-colors duration-100",
+                  "relative grid place-items-center size-7 rounded-md transition-colors duration-100",
                   active
                     ? "text-foreground bg-accent"
                     : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
@@ -357,7 +361,7 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                     className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground"
                   />
                 )}
-                <Icon className="w-3.5 h-3.5" />
+                <Icon className="size-3.5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="right">{t(labelKey)}</TooltipContent>
@@ -377,13 +381,13 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
             aria-label={t("rail.more.label")}
             aria-expanded={moreOpen}
             className={cn(
-              "grid place-items-center w-7 h-7 rounded-md transition-colors duration-100",
+              "grid place-items-center size-7 rounded-md transition-colors duration-100",
               moreOpen
                 ? "text-foreground bg-accent"
                 : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
             )}
           >
-            <GoKebabHorizontal className="w-3.5 h-3.5" />
+            <GoKebabHorizontal className="size-3.5" />
           </button>
         </TooltipTrigger>
         <TooltipContent side="right">{t("rail.more.label")}</TooltipContent>
@@ -399,7 +403,7 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
             aria-label={t("rail.settings")}
             aria-current={currentPage === "settings" ? "page" : undefined}
             className={cn(
-              "relative grid place-items-center w-7 h-7 rounded-md transition-colors duration-100",
+              "relative grid place-items-center size-7 rounded-md transition-colors duration-100",
               currentPage === "settings"
                 ? "text-foreground bg-accent"
                 : "text-muted-foreground hover:text-card-foreground hover:bg-accent/50",
@@ -411,7 +415,7 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                 className="absolute left-[-7px] top-1.5 bottom-1.5 w-[2px] rounded-full bg-foreground"
               />
             )}
-            <GoGear className="w-3.5 h-3.5" />
+            <GoGear className="size-3.5" />
           </button>
         </TooltipTrigger>
         <TooltipContent side="right">{t("rail.settings")}</TooltipContent>
@@ -438,8 +442,8 @@ export function RailNav({ currentPage, onNavigate }: RailNavProps) {
                 }}
                 className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md hover:bg-accent transition-colors duration-100 text-left"
               >
-                <span className="grid place-items-center w-5 h-5 rounded bg-muted text-muted-foreground shrink-0">
-                  <Icon className="w-3 h-3" />
+                <span className="grid place-items-center size-5 rounded bg-muted text-muted-foreground shrink-0">
+                  <Icon className="size-3" />
                 </span>
                 <span className="flex flex-col min-w-0">
                   <span className="text-xs font-medium text-foreground truncate">

src/components/release-type-selector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { LuCheck, LuChevronsUpDown, LuDownload } from "react-icons/lu";
 import { LoadingButton } from "@/components/loading-button";
@@ -44,6 +44,7 @@ export function ReleaseTypeSelector({
 }: ReleaseTypeSelectorProps) {
   const { t } = useTranslation();
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const listboxId = useId();
   const effectivePlaceholder =
     placeholder ?? t("releaseTypeSelector.placeholder");
 
@@ -91,13 +92,14 @@ export function ReleaseTypeSelector({
               variant="outline"
               role="combobox"
               aria-expanded={popoverOpen}
+              aria-controls={listboxId}
               className="justify-between w-full"
             >
               {selectedDisplayText}
-              <LuChevronsUpDown className="ml-2 w-4 h-4 opacity-50 shrink-0" />
+              <LuChevronsUpDown className="ml-2 size-4 opacity-50 shrink-0" />
             </RippleButton>
           </PopoverTrigger>
-          <PopoverContent className="p-0">
+          <PopoverContent id={listboxId} className="p-0">
             <Command>
               <CommandEmpty>
                 {t("releaseTypeSelector.noReleaseTypes")}
@@ -126,7 +128,7 @@ export function ReleaseTypeSelector({
                       >
                         <LuCheck
                           className={cn(
-                            "mr-2 h-4 w-4",
+                            "mr-2 size-4",
                             selectedReleaseType === option.type
                               ? "opacity-100"
                               : "opacity-0",
@@ -187,7 +189,7 @@ export function ReleaseTypeSelector({
             variant="outline"
             className="w-full"
           >
-            <LuDownload className="mr-2 w-4 h-4" />
+            <LuDownload className="mr-2 size-4" />
             {isDownloading
               ? t("releaseTypeSelector.downloading")
               : t("releaseTypeSelector.downloadBrowser")}

src/components/settings-dialog.tsx

@@ -24,6 +24,7 @@ import {
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -131,6 +132,10 @@ export function SettingsDialog({
   const [e2ePasswordConfirm, setE2ePasswordConfirm] = useState("");
   const [e2eError, setE2eError] = useState("");
   const [isSavingE2e, setIsSavingE2e] = useState(false);
+  const [isRemovingE2e, setIsRemovingE2e] = useState(false);
+  const [isVerifyE2eOpen, setIsVerifyE2eOpen] = useState(false);
+  const [verifyE2ePassword, setVerifyE2ePassword] = useState("");
+  const [isVerifyingE2e, setIsVerifyingE2e] = useState(false);
   const [systemInfo, setSystemInfo] = useState<{
     app_version: string;
     os: string;
@@ -164,9 +169,9 @@ export function SettingsDialog({
   const getPermissionIcon = useCallback((type: PermissionType) => {
     switch (type) {
       case "microphone":
-        return <BsMic className="w-4 h-4" />;
+        return <BsMic className="size-4" />;
       case "camera":
-        return <BsCamera className="w-4 h-4" />;
+        return <BsCamera className="size-4" />;
     }
   }, []);
 
@@ -459,6 +464,7 @@ export function SettingsDialog({
                 | "fr"
                 | "zh"
                 | "ja"
+                | "ko"
                 | "ru"),
         );
         setOriginalLanguage(selectedLanguage);
@@ -737,7 +743,7 @@ export function SettingsDialog({
                               <button
                                 type="button"
                                 aria-label={label}
-                                className="w-8 h-8 rounded-md border shadow-sm cursor-pointer"
+                                className="size-8 rounded-md border shadow-sm cursor-pointer"
                                 style={{ backgroundColor: colorValue }}
                               />
                             </PopoverTrigger>
@@ -886,7 +892,7 @@ export function SettingsDialog({
                         key={permission.permission_type}
                         className="flex justify-between items-center p-3 rounded-lg border"
                       >
-                        <div className="flex items-center space-x-3">
+                        <div className="flex items-center gap-x-3">
                           {getPermissionIcon(permission.permission_type)}
                           <div>
                             <div className="text-sm font-medium">
@@ -899,7 +905,7 @@ export function SettingsDialog({
                             </div>
                           </div>
                         </div>
-                        <div className="flex items-center space-x-2">
+                        <div className="flex items-center gap-x-2">
                           {getStatusBadge(permission.isGranted)}
                           {!permission.isGranted && (
                             <LoadingButton
@@ -990,10 +996,22 @@ export function SettingsDialog({
                       {t("settings.encryption.passwordSetDescription")}
                     </span>
                   </div>
-                  <div className="flex gap-2">
+                  <div className="flex gap-2 flex-wrap">
                     <Button
                       variant="outline"
                       size="sm"
+                      disabled={isRemovingE2e}
+                      onClick={() => {
+                        setVerifyE2ePassword("");
+                        setIsVerifyE2eOpen(true);
+                      }}
+                    >
+                      {t("settings.encryption.validatePassword")}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={isRemovingE2e}
                       onClick={() => {
                         setHasE2ePassword(false);
                         setE2ePassword("");
@@ -1003,22 +1021,41 @@ export function SettingsDialog({
                     >
                       {t("settings.encryption.changePassword")}
                     </Button>
-                    <Button
+                    <LoadingButton
                       variant="destructive"
                       size="sm"
+                      isLoading={isRemovingE2e}
                       onClick={async () => {
+                        setIsRemovingE2e(true);
                         try {
+                          // Await the rollover so the user sees an error if
+                          // re-syncing fails. Previously the rollover was
+                          // fire-and-forget (`void invoke(...)`) which left
+                          // half-removed state on screen with no feedback —
+                          // the source of issue #360 "completely bugged".
                           await invoke("delete_e2e_password");
                           setHasE2ePassword(false);
+                          try {
+                            await invoke(
+                              "rollover_encryption_for_all_entities",
+                            );
+                          } catch (rolloverErr) {
+                            console.error(
+                              "Rollover after password removal failed:",
+                              rolloverErr,
+                            );
+                            showErrorToast(String(rolloverErr));
+                          }
                           showSuccessToast(t("settings.encryption.removed"));
-                          void invoke("rollover_encryption_for_all_entities");
                         } catch (error) {
                           showErrorToast(String(error));
+                        } finally {
+                          setIsRemovingE2e(false);
                         }
                       }}
                     >
                       {t("settings.encryption.removePassword")}
-                    </Button>
+                    </LoadingButton>
                   </div>
                 </div>
               ) : (
@@ -1065,10 +1102,22 @@ export function SettingsDialog({
                         setHasE2ePassword(true);
                         setE2ePassword("");
                         setE2ePasswordConfirm("");
+                        try {
+                          // Await rollover so any failure surfaces to the
+                          // user instead of being lost via fire-and-forget.
+                          // Without this, "change password" leaves entities
+                          // half-re-encrypted with no visible error.
+                          await invoke("rollover_encryption_for_all_entities");
+                        } catch (rolloverErr) {
+                          console.error(
+                            "Rollover after password set failed:",
+                            rolloverErr,
+                          );
+                          showErrorToast(String(rolloverErr));
+                        }
                         showSuccessToast(
                           t("settings.encryption.passwordSaved"),
                         );
-                        void invoke("rollover_encryption_for_all_entities");
                       } catch (error) {
                         showErrorToast(String(error));
                       } finally {
@@ -1089,7 +1138,23 @@ export function SettingsDialog({
               </Label>
 
               <div className="flex items-center justify-between p-3 rounded-md border bg-muted/40">
-                {trialStatus?.type === "Active" ? (
+                {cloudUser != null && cloudUser.plan !== "free" ? (
+                  // Paid Donut plan supersedes the local commercial trial —
+                  // the trial only exists to gate commercial use until the
+                  // user subscribes. Showing "Trial expired" to a paying
+                  // customer reads like a billing error, so swap in a
+                  // subscription-active badge instead.
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-success">
+                      {t("settings.commercial.subscriptionActive", {
+                        plan: cloudUser.plan,
+                      })}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("settings.commercial.subscriptionActiveDescription")}
+                    </p>
+                  </div>
+                ) : trialStatus?.type === "Active" ? (
                   <div className="space-y-1">
                     <p className="text-sm font-medium">
                       {t("settings.commercial.trialActive", {
@@ -1121,7 +1186,7 @@ export function SettingsDialog({
               </Label>
 
               {!isLinux && (
-                <div className="flex items-start space-x-3 p-3 rounded-lg border">
+                <div className="flex items-start gap-x-3 p-3 rounded-lg border">
                   <Checkbox
                     id="disable-auto-updates"
                     checked={settings.disable_auto_updates ?? false}
@@ -1143,7 +1208,7 @@ export function SettingsDialog({
                 </div>
               )}
 
-              <div className="flex items-start space-x-3 p-3 rounded-lg border">
+              <div className="flex items-start gap-x-3 p-3 rounded-lg border">
                 <Checkbox
                   id="keep-decrypted-profiles-in-ram"
                   checked={settings.keep_decrypted_profiles_in_ram ?? false}
@@ -1268,6 +1333,104 @@ export function SettingsDialog({
         isOpen={dnsBlocklistDialogOpen}
         onClose={() => setDnsBlocklistDialogOpen(false)}
       />
+      <Dialog
+        open={isVerifyE2eOpen}
+        onOpenChange={(open) => {
+          if (!isVerifyingE2e) {
+            setIsVerifyE2eOpen(open);
+            if (!open) setVerifyE2ePassword("");
+          }
+        }}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("settings.encryption.validateDialog.title")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("settings.encryption.validateDialog.description")}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <Input
+              type="password"
+              placeholder={t("settings.encryption.passwordPlaceholder")}
+              value={verifyE2ePassword}
+              autoFocus
+              onChange={(e) => setVerifyE2ePassword(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && verifyE2ePassword.length > 0) {
+                  e.preventDefault();
+                  void (async () => {
+                    setIsVerifyingE2e(true);
+                    try {
+                      const ok = await invoke<boolean>("verify_e2e_password", {
+                        password: verifyE2ePassword,
+                      });
+                      if (ok) {
+                        showSuccessToast(
+                          t("settings.encryption.validateDialog.matchToast"),
+                        );
+                        setIsVerifyE2eOpen(false);
+                        setVerifyE2ePassword("");
+                      } else {
+                        showErrorToast(
+                          t("settings.encryption.validateDialog.mismatchToast"),
+                        );
+                      }
+                    } catch (error) {
+                      showErrorToast(String(error));
+                    } finally {
+                      setIsVerifyingE2e(false);
+                    }
+                  })();
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              disabled={isVerifyingE2e}
+              onClick={() => {
+                setIsVerifyE2eOpen(false);
+                setVerifyE2ePassword("");
+              }}
+            >
+              {t("common.buttons.cancel")}
+            </Button>
+            <LoadingButton
+              isLoading={isVerifyingE2e}
+              disabled={verifyE2ePassword.length === 0}
+              onClick={async () => {
+                setIsVerifyingE2e(true);
+                try {
+                  const ok = await invoke<boolean>("verify_e2e_password", {
+                    password: verifyE2ePassword,
+                  });
+                  if (ok) {
+                    showSuccessToast(
+                      t("settings.encryption.validateDialog.matchToast"),
+                    );
+                    setIsVerifyE2eOpen(false);
+                    setVerifyE2ePassword("");
+                  } else {
+                    showErrorToast(
+                      t("settings.encryption.validateDialog.mismatchToast"),
+                    );
+                  }
+                } catch (error) {
+                  showErrorToast(String(error));
+                } finally {
+                  setIsVerifyingE2e(false);
+                }
+              }}
+            >
+              {t("settings.encryption.validateDialog.submit")}
+            </LoadingButton>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

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

@@ -303,7 +303,7 @@ export function SharedCamoufoxConfigForm({
 
       {/* Randomize Fingerprint Option */}
       <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-x-2">
           <Checkbox
             id="randomize-fingerprint"
             checked={config.randomize_fingerprint_on_launch ?? false}
@@ -323,7 +323,7 @@ export function SharedCamoufoxConfigForm({
 
       {/* Automatic Location Configuration */}
       <div className="space-y-3">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-x-2">
           <Checkbox
             id="auto-location-advanced"
             checked={isAutoLocationEnabled}
@@ -367,7 +367,7 @@ export function SharedCamoufoxConfigForm({
             <div className="space-y-3">
               <Label>{t("fingerprint.blockingOptions")}</Label>
               <div className="space-y-2">
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center gap-x-2">
                   <Checkbox
                     id="block-images"
                     checked={config.block_images ?? false}
@@ -379,7 +379,7 @@ export function SharedCamoufoxConfigForm({
                     {t("fingerprint.blockImages")}
                   </Label>
                 </div>
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center gap-x-2">
                   <Checkbox
                     id="block-webrtc"
                     checked={config.block_webrtc ?? false}
@@ -391,7 +391,7 @@ export function SharedCamoufoxConfigForm({
                     {t("fingerprint.blockWebRTC")}
                   </Label>
                 </div>
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center gap-x-2">
                   <Checkbox
                     id="block-webgl"
                     checked={config.block_webgl ?? false}
@@ -1025,7 +1025,7 @@ export function SharedCamoufoxConfigForm({
             <Label>{t("fingerprint.battery")}</Label>
             <div className="grid grid-cols-3 gap-4">
               <div className="space-y-2">
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center gap-x-2">
                   <Checkbox
                     id="battery-charging"
                     checked={fingerprintConfig["battery:charging"] ?? false}
@@ -1176,7 +1176,7 @@ export function SharedCamoufoxConfigForm({
 
             {/* Randomize Fingerprint Option */}
             <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-x-2">
                 <Checkbox
                   id="randomize-fingerprint-auto"
                   checked={config.randomize_fingerprint_on_launch ?? false}
@@ -1199,7 +1199,7 @@ export function SharedCamoufoxConfigForm({
 
             {/* Automatic Location Configuration */}
             <div className="space-y-3">
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-x-2">
                 <Checkbox
                   id="auto-location"
                   checked={isAutoLocationEnabled}

src/components/shortcuts-page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
+import {
+  formatGroupShortcut,
+  formatShortcut,
+  SHORTCUTS,
+  type ShortcutDef,
+} from "@/lib/shortcuts";
+
+interface GroupTarget {
+  id: string;
+  name: string;
+}
+
+interface ShortcutsPageProps {
+  /** Ordered list — first 9 entries display their Mod+digit binding. */
+  groupTargets: GroupTarget[];
+}
+
+function Tokens({ tokens }: { tokens: string[] }) {
+  return (
+    <div className="flex items-center gap-1">
+      {tokens.map((tok, i) => (
+        <kbd
+          key={i}
+          className="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded border border-border bg-muted text-[11px] font-medium text-foreground"
+        >
+          {tok}
+        </kbd>
+      ))}
+    </div>
+  );
+}
+
+function ShortcutTokens({ shortcut }: { shortcut: ShortcutDef }) {
+  return <Tokens tokens={formatShortcut(shortcut)} />;
+}
+
+export function ShortcutsPage({ groupTargets }: ShortcutsPageProps) {
+  const { t } = useTranslation();
+
+  const sections: Array<{ key: ShortcutDef["group"]; titleKey: string }> = [
+    { key: "navigation", titleKey: "commandPalette.groups.navigation" },
+    { key: "actions", titleKey: "commandPalette.groups.actions" },
+  ];
+
+  const digitGroups = groupTargets.slice(0, 9);
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 overflow-y-auto px-6 pt-4 pb-8">
+      <div className="max-w-3xl w-full mx-auto flex flex-col gap-6">
+        <header className="flex flex-col gap-1">
+          <h1 className="text-lg font-semibold">{t("shortcutsPage.title")}</h1>
+          <p className="text-xs text-muted-foreground">
+            {t("shortcutsPage.description")}
+          </p>
+        </header>
+
+        {sections.map(({ key, titleKey }) => {
+          const items = SHORTCUTS.filter((s) => s.group === key);
+          if (items.length === 0) return null;
+          return (
+            <section key={key} className="flex flex-col gap-2">
+              <h2 className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                {t(titleKey)}
+              </h2>
+              <div className="rounded-md border bg-card divide-y divide-border">
+                {items.map((s) => (
+                  <div
+                    key={s.id}
+                    className="flex items-center justify-between gap-4 px-3 py-2"
+                  >
+                    <span className="text-sm">{t(s.labelKey)}</span>
+                    <ShortcutTokens shortcut={s} />
+                  </div>
+                ))}
+              </div>
+            </section>
+          );
+        })}
+
+        {digitGroups.length > 0 ? (
+          <section className="flex flex-col gap-2">
+            <h2 className="text-[10px] uppercase tracking-wide text-muted-foreground">
+              {t("commandPalette.groups.profileGroups")}
+            </h2>
+            <div className="rounded-md border bg-card divide-y divide-border">
+              {digitGroups.map((target, i) => (
+                <div
+                  key={target.id}
+                  className="flex items-center justify-between gap-4 px-3 py-2"
+                >
+                  <span className="text-sm">{target.name}</span>
+                  <Tokens tokens={formatGroupShortcut(i + 1)} />
+                </div>
+              ))}
+            </div>
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/components/sync-all-dialog.tsx

@@ -1,9 +1,12 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FiWifi } from "react-icons/fi";
+import { LuLayers, LuPuzzle, LuShield, LuUsers } from "react-icons/lu";
 import { LoadingButton } from "@/components/loading-button";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -19,6 +22,8 @@ interface UnsyncedEntityCounts {
   proxies: number;
   groups: number;
   vpns: number;
+  extensions: number;
+  extension_groups: number;
 }
 
 interface SyncAllDialogProps {
@@ -67,27 +72,55 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
     }
   }, [onClose, t]);
 
-  const totalCount =
-    (counts?.proxies ?? 0) + (counts?.groups ?? 0) + (counts?.vpns ?? 0);
+  const items = useMemo(() => {
+    if (!counts) return [];
+    return [
+      {
+        key: "proxies",
+        count: counts.proxies,
+        label: t("syncAll.labels.proxies"),
+        Icon: FiWifi,
+      },
+      {
+        key: "vpns",
+        count: counts.vpns,
+        label: t("syncAll.labels.vpns"),
+        Icon: LuShield,
+      },
+      {
+        key: "groups",
+        count: counts.groups,
+        label: t("syncAll.labels.groups"),
+        Icon: LuUsers,
+      },
+      {
+        key: "extensions",
+        count: counts.extensions,
+        label: t("syncAll.labels.extensions"),
+        Icon: LuPuzzle,
+      },
+      {
+        key: "extensionGroups",
+        count: counts.extension_groups,
+        label: t("syncAll.labels.extensionGroups"),
+        Icon: LuLayers,
+      },
+    ].filter((item) => item.count > 0);
+  }, [counts, t]);
 
-  // Don't show if there's nothing to sync
+  const totalCount = items.reduce((sum, item) => sum + item.count, 0);
+
+  // Don't render anything when there's nothing to sync — the parent
+  // mounts this dialog eagerly after login, so silent-close is correct.
   if (!isLoading && totalCount === 0) {
     return null;
   }
 
-  const parts: string[] = [];
-  if (counts?.proxies && counts.proxies > 0) {
-    parts.push(t("syncAll.proxies", { count: counts.proxies }));
-  }
-  if (counts?.groups && counts.groups > 0) {
-    parts.push(t("syncAll.groups", { count: counts.groups }));
-  }
-  if (counts?.vpns && counts.vpns > 0) {
-    parts.push(t("syncAll.vpns", { count: counts.vpns }));
-  }
-
   return (
-    <Dialog open={isOpen && totalCount > 0} onOpenChange={onClose}>
+    <Dialog
+      open={isOpen && (isLoading || totalCount > 0)}
+      onOpenChange={onClose}
+    >
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>{t("syncAll.title")}</DialogTitle>
@@ -96,13 +129,29 @@ export function SyncAllDialog({ isOpen, onClose }: SyncAllDialogProps) {
 
         {isLoading ? (
           <div className="flex justify-center py-8">
-            <div className="w-6 h-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+            <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
           </div>
         ) : (
-          <div className="py-4">
-            <p className="text-sm text-muted-foreground">
-              {t("syncAll.itemsList", { items: parts.join(", ") })}
-            </p>
+          <div className="grid grid-cols-2 gap-2 py-2">
+            {items.map(({ key, count, label, Icon }) => (
+              <div
+                key={key}
+                className="flex items-center gap-3 rounded-lg border border-border/60 bg-card/50 p-3 transition-colors hover:bg-card"
+              >
+                <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                  <Icon className="size-4" />
+                </div>
+                <div className="min-w-0 flex-1 text-sm font-medium truncate">
+                  {label}
+                </div>
+                <Badge
+                  variant="secondary"
+                  className="shrink-0 tabular-nums px-2"
+                >
+                  {count}
+                </Badge>
+              </div>
+            ))}
           </div>
         )}
 

src/components/sync-config-dialog.tsx

@@ -248,7 +248,7 @@ export function SyncConfigDialog({
         {isLoggedIn && user ? (
           <div className="grid gap-4 py-4">
             <div className="flex gap-2 items-center text-sm">
-              <div className="w-2 h-2 rounded-full bg-success" />
+              <div className="size-2 rounded-full bg-success" />
               {t("sync.cloud.connected")}
             </div>
 
@@ -353,7 +353,7 @@ export function SyncConfigDialog({
             <TabsContent value="cloud">
               {isCloudLoading ? (
                 <div className="flex justify-center py-8">
-                  <div className="w-6 h-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                  <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
                 </div>
               ) : (
                 <div className="grid gap-4 py-4">
@@ -373,7 +373,7 @@ export function SyncConfigDialog({
             <TabsContent value="self-hosted">
               {isLoading ? (
                 <div className="flex justify-center py-8">
-                  <div className="w-6 h-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                  <div className="size-6 rounded-full border-2 border-current animate-spin border-t-transparent" />
                 </div>
               ) : (
                 <div className="grid gap-4 py-4">
@@ -419,9 +419,9 @@ export function SyncConfigDialog({
                             }
                           >
                             {showToken ? (
-                              <LuEyeOff className="w-4 h-4 text-muted-foreground hover:text-foreground" />
+                              <LuEyeOff className="size-4 text-muted-foreground hover:text-foreground" />
                             ) : (
-                              <LuEye className="w-4 h-4 text-muted-foreground hover:text-foreground" />
+                              <LuEye className="size-4 text-muted-foreground hover:text-foreground" />
                             )}
                           </button>
                         </TooltipTrigger>
@@ -434,19 +434,19 @@ export function SyncConfigDialog({
 
                   {connectionStatus === "testing" && (
                     <div className="flex gap-2 items-center text-sm text-muted-foreground">
-                      <div className="w-4 h-4 rounded-full border-2 border-current animate-spin border-t-transparent" />
+                      <div className="size-4 rounded-full border-2 border-current animate-spin border-t-transparent" />
                       {t("sync.status.syncing")}
                     </div>
                   )}
                   {connectionStatus === "connected" && (
                     <div className="flex gap-2 items-center text-sm text-muted-foreground">
-                      <div className="w-2 h-2 rounded-full bg-success" />
+                      <div className="size-2 rounded-full bg-success" />
                       {t("sync.status.connected")}
                     </div>
                   )}
                   {connectionStatus === "error" && (
                     <div className="flex gap-2 items-center text-sm text-muted-foreground">
-                      <div className="w-2 h-2 rounded-full bg-destructive" />
+                      <div className="size-2 rounded-full bg-destructive" />
                       {t("sync.status.disconnected")}
                     </div>
                   )}

src/components/theme-provider.tsx

@@ -108,24 +108,28 @@ export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
 
   // Re-apply custom theme after mount
   useEffect(() => {
-    if (!isLoading && theme === "custom") {
-      const reapplyCustomTheme = async () => {
-        try {
-          const { invoke } = await import("@tauri-apps/api/core");
-          const settings = await invoke<AppSettings>("get_app_settings");
-          if (settings?.theme === "custom" && settings.custom_theme) {
-            applyThemeColors(settings.custom_theme);
-          }
-        } catch (error) {
-          console.warn("Failed to reapply custom theme:", error);
-        }
-      };
-      setTimeout(() => {
-        void reapplyCustomTheme();
-      }, 100);
-    } else if (!isLoading) {
+    if (isLoading) return;
+    if (theme !== "custom") {
       clearThemeColors();
+      return;
     }
+    const reapplyCustomTheme = async () => {
+      try {
+        const { invoke } = await import("@tauri-apps/api/core");
+        const settings = await invoke<AppSettings>("get_app_settings");
+        if (settings?.theme === "custom" && settings.custom_theme) {
+          applyThemeColors(settings.custom_theme);
+        }
+      } catch (error) {
+        console.warn("Failed to reapply custom theme:", error);
+      }
+    };
+    const handle = window.setTimeout(() => {
+      void reapplyCustomTheme();
+    }, 100);
+    return () => {
+      window.clearTimeout(handle);
+    };
   }, [isLoading, theme]);
 
   // Listen for system theme changes when in "system" mode

src/components/traffic-details-dialog.tsx

@@ -23,6 +23,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { FadingScrollArea } from "@/components/ui/fading-scroll-area";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
@@ -398,7 +399,7 @@ export function TrafficDetailsDialog({
               <div className="flex items-center justify-center gap-6 mt-2">
                 <div className="flex items-center gap-2">
                   <div
-                    className="w-3 h-3 rounded"
+                    className="size-3 rounded"
                     style={{ backgroundColor: "var(--chart-1)" }}
                   />
                   <span className="text-xs text-muted-foreground">
@@ -407,7 +408,7 @@ export function TrafficDetailsDialog({
                 </div>
                 <div className="flex items-center gap-2">
                   <div
-                    className="w-3 h-3 rounded"
+                    className="size-3 rounded"
                     style={{ backgroundColor: "var(--chart-2)" }}
                   />
                   <span className="text-xs text-muted-foreground">
@@ -590,7 +591,7 @@ export function TrafficDetailsDialog({
                 <h3 className="text-sm font-medium mb-2">
                   {t("traffic.uniqueIps", { count: stats.unique_ips.length })}
                 </h3>
-                <div className="border rounded-md p-3 max-h-[120px] overflow-y-auto">
+                <FadingScrollArea className="p-3 max-h-[120px]">
                   <div className="flex flex-wrap gap-1.5">
                     {stats.unique_ips.map((ip) => (
                       <span
@@ -601,7 +602,7 @@ export function TrafficDetailsDialog({
                       </span>
                     ))}
                   </div>
-                </div>
+                </FadingScrollArea>
               </div>
             )}
 

src/components/ui/animated-switch.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const MotionThumb = motion.create(SwitchPrimitive.Thumb);
+
+type AnimatedSwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root>;
+
+/**
+ * Switch whose thumb actually slides between off and on. The Root flips
+ * its flex alignment on `data-state=checked`, which moves the Thumb's
+ * layout box; Framer Motion's `layout` prop tweens between the two
+ * positions. The thumb also squashes wider while pressed.
+ */
+function AnimatedSwitch({ className, ...props }: AnimatedSwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="animated-switch"
+      className={cn(
+        "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center justify-start rounded-full border border-transparent px-[2px]",
+        "bg-input data-[state=checked]:bg-primary data-[state=checked]:justify-end",
+        "transition-colors duration-200 ease-out",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <MotionThumb
+        data-slot="animated-switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full shadow-sm ring-0",
+          "bg-background data-[state=checked]:bg-primary-foreground",
+        )}
+        layout
+        transition={{ type: "spring", stiffness: 700, damping: 32, mass: 0.5 }}
+        whileTap={{ width: 20 }}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export type { AnimatedSwitchProps };
+export { AnimatedSwitch };

src/components/ui/animated-tabs.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion } from "motion/react";
+import * as React from "react";
+
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { cn } from "@/lib/utils";
+
+interface AnimatedTabsContextValue {
+  activeValue: string | undefined;
+  hoveredValue: string | null;
+  setHoveredValue: (value: string | null) => void;
+  indicatorId: string;
+}
+
+const AnimatedTabsContext =
+  React.createContext<AnimatedTabsContextValue | null>(null);
+
+function useAnimatedTabs() {
+  const ctx = React.useContext(AnimatedTabsContext);
+  if (!ctx) {
+    throw new Error(
+      "AnimatedTabsTrigger must be rendered inside <AnimatedTabs>",
+    );
+  }
+  return ctx;
+}
+
+type AnimatedTabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
+
+function AnimatedTabs({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  children,
+  ...props
+}: AnimatedTabsProps) {
+  const [activeValue, setActiveValue] = useControlledState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const [hoveredValue, setHoveredValue] = React.useState<string | null>(null);
+  const indicatorId = React.useId();
+
+  return (
+    <AnimatedTabsContext.Provider
+      value={{
+        activeValue,
+        hoveredValue,
+        setHoveredValue,
+        indicatorId,
+      }}
+    >
+      <TabsPrimitive.Root
+        data-slot="animated-tabs"
+        value={activeValue}
+        defaultValue={defaultValue}
+        onValueChange={setActiveValue}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Root>
+    </AnimatedTabsContext.Provider>
+  );
+}
+
+type AnimatedTabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
+
+function AnimatedTabsList({
+  className,
+  onMouseLeave,
+  ...props
+}: AnimatedTabsListProps) {
+  const { setHoveredValue } = useAnimatedTabs();
+  return (
+    <TabsPrimitive.List
+      data-slot="animated-tabs-list"
+      className={cn(
+        "relative inline-flex items-center gap-1 rounded-md p-0",
+        className,
+      )}
+      onMouseLeave={(event) => {
+        setHoveredValue(null);
+        onMouseLeave?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
+type AnimatedTabsTriggerProps = React.ComponentProps<
+  typeof TabsPrimitive.Trigger
+>;
+
+function AnimatedTabsTrigger({
+  value,
+  className,
+  children,
+  onMouseEnter,
+  ...props
+}: AnimatedTabsTriggerProps) {
+  const { activeValue, hoveredValue, setHoveredValue, indicatorId } =
+    useAnimatedTabs();
+  // The visible pill follows hover when present, otherwise sits on the
+  // active tab. Framer's `layoutId` handles the slide animation between
+  // mounted instances; only the trigger whose `value` matches `shownValue`
+  // renders the indicator, so the transition is a single-element move.
+  const shownValue = hoveredValue ?? activeValue;
+  const showIndicator = shownValue === value;
+  const isActive = activeValue === value;
+
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="animated-tabs-trigger"
+      value={value}
+      onMouseEnter={(event) => {
+        setHoveredValue(value);
+        onMouseEnter?.(event);
+      }}
+      className={cn(
+        "relative isolate inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors duration-150",
+        "text-muted-foreground hover:text-foreground",
+        isActive && "text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {showIndicator && (
+        <motion.span
+          layoutId={`animated-tabs-indicator-${indicatorId}`}
+          className="absolute inset-0 -z-10 rounded-md bg-accent"
+          transition={{ type: "spring", stiffness: 360, damping: 32 }}
+        />
+      )}
+      {children}
+    </TabsPrimitive.Trigger>
+  );
+}
+
+const AnimatedTabsContent = TabsPrimitive.Content;
+
+export type {
+  AnimatedTabsListProps,
+  AnimatedTabsProps,
+  AnimatedTabsTriggerProps,
+};
+export {
+  AnimatedTabs,
+  AnimatedTabsContent,
+  AnimatedTabsList,
+  AnimatedTabsTrigger,
+};

src/components/ui/chart.tsx

@@ -229,7 +229,7 @@ const ChartTooltipContent = React.forwardRef<
                             className={cn(
                               "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                               {
-                                "h-2.5 w-2.5": indicator === "dot",
+                                "size-2.5": indicator === "dot",
                                 "w-1": indicator === "line",
                                 "w-0 border-[1.5px] border-dashed bg-transparent":
                                   indicator === "dashed",
@@ -321,7 +321,7 @@ const ChartLegendContent = React.forwardRef<
                   <itemConfig.icon />
                 ) : (
                   <div
-                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    className="size-2 shrink-0 rounded-[2px]"
                     style={{
                       backgroundColor: item.color,
                     }}

src/components/ui/color-picker.tsx

@@ -245,7 +245,7 @@ export const ColorPickerSelection = memo(
         {...props}
       >
         <div
-          className="absolute w-4 h-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+          className="absolute size-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none"
           style={{
             left: `${positionX * 100}%`,
             top: `${positionY * 100}%`,
@@ -281,7 +281,7 @@ export const ColorPickerHue = ({
       <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
         <Slider.Range className="absolute h-full" />
       </Slider.Track>
-      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      <Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
     </Slider.Root>
   );
 };
@@ -315,7 +315,7 @@ export const ColorPickerAlpha = ({
         <div className="absolute inset-0 bg-gradient-to-r from-transparent rounded-full to-black/50" />
         <Slider.Range className="absolute h-full bg-transparent rounded-full" />
       </Slider.Track>
-      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      <Slider.Thumb className="block size-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
     </Slider.Root>
   );
 };

src/components/ui/combobox.tsx

@@ -47,6 +47,7 @@ export function Combobox({
 }: ComboboxProps) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
 
   const resolvedPlaceholder = placeholder ?? t("common.buttons.select");
   const resolvedSearchPlaceholder =
@@ -59,16 +60,17 @@ export function Combobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
+          aria-controls={listboxId}
           disabled={disabled}
           className={cn("w-full justify-between", className)}
         >
           {value
             ? options.find((option) => option.value === value)?.label
             : resolvedPlaceholder}
-          <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <LuChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-full p-0">
+      <PopoverContent id={listboxId} className="w-full p-0">
         <Command>
           <CommandInput placeholder={resolvedSearchPlaceholder} />
           <CommandList>
@@ -85,7 +87,7 @@ export function Combobox({
                 >
                   <LuCheck
                     className={cn(
-                      "mr-2 h-4 w-4",
+                      "mr-2 size-4",
                       value === option.value ? "opacity-100" : "opacity-0",
                     )}
                   />

src/components/ui/command.tsx

@@ -34,10 +34,14 @@ function CommandDialog({
   title,
   description,
   children,
+  filter,
+  shouldFilter,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
+  filter?: React.ComponentProps<typeof CommandPrimitive>["filter"];
+  shouldFilter?: React.ComponentProps<typeof CommandPrimitive>["shouldFilter"];
 }) {
   const { t } = useTranslation();
   const resolvedTitle = title ?? t("common.commandPalette.title");
@@ -50,7 +54,11 @@ function CommandDialog({
         <DialogDescription>{resolvedDescription}</DialogDescription>
       </DialogHeader>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command
+          filter={filter}
+          shouldFilter={shouldFilter}
+          className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+        >
           {children}
         </Command>
       </DialogContent>